Change chapter formatting with TeX4ht and memoir

Question

Using htlatex/tex4ht, it seems that the chapter heading style set by memoir is over-ridden when generating HTML output. How can you customize the style of the chapter headings generated by tex4ht?

I've tried using the built in functions and page styles provided by the memoir class, however these seem to have no effect. I've also tried modifying memoir.4ht, and book.4ht, but could not work out what to change here.

Answer 1

You are right, chapter and sectioning commands are redefined by tex4ht. Chapter styles are not used at all, but they couldn't work anyway, because tex4ht doesn't know how to translate TeX layout to CSS needed in web pages. It really isn't easy task.

So you have to style generated elements yourself. There is the \Css command for providing CSS declarations. This command can be used in custom config file. Simple \chapter{First} is converted to html as:

<h2 class="chapterHead"><span class="titlemark">Chapter&#x00A0;1</span><br /><a 
 id="x1-10001"></a>First</h2>

there is a lot of elements which could be styled, as you can see.

Custom config file myconf.cfg looks this way :

\Preamble{xhtml}
\begin{document}
\EndPreamble   

you can add \Css commands after \begin{document}. For document compilation, run:

htlatex filename "myconf, other options"

First modification is to add <span> element around chapter name, because you may want to style it differently to chapter number:

\let\oldchaptername\chaptername 
\renewcommand{\chaptername}{\Tg<span class="chapname">\oldchaptername\Tg</span>}  

html code:

<h2 class="chapterHead"><span class="titlemark"><span class="chapname">Chapter</span>&#x00A0;1</span><br /><a 
 id="x1-10001"></a>First</h2>

class names for sectioning elements are in the form: secname + Head, resp. like + secname + Head for starred sectioning commands. We can define some helper macro for generating class names:

\def\sechead#1#2{.#1Head #2,.like#1Head #2}

First parameter is sectioning name, second is child element which we want to modify. If the second parameter is blank, CSS is applied to sectioning element. We can now write:

\Css{\sechead{chapter}{.titlemark}{
display:block;
font-size:.8em;
margin-bottom:1.6em;
border-bottom:1px solid black;
text-align:right;
}}
\Css{\sechead{chapter}{}{
margin-top:2em; margin-bottom:1em;
text-align:center;
}}     

For modifiing other sectioning levels, we can create another helper macro:

\def\sections#1{\sechead{chapter}{#1}, \sechead{section}{#1}, \sechead{subsection}{#1}, \sechead{subsubsection}{#1}} 

Now all sectioning elements can be styled easily:

\Css{\sections{}{color:red;}}
\Css{\sections{br}{display:none;}}
\Css{\sections{.titlemark}{color:green;}}
\Css{\sections{.titlemark:after}{content:" ";}}

note last definition, in some places, there is no space between section counter and title, this will ensure that there is always space.

Now complete config file:

\Preamble{xhtml}
\begin{document}
\def\sechead#1#2{.#1Head #2,.like#1Head #2}
\def\sections#1{\sechead{chapter}{#1}, \sechead{section}{#1}, \sechead{subsection}{#1}, \sechead{subsubsection}{#1}}
\let\oldchaptername\chaptername 
\renewcommand{\chaptername}{\Tg<span class="chapname">\oldchaptername\Tg</span>}
\Css{\sections{}{color:red;}}
\Css{\sections{br}{display:none;}}
\Css{\sections{.titlemark}{color:green;}}
\Css{\sections{.titlemark:after}{content:" ";}}
\Css{\sechead{chapter}{.titlemark}{
display:block;
font-size:.8em;
margin-bottom:1.6em;
border-bottom:1px solid black;
text-align:right;
}}
\Css{\sechead{chapter}{}{
margin-top:2em; margin-bottom:1em;
text-align:center;
}}
\EndPreamble

Some sample document:

\documentclass{memoir}
\chapterstyle{hangnum}
\begin{document}
\chapter{First}
\section{section}
\chapter{second}
\section*{like section}
\section{Bla blah}
\subsection{subsection}
\subsubsection{sub sub section}

\end{document}

and the result:

(I know it is ugly, but I hope you have an idea now)