Can a tufte-latex file output tufte-css HTML?

Question

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:

\documentclass{tufte-handout}

\begin{document}

    Here is some text. \marginnote{Here is a margin note.}
    
    Here is some math: \(a^2+b^2=c^2\)
    
    \[e^{i\pi}+1=0\]

\end{document}

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.

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:

\documentclass[]{tufte-book}
\usepackage{kantlipsum}
\usepackage{url}
\usepackage{graphicx}
\begin{document}
\title{Sample Document}
\author{Michal Hoftich}
\maketitle
\tableofcontents
\section{Introduction}

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.

\begin{marginfigure}
  \includegraphics[width=\textwidth]{example-image.png}
  \caption{Example margin figure}
\end{marginfigure}

\section{First section}

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

\[e^{i\pi}+1=0\]

\kant[1]

\subsection{Hello, subsection}


\begin{figure}[tbt]
  \caption{Example figure}
  \includegraphics[width=\textwidth]{exports-imports.png}
\end{figure}

\kant[2]

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

\begin{figure*}[tbt]
  \includegraphics[width=\textwidth]{napoleons-march.png}
  \caption{Full width figure}
\end{figure*}
\begin{verbatim}
Hello verbatim 
Some special characters: {|}\ % "
\end{verbatim}

\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}.

\begin{fullwidth}
  This paragraphs is in full size \kant[5]
 \end{fullwidth}



\bibliography{sample-handout}
\bibliographystyle{plainnat}


\end{document}

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

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

\Preamble{xhtml}
% add tufte.css to your document
\Configure{AddCss}{tufte.css}

% helper macro to close the current paragraph
\def\endparagraph{\ifvmode\IgnorePar\fi\EndP}

% insert <article> element to the document body
\Configure{@BODY}{\endparagraph\HCode{<article>}}
\Configure{@/BODY}{\endparagraph\HCode{</article>}}

% 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
\Configure{likesection}
{\endparagraph\HCode{<section>}}{\endparagraph\HCode{</section>}}
{\HCode{<h2>}}{\HCode{</h2>}\par\ShowPar}

\Configure{likesubsection}
{\endparagraph\HCode{<section>}}{\endparagraph\HCode{</section>}}
{\HCode{<h3>}}{\HCode{</h3>}\par\ShowPar}

% we must redefine TOC to print starred sectioning commands
% \TableOfContents is provided by TeX4ht
\renewcommand\tableofcontents{\endparagraph\HCode{<h2>Contents</h2>\Hnewline}\TableOfContents[likesection,likesubsection]}

% custom \maketitle
\makeatletter
\renewcommand{\maketitle}{%
  \begingroup%
    \endparagraph\HCode{<h1>}\@title\HCode{</h1>}%
    \HCode{<p class="subtitle">}\@author\HCode{</p>}%
    \HCode{<p class="subtitle">}\@date\HCode{</p>}%
  \endgroup
}

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

% fix for commands redefined by soul
\@ifpackageloaded{soul}{%
\renewcommand{\allcaps}[1]{\MakeTextUppercase{#1}}%
\renewcommand{\smallcaps}[1]{{\scshape\MakeTextLowercase{#1}}}%
\renewcommand{\textsc}[1]{\textcaps{#1}}%
}{}

% footnotes and sidenotes

\long\def\@tufte@sidenote[#1][#2]#3{%
  \stepcounter\@mpfn%
\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>}%
\egroup%
}
\renewcommand\marginnote[2][0pt]{%
  \stepcounter\@mpfn%
\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>}%
\egroup%
}

% environments

\ConfigureEnv{verbatim}{\endparagraph\HCode{<pre><code>}\NoFonts}{\EndNoFonts\endparagraph\HCode{</code></pre>}}{}{}
\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
}
{\endparagraph\HCode{</div>}}{}{}

% floats

\NewConfigure{marginfloat}{2}

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

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

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

\renewenvironment{@tufte@float}[3][htbp]%
{\@float{#2}[#1]}{\end@float}

% 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
\ConfigureEnv{figure*}{
\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\%}}

\makeatother

\begin{document}
\EndPreamble

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:

You can also see the HTML version online.