Documents Live, a web authoring and publishing system
Documents Live, a web authoring and publishing system
If you see this, something is wrong
First published on Saturday, Jun 21, 2025 and last modified on Sunday, Feb 22, 2026
The latexDiv is an environment that creates an HTML div with customizable classes and CSS , which applies some styling to its content.
Documents Live 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 Documents Live styling commands. In section 5, we introduce the style environment, which lets you style objects using a simplified set of specific Documents Live 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 Documents Live objects that support styling and that are placed within the latexDiv itself.
If you use the Documents Live 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 Bootstrap
border-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.
Documents Live 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.
\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.
\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.
\linkcolor
It 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.
left
center
right
justify
start 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 Documents Live grid and individual Documents Live 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.