Add text-vertical-align style spec property
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
## Motivation
This idea came out of https://github.com/mapbox/mapbox-gl-js/issues/8484. A `text-vertical-align` property is analogous to the [`vertical-align` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) and would enable users to align text of varying sizes along a baseline, middle or top. If there were a compelling use case for it, it may be possible to add "sub" and "super" options as well.
This would require #191 to be implemented first so that GL JS has access to the glyph metrics in order to determine the correct baselines.
## Design Alternatives
At present, I don't believe there's a way to achieve this. Setting the baseline probably requires fiddling with font size and possible even the font family to find something that works which is not particularly useful. I can't really think of a way to align text to the top or middle.
A possible alternative is implementing text padding which could allow a user to move the text around with positive and negative margins. This is more complex for the user however and would still require a lot of trial and error. The padding that works would likely be a "magic number" that is not particularly flexible.
Doing nothing is another possibility. It's not obvious how widespread this issue is but @chloekraw proposed it in the linked ticket above so it has come up. It also doesn't make much sense to add the glyph metrics but not expose ways to make them useful for end users.
## Design
A `text-vertical-align` property would be clear and produce consistent results. It's easier to use than padding. The major downside is a new style spec property but this property would add a considerable amount of flexibility for map designers while solving an existing bug.
The property would be an enum with possible values of "top", "middle", "bottom", "baseline" and possibly "super" and "sub" (I'm not particularly familiar with what glyph metrics would be returned by node-fontnik so perhaps some of these options would be more difficult to implement than others).
### Mock-Up
```
layout: {
"text-field": ["format",
"foo", { "font-scale": 1.2 },
"bar", { "font-scale": 0.5, "text-vertical-align": "top" }]
```
### Concepts
It would be similar in concept to the existing CSS property `vertical-align`. The concept of working with text baselines should be familiar to many front end developers and designers.
### Implementation
Depends on #191 for glyph metrics
The implementation would be a symbol layout property that takes an enum value.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading prerequisite issue #191 and the symbol layout property described here, then confirm what glyph metrics are available. The work is done when the supported vertical-alignment values and behavior are settled and the new style property is implemented using those metrics.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- computer-graphics, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100