Skip to content

Commit

Permalink
Add adjustment to rendering glyphs (#1005)
Browse files Browse the repository at this point in the history
* add topAdjustment for glyph

* add topAdjustment for glyph

* update changelog

* add issue number

* add alphabet and cjk text test #1002

* fix lint error
  • Loading branch information
Kanahiro authored Feb 17, 2022
1 parent 0eed85d commit 964bbef
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

### 🐞 Bug fixes

- Add adjustment for glyph rendering, CJK fonts are mainly affected (#1002).
- *...Add new stuff here...*

## 2.1.6
Expand Down
18 changes: 17 additions & 1 deletion src/render/glyph_manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -196,14 +196,30 @@ export default class GlyphManager {
}

const char = tinySDF.draw(String.fromCharCode(id));

/**
* TinySDF's "top" is the distance from the alphabetic baseline to the top of the glyph.
* Server-generated fonts specify "top" relative to an origin above the em box (the origin
* comes from FreeType, but I'm unclear on exactly how it's derived)
* ref: https://github.com/mapbox/sdf-glyph-foundry
*
* Server fonts don't yet include baseline information, so we can't line up exactly with them
* (and they don't line up with each other)
* ref: https://github.com/mapbox/node-fontnik/pull/160
*
* To approximately align TinySDF glyphs with server-provided glyphs, we use this baseline adjustment
* factor calibrated to be in between DIN Pro and Arial Unicode (but closer to Arial Unicode)
*/
const topAdjustment = 27;

return {
id,
bitmap: new AlphaImage({width: char.width || 30, height: char.height || 30}, char.data),
metrics: {
width: char.glyphWidth || 24,
height: char.glyphHeight || 24,
left: char.glyphLeft || 0,
top: char.glyphTop || -8,
top: char.glyphTop - topAdjustment || -8,
advance: char.glyphAdvance || 24
}
};
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 61 additions & 0 deletions test/integration/render/tests/text-font/alphabet-cjk/style.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{
"version": 8,
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"sources": {
"sample": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
},
"properties": {
"name_en": "abc",
"name_ja": "あいう",
"name_ch": "阿衣乌"
}
}
]
}
}
},
"layers": [
{
"id": "sample-text-left",
"type": "symbol",
"source": "sample",
"layout": {
"text-anchor": "top",
"text-field": "{name_ja}\n{name_en}",
"text-font": ["NotoCJK"],
"text-offset": [-10, 0]
}
},
{
"id": "sample-text-center",
"type": "symbol",
"source": "sample",
"layout": {
"text-anchor": "top",
"text-field": "{name_ja}{name_en}{name_ch}",
"text-font": ["NotoCJK"],
"text-offset": [0, 0]
}
},
{
"id": "sample-text-right",
"type": "symbol",
"source": "sample",
"layout": {
"text-anchor": "top",
"text-field": "{name_en}\n{name_ch}",
"text-font": ["NotoCJK"],
"text-offset": [10, 0]
}
}
]
}

0 comments on commit 964bbef

Please sign in to comment.