GoogleSymbols icons are not properly vertically centered by Flutter rendering logic

[jacobsimionato]

Summary of the issue:

• GoogleSymbols are being rendered in Flutter with incorrect vertical centering. When teams try to migrate from other icon libraries, their layouts break.
• After some discussion about whether there's an issue in the symbol font, it seems like the issue is that the way that Flutter determines the center of the symbol isn't compatible with the way this particular symbol library is represented - from @tphinney in b/267281950, flutter "does the centering by using one of the top vertical values (NOT cap height!) from the font, and the baseline, rather than the top and bottom. It is unfortunate; if they had used cap height and baseline, we would have been OK. Their approach will probably work with many symbol fonts, but is not so great in our particular case."
• It's difficult to change the values in the symbol font file we ship, because the same font is used across many platforms/products/clients etc and the change would not be backwards compatible. Possibly someone could create a tool that transforms the upstream font to a special Flutter-compatible version, though that seems a little messy and confusing.

Maybe there's some change that could be made to Flutter's rendering logic that would fix rendering for this symbol font without breaking rendering for other fonts? It sounds like maybe there's some ambiguity in the best way to center symbols. Could someone on the Flutter engine team provide an opinion on this? We need a fix or workaround for this issue somewhere in the stack, it's just unclear where the most elegant place for that is.

Example of the bug:

There is a lot of discussion about this floating around in #102560, google/material-design-icons#1500 and Google bug b/267281950, but I wanted to create an issue specifically for the vertical centering problem seeing as it's starting to create work for Google teams to add a proliferation of workarounds.

[tphinney]

Yes, the possible solutions include:

1. Flutter to change their general logic for how they vertically center text, at least for symbol fonts. Probably not happening because it would break too many existing layouts.
2. Material Symbols to change their vertical metrics to be compatible with Flutter’s existing logic. Again, probably not happening because it would break existing layouts for that font with pretty much all other apps (including anybody already using Flutter, but also people using other tools).
3. Flutter could special-case Material Symbols (and the Google-internal version, Google Symbols) and treat it differently. This would break existing layouts too, but at least only those using the Symbols fonts in Flutter.
4. One could make variant fonts, or make a tool that generates such variant fonts, that have vertical metrics set the way that would work better in Flutter.

You can probably tell from the way I discuss this that I think the first two options, although simple and tempting, are non-starters from a practical impact point of view. I also am not excited by the idea (4) of maintaining extra font versions that are Flutter-specific, seeing as that is megabytes of code instead of just a few lines.

Google itself is not immune to this problem. I am hopeful this external version of the issue can be updated, after decisions are made on how to tackle it internally (per Buganizer).

[guidezpl]

Related to #98909

[tphinney]

NOTE: this applies to both “Google Symbols” (the internal Google version) and “Material Symbols” (the external version that drops some proprietary Google logos and icons). Any special casing of fonts in app code, or special builds of variant fonts, or whatever, would need to cover/handle both.

[xster]

Adding P0 to align with go/flutter-bugs#github-priority

[goderbauer]

(from critical triage) cc @jason-simmons @LongCatIsLooong Is this an issue with how the engine renders these symbols?

[LongCatIsLooong]

Is there a minimal repro for this issue? IIRC the vertical alignment depends on whether height of the text is set to a non-null value (which unfortunately is a bit unintuitive).

[math1man]

I tried modifying Flutter's Icon widget to specify a non-null height parameter. It definitely changed the result, but this doesn't seem like a scalable solution.

Here's the symbol rendered in a FAB with height null:

Here's the same rendering with height 1.0:

And finally, here's with height 1.1:

Setting the value to 1.0 doesn't seem to impact regular Icons, but that isn't actually any better for symbols.

[LongCatIsLooong]

I think if a line has only one font then the EM box is vertically centered, even when the font has a negative descent. I download the font (is it https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsOutlined%5BFILL%2CGRAD%2Copsz%2Cwght%5D.ttf ?) but it looked fine in a RichText:

The styles used:

  final text = RichText(text: TextSpan(
      text: '\uEF4A',
      style: TextStyle(
        fontFamily: 'Symbols',
        fontSize: 500,
        //height: 1,
        //leadingDistribution: TextLeadingDistribution.even,
      ),
  ));

[tphinney]

That is the right font — well, one of them, at least. All of the Material/Google Symbols fonts have the same vertical metrics and are vertically centered in the cap height, regardless of the particular instance chosen.

[LongCatIsLooong]

Ahhh I was looking at os2.sTypoDescender that's why the value's negative. So it looks like the glyphs are vertically centered at (1056 - 96) / 2 = 480 in which case Skia got everything right. It's just the Icon widget clipped the glyph at the bottom since it expected a smaller height. This should be an easy and non-breaking fix.