I’ve written some code that places nicely typeset labels in an SVG using KaTeX and SVG’s foreignObject element. I’ve got a couple of versions of a cycloid with the tick labels written as integer multiples of pi.
- An old school version where the cycloid interactive and slider controls in a single HTML container and
- a newer version where the interactive sliders are generated with the
viewof operator and placed in separate cells.
The old school version works as expected in all browsers that I’ve tried.
The newer version has issues that manifest differently in Firefox and Chrome. In Firefox, the typeset tick labels appear twice. The second tick label looks like a lower quality fallback as shown in the image below. In Chrome, the labels also appear twice, once as a non-typeset TeX string and once as a crummy looking fallback. As far as I can tell, KaTeX is not generating any errors.
I’m not really sure exactly what’s going on here but I will say that I don’t have a lot of experience dealing with generators. I’d appreciate feedback on the new version that anyone has.
The problem is that your newer version doesn’t include KaTeX’s stylesheet. The old one only worked by coincidence—there’s a cell where you use Observable’s built-in tex template literal, which by side-effect loads KaTeX’s stylesheet. But since you are invoking KaTeX explicitly, it’s better to load the KaTeX stylesheet explicitly, too.
Here’s a suggestion for you to merge:
I also simplified how you’re invoking katex.render using selection.each. You should avoid selecting by id in Observable (at least, from the entire document); see Tom’s re-selecting elements antipattern for explanation.
1 Like
@mbostock
Very nice - thanks! I’ve used MathJaX quite a lot but I haven’t used KaTeX before. I was unaware of the style sheet dependence.
Another option that just occurred to me is that you can use the tex built-in directly and avoid loading KaTeX yourself:
I wondered whether that was possible or not. That certainly would seem to be more efficient when working in Observable.
One question, though: I generally intend to embed these types of tools into my own web pages. My guess is that Observable’s built in KaTeX would not be included in such an embedding, while a version of KaTeX imported via require would be included. If so, then I guess I should stick with the require version??
Although, maybe I’m totally wrong about that. 
If you’re using our open-source runtime (per the embedding notebook), it’ll include our standard library and will work out of the box on your own website.
1 Like
