Last Comment Bug 442139 - Uneven line-height for non-integer values
: Uneven line-height for non-integer values
Status: NEW
: testcase
Product: Core
Classification: Components
Component: Layout: Text (show other bugs)
: unspecified
: All All
: P2 major with 6 votes (vote)
: ---
Assigned To: John Daggett (:jtd)
:
:
Mentors: David Baron :dbaron: ⌚️UTC-7 (busy September 14-25)
: 319724 348908 578615 707508 (view as bug list)
Depends on:
Blocks: 610330
  Show dependency treegraph
 
Reported: 2008-06-26 15:13 PDT by Jonas Wallden
Modified: 2015-04-26 09:27 PDT (History)
19 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Test case (1.69 KB, text/html)
2008-06-26 15:15 PDT, Jonas Wallden
no flags Details
Screenshot comparing Safari 3.1 (left) and FF 3.0 (right) (70.89 KB, image/gif)
2008-06-26 15:16 PDT, Jonas Wallden
no flags Details
Screenshot of Testcase on IE, running in Vista VM (21.36 KB, image/png)
2008-06-27 09:45 PDT, Marcia Knous [:marcia - use ni]
no flags Details
Testcase running FF 3 on Vista VM (20.82 KB, image/png)
2008-06-27 09:45 PDT, Marcia Knous [:marcia - use ni]
no flags Details
testcase 2 (clearer result) (1.05 KB, text/html)
2008-06-27 14:15 PDT, j.j.
no flags Details
testcase 3 (best result) (1.13 KB, text/html)
2008-06-27 15:11 PDT, j.j.
no flags Details
screenshot testcase 3, OS X (25.48 KB, image/png)
2008-06-27 19:00 PDT, philippe (part-time)
no flags Details
testcase, vary line-height across non-integer em range (5.95 KB, text/html)
2010-07-14 22:42 PDT, John Daggett (:jtd)
no flags Details
Screenshot of ft article (74.02 KB, image/png)
2013-06-07 11:07 PDT, Octoploid
no flags Details

Description Jonas Wallden 2008-06-26 15:13:01 PDT
User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_4_11; en) AppleWebKit/527+ (KHTML, like Gecko) Version/3.1.1 Safari/525.18
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9) Gecko/2008061004 Firefox/3.0

When line-height is a fractional value the resulting text will get inconsistent line spacing. Even though it is mathematically correct to distribute the rounding error over subsequent lines the resulting text rendering is far more unpleasant to read.

I'll attach an example and a screenshot comparing FF 3.0 and Safari 3.1.

Reproducible: Always

Steps to Reproduce:
1. Set a non-integer line-height manually or let it be computed as a percentage of the font size.
2. Render multiple lines of text.
Actual Results:  
Line height is not exactly the same for all lines.

Expected Results:  
I would expect all lines to be identical for easier reading of long texts.
Comment 1 Jonas Wallden 2008-06-26 15:15:17 PDT
Created attachment 327021 [details]
Test case
Comment 2 Jonas Wallden 2008-06-26 15:16:06 PDT
Created attachment 327022 [details]
Screenshot comparing Safari 3.1 (left) and FF 3.0 (right)
Comment 3 j.j. 2008-06-26 18:03:52 PDT
Same on winXP. I suggest changing
Hardware/OS > All/All
Keywords: testcase

This was reported several times, but unfortunately never left the "unconfirmed" state.
See bug 319724 or bug 348908.


Comment 4 Marcia Knous [:marcia - use ni] 2008-06-27 09:20:44 PDT
Confirming on Mac, as I see this using the testcase in the bug running Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9) Gecko/2008061004 Firefox/3.0. However, contrary to what is reported in Comment 3, I do not see the issue running FF in a Vista VM.
Comment 5 Marcia Knous [:marcia - use ni] 2008-06-27 09:22:02 PDT
*** Bug 319724 has been marked as a duplicate of this bug. ***
Comment 6 Marcia Knous [:marcia - use ni] 2008-06-27 09:22:31 PDT
*** Bug 348908 has been marked as a duplicate of this bug. ***
Comment 7 Marcia Knous [:marcia - use ni] 2008-06-27 09:45:00 PDT
Created attachment 327135 [details]
Screenshot of Testcase on IE, running in Vista VM
Comment 8 Marcia Knous [:marcia - use ni] 2008-06-27 09:45:30 PDT
Created attachment 327136 [details]
Testcase running FF 3 on Vista VM
Comment 9 j.j. 2008-06-27 13:39:16 PDT
(In reply to comment #4)
However, contrary to what is reported in Comment 3, I do not see
> the issue running FF in a Vista VM.

Hmm, if I look closely at attachment 327136 [details] (Vista screenshot), I'd say the spacees are a bit wider between lines
2-3, 5-6, 7-8, 10-11, 12-13, 15-16, 17-18

On my system (winXP) the result is the same, but seems more obvious. 

Comment 10 j.j. 2008-06-27 14:15:53 PDT
Created attachment 327173 [details]
testcase 2 (clearer result)

Shows the bug clearly on winXP
Comment 11 j.j. 2008-06-27 15:11:19 PDT
Created attachment 327186 [details]
testcase 3 (best result)
Comment 12 philippe (part-time) 2008-06-27 19:00:02 PDT
Created attachment 327217 [details]
screenshot testcase 3, OS X

Gecko is on the left, WebKit on the right, OS X 10.5.3
Comment 13 j.j. 2010-07-14 03:51:50 PDT
*** Bug 578615 has been marked as a duplicate of this bug. ***
Comment 14 John Daggett (:jtd) 2010-07-14 05:43:03 PDT
Better testcase from duplicate bug 578615:

https://bug578615.bugzilla.mozilla.org/attachment.cgi?id=578615
Comment 15 David Baron :dbaron: ⌚️UTC-7 (busy September 14-25) 2010-07-14 11:07:42 PDT
Are you planning to change line-height so it's handled like border widths?  That would make sense.

Should what we do here depend on whether the underlying platform supports subpixel vertical positioning of text (Windows with D2D does, I think)?
Comment 16 Robert O'Callahan (:roc) (email my personal email if necessary) 2010-07-14 15:21:38 PDT
(In reply to comment #15)
> Are you planning to change line-height so it's handled like border widths? 
> That would make sense.

Yes, I think that's a great idea.

> Should what we do here depend on whether the underlying platform supports
> subpixel vertical positioning of text (Windows with D2D does, I think)?

If we want to use subpixel vertical positioning then we'd have to disable the rounding of text baselines that we do in nsCSSRendering and nsTextFrame. However, I wonder if DirectWrite's vertical subpixel positioning is good enough to make unaligned baselines look good in all cases.
Comment 17 j.j. 2010-07-14 15:28:27 PDT
(In reply to comment #14)
> Better testcase from duplicate bug 578615:

attachment 457271 [details]  (this link should work)
Comment 18 John Daggett (:jtd) 2010-07-14 22:42:45 PDT
Created attachment 457497 [details]
testcase, vary line-height across non-integer em range

Extending previous testcase to include computed line-height value and an overlay showing an absolutely positioned div to simulate the effect of using an image sized in em's.  Space to start/stop iteration, up/down arrows to vary line-height manually.
Comment 19 kyou 2010-09-26 23:26:22 PDT
The bug is not yet fixed in Firefox 4.0 beta 6. It’s so ugly, but seems to be on the bottom of the priority list! Please fix this bug!
Comment 20 j.j. 2011-12-04 11:24:37 PST
*** Bug 707508 has been marked as a duplicate of this bug. ***
Comment 21 madigens 2012-06-20 12:35:36 PDT
Still not fixed in 13.0, Ubuntu 12.04 amd64.
Comment 22 Octoploid 2013-06-07 11:07:29 PDT
Created attachment 759835 [details]
Screenshot of ft article

The issue is still not fixed.
I've attached an example screenshot with selected lines
to highlight to problem.
Comment 23 Elbart 2014-11-12 08:33:26 PST
Another example:
https://crash-stats.mozilla.com/report/index/0da00c62-0a3f-4482-9675-5772e2141026#rawdump

Search for _call and keep enter pressed to cycle through all the results and enjoy funky line-dancing.

The culprit is line-height:1.7, which calculates to 20.4px.

Happening in Windows with and without HWA, and in Ubuntu with the latest release-version.
Comment 24 Ian Yang 2015-04-26 09:27:31 PDT
As a web developer, I sincerely hope this bug be fixed as soon as possible so that I would no longer have to write additional CSS just for fixing Firefox's rendering.

Note You need to log in before you can comment on or make changes to this bug.