I do the bulk of my LaTeX work using tufte-handout and tufte-book classes, which I normally compire to PDF using LuaLaTeX. Recently I've been toying with trying to output my work as HTML, using htlatex or others, but the HTML output is uniformly awful. I've tried just naively adding to tufte-css to the output of the html file generated by htlatex, and got an unholy mess. Is there a good workflow for making this work?

Edited to include an MWE:



    Here is some text. \marginnote{Here is a margin note.}
    Here is some math: \(a^2+b^2=c^2\)


I compiled this to HTML using htlatex, and added tufte.css to the header, and it actually worked pretty well. Unfortunately, this same workflow does not seem to work with more complicated documents.

  • can you please add a mwe?
    – michal.h21
    Nov 12, 2020 at 19:08

1 Answer 1


It is possible to configure TeX4ht to produce output expected by Tufte HTML. At the moment, I have working verbatim, notes, bibliography, sections, \maketitle and figures.

Here is a sample document:

\title{Sample Document}
\author{Michal Hoftich}

This is an example of Tufte \LaTeX\ document converted to Tufte HTML using \TeX4ht\footnote{\url{https://tug.org/tex4ht/}}.
It shows various commands provided by Tufte classes. Most of the text are just random words 
provided by the Kantlipsum\footnote{\url{https://ctan.org/pkg/kantlipsum?lang=en}} package, so please don't 
try to find a message in that.

  \caption{Example margin figure}

\section{First section}

Here is some math: \(a^2+b^2=c^2\)



\subsection{Hello, subsection}

  \caption{Example figure}


% \begin{margintable}
%   \begin{tabular}{l l}
%     hello & world\\
%     second & line
%   \end{tabular}
%   \caption{Margin table}
% \end{margintable}

  \caption{Full width figure}
Hello verbatim 
Some special characters: {|}\ % "

\newthought{We can try thought} \allcaps{uppercase} \textit{příliš žluťoučký kůň} \kant[3]

I am also interested in footnotes\footnote{Hello, this is a footnote}. \kant[4]

Another paragraph, try sidenote this time\sidenote{This is a sidenote}. And also marginnote\marginnote{Hello, this is a marginnote}.

I want to try citations\cite{Tufte2001,Tufte1990,Tufte1997,Tufte2006}.

  This paragraphs is in full size \kant[5]



I've used this .bib file to test the bibliography support.

The support is now just in the form of a .cfg file:

% add tufte.css to your document

% helper macro to close the current paragraph

% insert <article> element to the document body

% Tufte LaTeX makes \section and \subsection to behave like \section* and \subsection*
% so we need to configure like<section level>
% These configurations insert <section> elements and print titles in apropriate header elements


% we must redefine TOC to print starred sectioning commands
% \TableOfContents is provided by TeX4ht

% custom \maketitle
    \HCode{<p class="subtitle">}\@author\HCode{</p>}%
    \HCode{<p class="subtitle">}\@date\HCode{</p>}%

% make images resize automatically
\Css{img {
    max-width: 100\%;
    height: auto;

% fix for commands redefined by soul

% footnotes and sidenotes

\bgroup% make font changes local
  \HCode{<label for="sitenote-\thempfn" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sidenote-\thempfn" class="margin-toggle" />}%
  \HCode{<span class="sidenote">}#3\HCode{</span>}%
\bgroup% make font changes local
  \HCode{<label for="sitenote-\thempfn" class="margin-toggle"></label><input type="checkbox" id="sidenote-\thempfn" class="margin-toggle" />}%
  \HCode{<span class="marginnote">}#2\HCode{</span>}%

% environments

\ConfigureEnv{fullwidth}{\endparagraph\HCode{<div class="fullwidth">}%
\ConfigureList{list}{}{}{}{}% fullwidth uses list environment internally, we don't need this
\par\ShowPar\indent% require insertion of paragraph

% floats


% redefine internal margin float environment in order to prevent use of minipage and other undersirable environments
{\FloatBarrier% process all floats before this point so the figure/table numbers stay in order.
\let\textwidth\marginparwidth% \includegraphics[width=\textwidth]{...} should work
% redefine paragraph
\Configure{HtmlPar}{\EndP\csname a:marginfloat\endcsname}{\EndP\csname a:marginfloat\endcsname}{\csname b:marginfloat\endcsname}{\csname b:marginfloat\endcsname}%

\Configure{marginfloat}{\HCode{<p><span class="marginnote">}
% we must handle \caption inside marginnote
\Configure{caption}{\HCode{<span class="figure">}}{:\space}{}{\HCode{</span>}}

% display marginnote caption on a separate line
\Css{.marginnote .figure{display:block;}}


% caption should produce margin note by default
\Configure{caption}{\HCode{<span class="marginnote">}}{:\space}{}{\HCode{</span>}}

% figure* should produce full width image
% we need to make few adjustments
\Configure{float}{}{\endparagraph\HCode{<figure class="fullwidth">}}{\endparagraph\HCode{</figure>}\csname par\endcsname\ShowPar}
\Configure{caption}{\endparagraph\HCode{<span class="figure">}}{:\space}{}{\HCode{</span>}}

\ConfigureEnv{margintable}{\endparagraph\HCode{<div class="margintable">}\Configure{caption}{}{:\space}{}{}}{\endparagraph\HCode{</div>}}{}{}

% fix for display math length
\Css{div.math-display, div.par-math-display {width: 55\%}}



Save it as myconfig.cfg. The document can be compiled using:

pdflatex sample.tex
bibtex sample
make4ht -m draft -c myconfig.cfg sample.tex "mathml,mathjax"

This is the rendered document:

enter image description here

You can also see the HTML version online.

  • Can you make LaTeX add space before the fullwidth environment so that it will not overlap with the margin footnotes floats, as shown in the last image (note 5 is completed before the paragraph beginning with This paragraphs is in full size)? Dec 29, 2020 at 11:19
  • @JúdaRonén there is actually issue with the font size in the fullwidth environment, caused by the citation in the previous paragraph. It looks better when it is in the correct size. I will update my code.
    – michal.h21
    Dec 29, 2020 at 22:00
  • Did you mean github.com/edwardtufte/tufte-css ? If I use this tufte.css file I get a broken layout without the sidenotes. Aug 17, 2021 at 20:18
  • @user3072843 yes, I used that CSS file. but version from December, maybe it changed somehow since then, and it doesn't work anymore. although I wouldn't expect that.
    – michal.h21
    Aug 17, 2021 at 21:00
  • @user3072843 it should look like this: kodymirus.cz/tufte-tex4ht/sample.html
    – michal.h21
    Aug 17, 2021 at 21:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .