Bug 17152 – Paragraphs indented with :first-letter and text-align CSS render incorrectly

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Daniel G. Taylor]

When using the :first-letter CSS to indent paragraphs and then text-align: justify WebKit will sometimes render parts of the text on top of each other.

How to reproduce the problem
-----------------------
Go to http://programmer-art.org
Resize the window horizontally and watch as text shifts around.

[Daniel G. Taylor]

I have uploaded a simpler example with the two CSS rules and a few paragraphs here:

http://programmer-art.org/dropbox/bug.html

[Robert Blaut]

Created attachment 18888 [details]
test case

uploaded test case

I have just made things worse by changing numSpaces from int to unsigned. The real problem though is that line breaking results in totWidth > availableWidth in computeHorizontalPositionsForLine().

Created attachment 19365 [details]
Reduction showing the root cause

This shows that the problem is line breaking.

Created attachment 19368 [details]
Reduction showing the root cause

This is not even about first-letter. It is just the assumption expressed in findNextLineBreak():

            bool appliedStartWidth = pos > 0; // If the span originated on a previous line,
                                              // then assume the start width has been applied.

Created attachment 19370 [details]
Improve the logic for when to apply padding, border and margin before a text node

(In reply to comment #0)
> When using the :first-letter CSS to indent paragraphs

Out of curiosity, why would you do that instead of using the text-indent property?

Fixed in <http://trac.webkit.org/projects/webkit/changeset/30590>.

[Daniel G. Taylor]

(In reply to comment #7)
> (In reply to comment #0)
> > When using the :first-letter CSS to indent paragraphs
> 
> Out of curiosity, why would you do that instead of using the text-indent
> property?
> 

Good question. In all the years I've used CSS I never knew about that property! Using it on my site now as it seems to be the proper way to do things.

Thanks for fixing the bug!