text-offset on line-placed symbol layer causes gaps or bunching

[1ec5]

maplibre-gl-js version: 3.0.0-pre.4 (but this issue has been reported since at least 2016)

browser: Any

Steps to Trigger Behavior

1. Add a symbol layer to the style that has a text-field and symbol-placement set to line.
2. Set the y component of text-offset to a value other than 0.

Link to Demonstration

In this test case, there are five labels that say “Lorem ipsum dolor sit amet”. Each is rendered by a symbol layer that is identical except for a different text-offset:

https://jsbin.com/kafefin/edit?js,output

showCollisionBoxes is enabled, though this demo disables collision to show that it isn’t a collision issue.

Expected Behavior

In each label, “IP” should be right next to “SUM” without any overlap and without any gap, even though there is an angle in the linestring geometry at that point.

Actual Behavior

In the labels above the dotted line (with a negative y-offset), “IP” overlaps with “SUM”.
In the labels below the dotted line (with a positive y-offset), there is an unsightly gap betwen “IP” and “SUM”.

Impact

Style authors y-offset labels for various purposes, most notably:

• The name of a country on either side of a border
• The name of a street on one side of the street (at low zoom levels when the street is drawn as a simple line)
• The name of a river on one side of the river (at low zoom levels when the river is drawn as a simple line)
• The name of a railway

This issue makes such labels look visually unattractive and difficult to read. For a practical example in a real, deployed style, see osm-americana/openstreetmap-americana#753 (comment).

This issue was previously reported and confirmed in mapbox/mapbox-gl-js#3718.

[HarelM]

Fixed by #2260