Vendoring less and font files for LaTeX support via KaTeX

In order to add LaTeX support (via KaTex) I have to vendor in some font files. While doing this I ran into two issues:

First:

My plan is to add the katex library as a dependency in packages.json, so that’ll be pulled in by npm and isn’t a problem. I also need to add some style resources (a couple of less files and font files), that get bundled into the bokeh css resources. My initial plan was to add a bokehjs/src/vendor/katex-0.5.1 directory containing the less and font files, then add a src/less/katex.less file that imports the styles and base64 encodes the fonts (similar to how we handle the font-awesome resources).

The problem is that a couple of the necessary font files are over the IE8-safe limit (32kb) when encoded, so gulp-less won’t encode them without adding an { ieCompat: false } flag.

I don’t have enough domain expertise to know if/how bad this is. Potential solutions are:

  • Add the { ieCompat: false } flag

  • Manually base64 encode the fonts and add them to the src/less/katex.less file

  • Other

Second:

Font files are huge and KaTeX includes a ton of fonts! (https://github.com/Khan/KaTeX/blob/master/static/fonts.less) Assuming we don’t want to add 500kb of fonts to our css resources, I commented out all but the four that seem most important and use a single format (assuming that that woff has the same browser support as bokeh per https://github.com/Khan/KaTeX/wiki/Font-Options), but bokeh.css and bokeh.min.css still increase by 180kb (roughly doubling in size). Again, I’m unsure how bad this is. Potential solutions are:

  • Just go with it, as-is

  • use another latex implementation (on quick glance, using MathJax would have the same font problems)

  • don’t support latex

  • load fonts from CDN and don’t bundle them?

  • create another css resource: fonts.css

  • don’t include fonts at all (the latex layout still works, but the font styling doesn’t happen)

  • Other

You can see the source and an example in the PR branch at: https://github.com/bokeh/bokeh/pull/3956