Replace punctuation glyphs with vertical punctuation glyphs in vertic…

…al writing mode
mapbox · Nov 9, 2016 · d560a43 · d560a43
1 parent 0f74511
commit d560a43
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 20 deletions.
diff --git a/js/symbol/glyph_source.js b/js/symbol/glyph_source.js
@@ -2,6 +2,7 @@
 
 const normalizeURL = require('../util/mapbox').normalizeGlyphsURL;
 const ajax = require('../util/ajax');
+const verticalizePunctuation = require('../util/verticalize_punctuation');
 const Glyphs = require('../util/glyphs');
 const GlyphAtlas = require('../symbol/glyph_atlas');
 const Protobuf = require('pbf');
@@ -52,11 +53,9 @@ class GlyphSource {
 
         const missing = {};
         let remaining = 0;
-        let range;
 
-        for (let i = 0; i < glyphIDs.length; i++) {
-            const glyphID = glyphIDs[i];
-            range = Math.floor(glyphID / 256);
+        const getGlyph = (glyphID) => {
+            const range = Math.floor(glyphID / 256);
 
             if (stack[range]) {
                 const glyph = stack[range].glyphs[glyphID];
@@ -71,6 +70,15 @@ class GlyphSource {
             }
         }
 
+        for (let i = 0; i < glyphIDs.length; i++) {
+            const glyphID = glyphIDs[i];
+            const string = String.fromCodePoint(glyphID);
+            getGlyph(glyphID);
+            if (verticalizePunctuation.lookup[string]) {
+                getGlyph(verticalizePunctuation.lookup[string].codePointAt(0));
+            }
+        }
+
         if (!remaining) callback(undefined, glyphs, fontstack);
 
         const onRangeLoaded = (err, range, data) => {

diff --git a/js/symbol/quads.js b/js/symbol/quads.js
@@ -177,7 +177,7 @@ function getGlyphQuads(anchor, shaping, boxScale, line, layer, alongLine) {
             x2 = x1 + rect.w,
             y2 = y1 + rect.h,
 
-            center = new Point((x1 + x2) / 2, (y1 + y2) / 2),
+            center = new Point((x1 + x2) / 2, 0),
 
             otl = new Point(x1, y1).sub(center).rotate(positionedGlyph.angle).add(center),
             otr = new Point(x2, y1).sub(center).rotate(positionedGlyph.angle).add(center),

diff --git a/js/symbol/shaping.js b/js/symbol/shaping.js
@@ -1,6 +1,9 @@
 'use strict';
 
 const scriptDetection = require('../util/script_detection');
+const verticalizePunctuation = require('../util/verticalize_punctuation');
+const isCharInUnicodeBlock = require('../util/is_char_in_unicode_block');
+
 
 const WritingMode = {
     horizontal: 1,
@@ -38,6 +41,9 @@ const newLine = 0x0a;
 
 function shapeText(text, glyphs, maxWidth, lineHeight, horizontalAlign, verticalAlign, justify, spacing, translate, verticalHeight, writingMode) {
 
+    text = text.trim();
+    if (writingMode === WritingMode.vertical) text = verticalizePunctuation(text);
+
     const positionedGlyphs = [];
     const shaping = new Shaping(positionedGlyphs, text, translate[1], translate[1], translate[0], translate[0], writingMode);
 
@@ -46,27 +52,18 @@ function shapeText(text, glyphs, maxWidth, lineHeight, horizontalAlign, vertical
 
     let x = 0;
 
-    text = text.trim();
-
     for (let i = 0; i < text.length; i++) {
         const codePoint = text.charCodeAt(i);
         const glyph = glyphs[codePoint];
 
         if (!glyph && codePoint !== newLine) continue;
 
-        if (!scriptDetection.charAllowsVerticalWritingMode(text[i]) || writingMode === WritingMode.horizontal) {
+        if (!scriptDetection.charAllowsVerticalWritingMode(codePoint) || writingMode === WritingMode.horizontal) {
             positionedGlyphs.push(new PositionedGlyph(codePoint, x, yOffset, glyph, 0));
             if (glyph) x += glyph.advance + spacing;
 
-        } else if (writingMode === WritingMode.vertical) {
-            positionedGlyphs.push(new PositionedGlyph(
-                codePoint,
-                x,
-                glyph.rect && glyph.rect.h / 2 - 32,
-                glyph,
-                -Math.PI / 2
-            ));
-
+        } else {
+            positionedGlyphs.push(new PositionedGlyph(codePoint, x, yOffset, glyph, -Math.PI / 2));
             if (glyph) x += verticalHeight + spacing;
         }
     }

diff --git a/js/util/is_char_in_unicode_block.js b/js/util/is_char_in_unicode_block.js
@@ -71,7 +71,7 @@ module.exports = {
     // 'Combining Diacritical Marks Supplement': (char) => char >= 0x1DC0 && char <= 0x1DFF,
     // 'Latin Extended Additional': (char) => char >= 0x1E00 && char <= 0x1EFF,
     // 'Greek Extended': (char) => char >= 0x1F00 && char <= 0x1FFF,
-    // 'General Punctuation': (char) => char >= 0x2000 && char <= 0x206F,
+    'General Punctuation': (char) => char >= 0x2000 && char <= 0x206F,
     // 'Superscripts and Subscripts': (char) => char >= 0x2070 && char <= 0x209F,
     // 'Currency Symbols': (char) => char >= 0x20A0 && char <= 0x20CF,
     // 'Combining Diacritical Marks for Symbols': (char) => char >= 0x20D0 && char <= 0x20FF,

diff --git a/js/util/script_detection.js b/js/util/script_detection.js
@@ -45,7 +45,7 @@ module.exports.charAllowsIdeographicBreaking = function(char) {
     return false;
 };
 
-exports.charAllowsVerticalWritingMode = function(char) {
+exports.charAllowsVerticalWritingMode = function(char, includeNeutrals) {
     // Return early for characters outside all ranges that allow the vertical
     // writing mode.
     if (char < 0x1100) return false;
@@ -76,6 +76,10 @@ exports.charAllowsVerticalWritingMode = function(char) {
 
     if (isCharFullwidthForm(char)) return true;
 
+    if (includeNeutrals) {
+        if (isChar['General Punctuation'](char)) return true;
+    }
+
     return false;
 }
 

diff --git a/js/util/verticalize_punctuation.js b/js/util/verticalize_punctuation.js
@@ -0,0 +1,60 @@
+'use strict';
+
+const scriptDetection = require('./script_detection');
+
+module.exports = function verticalizePunctuation(input) {
+    let output = '';
+
+    for (let i = 0; i < input.length; i++) {
+        const charCode = input.charCodeAt(i);
+        const nextCharCode = input.charCodeAt(i + 1) || null;
+        const prevCharCode = input.charCodeAt(i - 1) || null;
+
+        const canReplacePunctuation = (
+            (!nextCharCode || scriptDetection.charAllowsVerticalWritingMode(nextCharCode, true)) &&
+            (!prevCharCode || scriptDetection.charAllowsVerticalWritingMode(prevCharCode, true))
+        );
+
+        if (canReplacePunctuation && lookup[input[i]]) {
+            output += lookup[input[i]];
+        } else {
+            output += input[i];
+        }
+    }
+
+    return output;
+}
+
+const lookup = module.exports.lookup = {
+  '。': '︒',
+  '—': '︱',
+  '–': '︲',
+  '_': '︳',
+  '（': '︵',
+  '）': '︶',
+  '｛': '︷',
+  '｝': '︸',
+  '〔': '︹',
+  '〕': '︺',
+  '〘': '︹',
+  '〙': '︺',
+  '【': '︻',
+  '】': '︼',
+  '《': '︽',
+  '》': '︾',
+  '〈': '︿',
+  '〉': '﹀',
+  '「': '﹁',
+  '」': '﹂',
+  '『': '﹃',
+  '』': '﹄',
+  '｢': '﹁',
+  '｣': '﹂',
+  '［': '﹇',
+  '］': '﹈',
+  '“': '﹁',
+  '”': '﹂',
+  '‘': '﹃',
+  '’': '﹄',
+  '.': '・'
+};
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "highlight.js": "9.3.0",
     "jsdom": "^9.4.2",
     "lodash.template": "^4.4.0",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#3462d7e88372be4df11e1ef8c1991bcf3e31aa93",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#b6281b1629b20746e9fff0628eba1138e56e5b7d",
     "minifyify": "^7.0.1",
     "npm-run-all": "^3.0.0",
     "nyc": "^8.3.0",