Correct x offset introduced by vertical glyph rotation.

Fixes issue #5090. Remove some unused code that implies support we don't have for: - Rotations other than -90 degrees - Vertical glyphs not placed along lines
mapbox · Aug 4, 2017 · cf5f328 · cf5f328
1 parent a6668fb
commit cf5f328
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 52 deletions.
diff --git a/src/symbol/quads.js b/src/symbol/quads.js
@@ -167,12 +167,21 @@ function getGlyphQuads(anchor: Anchor,
         const bl  = new Point(x1, y2);
         const br = new Point(x2, y2);
 
-        const center = new Point(builtInOffset[0] - halfAdvance, glyph.advance / 2);
-        if (positionedGlyph.angle !== 0) {
-            tl._sub(center)._rotate(positionedGlyph.angle)._add(center);
-            tr._sub(center)._rotate(positionedGlyph.angle)._add(center);
-            bl._sub(center)._rotate(positionedGlyph.angle)._add(center);
-            br._sub(center)._rotate(positionedGlyph.angle)._add(center);
+        if (alongLine && positionedGlyph.vertical) {
+            // Vertical-supporting glyphs are laid out in 24x24 point boxes (1 square em)
+            // In horizontal orientation, the y values for glyphs are below the midline
+            // and we use a "yOffset" of -17 to pull them up to the middle.
+            // By rotating counter-clockwise around the point at the center of the left
+            // edge of a 24x24 layout box centered below the midline, we align the center
+            // of the glyphs with the horizontal midline, so the yOffset is no longer
+            // necessary, but we also pull the glyph to the left along the x axis
+            const center = new Point(-halfAdvance, halfAdvance);
+            const verticalRotation = -Math.PI / 2;
+            const xOffsetCorrection = new Point(5, 0);
+            tl._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
+            tr._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
+            bl._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
+            br._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
         }
 
         if (textRotate) {

diff --git a/src/symbol/shaping.js b/src/symbol/shaping.js
@@ -24,7 +24,7 @@ export type PositionedGlyph = {
     x: number,
     y: number,
     glyph: SimpleGlyph,
-    angle: number
+    vertical: boolean
 };
 
 // A collection of positioned glyphs and some metadata
@@ -344,10 +344,10 @@ function shapeLines(shaping: Shaping,
             if (!glyph) continue;
 
             if (!scriptDetection.charHasUprightVerticalOrientation(codePoint) || writingMode === WritingMode.horizontal) {
-                positionedGlyphs.push({codePoint, x, y, glyph, angle: 0});
+                positionedGlyphs.push({codePoint, x, y, glyph, vertical: false});
                 x += glyph.advance + spacing;
             } else {
-                positionedGlyphs.push({codePoint, x, y: 0, glyph, angle: -Math.PI / 2});
+                positionedGlyphs.push({codePoint, x, y: 0, glyph, vertical: true});
                 x += verticalHeight + spacing;
             }
         }

diff --git a/test/expected/text-shaping-default.json b/test/expected/text-shaping-default.json
@@ -12,7 +12,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 98,
@@ -26,7 +26,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 99,
@@ -40,7 +40,7 @@
         "top": -12,
         "advance": 11
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 100,
@@ -54,7 +54,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 101,
@@ -68,7 +68,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     }
   ],
   "text": "abcde",

diff --git a/test/expected/text-shaping-linebreak.json b/test/expected/text-shaping-linebreak.json
@@ -12,7 +12,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 98,
@@ -26,7 +26,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 99,
@@ -40,7 +40,7 @@
         "top": -12,
         "advance": 11
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 100,
@@ -54,7 +54,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 101,
@@ -68,7 +68,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 97,
@@ -82,7 +82,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 98,
@@ -96,7 +96,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 99,
@@ -110,7 +110,7 @@
         "top": -12,
         "advance": 11
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 100,
@@ -124,7 +124,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 101,
@@ -138,7 +138,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     }
   ],
   "text": "abcde abcde",

diff --git a/test/expected/text-shaping-newline.json b/test/expected/text-shaping-newline.json
@@ -12,7 +12,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 98,
@@ -26,7 +26,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 99,
@@ -40,7 +40,7 @@
         "top": -12,
         "advance": 11
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 100,
@@ -54,7 +54,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 101,
@@ -68,7 +68,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 97,
@@ -82,7 +82,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 98,
@@ -96,7 +96,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 99,
@@ -110,7 +110,7 @@
         "top": -12,
         "advance": 11
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 100,
@@ -124,7 +124,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 101,
@@ -138,7 +138,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     }
   ],
   "text": "abcde\nabcde",

diff --git a/test/expected/text-shaping-newlines-in-middle.json b/test/expected/text-shaping-newlines-in-middle.json
@@ -12,7 +12,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 98,
@@ -26,7 +26,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 99,
@@ -40,7 +40,7 @@
         "top": -12,
         "advance": 11
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 100,
@@ -54,7 +54,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 101,
@@ -68,7 +68,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 97,
@@ -82,7 +82,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 98,
@@ -96,7 +96,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 99,
@@ -110,7 +110,7 @@
         "top": -12,
         "advance": 11
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 100,
@@ -124,7 +124,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 101,
@@ -138,7 +138,7 @@
         "top": -12,
         "advance": 13
       },
-      "angle": 0
+      "vertical": false
     }
   ],
   "text": "abcde\n\nabcde",

diff --git a/test/expected/text-shaping-null.json b/test/expected/text-shaping-null.json
@@ -12,7 +12,7 @@
         "top": -7,
         "advance": 14
       },
-      "angle": 0
+      "vertical": false
     },
     {
       "codePoint": 105,
@@ -26,7 +26,7 @@
         "top": -8,
         "advance": 6
       },
-      "angle": 0
+      "vertical": false
     }
   ],
   "text": "hi\u0000",
@@ -35,4 +35,4 @@
   "left": -10,
   "right": 10,
   "writingMode": 1
-}
+}