Bug 17152 - Paragraphs indented with :first-letter and text-align CSS render incorrectly
Summary: Paragraphs indented with :first-letter and text-align CSS render incorrectly
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 523.x (Safari 3)
Hardware: All All
: P2 Normal
Assignee: mitz
URL: http://programmer-art.org
Keywords: HasReduction
Depends on:
Blocks:
 
Reported: 2008-02-02 11:12 PST by Daniel G. Taylor
Modified: 2008-02-26 07:03 PST (History)
2 users (show)

See Also:


Attachments
test case (2.12 KB, text/html)
2008-02-03 13:18 PST, Robert Blaut
no flags Details
Reduction showing the root cause (190 bytes, text/html)
2008-02-25 17:40 PST, mitz
no flags Details
Reduction showing the root cause (203 bytes, text/html)
2008-02-25 17:57 PST, mitz
no flags Details
Improve the logic for when to apply padding, border and margin before a text node (10.76 KB, patch)
2008-02-25 21:53 PST, mitz
sam: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel G. Taylor 2008-02-02 11:12:08 PST
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.
Comment 1 Daniel G. Taylor 2008-02-03 06:37:55 PST
I have uploaded a simpler example with the two CSS rules and a few paragraphs here:

http://programmer-art.org/dropbox/bug.html
Comment 2 Robert Blaut 2008-02-03 13:18:45 PST
Created attachment 18888 [details]
test case

uploaded test case
Comment 3 mitz 2008-02-25 17:34:33 PST
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().
Comment 4 mitz 2008-02-25 17:40:14 PST
Created attachment 19365 [details]
Reduction showing the root cause

This shows that the problem is line breaking.
Comment 5 mitz 2008-02-25 17:57:21 PST
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.
Comment 6 mitz 2008-02-25 21:53:18 PST
Created attachment 19370 [details]
Improve the logic for when to apply padding, border and margin before a text node
Comment 7 mitz 2008-02-25 21:56:53 PST
(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?
Comment 8 mitz 2008-02-25 22:53:47 PST
Fixed in <http://trac.webkit.org/projects/webkit/changeset/30590>.
Comment 9 Daniel G. Taylor 2008-02-26 07:03:26 PST
(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!