1703693 - Misaligned icons in Jira

Status: RESOLVED FIXED

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

Description

[Emilio Cobos Álvarez (:emilio)]

Attachment: testcase

Seems like they're using vertical-align: text-bottom, but that aligns to a reasonable place in chrome, and too low in Firefox.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

So this doesn't look like a regression, I see the same in Firefox 48 at least.

Jonathan, maybe the metrics from freetype are wrong somehow? This seems to work on OSX, and they're using web fonts so it ought to look similar enough?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Screenshot for reference

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Err, nevermind, they're not using web fonts for the text of course.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: DroidSans.ttf

So it was using this font, and with this font Chrome and WebKit seem to get a reasonable alignment, but we don't.

Comment 5

[Jonathan Kew [:jfkthame]]

Oh, so is that screenshot from Fenix/GeckoView? It looks OK to me here on Linux (Ubuntu), fwiw.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I'm on Linux (Fedora). Here's an interesting test-case: http://crisal.io/tmp/droid-sans-alignment.html.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: Rendering of the above test-case in Firefox.

Chrome renders it as I'd expect (the three buttons look the same, because they are using the same font), but:

• Firefox messes ups the metrics from freetype, somehow? fc-match and the fonts panel agree that this is "Droid Sans", and fc-match "Droid Sans" says DroidSans.ttf: "Droid Sans" "Regular", which is the font above.

• For some reason the local() version doesn't work (??)

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Jonathan, if you can't repro this (or even if you can, if you don't know off-hand what is going on) I'm happy to dig into it, but some pointers would be appreciated. Looks pretty borked to me :)

Comment 9

[Jonathan Kew [:jfkthame]]

I tried installing that copy of DroidSans.ttf on my Ubuntu system, and this still doesn't repro for me: your testcase shows all three buttons with the same height and same baseline alignment.

I wonder if this is related to the specific (system) freetype version that's present?

Comment 10

[Emilio Cobos Álvarez (:emilio)]

This is with freetype 2.10.4 and fontconfig version 2.13.93...

Comment 11

[Jonathan Kew [:jfkthame]]

So this turns out to be about the weird collection of fonts that are all exposed under the "Droid Sans" family name, but have wildly varying metrics, and it's not obvious how to control which of them we end up using as they share the same font-selection attributes.

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Attachment: DroidKufi-Regular.ttf

So we did some matrix-debugging. There are 26 fonts in the font-group, and this one is the first that gets chosen for font metrics.

Comment 13

[Jonathan Kew [:jfkthame]]

So according to the name table in that font, its family name is "Droid Arabic Kufi":

  <name>
    <namerecord nameID="0" platformID="3" platEncID="1" langID="0x409">
      Digitized data copyright © 2010, Google Corporation.
    </namerecord>
    <namerecord nameID="1" platformID="3" platEncID="1" langID="0x409">
      Droid Arabic Kufi
    </namerecord>
    <namerecord nameID="2" platformID="3" platEncID="1" langID="0x409">
      Regular
    </namerecord>
    <namerecord nameID="3" platformID="3" platEncID="1" langID="0x409">
      Ascender - Droid Arabic Kufi
    </namerecord>
    <namerecord nameID="4" platformID="3" platEncID="1" langID="0x409">
      Droid Arabic Kufi
    </namerecord>
    <namerecord nameID="5" platformID="3" platEncID="1" langID="0x409">
      Version 1.00
    </namerecord>
    <namerecord nameID="6" platformID="3" platEncID="1" langID="0x409">
      DroidArabicKufi
    </namerecord>
    <namerecord nameID="7" platformID="3" platEncID="1" langID="0x409">
      Droid is a trademark of Google and may be registered in certain jurisdictions.
    </namerecord>
    <namerecord nameID="8" platformID="3" platEncID="1" langID="0x409">
      Ascender Corporation
    </namerecord>
    <namerecord nameID="9" platformID="3" platEncID="1" langID="0x409">
      Pascal Zoghbi
    </namerecord>
    <namerecord nameID="10" platformID="3" platEncID="1" langID="0x409">
      Droid Arabic Kufi is an Arabic type designed for use in Google™ products such as Google ChromeOS™ and Android™. Designed to complement the Latin, Greek and Cyrillic provided in the Droid Sans family, the Arabic matches the color, alignment and design detail of the Droid Sans allowing them to be used together for multi-lingual typesetting. This Kufi style is optimized for reading Arabic script on screen. The large ‘loop height’ and ‘tooth height’ help prevent readers from having to zoom web pages to a larger size in order to read them. The traditional Kufi forms are softened for less formal documents such as periodicals and journals. The letterforms structures are based on the calligraphic grammatical rules of the Kufi writing style while drawn with a contemporary feel.
    </namerecord>
    <namerecord nameID="11" platformID="3" platEncID="1" langID="0x409">
      http://www.ascendercorp.com/
    </namerecord>
    <namerecord nameID="12" platformID="3" platEncID="1" langID="0x409">
      http://www.ascendercorp.com/typedesigners.html
    </namerecord>
    <namerecord nameID="13" platformID="3" platEncID="1" langID="0x409">
      Licensed under the Apache License, Version 2.0
    </namerecord>
    <namerecord nameID="14" platformID="3" platEncID="1" langID="0x409">
      http://www.apache.org/licenses/LICENSE-2.0
    </namerecord>
  </name>

But the fontconfig pattern we end up with in Emilio's case shows:

Droid Sans,Droid Arabic Kufi:familylang=en:style=Regular:stylelang=en:fullname=Droid Sans,Droid Arabic Kufi:fullnamelang=en:slant=0:weight=80:width=100:foundry=1ASC:file=/usr/share/fonts/google-droid-sans-fonts/DroidKufi-Regular.tt f:index=0:outline=True:scalable=True:charset=20 a0 600-603 60b-615 61b 61e-61f 621-63a 640-65e 660-673 675-6eb 6ed-6ff 750-76d 25cc fb50-fb51 fb56-fb59 fb66-fb6d fb7a-fb7d fb88-fb95 fb9e-fb9f fba4-fbb1 fbe6-fbe9 fbfc-fbff fc5e-fc63 fd3e-f d3f fdf2 fdfc fe70 fe72 fe74 fe76 fe78 fe7a fe7c fe7e fe80-fefc:lang=ar|az-ir|fa|ku-ir|ps-af|ps-pk|ug|ur|ku-iq|ota|pa-pk|sd|lah:fontversion=3:capability=otlayout\\:arab:fontformat=TrueType:decorative=False:postscriptname=DroidArabicKufi:c olor=False:symbol=False:variable=False:fonthashint=True

with "Droid Sans" prepended as an alternative family name.

I think this must be coming from a fontconfig configuration file that "aliases" the various language-specific faces into the Droid Sans family.

Comment 14

[Jonathan Kew [:jfkthame]]

And the Droid Arabic Kufi font has very different line metrics from Droid Sans:

Droid Arabic Kufi:
    <ascent value="2625"/>
    <descent value="-1260"/>
    <lineGap value="18"/>

Droid Sans:
    <ascent value="1901"/>
    <descent value="-483"/>
    <lineGap value="0"/>

(ignoring the added issue of whether to rely on hhea or OS/2 metrics -- which also differ greatly).

"Merging" these faces into a single "font family" seems like a really poor decision.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

• Firefox fontconfig query: https://searchfox.org/mozilla-central/rev/21110f35dbb95d3c41c8c5bd363ec689900af30f/gfx/thebes/gfxFcPlatformFontList.cpp#1993-2029
• Blink's: https://source.chromium.org/chromium/chromium/src/+/master:components/services/font/fontconfig_matching.cc;drc=702f0f497201729fbe3f11c02f4c069e20560f22
• WebKit's: https://github.com/WebKit/WebKit/blob/efbda16f5a3858affd6da9b875d60a7be75d9e86/Source/WebCore/platform/graphics/freetype/FontCacheFreeType.cpp#L498-L595

Comment 16

[Emilio Cobos Álvarez (:emilio)]

So it seems what we do to avoid getting random fonts is using a sentinel family (-moz-sentinel), while what at least WebKit does is areStronglyAliased, which tries to filter out "weak" fontconfig aliases.

Comment 17

[Emilio Cobos Álvarez (:emilio)]

Attachment: 65-google-droid-sans-fonts.conf

This is the config shipped by my distro which contains the relevant aliases.

Comment 18

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1703693 - Prefer faces for fonts that can only be named in one way. r=jfkthame

This produces the desired rendering here by effectively "deprioritizing"
faces from fonts that have multiple names.

Your call whether this is a good idea or not, seems reasonable off-hand
to me.

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/65fcd6b3fd44
Prefer faces for fonts that can only be named in one way. r=jfkthame

Comment 20

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/65fcd6b3fd44