If you see this, something is wrong

Collapse and expand sections

To get acquainted with the document, the best thing to do is to select the "Collapse all sections" item from the "View" menu. This will leave visible only the titles of the top-level sections.

Clicking on a section title toggles the visibility of the section content. If you have collapsed all of the sections, this will let you discover the document progressively, from the top-level sections to the lower-level ones.

Cross-references and related material

Generally speaking, anything that is blue is clickable.

Clicking on a reference link (like an equation number, for instance) will display the reference as close as possible, without breaking the layout. Clicking on the displayed content or on the reference link hides the content. This is recursive: if the content includes a reference, clicking on it will have the same effect. These "links" are not necessarily numbers, as it is possible in LaTeX2Web to use full text for a reference.

Clicking on a bibliographical reference (i.e., a number within brackets) will display the reference.

Speech bubbles indicate a footnote. Click on the bubble to reveal the footnote (there is no page in a web document, so footnotes are placed inside the text flow). Acronyms work the same way as footnotes, except that you have the acronym instead of the speech bubble.

Discussions

By default, discussions are open in a document. Click on the discussion button below to reveal the discussion thread. However, you must be registered to participate in the discussion.

If a thread has been initialized, you can reply to it. Any modification to any comment, or a reply to it, in the discussion is signified by email to the owner of the document and to the author of the comment.

First published on Saturday, Jun 21, 2025 and last modified on Saturday, Sep 20, 2025 by François Chaplais.

I am normally hidden by the status bar

The LaTeX2Web div

François Chaplais

1 Introduction

The latexDiv is an environment that creates an HTML div with customizable classes and CSS, which applies some styling to its content.

LaTeX2Web also has specific LaTeX commands which are dedicated to styling, see section 5. These commands make it easier to style objects without using CSS or classes. The possibility stil remains to user CSS and classes directly. Here is an example:

\begin{latexDiv}
\class{border border-2 border-black rounded}
\css{padding: 1rem; margin-top: 1rem; margin-bottom: 1rem}
\textcolor{red}{Hello everybody!}
\end{latexDiv}

and here is the result:

Hello everybody!

The \class and \css commands are LaTeX2Web styling commands. In section 5, we introduce the style environment, which lets you style objects using a simplified set of specific LaTeX2Web commands.

2 Syntax

You can style a latexDiv with the commands \class and \css, and the style environment.

These command must immediately follow (possibly after spaces and/or newlines) the opening declaration \begin{latexDiv}, and in this precise order. This is necessary to enable styling for other LaTeX2Web objects that support styling and that are placed within the latexDiv itself.

If you use the LaTeX2Web code editor, the menu command that creates a latexDiv environment provides the right syntax. Below is the syntax.

\begin{latexDiv}
\class{}
\css{}
\begin{style}

\end{style}
... content ...
\end{latexDiv}

To understand how styling works, we introduce the CSS box model.

3 CSS box model

This figure explains the various widths that splits an element (the box) into several components.

In the innermost position is the content itself. Outside of it is the padding, then the border, and then the margin. In our settings, which uses the border-box box sizing, the width and height of an element specify the outer dimensions of this box model.

We can now analyze our example code that we recall below.

\begin{latexDiv}
\class{border border-2 border-black rounded}
\css{padding: 1rem; margin-top: 1rem; margin-bottom: 1rem}
\textcolor{red}{Hello everybody!}
\end{latexDiv}

4 Analysis of the example code

4.1 Classes

The \class command defines the classes applied to the div. Class names are separated by blanks. Here they are simple Bootstrap classes. Here is the detail

The border class indicates that the content should be surrounded by a border.
The border-2 class determines the width of the border in Bootstrap
The border-black class states that the color of the border should be black.
The rounded class states that border should have rounded corners.

These Bootstrap classes actually implement custom CSS code.

4.2 CSS

The \css command defines the CSS styling applied to the div. Here is the detail:

1rem is the generic height of the letter "m" on the target device.
padding: 1rem specifies that the space between the inner content and the div border (materialized here by a black, rounded, curve) should be equal to 1rem.
margin-top: 1rem specifies that the distance between the div and the content above should be 1rem. This is materialized by the distance to the border.
margin-bottom: 1rem does the same for the bottom margin.

Note that CSS statements should be separated by semicolons.

5 LaTeX2Web styling commands

LaTeX2Web provides a specific style environment, in which specific LaTeX command are parsed to simplify the styling process. Each command has one string parameter which may consist in several words. The order of the words does not matter. The structure of each word determines its functionality.

Here is a detailed overview of the commands.

5.1 `\border`

This commands styles the border of the latexDiv. Here are the possible parameters:

if it’s a number, it indicates the width of the border
if it is the string rounded, it creates a border with round corners
if it is a color name, it specifies the color of the border

5.2 `\padding`

If the parameter is numeric, it specifies the padding in pixels. The padding in uniform in all of the four directions.

If not numeric, the parameter be a sequence of words, where each word is a keyword, followed by a hyphen, and followed by a number. The number gives the dimension in pixels. Here are the keywords with their meaning:

x specifies padding in the horizontal direction, with equal values on both sides.
y specifies padding in the vertical direction, with equal values on both sides.
top specifies the top padding.
bottom specifies the bottom padding.
left specifies the left padding.
right specifies the right padding.

5.3 `\margin`

\margin has the same syntax as \padding.

5.4 `\background`

This command specifies the background for the part of the box that comprises the content and the padding. Depending on its value, each parameter word has a different meaning.

If the word is an \includegraphics command, this puts the corresponding image as a background.
If it is a color name, it applies the color to the background

Note that you can apply several colors or images, but in practice this would imply the specification of their blending mode. Also, if an overlay has been defined, it is applied to the background.

5.5 `\overlay`

An overlay is a layer of color that is put between the background and the content. The parameter is a string that begins with the name of the color, followed by a hyphen, followed by the opacity of the overlay. The opacity is a number between 0 (transparent) and 1 (opaque).

The default color is black, and the default opacity is 0.5, i.e. black-0.5.

5.6 `\shadow`

You can add a drop shadow to your box. The drop shadow extends beyond the border. The parameter words are of three types.

If it is a number, it specifies the distance, along the diagonal and in pixels, between the box and the shadow.
If it is the keyword blur, followed by a hypen and a number, it gives the blur radius of the shadow.
If it is the name of a color, it specifies tha color of the drop shadow.

5.7 `\width`

The parameter of the \width command is a percentage. Its sets the maximum width of the box to a percentage of the maximum width of the document in the web page. It is useful only on large displays.

The box is horizontally centered.

5.8 `\textcolor`

The parameter of the \textcolor command is the color of the text. You may set the text color to white if the background is dark.

5.9 `\linkcolor`

It works the same as \textcolor, except that is operates on the links’ color. Useful for the same reason.

5.10 `\textalign`

This sets the text alignment inside the latexDiv. Here are the possible values.

left
center
right
justify
start is different from left in right-to-left languages.
end: same remark.

6 Example

Here is an example of a latexDiv which is styled with latexDiv specific styling commands.

We put some lorem text here.

Lorem ipsum exercitation consectetur incididunt, sint in nisi magna ullamco occaecat ea. Veniam consequat dolore, magna mollit est dolore in, in laborum amet. Nostrud sed consequat nulla, non deserunt veniam enim tempor nulla ut.

And an equation:

\[ \begin{equation} y=f(x) \end{equation} \]

(1)

with a link to it.

The source code is:

\begin{latexDiv}
\begin{style}
\width{70}
\border{blue 3}
\background{\includegraphics{bright-background-with-abstract-pattern-2025-01-28-02-47-36-utc.jpg}}
\overlay{black-0.7}
\textcolor{white}
\linkcolor{lightblue}
\padding{10}
\end{style}

We put some lorem text here.

Lorem ipsum exercitation consectetur incididunt, sint in nisi magna ullamco occaecat ea. Veniam consequat dolore, magna mollit est dolore in, in laborum amet. Nostrud sed consequat nulla, non deserunt veniam enim tempor nulla ut.

And an equation:

\begin{equation}
y=f(x)
\end{equation}

with a \ref{equation}[link to it].

\end{latexDiv}

Here is a lighter version with an overlay of white-0.8 and text colors unchanged. We also have added a drop shadow \shadow{10 blur-10}.

We put some lorem text here.

And an equation:

\[ \begin{equation} y=f(x) \end{equation} \]

(2)

with a link to it.

7 Hierarchy

You can put just about anything in a latexDiv, except a section. This also means that you cannot put a latexDiv inside objects lower in the hierarchy. A latexDiv is intended to style a portion of a section (like a theorem, for instance).

8 Styling layout components and chunks

The blocks in a LaTeX2Web grid and individual LaTeX2Web columns can be styled with the same commands as those used for latexDiv. This also applies to chunk.

9 Recycling styles

If you often use a style, it might be a good idea to make a macro for this style. To define a styling that only applies a border, you might do the following.

\newcommand{\borderStyle}{\begin{style}\border{black rounded 2}\end{style}}

Or, if you only want to define a commonly used border style, you can use

\newcommand{\simpleBorder}{\border{black rounded 2}}

10 Summary

Summary 1

The LaTeX2Web command which are dedicated to styling are the following.

\border specifies the border of the object. If this command is not used, the border still exists but it is invisible.
\padding specifies the amount of space between the border and the object.
\margin specifies the amount of space between the border and surrounding object.
\background specifies the background of the object+the padding space. It can be a color, an image, or both.
\width specifies the width of the object, as a percentage of the width of the surrounding object.
If the background has an image, the \overlay command specifyes a semi-opaque color that will be applied between the image and the object itself.
\shadow creates a drop shadow for the object.

The following commands affect the text inside the object.

\textcolor changes the color of standard text color.
\linkcolor changes the color of links and references.
\textalign changes the text alignment inside the object.

Collapse and expand sections

Cross-references and related material

Discussions

Table of contents

Discussion: create topic login to participate.

1 Introduction

2 Syntax

3 CSS box model

4 Analysis of the example code

4.1 Classes

4.2 CSS

5 LaTeX2Web styling commands

5.1 `\border`

5.2 `\padding`

5.3 `\margin`

5.4 `\background`

5.5 `\overlay`

5.6 `\shadow`

5.7 `\width`

5.8 `\textcolor`

5.9 `\linkcolor`

5.10 `\textalign`

6 Example

7 Hierarchy

8 Styling layout components and chunks

9 Recycling styles

10 Summary

Collapse and expand sections

Cross-references and related material

Discussions

Table of contents

Discussion: create topic login to participate.

1 Introduction

2 Syntax

3 CSS box model

4 Analysis of the example code

4.1 Classes

4.2 CSS

5 LaTeX2Web styling commands

5.1 \border

5.2 \padding

5.3 \margin

5.4 \background

5.5 \overlay

5.6 \shadow

5.7 \width

5.8 \textcolor

5.9 \linkcolor

5.10 \textalign

6 Example

7 Hierarchy

8 Styling layout components and chunks

9 Recycling styles

10 Summary

5.1 `\border`

5.2 `\padding`

5.3 `\margin`

5.4 `\background`

5.5 `\overlay`

5.6 `\shadow`

5.7 `\width`

5.8 `\textcolor`

5.9 `\linkcolor`

5.10 `\textalign`