This guide introduces the basics of LaTeX, and then shows that Documents Live is a powerful integrated platform for authoring and publishing to the web. The LaTeX novice will discover that, if you forget mathematics, LaTeX is quite a simple language to learn.

This guide is a Documents Live publication. This means that it is spead across several web pages. To navigate between the different part of the guide, use the buttons at the top left of this page. The button that says Publication content will display the table of contents of the publication. The arrow buttons at the left and right of the previous button lets you navigate back and forth in the list of the documents in the publication.

This overview contains many references to specific lessons in the guide; do not hesitate to click on them.

Sections 3 and 4 present concepts which belong to traditional LaTeX. Section 5 presents extensions of the LaTeX language which are specific to Documents Live, and which are dedicated to the layout and styling of documents for the web.

In parallel to these lessons, a tutorial document is available to learn and test your knowledge on actual source code. More info on this tutorial document is here .

All the documents in this guide have been written in LaTeX using exclusively Documents Live tools.

LaTeX is primarily used for publishing scientific documents. At Documents Live, we are convinced that it can be much more than that. It is a language that is well adapted to the authoring and publication of general documents, and Documents Live makes an accessible tool to write and publich content on the web.

With Documents Live, you can create engaging documents on the web without knowing any HTML, CSS or Javascript. This guide is here to introduce you to LaTeX and show how it can be used to produce complete web documents.

If you do not use math, LaTeX is a pretty easy language to learn. Its root features make it a natural tool for publishing documents, as it concentrates on notions which are at the heart of document authoring. Here is the outline of our intoduction to LaTeX.

Since LaTeX is a document description language, it must make a distinction between the document content itself and the features of the language which are used for the document preparation. This is why our first lesson introduces that main features of the LaTeX language.

Once this is done, we dive into the various components of a document, such as they are handled by LaTeX.

We start with the main element which is text. In Documents Live, text is UTF-8 encoded, which means in practice that you can use characters from almost all scripting systems natively.

Text can be styled and re-sized. You can also do many other things, but we will explore this in a dedicated section.

Ather this, we have a look at a very important feature of a LaTeX, which is its sectioning. This introduces the hierarchical structure of a LaTeX document. Our next lessons will be devoted to the simplest components of a LaTeX document.

We have a look at lists, which can be Documents Live simple lists, or more complex LaTeX lists. Note that the versatility of web list styling blurs the line between ordered and un-ordered lists.

Then we have a look at the media components of Documents Live, which are much richer on the web than in print (or PDF for that matter). Figures can be expanded to fill the browser window, and videos can be expanded to fill the whole screen.

Tables are ugly beasts. At best, they are difficult to read on print; at worst they are a clumsy way of displaying data. Fortunately, Documents Live tables make use of standard web principles to make them more appealing. If you forget about the gruesome details of traditional LaTeX tables, they just consist in data separated by row and columns separators.

4.1 Other document concepts

4.2 Theorems

4.3 Cross references

4.4 Color

4.5 Macros

What follows is only possible using the Documents Live system.

5.1 Layout

5.1.1 Grids

You can arrange blocks of content into a grid. To maintain readability, the blocks are given a minimum width. When the browser window is too narrow, the blocks “wrap” to the next line.

Here is an example (resize the browser window to see what happens).

Dad and son

Space. The final frontier.

Lorem ipsum esse, laboris pariatur magna nostrud cillum, veniam, sed in occaecat enim ad dolore, amet ut. Mollit duis sint amet ea aliqua in cillum ea in ex do reprehenderit ea excepteur dolore.

Click here to see the syntax.

5.1.2 Columns

You can also define columns in Documents Live. The behavior of columns is slightly different from the behavior of grids.

You first define your column setup for large displays. For small devices the behavior of the columns is the following.

• At tablet size, there are only two column per row (the following columns are wrapped).
• At mobile size, the columns are stacked on top of each other.

The setup for large screens essentially follows two patterns.

• All columns are of equal width, and you just specify the number of columns.
• The width of each column is specified by a number between 1 and 12.

In the second configuration, the number assigned to each column specifies how many slots its width would take on a total of twelve. Here is an illustration with various slot allocations.

Here is an example with a 2/3 - 1/3 repartitions. Resize the browser window to see what happens. The layout is preserved at tablet size (because there are only two columns), and its collapses at mobile size.

Some important lorem text

Lorem ipsum consequat, non aliquip enim et aliquip ex veniam, magna ad sed, cupidatat. Ex culpa reprehenderit, commodo nostrud labore amet adipiscing excepteur, laborum laboris, amet, in. Culpa quis nisi dolore aliquip minim, irure dolore, dolor consequat, amet voluptate, culpa.

Lorem ipsum incididunt reprehenderit ut in ex velit et in id do dolor consequat cupidatat dolor ut do. Mollit aute mollit in, occaecat proident, velit aute, in reprehenderit est nisi in ex et dolor fugiat. Veniam laborum irure laborum mollit proident, esse minim ad cupidatat quis proident culpa sed esse, sint do.

For more details, refer to the online help . Click here to see the syntax.

5.2 Styling

\begin{latexDiv}
\class{p-3 mb-3}
\css{border: solid black 3px; border-radius: 5px; background-color: lightyellow}
... content ...
\end{latexDiv}

\begin{latexDiv}
\begin{style}
\border{black 3 rounded}
\background{lightyellow}
\padding{15}
\margin{bottom-15}
\width{70}
\end{style}
... content ...
\end{latexDiv}

\begin{columns}
\begin{col}[8]
\begin{style}
\background{alice}
\padding{15}
\textcolor{white}
\border{white rounded}
\end{style}

... text ...

\end{col}
\begin{col}[4]
\includegraphics{cover.jpg}
\end{col}
\end{columns}

5.3 Documents Live widgets

5.3.1 Sliders

Sliders embed a slide show in your Documents Live page. Below is the summary from the corresponding lesson .

Summary 2

A LaTeX2Web slider can have mixed content. It is a high level component, that can, for instance, contain theorems such as this one.

The slider is created by using a slider environment. Inside a slider, each slide is delimited by a slide environment. The LaTeX2Web code editor has dedicated commands to create sliders easily.

Here is the syntax.

\begin{slider}
\begin{slide}
... content ...
\end{slide}
\begin{slide}
... content ...
\end{slide}
\end{slider}

5.3.2 Cards

Cards are common web page component which provide a decent layout for simple content. For details, see the lesson .

Summary 3 (card components)

A card has four components.

• an optional image
• an optional header
• a mandatory body
• an optional footer

Each of these parts is a LaTeX2Web chunk.

Here is an example

Why cats are cute

Cats are so cute because their features and behaviors trigger our instinctive affection—large, round eyes, soft fur, and tiny, agile paws all resemble the characteristics we find endearing in human babies. Their playful curiosity, gentle purring, and comically expressive faces add to their charm, making them both entertaining and heartwarming companions. Whether they are stretching luxuriously in a sunny spot or kneading a blanket with contentment, cats effortlessly invite our warmth and attention, blending innocence with mystery in a way that irresistibly appeals to our sense of delight.

This opinion has been produced by AI.

5.3.3 Chunks

5.3.3.1 Usage

Chunks are components of Documents Live widgets such as cards.

Each chunk can include one or more of the following LaTeX2Web terminal object types.

• paragraphs
• simple lists
• media and image links
• equations
• figures
• charts
• all kinds of table

5.3.3.2 Styling

Each chunk can be styled using the rules detailed in the lesson about the latexDiv .

Click here to see a styled version of the previous card with a cat.

5.3.4 Tabbed content

5.3.4.1 Introduction

LaTeX2Web lets you organize content in tabs. Each tab content is a chunk. The appearence of the tab group can be classical tabs or “pill” tabs.

A tab group is defined by a tabGroup. Inside, each tab is defined by a tab environment.

5.3.4.2 Tab style example

• Introduction
• Chunks
• Syntax

LaTeX2Web lets you organize content in tabs. Each tab content is a chunk. The appearence of the tab group can be classical tabs or “pill” tabs. Here we have tab style.

Chunks are simple LaTeX2Web components which are terminal objects types. Theses objects cannot include other LaTeX2Web objects.

Every chunk can be styled. Styling is not encouraged for the tab styled tab groups.

Each tab is enclosed in a tab environment. The tab itself has two parts.

• The text of the tab is defined using a \caption command.
• The rest defines the tab content.

5.3.4.3 Styled pill example

• Introduction
• Chunks
• Syntax

LaTeX2Web lets you organize content in tabs. Each tab content is a chunk. The appearence of the tab group can be classical tabs or “pill” tabs. Here we have pill style.

This tab has been given a border.

Chunks are simple LaTeX2Web components which are terminal objects types. Theses objects cannot include other LaTeX2Web objects.

Every chunk can be styled. The pill style is adapted to custom styling.

This tab has been given a border and a light yellow background.

Each tab is enclosed in a tab environment. The tab itself has two parts.

• The text of the tab is defined using a \caption command.
• The rest defines the tab content.

This tab has been given a border and an image background, with an overlay white-0.5.

5.3.4.4 Summary

Summary 4

Tabbed content is defined by a tabGroup environment. The tab group can have two styles.

• tab (which is the default)
• pill which lends itself more to tab styling.

Each tab is defined by a tab environment. The text of the tab button is defined with the \caption command. The rest is the the tab content.

The content of a tab is a chunk which can be styled.