TeX4ht Htlatex – How to Inherit Page Layout When Converting LaTeX to HTML?

htlatextex4ht

I use tex4ht but Im open to other suggestions.
So tex4ht documentation tells how you can set the margins by yourself, but nothing about inheriting them from the LaTeX document. By default there are no margins at all. Is there maybe a config option to set them automatically as they are in an generated PDF?

Best Answer

In general, you don't want (and cannot have) the same margins in your rendered HTML page as in PDF. You have fixed page size in PDF, but HTML can be displayed on 27 inch display, as well as on smartphone, and each of these devices needs different size of fonts and page margins.

TeX4ht don't set default page and font size, to allow you to use custom CSS styles that set them.

You can set CSS in a configuration file. Sample configuration file that implements some CSS readability tips from this article, could look like this:

\Preamble{xhtml}
\Css{body{
  max-width:70ch;margin: 1rem auto;
  font-size-adjust:0.5;
}}
% trick from https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-ine-height/
\Css{html *{ line-height: calc(2px + 2ex + 2px); }}
\Css{p { 
    width: 100\%;
    max-width: 70ch;
    text-align: justify;
    hyphens: auto;}}
% fix for figures
\Css{figure p{text-align: center;}}
\begin{document}
\EndPreamble

The important command here is \Css, which can insert shorter CSS snippets to the CSS file generated by TeX4ht.

Compile your file using

make4ht -c config.cfg filename.tex

This changes the look from this default:

enter image description here

To this:

enter image description here

The change is that the lines shouldn't be longer than 70 characters, the space between lines is a bit longer, and text justification and hypnenation is enabled.

If you want to change more elements of the design, you will probably want to use external CSS file. To add CSS file that is saved alongside your HTML documents, you can use the \Configure{AddCss} command:

\Preamble{xhtml}
\Configure{AddCss}{style.css}
\begin{document}
\EndPreamble

You can also use CSS file that is hosted on some other site, for example some CSS framework on CDN. The following configuration file uses the LaTeX.css project, which tries to mimic the default LaTeX look in HTML:

\Preamble{xhtml}
\Configure{@HEAD}{\HCode{<link rel="stylesheet" href="https://latex.now.sh/style.min.css" />}}
\begin{document}
\EndPreamble

The \Configure{@HEAD} command can add code to HTML <head> element, where links to CSS files should be placed. The \HCode command is used to insert HTML tags. I've copied the <link ...> tag from LaTeX.css's site. One downside of this method is that you rely on availability of the referenced CSS file on someone else's machine. They can remove it, or update it in some non-compatible way, and your design will be broken. On the positive side, this method is easiest.

This is a sample page with LaTeX.css:

enter image description here

To find more suitable CSS files that you can use, search for classles CSS frameworks

Related Question