mapbox / mapbox/mapbox-gl-js

Internally swap implementation of vertical text-anchor to use text-offset

Open
#10,757 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

refactoring :building_construction:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

Prerequisite to: #10755

`text-anchor` and `text-offset` both move characters vertically, relative to lines, producing the artifacts below:

121112878-f3574680-c7c5-11eb-8818-13eea4a517dd

However, `text-offset` is applied in [`placeGlyphAlongLine`](https://github.com/mapbox/mapbox-gl-js/blob/53fda413221c183c1006881f378401173c251325/src/symbol/projection.js#L490), where something can be done about it. `text-anchor` is applied during [text shaping](https://github.com/mapbox/mapbox-gl-js/blob/53fda413221c183c1006881f378401173c251325/src/symbol/shaping.js#L749-L757), without knowledge of the projected geometry. As a result, even though they have an identical effect, the distribution of characters can only easily be improved for `text-offset`.

Thus I propose, for the specific case of text along lines, to ignore `text-anchor: top|bottom` and instead pass the vertical offset through to glyph placement, similar to `text-offset`, so that it may be applied in a location where the distribution of characters can be fixed.

Such a PR would be an internal change as a prerequisite for #10755, with no external effect.

My primary concern is that there is symbol behavior I'm not yet aware of which would prevent this from being a simple internal change.

## Design Alternatives

I'm not aware of a reasonable alternative apart from simply not addressing the character spacing problem for `text-anchor`.

## Design

I believe there are two challenges:

1. pass the vertical offset resulting from text-offset through to `placeGlyphAlongLine`
2. scale the offset by the correct font size

cc @mapbox-gl-js @mapbox/gl-native

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the text-anchor handling in src/symbol/shaping.js and text-offset handling in src/symbol/projection.js, especially placeGlyphAlongLine. Trace how vertical offsets reach glyph placement and determine the correct font-size scaling. Done means text-anchor top|bottom is internally routed through glyph placement for text along lines without external behavior changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.