LaTeX2Web, a web authoring and publishing system
LaTeX2Web, a web authoring and publishing system
If you see this, something is wrong
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.
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.
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.
The blue button below that says "table of contents" is your tool to navigate in a publication.
The left arrow brings you to the previous document in the publication, and the right one brings you to the next. Both cycle over the publication list.
The middle button that says "table of contents" reveals the publication table of contents. This table is hierarchical structured. It has sections, and sections can be collapsed or expanded. If you are a registered user, you can save the layout of the table of contents.
First published on Saturday, Jun 21, 2025 and last modified on Saturday, Sep 20, 2025
I am normally hidden by the status bar
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.
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.
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}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
border class indicates that the content should be surrounded by a border.border-2 class determines the width of the border in Bootstrapborder-black class states that the color of the border should be black.rounded class states that border should have rounded corners.These Bootstrap classes actually implement custom CSS code.
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.
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.
\borderThis commands styles the border of the latexDiv. Here are the possible parameters:
rounded, it creates a border with round corners\paddingIf 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.\margin\margin has the same syntax as \padding.
\backgroundThis 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.
\includegraphics command, this puts the corresponding image as a 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.
\overlayAn 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.
\shadowYou can add a drop shadow to your box. The drop shadow extends beyond the border. The parameter words are of three types.
blur, followed by a hypen and a number, it gives the blur radius of the shadow.\widthThe 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.
\textcolorThe parameter of the \textcolor command is the color of the text. You may set the text color to white if the background is dark.
\linkcolorIt works the same as \textcolor, except that is operates on the links’ color. Useful for the same reason.
\textalignThis sets the text alignment inside the latexDiv. Here are the possible values.
leftcenterrightjustifystart is different from left in right-to-left languages.end: same remark.Here is an example of a latexDiv which is styled with latexDiv specific styling commands.
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}.
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).
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.
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}}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.\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.