Handling formulae
pronoiac opened this issue · comments
Use case
We could use a way to handle formulae within Github markdown; I'm punting on the epub/pdf side. For embedding, a quick test of SVG seems to work. LaTeX is probably the best-supported way to specify formulae, but it's not directly supported in Github markdown.
Proposal
We replace the .gifs with a .tex source and a rendered .svg file.
The .tex files would make it easier to regenerate with different fonts, re-optimize, switch to png, etc.
My rough draft workflow
Original gif file, from chapter 9.9:
I never really learned LaTeX, so I'm slowly working in the codecogs editor.
This is with svg output, default font. I'm including the LaTeX source in the link description, in case the browser doesn't like the svg.
The tex file:
T_{100} \approx \phi^{100}\frac{1.1 \text{sec}}{\phi^{25}} \approx 5 \times 10^{15} \text{sec}
The markdown:
yields:
This looks much nicer when zoomed in than the original gif.
As a png, it looks like:
There are options for other fonts - Computer Modern looks like a nice sans serif font - and inline text, when it's within a paragraph.
Open Questions
Verify that inline SVG works as well as I think it does, in the major three/four browsers, and possibly in a pandoc pdf / epub in Bluefire.
As alternative markup, we could use something like readme2tex instead, with inline formatting like It is well known that if $ax^2 + bx + c = 0$ and
$$
\frac{n!}{k!(n-k)!} = {n \choose k}
$$
I'm not keen on readme2tex because:
- it looks like it generates png not svg by default
- I prefer markdown not html img tags
- it would introduce dependencies
Thoughts?
Looking into it, there are only around a dozen formulae gifs for the book. I've made headway on a branch with TeX svgs.
I thought to look for "svg fallback", and it's not too bad. It is html tags instead of markdown, but no Javascript is involved. It'll take png versions, which is easy enough. I can skip browser verification, then, though epubcheck could be useful later.
I'd planned to leave this issue open until I'd put in png fallbacks, but I don't see a way to do so in Github Markdown. What I attempted, visible in chapter 9.9 in my svg-fallback branch:
The picture tag:
<picture>
<source type="image/svg+xml" srcset="[svg link]">
<img src="[png link]" alt="[tex snippet]">
</picture>
The object tag:
<object data="[image as svg]" type="image/svg+xml">
<img src="[image as png]" alt="[alt text]" />
</object>
On Github, only the pngs are shown.
"Just use svg" seems good enough for now.
Ah, closing out tabs, I might have a workaround, involving onerror. I'll tag this issue from the PR.