Update fonts from MathJax

Summary:
Also, rename all of our uses of fonts to use the uppercased versions. We want to
use the uppercase versions because it makes updating and modifying the fonts
much easier (since the font names inside the actual font files are uppercased).

Test Plan:
  - Make sure the huxley screenshots look good (You can compare a diff of them
    on github at
    f90d093361
    By my eye, it seems like some things have moved up ~1/2 pixel, and some of
    the fonts have maybe slightly changed shape, like the large `b` in
    SizingBaseline)

Reviewers: alpert

Reviewed By: alpert

Differential Revision: http://phabricator.khanacademy.org/D11979

buildTree.js

@@ -477,7 +477,7 @@ var groupTypes = {
         // Make an inner span with the given offset and in the given font
         var makeInner = function(symbol, offset, font) {
             var sizeClass;
-            if (font === "size1-regular") {
+            if (font === "Size1-Regular") {
                 sizeClass = "size1";
             }
 
@@ -527,7 +527,7 @@ var groupTypes = {
 
             // There are three parts, the top, a repeated middle, and a bottom.
             var top = middle = bottom = original;
-            var font = "size1-regular";
+            var font = "Size1-Regular";
             var overlap = false;
 
             // We set the parts and font based on the symbol. Note that we use
@@ -686,19 +686,19 @@ var makeText = function(value, style, mode) {
 };
 
 var mathit = function(value, mode) {
-    return makeSpan(["mathit"], [makeText(value, "math-italic", mode)]);
+    return makeSpan(["mathit"], [makeText(value, "Math-Italic", mode)]);
 };
 
 var mathrm = function(value, mode) {
     if (symbols[mode][value].font === "main") {
-        return makeText(value, "main-regular", mode);
+        return makeText(value, "Main-Regular", mode);
     } else {
-        return makeSpan(["amsrm"], [makeText(value, "ams-regular", mode)]);
+        return makeSpan(["amsrm"], [makeText(value, "AMS-Regular", mode)]);
     }
 };
 
 var mathrmSize = function(value, size, mode) {
-    return makeText(value, "size" + size + "-regular", mode);
+    return makeText(value, "Size" + size + "-Regular", mode);
 }
 
 var buildTree = function(tree) {

dockers/MathJaxFonts/Dockerfile

@@ -0,0 +1,44 @@
+FROM ubuntu:14.04
+MAINTAINER xymostech <xymostech@gmail.com>
+
+# Install things
+RUN apt-get -qq update
+RUN apt-get -qqy install git dvipng default-jre default-jdk texlive wget fontforge mftrace fonttools optipng advancecomp man-db build-essential unzip zlib1g-dev || true
+
+# Download yuicompressor
+RUN mkdir /usr/share/yui-compressor/
+RUN wget "https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar" -O /usr/share/yui-compressor/yui-compressor.jar
+
+# Download batik-ttf2svg.jar
+RUN wget "http://supergsego.com/apache/xmlgraphics/batik/batik-1.7.zip"
+RUN unzip -qq batik-1.7.zip
+RUN mv batik-1.7/batik-ttf2svg.jar /usr/share/java/
+
+# Download and compile ttf2eof (note we add a patch to make it compile)
+RUN wget "https://ttf2eot.googlecode.com/files/ttf2eot-0.0.2-2.tar.gz"
+RUN tar -xzf ttf2eot-0.0.2-2.tar.gz
+RUN sed -i "1s/^/#include <cstddef>/" ttf2eot-0.0.2-2/OpenTypeUtilities.h
+RUN make -C ttf2eot-0.0.2-2/
+RUN mv ttf2eot-0.0.2-2/ttf2eot /usr/bin/
+
+# Download and compile sfnt2woff
+RUN wget "http://people.mozilla.org/~jkew/woff/woff-code-latest.zip"
+RUN unzip -d sfnt2woff woff-code-latest.zip
+RUN make -C sfnt2woff
+RUN mv sfnt2woff/sfnt2woff /usr/bin/
+
+# Add a symlink so MathJax can find the TeX fonts
+RUN ln -s /usr/share/texlive/texmf-dist /usr/share/
+
+# Download and setup MathJax-dev
+RUN git clone "https://github.com/mathjax/MathJax-dev.git"
+RUN cp MathJax-dev/default.cfg MathJax-dev/custom.cfg
+RUN make -C MathJax-dev custom.cfg.pl
+
+# Fix for a new version of ttx
+RUN sed -i "s/Space.otf/Space.ttf/" MathJax-dev/fonts/OTF/TeX/makeFF
+
+# Change the names of the generated fonts and font files to KaTeX
+RUN sed -i "s/MathJax/KaTeX/g" MathJax-dev/fonts/OTF/TeX/makeFF
+RUN sed -i "s/MathJax/KaTeX/g" MathJax-dev/fonts/OTF/TeX/Makefile
+

dockers/MathJaxFonts/README.md

@@ -0,0 +1,66 @@
+### How to generate MathJax fonts
+-----------------------------
+
+It's really simple (now)! Just make a docker image from the included Dockerfile
+using a command like
+
+  sudo docker build --tag=mathjaxfonts .
+
+from within this directory (note you need to have docker installed and running
+for this to work). This will build a docker image with the mathjaxfonts tag,
+which you can then use to run dockers based on them. Then, run a mathjaxfonts
+docker with
+
+  sudo docker run --interactive --tty mathjaxfonts --name mjf /bin/bash
+
+We name this docker "mjf" so we can reference it later when we want to copy the
+files off. (If you get an error about the name being in use, perhaps because you
+are trying to create another docker, you can either delete the old docker with
+
+  sudo docker rm mjf
+
+or use a different name.) This will get you into the docker in the root
+directory. From there, cd into the `/MathJax-dev/fonts/OTF/TeX` directory, and
+run
+
+  make ttf eot woff
+
+to build all of the fonts that we need. Finally, leave the docker and copy all
+the files off with
+
+  docker cp mjf:/MathJax-dev/fonts/OTF/TeX/ttf ./
+  docker cp mjf:/MathJax-dev/fonts/OTF/TeX/eot ./
+  docker cp mjf:/MathJax-dev/fonts/OTF/TeX/woff ./
+
+(note we're using `mjf:` to specify the name of the docker we created above)
+Compile the fonts into a single directory
+
+  mv {ttf,eot,woff}/* ./
+
+Remove the WinIE6 and WinChrome fonts
+
+  rm KaTeX_Win*
+
+And you're good to go! Don't forget to update the font metrics with the
+metric_parse.rb script once you're done.
+
+### General Docker Help
+-----------------------
+
+When you quit the docker, it will stop the docker from running. If you want to
+reattach to the docker, you can start it again with
+
+  sudo docker start mjf
+
+and then attach with
+
+  sudo docker attach mjf
+
+Alternatively, if you want to detach from the docker when you're done instead of
+quitting and stopping it, you can detach with `C-p C-q`, and then re-attach with
+
+  sudo docker attach mjf
+
+To see a list of your current dockers, you can run
+
+  docker ps

metric_parse.rb

@@ -39,9 +39,9 @@ end
 font_dir = File.join(File.dirname(__FILE__), 'static/fonts/')
 metrics = {}
 
-%w[main-regular math-italic ams-regular
+%w[Main-Regular Math-Italic AMS-Regular
-   size1-regular size2-regular size3-regular size4-regular].each do |face|
+   Size1-Regular Size2-Regular Size3-Regular Size4-Regular].each do |face|
-  metrics[face] = metrics_for_file(File.join(font_dir, 'katex_%s.ttf' % face))
+  metrics[face] = metrics_for_file(File.join(font_dir, 'KaTeX_%s.ttf' % face))
 end
 
 puts "var metricMap = %s;" % metrics.to_json

static/fonts/fonts.css

@@ -1,239 +1,239 @@
 @font-face {
-    font-family: 'katex_ams';
+    font-family: 'KaTeX_AMS';
-    src: url('katex_ams-regular.eot');
+    src: url('KaTeX_AMS-Regular.eot');
-    src: url('katex_ams-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_AMS-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_ams-regular.woff') format('woff'),
+         url('KaTeX_AMS-Regular.woff') format('woff'),
-         url('katex_ams-regular.ttf') format('truetype');
+         url('KaTeX_AMS-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_caligraphic';
+    font-family: 'KaTeX_Caligraphic';
-    src: url('katex_caligraphic-bold.eot');
+    src: url('KaTeX_Caligraphic-Bold.eot');
-    src: url('katex_caligraphic-bold.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Caligraphic-Bold.eot?#iefix') format('embedded-opentype'),
-         url('katex_caligraphic-bold.woff') format('woff'),
+         url('KaTeX_Caligraphic-Bold.woff') format('woff'),
-         url('katex_caligraphic-bold.ttf') format('truetype');
+         url('KaTeX_Caligraphic-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_caligraphic';
+    font-family: 'KaTeX_Caligraphic';
-    src: url('katex_caligraphic-regular.eot');
+    src: url('KaTeX_Caligraphic-Regular.eot');
-    src: url('katex_caligraphic-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Caligraphic-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_caligraphic-regular.woff') format('woff'),
+         url('KaTeX_Caligraphic-Regular.woff') format('woff'),
-         url('katex_caligraphic-regular.ttf') format('truetype');
+         url('KaTeX_Caligraphic-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_fraktur';
+    font-family: 'KaTeX_Fraktur';
-    src: url('katex_fraktur-bold.eot');
+    src: url('KaTeX_Fraktur-Bold.eot');
-    src: url('katex_fraktur-bold.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Fraktur-Bold.eot?#iefix') format('embedded-opentype'),
-         url('katex_fraktur-bold.woff') format('woff'),
+         url('KaTeX_Fraktur-Bold.woff') format('woff'),
-         url('katex_fraktur-bold.ttf') format('truetype');
+         url('KaTeX_Fraktur-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_fraktur';
+    font-family: 'KaTeX_Fraktur';
-    src: url('katex_fraktur-regular.eot');
+    src: url('KaTeX_Fraktur-Regular.eot');
-    src: url('katex_fraktur-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Fraktur-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_fraktur-regular.woff') format('woff'),
+         url('KaTeX_Fraktur-Regular.woff') format('woff'),
-         url('katex_fraktur-regular.ttf') format('truetype');
+         url('KaTeX_Fraktur-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_greek';
+    font-family: 'KaTeX_Greek';
-    src: url('katex_greek-bold.eot');
+    src: url('KaTeX_Greek-Bold.eot');
-    src: url('katex_greek-bold.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Greek-Bold.eot?#iefix') format('embedded-opentype'),
-         url('katex_greek-bold.woff') format('woff'),
+         url('KaTeX_Greek-Bold.woff') format('woff'),
-         url('katex_greek-bold.ttf') format('truetype');
+         url('KaTeX_Greek-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_greek';
+    font-family: 'KaTeX_Greek';
-    src: url('katex_greek-bolditalic.eot');
+    src: url('KaTeX_Greek-BoldItalic.eot');
-    src: url('katex_greek-bolditalic.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Greek-BoldItalic.eot?#iefix') format('embedded-opentype'),
-         url('katex_greek-bolditalic.woff') format('woff'),
+         url('KaTeX_Greek-BoldItalic.woff') format('woff'),
-         url('katex_greek-bolditalic.ttf') format('truetype');
+         url('KaTeX_Greek-BoldItalic.ttf') format('truetype');
     font-weight: bold;
     font-style: italic;
 }
 
 @font-face {
-    font-family: 'katex_greek';
+    font-family: 'KaTeX_Greek';
-    src: url('katex_greek-italic.eot');
+    src: url('KaTeX_Greek-Italic.eot');
-    src: url('katex_greek-italic.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Greek-Italic.eot?#iefix') format('embedded-opentype'),
-         url('katex_greek-italic.woff') format('woff'),
+         url('KaTeX_Greek-Italic.woff') format('woff'),
-         url('katex_greek-italic.ttf') format('truetype');
+         url('KaTeX_Greek-Italic.ttf') format('truetype');
     font-weight: normal;
     font-style: italic;
 }
 
 @font-face {
-    font-family: 'katex_greek';
+    font-family: 'KaTeX_Greek';
-    src: url('katex_greek-regular.eot');
+    src: url('KaTeX_Greek-Regular.eot');
-    src: url('katex_greek-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Greek-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_greek-regular.woff') format('woff'),
+         url('KaTeX_Greek-Regular.woff') format('woff'),
-         url('katex_greek-regular.ttf') format('truetype');
+         url('KaTeX_Greek-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_main';
+    font-family: 'KaTeX_Main';
-    src: url('katex_main-bold.eot');
+    src: url('KaTeX_Main-Bold.eot');
-    src: url('katex_main-bold.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Main-Bold.eot?#iefix') format('embedded-opentype'),
-         url('katex_main-bold.woff') format('woff'),
+         url('KaTeX_Main-Bold.woff') format('woff'),
-         url('katex_main-bold.ttf') format('truetype');
+         url('KaTeX_Main-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_main';
+    font-family: 'KaTeX_Main';
-    src: url('katex_main-italic.eot');
+    src: url('KaTeX_Main-Italic.eot');
-    src: url('katex_main-italic.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Main-Italic.eot?#iefix') format('embedded-opentype'),
-         url('katex_main-italic.woff') format('woff'),
+         url('KaTeX_Main-Italic.woff') format('woff'),
-         url('katex_main-italic.ttf') format('truetype');
+         url('KaTeX_Main-Italic.ttf') format('truetype');
     font-weight: normal;
     font-style: italic;
 }
 
 @font-face {
-    font-family: 'katex_main';
+    font-family: 'KaTeX_Main';
-    src: url('katex_main-regular.eot');
+    src: url('KaTeX_Main-Regular.eot');
-    src: url('katex_main-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Main-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_main-regular.woff') format('woff'),
+         url('KaTeX_Main-Regular.woff') format('woff'),
-         url('katex_main-regular.ttf') format('truetype');
+         url('KaTeX_Main-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_math';
+    font-family: 'KaTeX_Math';
-    src: url('katex_math-bolditalic.eot');
+    src: url('KaTeX_Math-BoldItalic.eot');
-    src: url('katex_math-bolditalic.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Math-BoldItalic.eot?#iefix') format('embedded-opentype'),
-         url('katex_math-bolditalic.woff') format('woff'),
+         url('KaTeX_Math-BoldItalic.woff') format('woff'),
-         url('katex_math-bolditalic.ttf') format('truetype');
+         url('KaTeX_Math-BoldItalic.ttf') format('truetype');
     font-weight: bold;
     font-style: italic;
 }
 
 @font-face {
-    font-family: 'katex_math';
+    font-family: 'KaTeX_Math';
-    src: url('katex_math-italic.eot');
+    src: url('KaTeX_Math-Italic.eot');
-    src: url('katex_math-italic.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Math-Italic.eot?#iefix') format('embedded-opentype'),
-         url('katex_math-italic.woff') format('woff'),
+         url('KaTeX_Math-Italic.woff') format('woff'),
-         url('katex_math-italic.ttf') format('truetype');
+         url('KaTeX_Math-Italic.ttf') format('truetype');
     font-weight: normal;
     font-style: italic;
 }
 
 @font-face {
-    font-family: 'katex_math';
+    font-family: 'KaTeX_Math';
-    src: url('katex_math-regular.eot');
+    src: url('KaTeX_Math-Regular.eot');
-    src: url('katex_math-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Math-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_math-regular.woff') format('woff'),
+         url('KaTeX_Math-Regular.woff') format('woff'),
-         url('katex_math-regular.ttf') format('truetype');
+         url('KaTeX_Math-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_sansserif';
+    font-family: 'KaTeX_SansSerif';
-    src: url('katex_sansserif-bold.eot');
+    src: url('KaTeX_SansSerif-Bold.eot');
-    src: url('katex_sansserif-bold.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_SansSerif-Bold.eot?#iefix') format('embedded-opentype'),
-         url('katex_sansserif-bold.woff') format('woff'),
+         url('KaTeX_SansSerif-Bold.woff') format('woff'),
-         url('katex_sansserif-bold.ttf') format('truetype');
+         url('KaTeX_SansSerif-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_sansserif';
+    font-family: 'KaTeX_SansSerif';
-    src: url('katex_sansserif-italic.eot');
+    src: url('KaTeX_SansSerif-Italic.eot');
-    src: url('katex_sansserif-italic.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_SansSerif-Italic.eot?#iefix') format('embedded-opentype'),
-         url('katex_sansserif-italic.woff') format('woff'),
+         url('KaTeX_SansSerif-Italic.woff') format('woff'),
-         url('katex_sansserif-italic.ttf') format('truetype');
+         url('KaTeX_SansSerif-Italic.ttf') format('truetype');
     font-weight: normal;
     font-style: italic;
 }
 
 @font-face {
-    font-family: 'katex_sansserif';
+    font-family: 'KaTeX_SansSerif';
-    src: url('katex_sansserif-regular.eot');
+    src: url('KaTeX_SansSerif-Regular.eot');
-    src: url('katex_sansserif-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_SansSerif-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_sansserif-regular.woff') format('woff'),
+         url('KaTeX_SansSerif-Regular.woff') format('woff'),
-         url('katex_sansserif-regular.ttf') format('truetype');
+         url('KaTeX_SansSerif-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_script';
+    font-family: 'KaTeX_Script';
-    src: url('katex_script-regular.eot');
+    src: url('KaTeX_Script-Regular.eot');
-    src: url('katex_script-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Script-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_script-regular.woff') format('woff'),
+         url('KaTeX_Script-Regular.woff') format('woff'),
-         url('katex_script-regular.ttf') format('truetype');
+         url('KaTeX_Script-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_size1';
+    font-family: 'KaTeX_Size1';
-    src: url('katex_size1-regular.eot');
+    src: url('KaTeX_Size1-Regular.eot');
-    src: url('katex_size1-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Size1-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_size1-regular.woff') format('woff'),
+         url('KaTeX_Size1-Regular.woff') format('woff'),
-         url('katex_size1-regular.ttf') format('truetype');
+         url('KaTeX_Size1-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_size2';
+    font-family: 'KaTeX_Size2';
-    src: url('katex_size2-regular.eot');
+    src: url('KaTeX_Size2-Regular.eot');
-    src: url('katex_size2-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Size2-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_size2-regular.woff') format('woff'),
+         url('KaTeX_Size2-Regular.woff') format('woff'),
-         url('katex_size2-regular.ttf') format('truetype');
+         url('KaTeX_Size2-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_size3';
+    font-family: 'KaTeX_Size3';
-    src: url('katex_size3-regular.eot');
+    src: url('KaTeX_Size3-Regular.eot');
-    src: url('katex_size3-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Size3-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_size3-regular.woff') format('woff'),
+         url('KaTeX_Size3-Regular.woff') format('woff'),
-         url('katex_size3-regular.ttf') format('truetype');
+         url('KaTeX_Size3-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_size4';
+    font-family: 'KaTeX_Size4';
-    src: url('katex_size4-regular.eot');
+    src: url('KaTeX_Size4-Regular.eot');
-    src: url('katex_size4-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Size4-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_size4-regular.woff') format('woff'),
+         url('KaTeX_Size4-Regular.woff') format('woff'),
-         url('katex_size4-regular.ttf') format('truetype');
+         url('KaTeX_Size4-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'katex_typewriter';
+    font-family: 'KaTeX_Typewriter';
-    src: url('katex_typewriter-regular.eot');
+    src: url('KaTeX_Typewriter-Regular.eot');
-    src: url('katex_typewriter-regular.eot?#iefix') format('embedded-opentype'),
+    src: url('KaTeX_Typewriter-Regular.eot?#iefix') format('embedded-opentype'),
-         url('katex_typewriter-regular.woff') format('woff'),
+         url('KaTeX_Typewriter-Regular.woff') format('woff'),
-         url('katex_typewriter-regular.ttf') format('truetype');
+         url('KaTeX_Typewriter-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }