7  Style

You can use the TeX2page command \inputcss to have your HTML output use style sheets [50, 34]. E.g.,

\ifx\shipout\UnDeFiNeD % HTML only
  \inputcss basic.css
\fi

in your TeX​ ​source will cause the HTML output to use the presentation advice contained in the style sheet basic.css.

In the style sheet, you can have rules for the various HTML elements to change the appearance of your document. E.g., if you do not want your HTML page width to increase beyond a certain point (regardless of how the wide the reader makes their browser window), you could put the following in your style sheet:

body {
  max-width: 36em;
}

As another example, here’s a way to convert itemized lists (aka “bulleted” or unordered or unnumbered lists) to enumerations¹:

ul {
  list-style-type: lower-roman;
}

You can get finer control on the look of your document by defining rules for some classes that are peculiar to TeX2page. These special classes are discussed in this manual alongside the commands that they govern (p. 8).

You can have as many \inputcss’s in your document as you wish. They will be combined in the sequence in which they appear. It is perhaps necessary to add that style sheets are completely optional.

You can also embed style sheet information in the TeX​ ​source between the control sequences \cssblock and \endcssblock. E.g.,

\ifx\shipout\UnDeFiNeD % HTML only
\cssblock
body {
  max-width: 36em;
}

ul {
  list-style-type: lower-roman;
}
\endcssblock
\fi

You can have multiple \cssblocks in the document; they are all evaluated in sequence.

TeX2page generates a very basic default style that does little beyond setting some margins. You can augment or override the default style by supplying your own style info via \cssblock or by loading style sheets with \inputcss. Some general-purpose style sheets available on the Web are the W3C Core Styles [51] and Google Fonts [17]. Here are two examples of using the latter:

(i) To use Libre Baskerville for your body text:

\ifx\shipout\UnDeFiNeD % HTML only
\inputcss https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap

\cssblock
body {
  font-family: 'libre baskerville', serif;
}
\endcssblock
\fi

(ii) TeX2page has a CSS class .oldstyle in place for translating TeX’s \oldstyle macro. However, for this to actually show up as something meaningful in your HTML, e.g.,

{\oldstyle 2{\rm.}718281828} as 2.718281828

you need to add a suitable CSS definition for .oldstyle. One way is to go trawling through Google Fonts for a font that has oldstyle numerals:

\ifx\shipout\UnDeFiNeD % HTML only
\inputcss https://fonts.googleapis.com/css?family=Linden+Hill&display=swap

\cssblock
.oldstyle {
  font-family: 'linden hill';
  font-size: 110%;
}
\endcssblock
\fi