Vary grapheme baselines by script

1ec5 · Aug 23, 2024 · cb1a28f · cb1a28f
1 parent be2d95e
commit cb1a28f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@mapbox/geojson-rewind": "^0.5.2",
     "@mapbox/jsonlint-lines-primitives": "^2.0.2",
     "@mapbox/point-geometry": "^0.1.0",
-    "@mapbox/tiny-sdf": "^2.0.6",
+    "@mapbox/tiny-sdf": "github:1ec5/tiny-sdf#baseline",
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
@@ -45,7 +45,6 @@
     "vt-pbf": "^3.1.3"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
     "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
     "@mapbox/mvt-fixtures": "^3.10.0",
     "@rollup/plugin-commonjs": "^26.0.1",
@@ -80,6 +79,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "address": "^2.0.3",
+    "autoprefixer": "^10.4.20",
     "benchmark": "^2.1.4",
     "canvas": "^2.11.2",
     "cssnano": "^7.0.5",

diff --git a/src/render/glyph_manager.ts b/src/render/glyph_manager.ts
@@ -167,14 +167,23 @@ export class GlyphManager {
             } else if (/light/i.test(stack)) {
                 fontWeight = '200';
             }
+
+            let textBaseline = 'alphabetic';
+            if (/\p{sc=Beng}|\p{sc=Deva}|\p{sc=Guru}|\p{sc=Orya}|\p{sc=Phag}|\p{sc=Tibt}/u.test(grapheme)) {
+                textBaseline = 'hanging';
+            } else if (/\p{Ideo}/u.test(grapheme)) {
+                textBaseline = 'ideographic';
+            }
+
             tinySDF = entry.tinySDF = new GlyphManager.TinySDF({
                 fontSize: 24 * textureScale,
                 buffer: buffer * textureScale,
                 radius: 8 * textureScale,
                 cutoff: 0.25,
                 fontFamily,
                 fontStyle,
-                fontWeight
+                fontWeight,
+                textBaseline
             });
         }
 
@@ -187,7 +196,7 @@ export class GlyphManager {
                 width: char.glyphWidth / textureScale || 24,
                 height: char.glyphHeight / textureScale || 24,
                 left: (char.glyphLeft - buffer) / textureScale || 0,
-                top: char.glyphTop / textureScale || 0,
+                top: (char.glyphTop - char.glyphBaseline) / textureScale || 0,
                 advance: char.glyphAdvance / textureScale || 24,
                 isDoubleResolution: true
             }