Fix glyph clipping at the bottom/2 mapbox#42

boris-ulyanov · Jan 7, 2022 · 07a94ce · 07a94ce
1 parent 9fffa70
commit 07a94ce
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/index.js b/index.js
@@ -51,7 +51,7 @@ export default class TinySDF {
 
         // The integer/pixel part of the top alignment is encoded in metrics.glyphTop
         // The remainder is implicitly encoded in the rasterization
-        const glyphTop = Math.floor(actualBoundingBoxAscent);
+        const glyphTop = Math.ceil(actualBoundingBoxAscent);
         const glyphLeft = 0;
 
         // If the glyph overflows the canvas size, it will be clipped at the bottom/right
@@ -68,7 +68,7 @@ export default class TinySDF {
 
         const {ctx, buffer, gridInner, gridOuter} = this;
         ctx.clearRect(buffer, buffer, glyphWidth, glyphHeight);
-        ctx.fillText(char, buffer, buffer + glyphTop + 1);
+        ctx.fillText(char, buffer, buffer + glyphTop);
         const imgData = ctx.getImageData(buffer, buffer, glyphWidth, glyphHeight);
 
         // Initialize grids outside the glyph range to alpha 0

diff --git a/test/fixtures/1-out.json b/test/fixtures/1-out.json
@@ -3,7 +3,7 @@
   "height": 51,
   "glyphWidth": 48,
   "glyphHeight": 45,
-  "glyphTop": 39,
+  "glyphTop": 40,
   "glyphLeft": 0,
   "glyphAdvance": 48
 }