Character count for titles and summary fields

[willguv]

This was raised at the content <> backlog get together on 25th April

Some content designers would like support to write SEO length summaries

• Googling suggests a character count of 155-160
• Siteimprove suggests 110

Titles weren't mentioned but we should consider this. Evidence suggests a character count of 55-70

Let's discuss at the Backlog Group

[andybroomfield]

Textfield Counter may be worth investigating.

[willguv]

Deploy to Product

[stephen-cox]

@willguv This has been deployed to the product site. I have enabled it on the title and body fields on service pages. It doesn't seem to handle body summaries though.

[willguv]

Thanks @stephen-cox

• we won't need to show this on body fields
• any reason why it can't be shown on body summaries? Aside from title, that was the field that content designers were most interested in
• can we style the message in some way? This is what it shows now:

Maxlength: 160 Used: 55 Remaining: 105

Twitter has nice UX (about the only thing it does have these days)

[stephen-cox]

@willguv I've taken another look and managed to enable the word count on the summary and disabled it on the body.

It's possible to edit the text and insert any HTML we like; there are placeholders for @maxlength, @current_length and @remaining_count.

[willguv]

Hi @stephen-cox, so presumably we could show something like

@currentlength/ @maxlength

eg 18/ 160

Is it possible to show if a user has exceeded the max length? I was thinking something like 190/ 180 with a color change

[stephen-cox]

@willguv certainly possible to do something like @currentlength/@maxlength

The Textfield Conter module doesn't include any JS to change colour and certainly not like the Twitter example where text over a certain limit is highlighted. This should be possible, but would likely need to be a CKEditor plugin which we can then wrap in a Drupal module.

[willguv]

Thanks @stephen-cox

I'm assuming summary is a Drupal field rather than CK Editor - is that right? Presumably this gives us more control of it

On the CKEditor front, could we use https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html

[markconroy]

Be careful of that text_counter module. We found that it breaks if there's a boolean field on your page.

https://www.drupal.org/project/textfield_counter/issues/3377415

[stephen-cox]

@willguv Summaries are plain textarea fields which would make it easier to alert the contents with JavaScript. If highlighting text is something we want then it would be worth reviewing the Textfield Counter module to see if it's worth extending it to highlight text or whether this would be too much trouble and we're better off creating our own module for this. In either case this will be non-trivial.

@markconroy thanks for the heads-up on that issue - if we go ahead with this I'll keep that under review

[finnlewis]

The Thunder distribution uses this module https://www.drupal.org/project/length_indicator which has worked well on other projects too. It is nice because it is more of a visual indicator rather than hard limits.

[willguv]

Thanks @finnlewis think that's much nicer. @stephen-cox could you remove textfield counter please and install this instead

When I'm up and running I'll be able to stop asking you to install things for me :)

[stephen-cox]

Hi @willguv, I have installed and enabled the Length Indicator module on the product site and configured it for Service Pages.

From the README:

Please note: Currently string_textarea ("Text area (multiple rows)") and string_textfield ("Textfield") are the only supported field widgets.

This means it only works for titles and not bodies or summaries. For titles it looks like:

[willguv]

Option for a council to set a hard limit (ie not save) on specific fields?

[willguv]

Hi @stephen-cox had a quick go with Length Indicator and it's not immediately clear what it's doing

I think we're better off with Textfield Counter with some hopefully minor mods

Instead of

Maxlength: 160 Used: 55 Remaining: 105

Could we show

105

ie the remaining number, and change its color as it gets closer to the limit

• Orange up to the limit
• Red when we fall over to minus numbers (are these provided for in Textfield Counter?)

We could explore styling text in CKEditor at a later date

[willguv]

What's the label? Can we style the number?

[stephen-cox]

@willguv I've added the Textfield Counter module back to the product site and configured the title and summary to use this.

There is some colour feedback on this. The numbers go orange close to the limit:

and red after the limit:

The colours and the stage when they change don't look configurable, but I can investigate into how easy it is to change this or submit a patch to the module to make this configurable.

We can change the text, but from an accessibility point of view we need to provide a textual description of what the numbers refer to.

[willguv]

Hi @stephen-cox this looks really promising

Could we:

• drop max length and used
• change 'Remaining' to "Characters"

Is it possible to switch the order of "Characters" and the number around

ie

"-6 characters"

Does that work from an accessibility point of view?

[willguv]

Set up new installs to use this with an on/ off switch

Existing councils would need documentation

[markconroy]

New module just released by ckeditor has a character and word count feature (and some other very cool features) which might be worth looking into.

https://www.drupal.org/project/ckeditor5_plugin_pack

[stephen-cox]

@willguv I'm going to start looking at this.

As we need to handle all sort of text fields I'll go with the Textfield Counter module.

The main issue is going to make some sort of interface to allow this to be turned on and off by content type. this will have to be restricted to site admins as it will make configuration changes, although I'll create a permission for this so that it can be given to others if required.

[willguv]

Sounds like a good plan, thanks for picking this up @stephen-cox