<sidebyside>
The <sidebyside> tag provides a container in which to arrange items
horizontally rather than vertically,
such as three images in a row or blocks of text with associated commentary
next to them.
Syntax
Variants
There are 2 variants of <sidebyside>.
Attributes
| Attribute | Required? | Values |
|---|---|---|
component = "…" | optional | string |
margins = "…" | optional | string |
valign = "…" | optional | "top""middle""bottom" |
valigns = "…" | optional | string |
width = "…" | optional | string |
widths = "…" | optional | string |
Children
The following may appear as children:<console> <figure> <image> <list> <listing> <p> <poem> <pre> <program> <stack> <table> <tabular> <video> Parents
This element may appear as an immediate child of the following elements:<activity> <algorithm> <answer> <appendix> <article> <case> <chapter> <claim> <computation> <conclusion> <convention> <corollary> <data> <example> <exercise> <exploration> <fact> <figure> <hint> <identity> <insight> <introduction> <investigation> <lemma> <li> <note> <observation> <paragraphs> <problem> <project> <proof> <proposition> <question> <remark> <sbsgroup> <section> <solution> <statement> <subsection> <subsubsection> <task> <technology> <theorem> <warning> Attributes
| Attribute | Required? | Values |
|---|---|---|
component = "…" | optional | string |
margins = "…" | optional | string |
valign = "…" | optional | "top""middle""bottom" |
valigns = "…" | optional | string |
width = "…" | optional | string |
widths = "…" | optional | string |
Children
The following may appear as children:<console> <image> <p> <poem> <pre> <program> <stack> <tabular> <video> Parents
This element may appear as an immediate child of the following elements:<acknowledgement> <assemblage> <biography> <colophon> <conclusion> <gi> <headnote> <introduction> <paragraphs> <preface> <sbsgroup> Examples
Sidebyside “image” and description.
<sidebyside valigns="middle middle" widths="35% 50%">
<tabular top="minor">
<col width="100%"/>
<row left="minor" bottom="minor">
<cell right="minor">
<p>Colorful green frog</p><p>on a green leaf</p>
</cell>
</row>
</tabular>
<p>
At left is the (pseudo)image of the colorful green frog found in the
assets folder in the PreTeXt Sample Article. What are the odds it is AI generated?
</p>
</sidebyside>An alternate way to render a description list
<sidebyside widths="30% 60%" margins="5% 5%">
<p>
Groups of order <m>p^2:</m>
</p>
<p>
<m>\mathbb Z_p \times \mathbb Z_p, \mathbb Z_{p^2}</m>
</p>
</sidebyside>
<sidebyside widths = "30% 60%" margins="5% 5%">
<p>
Advice about `sidebyside` from the PreTeXt guide:
</p>
<p>
We could give lots of examples, but instead it might be best to just
experiment. Error-checking is very robust, so it is hard to get it too wrong.
</p>
</sidebyside>A more complicated sidebyside image and description.
Typically for mathematical usage, one might use a SVG image here rendered from
tikzcd which offers more mathematical options than the tikzpicture environment.
Placing the image in a <figure> environment gives it a reference
label. Analogously, one could put the statement in a <theorem>
environment which would give it its own reference label.
<sidebyside widths="25% 65%">
<figure>
<caption>Factoring a homomorphism through a quotient</caption>
<image>
<latex-image>
\begin{tikzpicture}
\node (G) at (0,0) {G};
\node (H) at (2,0) {H};
\draw [->] (G) -> (H);
\node (f) at (1,.3) {f};
\node (G/K) at (0,-2) {G/K};
\draw [->] (G) -> (G/K);
\draw[->, dashed] (G/K) -> (H);
\node (p) at (.25,-.8) {p};
\node (ff) at (1.5,-1) {f};
\node (ss) at (1.65,-1.15) {*};
\end{tikzpicture}
</latex-image>
</image>
</figure>
<p>
Let <m>G, H</m> be groups, and let <m>f:G \to H</m>
be a homomorphism. Let <m>K </m> be any normal subgroup of
<m>G</m> with <m>K \subseteq \ker f</m>, and let <m>p:
G\to G/K</m> be the usual projection (<m>g \mapsto gK</m>). Then there
exists a unique group homomorphism <m>f_*:G/K \to
H</m>, so that for all <m>g\in G</m>, <m>f(g) =
f_*(p(g))</m>. In this case we say that <term><m>f</m> factors
through the quotient <m>G/K</m></term>.
</p>
</sidebyside>Sidebyside images with individual references and spacing
<sidebyside valign="top" widths="40% 25% 25%">
<figure>
<caption>Redacted Image</caption>
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Image</p><p>Placeholder</p></cell>
</row>
</tabular>
</figure>
<figure>
<caption>Another image</caption>
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Image</p><p>Placeholder</p></cell>
</row>
</tabular>
</figure>
<figure>
<caption>My best HS yearbook picture</caption>
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Image</p><p>Placeholder</p></cell>
</row>
</tabular>
</figure>
</sidebyside>A grid of different sized images with a single label
<figure>
<caption>A grid of images</caption>
<sidebyside valign="middle" widths="30% 30% 30%">
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Supersized Image</p><p>Placeholder</p></cell>
</row>
</tabular>
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Supersized Image</p><p>Placeholder</p></cell>
</row>
</tabular>
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Supersized Image</p><p>Placeholder</p></cell>
</row>
</tabular>
</sidebyside>
<sidebyside widths="15% 15% 15%">
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Supersized Image rescaled</p><p>Placeholder</p></cell>
</row>
</tabular>
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Supersized Image rescaled</p><p>Placeholder</p></cell>
</row>
</tabular>
<tabular top="minor">
<col width="100%" />
<row left="minor" bottom="minor">
<cell right="minor"><p>Supersized Image rescaled</p><p>Placeholder</p></cell>
</row>
</tabular>
</sidebyside>
</figure>