Az

LaTeX For Books And Websites

I’ve been writing Microfictions lately and am hoping to write some longer pieces as I go forward, but I also want a way to collect them all in a print format, as well as make them available online for viewing. At the moment I have no plans for a published book, although doing a free ebook would be cool. But just having somewhere that they can be shared and a form they can be printed in (for myself) is my main goal.

In addition, I wanted to use the same base to produce both versions, because:

  • Why repeat myself?
  • Why not challenge myself?

So I decided to produce my writings in LaTeX, which I’ve tried using previously for my choose-your-own-ending zine and the whitepaper for Hexago.nl.

PDF - pdflatex

Developing the PDF was the easiest bit, and required the least amount of new knowledge. All I needed to do was set up the paper like a book using \documentclass[openany]{book}, with the openany directive meaning that chapters could start without needing a blank page between them.

I also didn’t want the document growing out of hand as I wrote more and more, so I decided to break up the sections into their own .tex documents for each chapter and then using include{documentname} brought them into the main .tex file. For the sub-documents, all you need to do is act as if they’re already part of the parent document, so no new \documentclass or \begin{document} directives required.

To generate the document, you just need to be in a prompt in the folder and run:

pdflatex index.tex

Web - make4ht

Here’s where things got gnarly. I used make4ht, which drives tex4ht, which is a method of converting TeX (or LaTeX) to HTML or XML. I want to output my document as HTML5, but I also want a bunch of custom styling and an index page which links to all the chapters. For that the following command is required:

math4ht index.tex "html5,2"

Of course, the output still has no styling and the contents page is a bit of a mess since it goes down into the section level.

So now I created a file called config.cfg and put the following in it (my actual version has a lot more styling):

\Preamble{html}

\Configure{@HEAD}{\HCode{<link href="https://fonts.googleapis.com/css?family=Lora:400,600,700&display=swap" rel="stylesheet">}}
\Configure{@BODY}{\HCode{<div class="container">}}
\Configure{@/BODY}{\HCode{</div>}}
\ConfigureToc{chapter} {\HCode{<span class="chapterToc">}} {~} {} {~~\HCode{</span><br />}}
\ConfigureToc{section} {\HCode{<span class="sectionToc">}} {} {} {\HCode{</span>}}
\Css{
    body {
        background-color: \#828282;
    }
}
\Css{
    .container {
        width: 550px;
        text-align: justify;
        word-spacing: 2px;
        font-family: 'Lora', 'Times New Roman', serif;
        margin: auto;
        background-color: \#FFFDFD;
        padding-left: 200px;
        padding-right: 200px;
        padding-left: 200px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
\begin{document}
\EndPreamble

To quickly run over some of the directives and changes made:

\Configure{@HEAD}{\HCode{<link href="https://fonts.googleapis.com/css?family=Lora:400,600,700&display=swap" rel="stylesheet">}}`

The above adds a custom font from Google Fonts, which needs to be called later in the style declarations.

\Configure{@BODY}{\HCode{<div class="container">}}
\Configure{@/BODY}{\HCode{</div>}}

Here we insert code for an opening <div> at the start of the <body> tag and closing tags at the end respectively.

\ConfigureToc{chapter} {\HCode{<span class="chapterToc">}} {~} {} {~~\HCode{</span><br />}}
\ConfigureToc{section} {\HCode{} {} {} {}

Now we configure the Table Of Contents, hiding the section-level points and creating elements for the numbered chapters.

\Css{
    body {
        background-color: \#828282;
    }
}
\Css{
    .container {
        width: 550px;
        font-family: 'Lora', 'Times New Roman', serif;
        ...
    }
}

Lastly we apply styling to the background of the body, as well as more styling to the container <div> that everything sites inside. My goal was to create something that looks like a PDF output on a computer, but in a website, however you can style it however you wish.

Conclusion

I’ve now got a simple way to store all my fiction writing online, as well as a way to bundle it all up for printing if I want. My next plan is to add a .gitlab-ci.yml file so I can have it automatically built and deployed, much like this site.