How are text fields with different font scales aligned?

[vincentvanderweele]

mapbox-gl-js version: 0.52.0

Question

How does Mapbox align formatted strings?

When using multiple font scales in a text field, I would have hoped that the baselines get aligned but that is not what happens (see images below). I could imagine that the bottoms of the letters get aligned but then the smaller text would always be rendered below the bigger text, which is also not the case. So how does it actually work and how can I control the alignment?

---

When rendering this formatted text field

"text-field": [ "format", "23", { "font-scale": 1 }, "A,B", { "font-scale": 0.7 } ]

I get these outputs:

Helvetica-neue light (smaller text rendered below the baseline):

Noto-sans light (smaller text rendered above the baseline):

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/style-spec/#types-formatted

[chloekraw]

Baseline alignment doesn't occur because mapbox-gl-js doesn't receive glyph metrics (#191) and the value is hardcoded so it's not modifiable (#191 (comment)). We're looking at reprioritizing #191 and plan to start working on it soon. Once that's unblocked, it would be valuable to expose a property that enables customization of "text-alignment" within a single formatted expression.

[ryanhamley]

I think it's ok to close this as essentially a duplicate of #191 so we can keep all comments and work on the feature in that issue

[chloekraw]

I'm ok with closing this ticket since the OP wasn't only about controlling the alignment and didn't propose implementation options, but I do think designing a new text-alignment or similar property that works with the formatted expression in text-field would warrant a separate ticket. This feature could look something like:

layout: {
   "text-field": ["format",
   "foo", { "font-scale": 1.2 }, 
   "bar", { "font-scale": 0.5, "text-alignment": top }]

I'm thinking inputs would probably be top, center, bottom, but there are additional levels of control we could expose that we should consider. Another possible implementation is allowing developers to specify the number of pixels that one part of a formatted expression should be offset in the y-direction from the other from its baseline.

[ryanhamley]

This isn't an issue I'm super familiar with yet but wouldn't text-alignment require the glyph metrics that #191 would implement? Otherwise, we'd just be guessing at how much the alignment needs to move wouldn't we?

[chloekraw]

Yeah, #191 is definitely a blocker for this proposed feature. But that ticket is about replacing the hardcoded value

mapbox-gl-js/js/symbol/shaping.js

Line 33 in ec62ab8

var yOffset = -17;

with glyph metrics retrieved from node-fontnik. #191 can be closed without the creation of a new style spec property that enables control over baseline alignment.

[ryanhamley]

Ah got it. I'll open a new ticket to track that