#10750 closed Bug (fixed)
The editor don't unquote the font-family style property
| Reported by: | Leeron | Owned by: | Marek Lewandowski |
|---|---|---|---|
| Priority: | Normal | Milestone: | CKEditor 4.5.10 |
| Component: | General | Version: | 4.0 |
| Keywords: | Support | Cc: | Oracle |
Description
Hopefully I'm missing something here, but here it goes:
I came across a problem where fonts with names like 'My Crazy Sans -32432 W10' doesn't work properly. Looking into it noticed that the font-family is added to the HTML unquoted.
<span style="font-family:my crazy sans -32432 w10;my crazy sans -386932 w02;sans-serif">Some text here.</span> This inline style property doesn't work on my browser (latest Chrome).
Digging into the code I found the following code at the end of the tools.js file (inside the parseCssText function):
// Normalize font-family property, ignore quotes and being case insensitive. (#7322)
// http://www.w3.org/TR/css3-fonts/#font-family-the-font-family-property
if ( name == 'font-family' )
value = value.toLowerCase().replace( /["']/g, '' ).replace( /\s*,\s*/g, ',' );
Noticing the (#7322) remark, I went looking for the ticket - http://dev.ckeditor.com/ticket/7322.
I guess the editor have a problem with handling quoted font-family values internally. But the spec (that the code and the ticket point to) state clearly that on the HTML (and CSS) the value should be quoted.
And again - it's not only contrast with W3 recommendations, it actually doesn't work on my browser.
From http://www.w3.org/TR/CSS2/fonts.html#font-family-prop :
To avoid mistakes in escaping, it is recommended to quote font family names
that contain white space, digits, or punctuation characters other than hyphens:
body { font-family: "New Century Schoolbook", serif }
<BODY STYLE="font-family: '21st Century', fantasy">
Change History (13)
comment:1 Changed 10 years ago by
| Keywords: | style css font-family quote removed |
|---|
comment:2 Changed 9 years ago by
| Cc: | Oracle added |
|---|---|
| Status: | new → confirmed |
| Version: | 4.0.1 → 4.0 |
comment:4 Changed 9 years ago by
| Keywords: | Support added |
|---|
This issue has also been mentioned on our support channel.
comment:5 Changed 9 years ago by
| Milestone: | → CKEditor 4.5.5 |
|---|---|
| Owner: | set to Marek Lewandowski |
| Status: | confirmed → assigned |
We've started investigation on how to fix this issue. Initial solution is already pushed to branch:t/10750 however it need further investigation on how it will impact other parts of CKEditor (e.g. how it will affect CKEDITOR.style based operations).
comment:6 Changed 8 years ago by
| Milestone: | CKEditor 4.5.5 → CKEditor 4.5.6 |
|---|
comment:7 Changed 8 years ago by
| Milestone: | CKEditor 4.5.6 → CKEditor 4.5.7 |
|---|
comment:8 Changed 8 years ago by
| Milestone: | CKEditor 4.5.7 → CKEditor 4.5.8 |
|---|
comment:9 Changed 8 years ago by
| Milestone: | CKEditor 4.5.8 → CKEditor 4.5.9 |
|---|
comment:10 Changed 8 years ago by
| Milestone: | CKEditor 4.5.9 → CKEditor 4.5.10 |
|---|
comment:11 Changed 8 years ago by
| Milestone: | CKEditor 4.5.10 → CKEditor 4.5.11 |
|---|
Moving tickets to the next milestone.
comment:12 Changed 8 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
We were able to contain it within 4.5.10. Fixed with git:7dc1295fcb (merged to master).
comment:13 Changed 8 years ago by
| Milestone: | CKEditor 4.5.11 → CKEditor 4.5.10 |
|---|
First of all we had few tickets describing same issue: #5967, #12492, #5966, #12563 and #7332 (which should fix these issues but created more chaos).
According to http://www.w3.org/TR/CSS2/fonts.html#font-family-prop and http://www.w3.org/TR/css3-fonts/#propdef-font-family: Generic font-family names should not be quoted (thir number is limited)
while other fonts should/could be quoted
additionally:
First of all I think that that developer and not CKEditor should take care of quoting font names in
font_namesconfiguration option. CKEditor should however not lover-cased them (there are case sensitive font names - #12492) or remove quotes around them once added. IMO CKEditor should add font names as they are to dropdowns and elements in content area.Ticket #12563 as well as this ticket mention parseCssText as the culprit and the comment in that method seems to confirm it. There might be other places where font names are normalized (See e.g. #5966). Anyway they should be the same everywhere (style, font dropdowns and content).
NOTE: It is important to check if the font name is actually left as it was defined because in some cases browsers work well with minified and unquoted font-names.
I have written:
Well at first I was thinking that perhaps editor could search for generic fonts and unquote them but that last note from specification blew me of the track thus leaving is to developer to define font names properly might be best approach. We just should not modify anything.