Closed Bug 1062108 Opened 5 years ago Closed 5 years ago

Misalignment of bold monospace text when <pre> ... </pre> used in web page, due to bold glyphs being wider than bold space char (and wider than non-bold glyphs)

Categories

(Core :: Layout: Text and Fonts, defect)

ARM
Android
defect
Not set

Tracking

()

RESOLVED FIXED
mozilla37

People

(Reporter: yawderderek, Assigned: jfkthame)

Details

Attachments

(6 files, 1 obsolete file)

Attached file FamTreeT.htm
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:31.0) Gecko/20100101 Firefox/31.0
Build ID: 20140715215148

Steps to reproduce:

Vertical lines using | are used as links in mono-font Family Tree web page


Actual results:

Vertical lines using | do not correct line up when <b> bold is used but are OK on all other browsers except Firefox on tablet.


Expected results:

Vertical lines should line up on successive line in pre-formatted text.
OS: Linux → Android
Hardware: x86 → Other
Summary: Nisalignment of preformatted text when <pre> ... </pre> used in web page → Misalignment of preformatted text when <pre> ... </pre> used in web page
Component: General → Layout
Product: Firefox for Android → Core
I can reproduce in Firefox Nightly my Nexus 7 tablet and Nexus 4 phone.   Some of the vertical bars are shifted sideways by ~1em or a fraction of an em.

(Can't reproduce in Firefox OS on my Flame phone, though. So, seems to be Android-only for the moment. I wonder if it's something to do with a quirk of the the monospace font that we end up using on Android?)
Status: UNCONFIRMED → NEW
Component: Layout → Layout: Text
Ever confirmed: true
Summary: Misalignment of preformatted text when <pre> ... </pre> used in web page → Misalignment of bold monospace text when <pre> ... </pre> used in web page
Version: unspecified → Trunk
Attached image screenshot
Here's a screenshot from my nexus 7 (running Nightly 2014-08-29)
Attached file testcase 2
Here's a reduced testcase.

The bug here seems to be that (in Firefox for Android), bolded characters are *wider than their non-bold counterparts*, which should not be the case for a monospace font.

There's one exception, though, which is what's causing the problem in the original testcase -- the space characters are *not* wider.  That's why the first vertical-bar below the <hr> in my testcase is aligned with the non-bold content above it.
Summary: Misalignment of bold monospace text when <pre> ... </pre> used in web page → Misalignment of bold monospace text when <pre> ... </pre> used in web page, due to bold glyphs being wider than bold space char (and wider than non-bold characters)
John/Jonathan, any chance you guys have cycles to look into this?
Flags: needinfo?(jdaggett)
Summary: Misalignment of bold monospace text when <pre> ... </pre> used in web page, due to bold glyphs being wider than bold space char (and wider than non-bold characters) → Misalignment of bold monospace text when <pre> ... </pre> used in web page, due to bold glyphs being wider than bold space char (and wider than non-bold glyphs)
If it's using a font family for which only a regular face is actually present on the device, then for text that's styled as bold, we'll do a double-struck synthetic bold. (I think that's normal for Droid Sans Mono, in particular.) And when we do that, we increase the glyph widths so as to maintain inter-glyph spacing -- otherwise, fake-bold glyphs tend to look too crowded together.

However, for monospaced fonts we probably shouldn't do that.
Assignee: nobody → jfkthame
Status: NEW → ASSIGNED
Here's a reftest for this, which fails on current trunk but should pass with the patch.
Attachment #8483711 - Flags: review?(jdaggett)
Hmm....tryserver says that didn't work as expected on Android: https://tbpl.mozilla.org/?tree=Try&rev=c7d9f10dbb72. Need to look into this further, then; perhaps we're not recognizing the Droid Sans Mono font as being fixed-pitch?
Turns out IsFixedPitch() isn't the right test, as it's not consistently used across platforms; the way layout detects fixed-pitchness is by comparing the average and max glyph advances. We should probably rework this and make it use the boolean flag everywhere, but for now, this version of the patch will probably work better. New try run: https://tbpl.mozilla.org/?tree=Try&rev=f8151cb9ec5b.
Attachment #8483802 - Flags: review?(jdaggett)
Attachment #8483700 - Attachment is obsolete: true
Attachment #8483700 - Flags: review?(jdaggett)
And the reftest oranges on that run are because a couple of existing tests actually use synthetic-bold with a fixed-pitch font. In the case of synthetic-bold-metrics-01, we should use a variable-width font; and for 455826-1 on android, this just fixes an existing test failure.
Attachment #8484085 - Flags: review?(jdaggett)
One more try run, to double-check: https://tbpl.mozilla.org/?tree=Try&rev=3c8e9063c8ea
jdaggett: review ping?
jdaggett: review ping?
Flags: needinfo?(jdaggett)
Attachment #8483802 - Flags: review?(jdaggett) → review+
Attachment #8483711 - Flags: review?(jdaggett) → review+
Flags: needinfo?(jdaggett)
Attachment #8484085 - Flags: review?(jdaggett) → review+
Alignment now correct in Android Firefox 37.0.1
Thanks to you all
Derek Yawder
You need to log in before you can comment on or make changes to this bug.