Add a build step to generate extended metrics that additionally contain glyph widths

Summary:
The ability to use pre-determined character widths will benefit alternative
layout engines such as gagern's canvas layout engine.  I would also like to
experiment would using CSS transforms to absolutely position each glyph.  This
diff adds a new make rule, make extended_metrics, which generates metrics that
also containing glyph widths.

Test Plan:
- run `make extended_metrics`
- verify that fontMetricsData.js contains entries with 5 numbers instead of 4

Reviewers: emily alpert

Makefile

@@ -85,6 +85,9 @@ PYTHON=$(shell python2 --version >/dev/null 2>&1 && echo python2 || echo python)
 metrics:
 	cd metrics && $(PERL) ./mapping.pl | $(PYTHON) ./extract_tfms.py | $(PYTHON) ./extract_ttfs.py | $(PYTHON) ./format_json.py > ../src/fontMetricsData.js
 
+extended_metrics:
+	cd metrics && $(PERL) ./mapping.pl | $(PYTHON) ./extract_tfms.py | $(PYTHON) ./extract_ttfs.py | $(PYTHON) ./format_json.py --width > ../src/fontMetricsData.js
+
 clean:
 	rm -rf build/*
 

metrics/extract_tfms.py

@@ -85,6 +85,7 @@ def main():
             height = round(tfm_char.height + yshift / 1000.0, 5)
             depth = round(tfm_char.depth - yshift / 1000.0, 5)
             italic = round(tfm_char.italic_correction, 5)
+            width = round(tfm_char.width, 5)
 
             skewkern = 0.0
             if (font_skewchar[font] and
@@ -97,6 +98,7 @@ def main():
                 'depth': depth,
                 'italic': italic,
                 'skew': skewkern,
+                'width': width
             }
 
     sys.stdout.write(

metrics/extract_ttfs.py

@@ -87,22 +87,25 @@ def main():
                 continue
             name = names.pop()
 
-            height = depth = italic = skew = 0
+            height = depth = italic = skew = width = 0
             glyph = glyf[name]
             if glyph.numberOfContours:
                 height = glyph.yMax
                 depth = -glyph.yMin
+                width = glyph.xMax - glyph.xMin
             if base_char:
                 base_char_str = str(ord(base_char))
                 base_metrics = start_json[font][base_char_str]
                 italic = base_metrics["italic"]
                 skew = base_metrics["skew"]
+                width = base_metrics["width"]
 
             start_json[font][str(code)] = {
                 "height": height / unitsPerEm,
                 "depth": depth / unitsPerEm,
                 "italic": italic,
                 "skew": skew,
+                "width": width
             }
 
     sys.stdout.write(

metrics/format_json.py

@@ -3,6 +3,12 @@
 import sys
 import json
 
+props = ['depth', 'height', 'italic', 'skew']
+
+if len(sys.argv) > 1:
+    if sys.argv[1] == '--width':
+        props.append('width')
+
 data = json.load(sys.stdin)
 sep = "module.exports = {\n"
 for font in sorted(data):
@@ -11,10 +17,8 @@ for font in sorted(data):
     for glyph in sorted(data[font], key=int):
         sys.stdout.write(sep + json.dumps(glyph) + ": ")
         
-        values = [data[font][glyph][key] for key in
-            ['depth', 'height', 'italic', 'skew']]
-            
-        values = [value if value != 0.0 else 0 for value in values]
+        values = [value if value != 0.0 else 0 for value in 
+                  [data[font][glyph][key] for key in props]]
             
         sys.stdout.write(json.dumps(values))
         sep = ",\n  "

src/fontMetrics.js

@@ -123,7 +123,10 @@ var metricMap = require("./fontMetricsData");
 
 /**
  * This function is a convenience function for looking up information in the
- * metricMap table. It takes a character as a string, and a style
+ * metricMap table. It takes a character as a string, and a style.
+ * 
+ * Note: the `width` property may be undefined if fontMetricsData.js wasn't
+ * built using `Make extended_metrics`.
  */
 var getCharacterMetrics = function(character, style) {
     var metrics = metricMap[style][character.charCodeAt(0)];
@@ -132,7 +135,8 @@ var getCharacterMetrics = function(character, style) {
             depth: metrics[0],
             height: metrics[1],
             italic: metrics[2],
-            skew: metrics[3]
+            skew: metrics[3],
+            width: metrics[4]
         };
     }
 };