mapbox / mapbox/mapbox-gl-js

Enable text-line-height, text-letter-spacing paint properties to format options

Open
#9,079 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation

I want to be able to adjust the line-height and letter-spacing of the smaller text "Saint Petersberg"

Screen Shot 2019-12-05 at 1 23 12 PM

This becomes more important when two font families are used.

## Design Alternatives

- Contend with spacing feeling off
- For line-height, there are less flexible alternatives like
- Using an exaggerated line-height and increase the label max-width
- Adding an additional line break (which limits control over height value)

## Design

```json
[
"format",
["get", "name_ru"],
{},
"\n",
{},
["get", "name_en"],
{
"font-scale": 0.75,
"text-line-height": 0.2,
"text-letter-spacing": 0.1
}
]
```

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 tracing the format expression shown in the issue and how text-line-height and text-letter-spacing are handled as paint properties. Verify that both options are accepted and affect the rendered multiline label, including the example values; done means the formatting works when the two font families are used.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.