improve full-width characters rendering (#358)

* add option for width
* refine textWidth calculation
* add documentation and test

Author: ambar

README.md

@@ -114,6 +114,7 @@ The following are the default input options.
   useGlobalCache: false,          // use common <defs> for all equations?
   linebreaks: false,              // automatic linebreaking
   equationNumbers: "none",        // automatic equation numbering ("none", "AMS" or "all")
+  cjkCharWidth: 13,               // width of CJK character
 
   math: "",                       // the math string to typeset
   format: "TeX",                  // the input format (TeX, inline-TeX, AsciiMath, or MathML)

lib/main.js

@@ -31,6 +31,7 @@ var fs = require('fs');
 var path = require('path');
 var url = require('url');
 var jsdom = require('jsdom').jsdom;
+var isFullwidthCodePoint = require('is-fullwidth-code-point');
 
 require('./patch/jsdom.js').patch(jsdom);  //  Fix some bugs in jsdom
 
@@ -47,6 +48,7 @@ var defaults = {
   useGlobalCache: false,          // use common <defs> for all equations?
   linebreaks: false,              // do linebreaking?
   equationNumbers: "none",        // or "AMS" or "all"
+  cjkCharWidth: 13,               // width of CJK character
 
   math: "",                       // the math to typeset
   format: "TeX",                  // the input format (TeX, inline-TeX, AsciiMath, or MathML)
@@ -309,7 +311,11 @@ function ConfigureMathJax() {
             if (def["font-weight"] === "") delete def["font-weight"];
             this.SUPER(arguments).Init.call(this,def);
             SVG.addText(this.element,text);
-            var bbox = {width: text.length * 8.5, height: 18, y: -12};
+            // tweaking font fallback behavior: https://github.com/mathjax/MathJax-node/issues/299
+            var textWidth = text.split('')
+              .map(function(c) { return isFullwidthCodePoint(c.codePointAt()) ? data.cjkCharWidth : 8.5 })
+              .reduce(function(a, b) { return a + b }, 0);
+            var bbox = {width: textWidth, height: 18, y: -12};
             scale *= 1000/SVG.em;
             this.element.setAttribute("font-family","monospace");
             this.element.setAttribute("transform","scale("+scale+") matrix(1 0 0 -1 0 0)");

package.json

@@ -23,6 +23,7 @@
     "url": "git://github.com/mathjax/MathJax-node.git"
   },
   "dependencies": {
+    "is-fullwidth-code-point": "^2.0.0",
     "jsdom": "7.0 - 9.12",
     "mathjax": "*"
   },

test/svg-full-width-chars.js

@@ -0,0 +1,17 @@
+var tape = require('tape');
+var mjAPI = require("../lib/main.js");
+
+tape('the SVG output should renders full-width characters correctly', function(t) {
+  t.plan(1);
+
+  mjAPI.start();
+  var tex = '\\text{拾零}^i';
+
+  mjAPI.typeset({
+    math: tex,
+    format: "TeX",
+    svg: true
+  }, function(data) {
+    t.ok(data.width, '5.133ex', 'Width is correct');
+  });
+});