Best way to integrate tikzjax into cards

Anki Card Design
1

I’m trying to include tikzjax diagrams in my anki cards.

Tikzjax instruction says to include

<link rel="stylesheet" type="text/css" href="http://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>

in the <head> tag of the html,

and to include the tikz diagram content itself

<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}
</script>

in the <body> tag of the html.

But I understand Anki does not allow script tags in fields (I tried it, and they are automatically removed by the editor).

One option is to place the script tags in the card template definition.
I tried this too but

  1. It didn’t work: the diagram does not appear. (Perhaps because card templates don’t correspond to the <head> tag?)
  2. Even if it did work, how would I insert diagrams on a per-card basis, instead the same diagram across all cards (using the same template)? Perhaps by defining a custom script which replaces <div class=tikz> tags in card content with the <script type="text/tikz"> tikzjax expects?
2

How about this?

Put each diagram you want to display into a note field. For example, let’s say this is a field called TikzDiagram1 and then you’d have more diagrams in TikzDiagram2, TikzDiagram3 etc.

TikzDiagram1 field in your note

\begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}

Then put the scripts into your card template instead

Card Front/Back

<link rel="stylesheet" type="text/css" href="http://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>

<script type="text/tikz">
  {{TikzDiagram1}}
</script>

<script type="text/tikz">
  {{TikzDiagram2}}
</script>


<script type="text/tikz">
  {{TikzDiagram3}}
</script>
1 Like
3

Well, I tested that and it indeed doesn’t work. Something is going wrong in importing the script. The way imported scripts work in the card template is different from web pages after all so this is common.

If the TikZjax function was called at the end of the card template, I think it should work but that doesn’t seem to be happening by simply importing the script.

The script itself needs to be modified somehow.

1 Like
4

Thanks that testing it out @jhhr!

Hmm, one disadvantage of that approach though is that you need an extra field per diagram. In my card usage, I have a varying and potentially unbounded number of diagrams per card.

And yeah I suspected it had something to do with script loading order. If I understand what you are suggesting correctly, is it because what the tikzjax script does is to replace all <script type="text/tikz"> occurrences with the rendered svgs, but it can only do this if the <script type="text/tikz"> are themselves in the DOM already? So that the script doing the replacement has to be run only after anki has rendered the card’s DOM?

1 Like
5

I changed my test to do this:


<script type="text/tikz">
  {{TikzDiagram1}}
</script>


<script src="https://tikzjax.com/v1/tikzjax.js"></script>

<script>
window.onload(() => {
})
</script>

And started getting this error in the TikZjax code.

image
image843×112 4.88 KB

Without the seemingly irrelevant empty onload func nothing happened, but with it added, I started getting that error. This seems to a be bug in the source code. With the window.onload() call added, it finally actually called TikZjax(window).

It seems that the problem could be tikzjax’s use of webassembly. I have no experience with wasm so I’m just guessing and googling about this. Based on this stackoverflow I’m guessing Anki’s card renderer has some limitations put on compiling wasm?

After checking the repo some more, there’s a recent PR from a week ago that is fixing some issues and would also allow calling TikZjax() separately instead of on loading the script. I’m not sure if using the version in that would fix the WebAssembly.Compile error though.

In the end, the solution is probably to to fork the repo (or better yet rei2hu’s fork with workers) and host your own version of the script.

1 Like
6

Thanks @jhhr.

I tried building rei2hu’s fork and couldn’t get it to work, but I’m not familiar with the tech, so I think it’ll take me too much effort/time to figure out.

Oh well. Hope this thread will be helpful anyways to anyone else who might want to try the same.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.