697851 - Website title does not display correctly

Status: RESOLVED INVALID

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

Description

[Gabriel Chadwick]

Following website does not display correctly. Title text jumps line to early. Displays correctly in Firefox 7.0.1 and in other browsers.

staging.fpepspq.org

Comment 1

[Boris Zbarsky [:bzbarsky]]

The layout looks correct to me, given the CSS on the page (and in particular, Fx7 and current trunk display the same way).  What's the problem, exactly, other than the page not giving a large enough "left" value to the <div id="mission-text"> and making bogus assumptions about how much text will fit in a 500px horizontal width?

Comment 2

[Gabriel Chadwick]

Don't know how got the impression that it was ok in Firefox 7.0.1. In Explorer, Chrome and Opera the div mission text display correctly. There is no space missing. Maybe a wontfix.

Comment 3

[Gabriel Chadwick]

Attachment: Display in Firefox 7.0.1

This does display correctly in Mozilla/5.0 (Windows NT 6.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

Comment 4

[Gabriel Chadwick]

Attachment: Display in Firefox 9 and 10

This is the dysplay with Mozilla/5.0 (Windows NT 6.1; WOW64; rv:9.0a2) Gecko/20111027 Firefox/9.0a2 and with today nightly.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Again, the display depends on whether the word "DES" fits on the first line of a 500px wide block.  That depends on the font rasterization used, the exact fonts used, etc.

Simple things like whether you're using direct2d or GDI on Windows will affect it, for example.

Comment 6

[Henri Sivonen (:hsivonen)]

This doesn't look parser-related to me.

Most likely this isn't a bug at all, but I'll let the layout folks to make that call.

Comment 7

[Jonathan Kew [:jfkthame]]

As Boris says, the problem here is that the site is making assumptions about the precise metrics of the text; this isn't reliable across various platforms, versions, user font configurations, etc.

The difference between the FF7 and FF9/10 screenshots looks like GDI vs. DirectWrite glyph rendering, where the DW version uses subpixel glyph positioning for more accurate representation of the glyph shapes. This leads to slight differences in spacing and hence to the different line-break.

It would probably help (somewhat) to put a forced line-break <br> at the place where the title is expected to break into two lines, rather than relying on automatic wrapping within a certain width. However, it could still display incorrectly for some users (e.g. on Linux with quite different fonts installed - Arial is *not* a universally-available font!). Using @font-face to deliver a specific, known web font rather than relying on the user's local font configuration would be more reliable - though slight rendering differences between browsers and platforms are still a possibility - e.g. not all browsers support kerning, so they may still space the exact same font differently.

In summary, this isn't a bug; it's fragile web design.

Comment 8

[Boris Zbarsky [:bzbarsky]]

Actually, the simplest fix for the site is to just set a correct "left" value...

Comment 9

[Boris Zbarsky [:bzbarsky]]

As a data point, if I zoom in once on the site in Opera it starts to render just like Gecko.  Same if I zoom out twice in Opera.  So it really does just depend on the exact font rasterization.