1368708 - Firefox tab height too big with some url (title?) - utf8 related?

Status: RESOLVED DUPLICATE of bug 1432045

(Firefox :: Tabbed Browser, defect)

Description

[[e-mail]]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170418074700

Steps to reproduce:

Navigate to https://twitter.com/puellavulnerata (the title of that page is "Andreⓐ (@puellavulnerata) | Twitter"


Actual results:

The height of all the tabs increase (double?)


Expected results:

The height of all the tabs should stay the same

Comment 1

[:Gijs (he/him)]

Can't reproduce on OS X, probably Linux-specific. Can you check what font is being used (with the browser toolbox - https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox ) and provide a screenshot?

Comment 2

[[e-mail]]

Attachment: Screenshot

Comment 3

[[e-mail]]

Browser Toolbox says "Cantarell" for the font-family of the tab (window>tahoma,arial,helvetica,sans-serif). 
I'm using Debian.

Comment 4

[:Gijs (he/him)]

(In reply to [e-mail] from comment #3)
> Browser Toolbox says "Cantarell" for the font-family of the tab
> (window>tahoma,arial,helvetica,sans-serif). 
> I'm using Debian.

Jonathan, is this just a font issue? Is there a simple workaround? The screenshot is a bit surprising in that it doesn't seem to show any particularly tall glyphs...

Comment 5

[Jonathan Kew [:jfkthame]]

The "ⓐ" is probably not present in Cantarell, and gets pulled from a fallback font, and that fallback font has much larger metrics. (It's not a question of the height of the individual glyph, but of the font's ascender and descender metrics.)

Comment 6

[Jonathan Kew [:jfkthame]]

(To find out what font is really being used, look in the browser toolbox inspector's Fonts panel, not at the CSS font-family property. The CSS only shows you what is requested, not what is actually used if fallback comes into play.)

Comment 7

[[e-mail]]

document.title="ⓐ" does produce the bug.

The toolbox inspector's Fonts panel says:
> Cantarell Regular system
> Used as: "Cantarell"

Comment 8

[Jonathan Kew [:jfkthame]]

(In reply to [e-mail] from comment #7)
> document.title="ⓐ" does produce the bug.
> 
> The toolbox inspector's Fonts panel says:
> > Cantarell Regular system
> > Used as: "Cantarell"

That's curious... there's no "ⓐ" in the version of Cantarell I have on hand, though I guess it may be quite old. Or maybe the inspector isn't handling this as I expected.

How about within web content? If you try a simple testcase like

  data:text/html;charset=utf-8,<span style="font-family:Cantarell; border:1px solid gray">Andreⓐ</span>

then what font(s) does the inspector indicate are used for the element, and how high is it, as shown by the border? (Be sure to check whether the Fonts panel lists more than font.)

Comment 9

[[e-mail]]

Attachment: Screenshot 2

Does that screenshot contains everything you need?
(The console inspector targets the "Andre" text and the Browser inspector targets the tab.)

Comment 10

[Jonathan Kew [:jfkthame]]

Well, it doesn't show the Fonts panel in the inspectors, to confirm whether multiple fonts end up getting used (which I suspect may be the case); it does suggest, though, that the behavior in web content is different from the tab, as the <span> isn't getting a particularly tall height.

(FWIW, I don't see this at all on my Linux machine -- running Ubuntu -- but then, I'm sure my font configuration doesn't match yours.)

Comment 11

[[e-mail]]

Your theory is correct: in the *both* font tab of the previous screenshot, I have indeed:
- First "Cantarell Regular" (Used as:"Cantarell")
- Then "STIXMath-Regular" (Used as:"STIX Math")
 
(Note that sometimes I observe few others font glitches, like the utf8-appostrophe ’ being in the middle-high of the letters instead of the top-high)

Comment 13

[:Gijs (he/him)]

Jonathan, is there anything we can do on the frontend side to avoid this kind of situation? My understanding is that there's no predicting what fonts will be available on Linux, or in what state those fonts are, so I'm not sure we can do better here. :-(

Comment 14

[Jonathan Kew [:jfkthame]]

I guess you could set an explicit line-height on the tab labels (something like ".tab-label { line-height: 1.25 }" or thereabouts would probably do it), to force them to maintain a constant height regardless of the metrics of the font that happens to get used.

The potential downside of this, though, is that it might result in some clipping if the user ends up with a particularly tall font, instead of the tab growing as needed to accommodate the text/font it contains.

(In practice, the "clipping" might not matter, if all that's clipped is blank space -- as would be the case with the original example here with the ⓐ character. That character is triggering fallback to a font that has much larger ascent/descent, and hence increases the line-height, but this character itself doesn't actually need all that space.)

Suppose a tab title really did contain glyphs that extend much higher than "normal"; what would you as front-end designers want to happen? Should the tabs get taller to accommodate it, or should the abnormally tall text be clipped?

Comment 15

[:Gijs (he/him)]

(In reply to Jonathan Kew (:jfkthame) from comment #14)
> Suppose a tab title really did contain glyphs that extend much higher than
> "normal"; what would you as front-end designers want to happen? Should the
> tabs get taller to accommodate it, or should the abnormally tall text be
> clipped?

Dão has a better idea of the answer here than me, I think, but I believe we would normally expect the entire tabstrip to get taller... within reason.

Comment 16

[Dão Gottwald [:dao]]

(In reply to :Gijs from comment #15)
> (In reply to Jonathan Kew (:jfkthame) from comment #14)
> > Suppose a tab title really did contain glyphs that extend much higher than
> > "normal"; what would you as front-end designers want to happen? Should the
> > tabs get taller to accommodate it, or should the abnormally tall text be
> > clipped?
> 
> Dão has a better idea of the answer here than me, I think, but I believe we
> would normally expect the entire tabstrip to get taller... within reason.

It should grow for bigger default font sizes, but I don't think it makes sense for single characters to be able to affect the tab strip height.