Font Dropdowns could have 'default' option that resets font to default value

[Chris Graham]

We have CKEditor set to use em units for font sizes in our CMS. This is so content is portable.

If you select 1em for the font size then I think that should be equivalent of unsetting any existing font size style, and removing any empty wrapper span.

Currently it just gives an explicit 1em font size.

---

Edit:
While it is possible to select e.g. font-size 72px and then reset it by unselecting 72px option from same dropdown or it is possible to reset style with Remove Format Button, we may be missing something here:

• Remove Format Button removes all inline styles it finds or all inline styles it has defined. Users may want to remove just the font-size.
• Resetting e.g. font-size with dropdown is only possible for matching styles. If user pastes span with font-size in em then default dropdown won't match anything.
• The default option could first of all target only font-size (if used in font-size dropdown) and remove font-size whether it matches anything in dropdown or not (it could be highlighted when tag contains font-size style).

[Jakub Ś]

If you select 1em for the font size then I think that should be equivalent of unsettling any existing font size style, and removing any empty wrapper span.

I'm sorry but I totally don't agree here.

Currently it just gives an explicit 1em font size.

And this is correct.

There may be users who want to have different units across document (someone may be writing tutorial about font-size units in CKEditor ;) ). CKEditor needs to be flexible. Setting em in one place and as a result changing px to em in another or worse removing whole span would only confuse users.

In my opinion it is developer who is responsible for configuring CKEditor properly. What you can do IMHO is setting fonts to em in (this should be enough):

• dropdowns (font-size and styles if necessary)
• contents.css if you use classic editor or main page styles if you use inline editor.

---

There are cases where browsers force ‘px’ when you for example paste or resize some element. The only things that come to my mind are: handling px-em conversion on server-side when document is submitted or making ACF units aware.

I’m marking this issue as invalid because editor should not force units in such way. This is guessing or trying to make editor smarter than user and this is never good. I will however forward this with question if feature for ACF, that makes it units aware, can be implemented.

[Chris Graham]

I think you misunderstood me.

We have CKEditor configured to have the size dropdown as em:

fontSize_sizes : '0.6em;0.85em;1em;1.1em;1.2em;1.3em;1.4em;1.5em;1.6em;1.7em;1.8em;2em',

So I was just suggesting if the user selects the 1em option for a text selection, it should serve to remove font size, because it knows that 1em is defined as a null-op.

I suppose you could make an argument that 1em might not be a null-op if it is effectively overriding another style from a CSS class. I didn't think of that, it would be a reasonable point.

Let me explain where I am coming from though, as I think I am touching on an important issue here that CKEditor does not currently handle well.

Imagine a user sets a font size from some text, then changes their mind, and sets it so it *looks* normal. However the actual HTML is a terrible mess, and if it is px sizes it may even look terrible in different contexts (imagine the document used somewhere with a higher base px, then in the middle of the document it shifts sizes because the user matched against the editor's display px). There's no clear way in CKEditor to undo a font size/face/etc unless you use the clear style feature. But users don't think about the HTML, they just think how it looks, so they create something horrific and don't understand.

So perhaps we need to recategorise this to an idea of allowing the style selections (size, face, etc) to have a "none"/"default" option.

[Wiktor Walc]

Currently all drop-down lists work in a similar way in CKEditor - each item in it can be on or off. If we introduce a special behavior just for 1em among other font sizes, the UX would become more confusing.

The suggested additional none/default option is kinda superflous in my opinion as you can switch back to default font style by unchecking the font size or using the remove format button. In any case, if you change the main description to clearly suggest adding a none"/"default" option this will be a valid feature request and perhaps more users will leave their feedback here.

In the meantime to cleanup the HTML content you can filter the outputted content and remove all spans with 1em with a simple plugin.

[Jakub Ś]

Ok, I'm confirming this although I think this is duplicating what is already implemented.

At the moment user can select font-size e.g. 72px for e.g. single word/sentence, then click inside that word/sentence and unselect 72px (active option is highlighted) from dropdown menu what will effectively remove whole span with font-size.

@Chris Graham were you aware that it is possible to apply/reset inline styles using dropdowns? If yes then don’t you think that "default font-size" option in dropdown is sort of a duplicate of existing functionality?

[Chris Graham]

Yes, you're making good points. In my testing I had not been aware of this functionality. I just spent a few minutes clicking around and thinking "am I a total moron for missing this?", because it is very obvious and intuitive.

Then I realised I was not aware because for pasted in text with a non-matching font size, it doesn't work. Perhaps we could add styles that relate to a drop-down, but are not a default, onto the dropdown dynamically?

[Jakub Ś]

Perhaps we could add styles that relate to a drop-down, but are not a default, onto the dropdown dynamically?

This is part of much larger issue: #9964

Then I realised I was not aware because for pasted in text with a non-matching font size,

You have made an excellent point as well, because now I see what this option could be used for.

I will update the ticket description. Thank you!