Default font name and size display is confusing

[cuboci]

Describe the bug

Default font size and family are not displayed in the toolbar correctly. The default font size is displayed in "px" even when fontSizeUnit is set to "pt". This is confusing because, for example, 10pt = 13.3333px.

Also, the font family is rendered in serif font, although the default (Arial) is a sans-serif one and the font names in the select box are appropriately styled.

Once a specific font size has been selected or the cursor is within text that does have a specific size set the font size in the toolbar is displayed in the choosen font size unit.

To Reproduce

1. Initialise editor with
   • fontSizeUnit: "pt"
   • defaultStyle: "font-family: Arial; font-size: 10pt;"
   • fontSize: [10, 12]
2. set .sun-editor-editable CSS class to the same values as defaultStyle
3. Set focus on editor
4. See error

Expected behavior

The default font family and font size unit should be used to display the default values. It's confusing for users to see 13.3333px and get a smaller font than after they have selected 12pt, for a example.

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox
• Version: 88.0.1
• Editor version: 2.41.2

Additional information

This only happened after I upgraded from 2.28.x to 2.41.2. I know the older version didn't display default values but at least the font name was always appropriately styled.

[JiHong88]

Hi @cuboci
The default styles are imported using getComputedStyle

I checked that the font size is displayed in pixel.
But font is rendered and displayed normally.
The currently displayed font is the rendered font.
Please check again.
If not, please show me the applied styles directly in the debugging window.

[JiHong88]

It seems that all of them are displayed in "px" units when you use "getComputedStyle" to get the font size.
Styles applied with CSS are must imported using "getComputedStyle".
This bug may take some time to be fixed.
Currently, I don't know way fix this bug. :(

[cuboci]

Hi @JiHong88

But font is rendered and displayed normally.
The currently displayed font is the rendered font.

My bad actually. In the original screenshot I provided you can see that font name in the drop-down list is styled using the actual font but the button text uses a generic serif font. I thought - incorrectly - that in the 2.28 version of the editor I used earlier the button was styled, too. But it wasn't.

I checked the debugger for both versions. The only thing that changed is that in 2.28 it used {font-family: "Helvetica Neue", sans-serif;} and now it uses {font-family: "Helvetica Neue";}. Since there's no "Helvetica Neue" on my system the browser falls back to the default font, which is a serif one. Before, there was a fallback to sans-serif. That's why it looks different now but I can live with that.

It seems that all of them are displayed in "px" units when you use "getComputedStyle" to get the font size.
Styles applied with CSS are must imported using "getComputedStyle".

Indeed. I checked that and got the same. Even if you somehow converted the applied style's font size to the unit set by "fontSizeUnit" you'd get rounding errors. A font size of 10pt set in the default style and applied to .sun-editor-editable yields "13.3333px" from getComputedStyle. Theoretically you could convert that to "pt", since 1 pt = 1/72 inch and 1 px = 1/96 inch, as per CSS specification. But doing that you'd get 9.999975pt because of lack of precision.

The only way I see out of this is not using a generic "defaultStyle" but creating that from single values (defaultFontSize, defaultFontFamily, etc.) and using these single values as button text.

[JiHong88]

Added "__defaultFontSize" option.
__defaultFontSize: "12pt"
If the default font size is not in "px" units, forcefully specify the default font size.
Applies in version 2.43.0.

[JiHong88]

The 2.43.0 version has been updated.
If this issue has not been resolved, please reopen this issue.
Thank you.