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!

[Chris Graham]

I actually don't necessarily agree with my "default option" suggestion now that we identified it's not quite what I had thought.

The drop-down is showing state, and there's no 'state' on there we can have for the alien size. Showing it as preselected to 'default' would be incorrect, and not showing a size would confuse the user. Personally I think dynamically (and temporarily) adding the alien style to the list is the best course of action.

[Jakub Ś]

@Chris Graham, hard to disagree. It seems that at the moment the only reasonable fix is #9964, this will however not be implemented on the fly. This is a huge change that has currently no time frame. Thank you for your thought on this ticket. I will mark it as Dup of #9964.

[Jakub Ś]

DUP of #9964

[Piotrek Koszuliński]

#9964 is a slightly different problem and a fix for it may not solve this one. The reason is that font size in #9664 may be applied from stylesheet or for a header/paragraph and in such case it cannot be removed using the font size dropdown. We can display it, but it could not be "clickable".

I would reopen and confirm this ticket, because it touches two interesting aspects:

• User may not be aware that clicking a selected position in the font size dropdown may remove the style what is an user experience issue.
• The default size button could be useful in cleaning up font sizes set with different units.

Additionally, we can try to think how could we filter pasted content to remove font sizes with different units.

[Jakub Ś]

Ok, I'm confirming it... again :)

Please note that problem may also concern font-name dropdown. Perhaps here problem is not that big but still user may want to keep font-names consistent across document.

I believe that we agree that "default/none" should be selective and focus only on e.g. font-size or font-family in any context (not only spans but also paragraphs or divs with font-size set), correct?

[Piotrek Koszuliński]

I believe that we agree that "default/none" should be selective and focus only on e.g. font-size or font-family in any context (not only spans but also paragraphs or divs with font-size set), correct?

Nope. Font dropdowns cannot affect any block elements. They can only affect spans which can be applied with them, because we must be able to match the style definition to the element... and now I understood that they could not therefore be used to cleanup other font sizes or other font names. Heh :) It's always tricky with this so we must be careful.

[Jakub Ś]

So what is the sense to have font cleanup options for only spans? It will serve as clean up option that doesn't clean for many users. IMHO, this feature in such form == waste of time.

Clean should rather look for style and not match the element. I know this is different approach for single dropdown option but simply don't see it any other way.

[Chris Graham]

I have to agree with j.swiderski. If CKEditor is not going to be able to have full control of any font styles (and btw, color too), better to not make things more confused.

However, I would note that my #12905 is a nice solution to this.

So personally I'd dump this issue and focus on #12905 (general improved cleanup control) and #9964 (being able to tie custom/differently-written values on spans into the style dropdowns).