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:


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


Font files are huge and KaTeX includes a ton of fonts! ( 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, 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: