Opened 5 years ago

Last modified 5 years ago

#12131 confirmed Bug

Text wrapping and line heights after starting with a large font.

Reported by: Devin Moore Owned by:
Priority: Normal Milestone:
Component: General Version: 4.0 Beta
Keywords: Cc: devin.moore@…

Description

Something I've noticed is that if you start typing a paragraph with a large font (tested with 48px) and mid-paragraph switch to a smaller font (tested with 16px), as the paragraph line wraps, the line heights are enormous as they they are formatted for the initial 48px content.

We use your product here daily. Looking into the HTML code that it produces, I can see that it creates a span element with a font-size of 48px as a "wrapper". Then, when I switch font-size to 16px, the editor creates a new span element with this new font-size and places it into the 48px wrapper. Thus, the entire paragraph inherits the line-height initially created by the 48px font size.

A current workaround is to create the entire paragraph with the 16px font size first. Then, after the paragraph is finished, select the word(s) that you want to be 48px and apply it. Doing it this way will create the wrapper with the 16px font size and an internal span of 48px font size where the overall paragraph line-height will be created from the wrapper 16px font size span.

Attachments (4)

html_bad.PNG (7.4 KB) - added by Devin Moore 5 years ago.
html that creates the bad results
html_bad_results.PNG (3.5 KB) - added by Devin Moore 5 years ago.
the results of the bad html
html_good.PNG (6.6 KB) - added by Devin Moore 5 years ago.
good html that produces good results
html_good_results.PNG (3.3 KB) - added by Devin Moore 5 years ago.
the good results from the good html

Download all attachments as: .zip

Change History (5)

Changed 5 years ago by Devin Moore

Attachment: html_bad.PNG added

html that creates the bad results

Changed 5 years ago by Devin Moore

Attachment: html_bad_results.PNG added

the results of the bad html

Changed 5 years ago by Devin Moore

Attachment: html_good.PNG added

good html that produces good results

Changed 5 years ago by Devin Moore

Attachment: html_good_results.PNG added

the good results from the good html

comment:1 Changed 5 years ago by Jakub Ś

Status: newconfirmed
Version: 4.3.24.0 Beta

I have checked this issue in CKEditor 3.x and it works fine there. Starting from CKEditor 4.0 beta same steps produce different result.

I have checked CSS, taken HTML put it in contenteditable in HTML4 and HTML5 document but both have produced same result like in CKEditor 4.x. I'm not sure what have I missed.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy