1400385 - bad text layout on https://www.mormontabernaclechoir.org/events/tour/2018-tour-venue-information.html

Status: RESOLVED INVALID

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

Description

[Ronald Tilby]

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: https://www.mormontabernaclechoir.org/events/tour/2018-tour-venue-information.html
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

Comment 1

[Mats Palmgren (inactive)]

Attachment: Screenshot

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="https://www.scfta.org/Plan-Your-Visit/Campus/Renee-and-Henry-Segerstrom-Concert-Hall.aspx">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="http://bit.ly/2h1QMC7">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;
}

Comment 2

[Mats Palmgren (inactive)]

BTW, the font that's actually used for that paragraph is "Nimbus Sans L" on my system.

Comment 3

[Mats Palmgren (inactive)]

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   will fit on the line, which leads
to the following lines being increasingly unaligned.

Comment 4

[Jonathan Kew [:jfkthame]]

Agreed, this is just bad authoring. They should be using CSS properties (margins, padding, whatever...) rather than inserting all those  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.