To convert LaTeX to HTML5 with tufte-css layout one first needs to copy the file tufte.css and the corresponding font directory et-book from the tufte-css github repo into your working directory.
Then we need to extract the default html5 template from pandoc via
pandoc -D html5 > html5.html
This template must be modified and the tags <article> and <section> should be added around the body of the template like
<body>
<article>
<section>
....
</section>
</article>
</body>
We stored the new template as tufte_template.html.
Then we need to create a custom lua HTML writer for pandoc which will convert footnotes to sidenotes:
function Writer (doc, opts)
local filter = {
Note = function(elem)
text = pandoc.utils.stringify(elem.content)
return pandoc.RawInline('html','<span class="sidenote-number"></span><span class="sidenote">' .. text .. '</span>')
end
}
return pandoc.write(doc:walk(filter), 'html', opts)
end
We save it as tufte_html.lua .
To finally convert our LaTeX file myfile.tex to Tufte HTML myfile.html we use the command
pandoc --wrap=preserve --bibliography=promotion.bib --citeproc -t tufte_html.lua --template tufte_template.html -c tufte.css --mathjax --toc -s myfile.tex -o myfile.html
The following problems are unsolved:
- equation numbering and reference don't work
- math equations in sidenotes are not rendered
- sidenotes loose any formating because we
stringify(elem.content) - very wide equations of links overlap with sidenotes (especially when zooming)
- font size of references in bibliography is much too small