Layout: Text
a month ago
a month ago


(Reporter: Ronald Tilby, Unassigned)


57 Branch

Firefox Tracking Flags

(Not tracked)



(1 attachment)



a month ago
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170915100121

Steps to reproduce:

Load Page:
Scroll down to the Venue Descriptions.

Actual results:

The text layout is incorrect vs Chrome and Edge

Expected results:

The text layout should be nicely formatted as with Chrome and Edge.

The most recent good build that I could find using mozregression is from 2015-10-14


a month ago
Component: Untriaged → Layout
Product: Firefox → Core
Created attachment 8909013 [details]

This is a screenshot of one of the paragraphs in Nightly on Linux.
Here's what the corresponding markup looks like:

<p><b>June 19, Tuesday &nbsp;</b>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<b>Costa Mesa, CA</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Renée and Henry Segerstrom Concert Hall</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; The&nbsp;<a href="">Philharmonic Society of Orange County</a>&nbsp;will present the Choir&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; and Orchestra at the world-class Renée and Henry Segerstrom&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Concert Hall, which was built in 2006 and is part of the 14-acre&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; multidisciplinary campus of Segerstrom Center for the Arts. The&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Choir and Orchestra performed in the original Segerstrom Hall in&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2004, also a Philharmonic Society presentation.

And the relevant 'font' declaration is:

body {
	color: #333;
	font: 300 100%/1.4 "Roboto","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
BTW, the font that's actually used for that paragraph is "Nimbus Sans L" on my system.
I think this bug is invalid, because the layout heavily depends the precise
font metrics of the font in use.  If it's just a fraction larger than on
the author's system then one less &nbsp; will fit on the line, which leads
to the following lines being increasingly unaligned.
Last Resolved: a month ago
Component: Layout → Layout: Text
Resolution: --- → INVALID
Agreed, this is just bad authoring. They should be using CSS properties (margins, padding, whatever...) rather than inserting all those &nbsp;s and hoping to get line-breaks in the "right" places.

FWIW, the site looks initially "correct" when I load it in Safari on macOS, but breaks in various ways if I zoom the view in or out. It looks "almost correct" on the same machine in Firefox, but again zooming in by several steps causes severe breakage.
You need to log in before you can comment on or make changes to this bug.