Improve readability of text-pitch-alignment: "viewport" text

[mb12]

mapbox-gl-js version:Master

Steps to Trigger Behavior

1. Tilt map using Shift + up-arrow key
2. Watch text along line.
3. Its extremely illegible. (See attached screenshot).

Expected Behavior

Actual Behavior

[1ec5]

Setting text-pitch-alignment to viewport (#2668) untilts the labels, going a long way towards making the labels toward the back legible. The labels are still scaled by viewing distance, which would be addressed by a to-be-implemented text-pitch-scale property: mapbox/mapbox-gl-style-spec#459 (comment).

The default Streets style doesn’t set text-pitch-alignment to viewport, in part because this functionality hadn’t been implemented by the time the current Streets style was published. However, you can use this property in your own custom styles.

[mb12]

I am still seeing very high illegibility in text esp when placed on lines going vertically(screenshot below).

[1ec5]

That's related to the observations in #2668 (comment) and the caveats in #2668 (comment). Definitely agree there's room for improvement.

/cc @lucaswoj @yhahn

[lucaswoj]

I agree. The readability of text-pitch-alignment: "viewport" is poor. We should look into improving it.

Overall, our plans to address pitched text readability are captured by the text-pitch-alignment and text-scale-alignment style properties and this ticket.

[jfirebaugh]

@ansis Was this fixed by #3790?

[ansis]

@jfirebaugh I don't think so

[ajashton]

Noting that one specific aspect of this is that perspective is not accounted for in text orientation. If you look at this JSFiddle First, 2nd, & 3rd Streets should be rotated 180° to be closer to "upright", but if you change the pitch to 0 the same orientation is correct.

[nickidlugash]

Update: after syncing up over the last couple of weeks seperately with @yhahn, @lucaswoj, and @pveugen, I've started to revisit this issue. Per chat, if @ChrisLoer has bandwidth, he and I are going to push on some incremental improvements for pitched label rendering, starting with this issue.

To summarize and expand on the above conversations:

• Labels rendered with text-pitch-alignment: "map" are not very legible (as shown in the opening comment), but they look accurate to what you would expect using this style property assignment. Since road labels and other use cases that require high legibility would most likely not use this assignment, for now we are not focusing on improving this behavior.

• As the adjustment in this ticket's title suggests, we'll continue to focus this ticket specifically on improving readability of labels along lines for text-pitch-alignment: "viewport".

• The issue of pitch not being accounted for in text orientation is general to pitched labels along lines and not specific to text-pitch-alignment: "viewport", so I've moved it to its own ticket.

[jfirebaugh]

There seem to two main causes of illegibility:

• Text that is "further away" due to pitch is scaled down. The proposed "text-pitch-scale": "viewport" property (part of Complete set of *-rotation-alignment, *-pitch-alignment, and *-pitch-scale properties #4120) would provide a way to disable this effect.
• Text running vertically is foreshortened by pitch, squishing glyphs together. Ideally glyphs would be able to spread out in order to preserve the effective visual spacing as the map tilts, while still remaining attached to the line if the geometry curves.

[nickidlugash]

@jfirebaugh I agree with ^

Text that is "further away" due to pitch is scaled down. The proposed "text-pitch-scale": "viewport" property (part of #4120) would provide a way to disable this effect.

My comments about this are here.

Text running vertically is foreshortened by pitch, squishing glyphs together. Ideally glyphs would be able to spread out in order to preserve the effective visual spacing as the map tilts, while still remaining attached to the line if the geometry curves.

From what I understand from @yhahn, the foreshortening factor was put in place to avoid other legibility issues around label placement/collision boxes not taking into account the unskewing of pitched labels (which is particularly problematic for curved labels, as @jfirebaugh mentioned). I agree that it would be best to remove the foreshortening and address the other issues.

As @yhahn mentioned in the original PR, in order to transform label placements and collision box size/positioning to accurately reflect the rendering of labels with viewport pitch alignment, we probably need to adjust both the rotation and x/y movement.

Currently we are adjusting for viewport pitch alignment in the render, shader and collision tile, but in order to do ^, it seems like we may need to make adjustments further upstream. I think shaping.js is where the first relevant calculations take place (e.g. label length and glyph positioning), but I don't know whether it make sense for Shaping to take into account pitch/pitch-alignment (conceptually it doesn't seem like the right place).

/cc @ChrisLoer

[ChrisLoer]

#4547 addressed the first part of this problem (text in the distance was scaled down too much).

@ansis's work in #4781 will fix the second part of the problem (vertical foreshortening of text makes it illegible).

[ChrisLoer]

#4781 has landed: while I'm sure there are further improvements we'll want to make, I think that basically addresses this issue.