Skip to main content
\(\require{cancel}\newcommand{\definiteintegral}[4]{\int_{#1}^{#2}\,#3\,d#4} \newcommand{\myequation}[2]{#1\amp =#2} \newcommand{\indefiniteintegral}[2]{\int#1\,d#2} \newcommand{\testingescapedpercent}{ \% } \newcommand{\lt}{<} \newcommand{\gt}{>} \newcommand{\amp}{&} \)

Section22Side-By-Side Panels

Introduction

The flow of a page is almost universally top-to-bottom. But at times you would like to go across a page, perhaps to compare items (identical content in two different languages), or to make good use of a page real estate by grouping several small items together (e.g. images). So the <sidebyside> tag is strictly a layout device, though it does convey some meaning by grouping certain objects together. A variety of different objects can be put side-by-side using the sidebyside element. Specifically, figure, table, listing, paragraphs, image, tabular, p, ol, ul, dl, pre, poem, and more. The individual components of a <sidebyside> are generically called panels.

As a layout device, the <sidebyside> does not allow a <caption>, is never numbered, and therefore cannot be cross-referenced. You may cross-reference whatever element holds the <sidebyside>, and many of the panels may be cross-referenced individually.

As a first example, we have two single paragraphs, laid out with different widths, and slight margins on each side. The widths have been chosen experimentally to get roughly identical heights for the two paragraphs of varying length.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lorem diam, convallis in nulla sed, accumsan fermentum urna. Pellentesque aliquet leo elit, ut consequat nunc dapibus ac. Sed lobortis leo tincidunt, vulputate nunc at, ultricies leo. Vivamus purus diam, tristique laoreet purus eget, mollis gravida sapien. Nunc vulputate nisl ac mauris hendrerit cursus. Sed vel molestie velit. Suspendisse sem sem, elementum at vehicula id, volutpat ac mi. Nullam ullamcorper fringilla purus in accumsan. Mauris at nunc accumsan orci dictum vulputate id id augue. Suspendisse at dignissim elit, non euismod nunc. Aliquam faucibus magna ac molestie semper. Aliquam hendrerit sem sit amet metus congue tempor. Donec laoreet laoreet metus, id interdum purus mattis vulputate. Proin condimentum vitae erat varius mollis. Donec venenatis libero sed turpis pretium tempor.

Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra. Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

Subsection22.1Figures with Numbers Side-By-Side

Figures, or other captioned items such as tables or listings, can be placed side-by-side using the sidebyside element. The figures will be captioned and numbered as if they were part of the vertical flow of the document. For example, see Figure 22.4 and Figure 22.5

However, if the <sidebyside> is placed inside another <figure>, then the outer figure gets an overall caption and a “regular” number, while the captions of the interior items will be labelled as (a), (b), (c), etc; for example, see the subfigures in Figure 22.1. You can also cross-reference the subfigures individually, for example: Figure 22.1.(a).

The sidebyside tag can have an attribute widths that specifies a percentage width of the page for each panel of the layout. There are automatic margins by default, and any remaining width is divided evenly to space out the panels. When the margins attribute is given as auto, or in the default case, the margins provided each equal half of the inter-panel space.

With no attributes on the sidebyside, each panel is the same width and there is no inter-panel space and no margin. For a sidebyside with a single panel, with its width specified, the panel will be centered.

Trefoil image
(a)
(b)
Figure22.1Side-by-Side, with figures as children, automatic margin
(a)width=50%
(b)width=25%
Figure22.2Side-by-Side, with figures as children, margin set to zero
(a)
(b)
(c)
Figure22.3Widths calculated automatically, all defaults
Figure22.4Interior figure
Figure22.5Regular numbering
Figure22.6Regular numbering

Subsection22.2Images

We can use the sidebyside element to put images next to each other. These will illustrate a text, but with no captions or numbers, cannot be cross-referenced. This next example has 10% margins, and the panels have widths 25% and 40%, leaving 15% computed as the one inter-panel space.

Now we fine-tune with different widths (which add up to 100%). The five imgages have been given different vertical alignments, top middle bottom top middle via the valigns attribute.

If you want an overall caption to a group of images, but no sub-captions on your images, that is also straightforward. This example has no attributes specified. The overall <figure> may be cross-referenced, as Figure 22.7

Figure22.7Two equally-spaced (identical) images

Subsection22.3Common Side-By-Side Constructions

We have now seen at least one example of each of the four most common constructions involving sidebyside. Working from the exterior inward, we can go figure, sidebyside, figure, X, where X is some atomic (unnumbered) item we might use elsewhere in a PreTeXt document, the inner figure may be repeated with different objects X, and the figures have captions. Each figure is independently optional, leading to the four combinations in this table. Note this applies to any captioned item used inside the sidebyside, but a figure is the most flexible.

Outer Figure Inner Figure Effect
Absent Absent Layout only, no numbers nor captions
Absent Present Numbers and captions on figure(s)
Present Absent Number and overall caption
Present Present Number and overall caption,
sub-numbers and captions on figure(s)
Table22.8sidebyside and figure interactions

Subsection22.4A Single Captionless Image

Sometimes you may want to include a single image or table in an example or exercise without a caption. You can also achieve this using sidebyside. The first has width 10%, and the second has width 10% and margins 25%.

A paragraph, just to show where the first stops and the second ends.

You might wish to place a single image flush-left, or flush-right. You can specify the margins attribute as a pair of percentages for different left and right margins. The following are laid out with two margins, with a 0% left margin and right margin (respectively).

Results will be incorrect for the latter if the widths of the left margin and the panel do not add to 100%.

Of course, asymmetric margins may be used with several panels. The following is designed to leave a 25% gap between the two panels.

Subsection22.5Vertical Alignment

Vertical alignment can be specified using the valign attribute which admits a space-separated list of top, middle, and bottom; the default is top.

Figure22.9Middle
Figure22.10Top
Figure22.11Middle

The singular version of the attribute, valign, can provide the same alignment to each panel, here we use five different widths, but all with vertical alignment of middle.

Subsection22.6Text Next to Text and Images

Text can be put next to other blocks of text using either the paragraphs element, which can contain multiple paragraphs using the p element.

If only one paragraph is required, simply use the p element on its own. In addtion to captions, elements which allow titles will have those displayed above the panel. So paragraphs can carry a title, but a single paragraph, p, will not.

Note: The paragraphs element, used as a container for several p in a panel, and without a title, will be replaced by some sort of stacking mechanism. A single p may be used now as the contents of a panel, without a title.

Sample Title
A Really Long Title on a Fairly Skinny Paragraphs Element

here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

Similarly, text can be put next to images.

here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text cross reference: Figure 22.12 and math: \(x^2\)

You can place text next to numbered figures, as shown below in Figure 22.12.

here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text; cross reference: Figure 22.12 and math: \(x^2\)

Figure22.12Text next to a figure

Subsection22.7Image Formats, Side-by-Sides

Most of our demonstrations here use our square “blue cross” test image, which is provided as a PNG image. You may specify images by any of the methods described in the section on graphics, Section 9. The complete graph below is specified with no file extension, on the assumption that an SVG version exists for HTML output, and a PDF version exists for output. The second is a JPEG image that we use elsewhere for a YouTube video, but recycle here as an image provided in that format. By default, they are aligned at their tops.

<<SVG image is unavailable, or your browser cannot render it>>

Here are two TikZ images, authored side-by-side. The first has had its geometric portions of the original scaled down to 75%, with the effect of increasing the text, relatively, so the application in a side-by-side panel with 25% width has legible text. We caption only the second panel, which has no text adjustments. From TeXample.net.

<<SVG image is unavailable, or your browser cannot render it>>

<<SVG image is unavailable, or your browser cannot render it>>

Images by Stefan Kottwitz

Figure22.13 Work Flow

Subsection22.8Tables Side-By-Side

Tables can also be put side-by-side, as demonstrated below in Figure 22.14; naturally, subtables can be referenced as in Table 22.14.(a).

1111 2222
aaaa bbbb
AAAA BBBB
1111 2222
aaaa bbbb
AAAA BBBB
(a)width=50%
(b)width=25%
Figure22.14Side-by-Side, with tables as children
1111 2222
aaaa bbbb
AAAA BBBB
1111 2222
aaaa bbbb
AAAA BBBB
(a)
(b)
Figure22.15Widths can be calculated automatically

If you put two table elements side-by-side without an enclosing <figure>, then they will use regular numbering; see Tables 22.16–22.18.

1111 2222
aaaa bbbb
AAAA BBBB
1111 2222
aaaa bbbb
AAAA BBBB
1111 2222
aaaa bbbb
AAAA BBBB
Table22.16
Table22.17
Table22.18

Subsection22.9Tables Next to Figures

Tables and figures can go next to each other, as demonstrated in Table 22.19 and Figure 22.20, plus within an overall captioned figure, Figure 22.21.

1111 2222
aaaa bbbb
AAAA BBBB
Table22.19Table next to a Figure
Figure22.20Figure next to a Table
1111 2222
aaaa bbbb
AAAA BBBB
(a)Table next to a Figure
(b)Figure next to a Table
Figure22.21Figure and Table, with overall caption, hence sub-captioned

Subsection22.10Tables Next to Text

Tables can go next to blocks of text using the <paragraphs> element.

1111 2222
aaaa bbbb
AAAA BBBB

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

here is some text here is some text here is some text here is some text here

Table22.22Table next to text

Subsection22.11Tabular Next to Each Other

Four tabular elements inside a single <sidebyside> will result in no captions at all.

1111 2222
aaaa bbbb
AAAA BBBB
CCCC DDDD
1111 2222
aaaa bbbb
AAAA BBBB
1111 2222
aaaa bbbb
AAAA BBBB
1111 2222
aaaa bbbb
AAAA BBBB

Subsection22.12Lists in Side-by-Sides

A “regular” list normally belongs in a p but it can be placed unadorned into a panel of a side-by-side, as demonstrated below in Subsection 22.13. You can also put “named” lists into a panel, and then the title, introduction, conclusion, and caption will behave as expected, along with a number that might be used in a cross-reference (22.23.(b)), or perhaps we might cross-reference by title, A List of Colors.

A List of Colors

Dr. Seuss again.

  • One fish
  • Two fish
  • Red fish
  • Blue fish
  1. Blue

    1. Light
    2. Navy
    3. Royal
  2. Red

    1. Maroon
    2. Pink
    3. Shocking

This ends our example.

(a)Sea Life
(b)Color Shades
Figure22.23Two named lists

We also need to test a sidebyside in a list. The widths are now relative to the space given over to an indented item. Here we nest and nest and nest and nest to get a big, obvious indentation, and then include an image at 100% width and no margin. In your mind's eye, or with a ruler, check that the image spans all the way over to the right margin.

  1. This is

    1. a very

      1. wide

        1. rectangle

Subsection22.13Other Panels

Other elements may be placed within a sidebyside element. Pure lists first.

  1. Footnotes: Fermat allusion at 2.1.

  2. Examples: Mystery derivative at 4.2.

  3. Definition-like: A mathematical statement with no proof 4.9.

  4. Figures: An early plot, Figure 5.2.

  • Footnotes: Fermat allusion at 2.1.

  • Examples: Mystery derivative at 4.2.

  • Definition-like: A mathematical statement with no proof 4.9.

  • Figures: An early plot, Figure 5.2.

You can place aligned equations in paragraphs within a sidebyside element.

here is some text, and here is an equation that contains alignment.

\begin{align*} f(x)&= x^2+3x+2\\ &=(x+2)(x+1) \end{align*}

here is some text, and here is an equation that contains alignment.

\begin{align*} f(x)&= x^2+3x+2\\ &=(x+2)(x+1) \end{align*}

here is some text, and here is an equation that contains alignment.

\begin{align*} f(x)&= x^2+3x+2\\ &=(x+2)(x+1) \end{align*}

Pre-formatted text may be included by using the pre element. This content is horizontally-rigid, so as the author, you need to be sure to provide enough width for the panel to contain the content. It is easy to see the boundary of the panels when rendered in HTML since there is a background that fills the panel.

program HelloWorld;
begin
  WriteLn('Hello, world!');
end.
#include

int main()
{
    std::cout << "Hello, world!";
    return 0;
}
Figure22.24“Hello, World!” in Pascal and C++
graph1.txt
9
6 2
1 5
1 7
6 8
9 1
4 3
5 7
1 3
5 9
7 9

<<SVG image is unavailable, or your browser cannot render it>>

Figure22.25A graph defined by data (from Keller and Trotter's Applied Combinatorics)

Subsection22.14Poems as Side-By-Side Panels

Poems may be panels of a side-by-side layout. Here we place some commentary alongside. See Section 24 for general information about poetry.

Fire and Ice
Commentary
Some say the world will end in fire,
Some say in ice.
From what I've tasted of desire
I hold with those who favor fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.
Robert Frost

You might have several things to say about a poem and you could use a sequence of paragraphs immediately adjacent.

This is a second paragraph of commentary.

Poems are not horizontally-rigid, but they are not perfectly horizontally-flexible either. The left copy of this next poem is in a panel roughly 2/3 the width of the page and fits there. The right copy has the first five lines and is in space about half the previous width, and you can see the lines being wrapped with obvious indentation. So you can constrain the width of a poem if you do not mind the additional indentation. (Recognize that this example is a bit extreme.)

Sonnet to Liberty
Sonnet to Liberty
Not that I love thy children, whose dull eyes
See nothing save their own unlovely woe,
Whose minds know nothing, nothing care to know,
But that the roar of thy Democracies,
Thy reigns of Terror, thy great Anarchies,
Mirror my wildest passions like the sea,
And give my rage a brother! Liberty!
For this sake only do thy dissonant cries
Delight my discreet soul, else might all kings
By bloody knout or treacherous cannonades
Rob nations of their rights inviolate
And I remain unmoved-and yet, and yet,
These Christs that die upon the barricades,
God knows it I am with them, in some things.
Oscar Wilde
Not that I love thy children, whose dull eyes
See nothing save their own unlovely woe,
Whose minds know nothing, nothing care to know,
But that the roar of thy Democracies,
Thy reigns of Terror, thy great Anarchies,
Oscar Wilde

Subsection22.15Side-By-Side Groups

A “side-by-side group,” <sbsgroup>, is still in development. (Notably, subcaptions do not behave as expected.) It is a sequence of sidebyside, which may conceivably use the same margins, widths and vertical alignments for each horizontal run of panels. Attributes on the sbsgroup are global to the group's enclosed sidebyside, and will be used by each contained sidebyside. If attributes are present on an individual sidebyside, they override the global values. The next two examples demonstrate some of this behavior, in a limited way.

One.

Two.

Three.

Four.

Five.

Six.

Figure22.26Overall SBS Group

A long poem, when placed into a sidebyside will not fit onto a physical page and will not break across pages. With a sbsgroup you can put each stanza (say) into its own sidebyside and place something (commentary) next to it. We include the title with the first stanza and the author with the last stanza. This device can also be useful to attach commentary to specific stanzas.

The Stolen Child
Stanza One
Where dips the rocky highland
Of Sleuth Wood in the lake,
There lies a leafy island
Where flapping herons wake
The drowsy water-rats;
There we've hid our faery vats,
Full of berries
And of reddest stolen cherries.
Come away, O human child!
To the waters and the wild
With a faery, hand in hand,
For the world's more full of weeping than you
can understand.

Some commentary

Stanza Two
Where the wave of moonlight glosses
The dim grey sands with light,
Far off by furthest Rosses
We foot it all the night,
Weaving olden dances,
Mingling hands and mingling glances
Till the moon has taken flight;
To and fro we leap
And chase the frothy bubbles,
While the world is full of troubles
And is anxious in its sleep.
Come away, O human child!
To the waters and the wild
With a faery, hand in hand,
For the world's more full of weeping than you
can understand.

Some commentary

Stanza Three
Where the wandering water gushes
From the hills above Glen-Car,
In pools among the rushes
That scarce could bathe a star,
We seek for slumbering trout
And whispering in their ears
Give them unquiet dreams;
Leaning softly out
From ferns that drop their tears
Over the young streams.
Come away, O human child!
To the waters and the wild
With a faery, hand in hand,
For the world's more full of weeping than you
can understand.

Some commentary

Stanza Four
Away with us he's going,
The solemn-eyed:
He'll hear no more the lowing
Of the calves on the warm hillside
Or the kettle on the hob
Sing peace into his breast,
Or see the brown mice bob
Round and round the oatmeal-chest.
For he comes, the human child,
To the waters and the wild
With a faery, hand in hand,
From a world more full of weeping than he
can understand.
William Butler Yeats

Some commentary

The main rationale for sbsgroup is to layout a grid of items, and by placing the layout parameters on the sbsgroup element, the items can line up across sidebyside and subcaptioning can run across the whole group. So, for example, if you have images to compare by placing in a grid, then making them all the same size, or of the same aspect ratio, can help with the overall consistency.

This example has three sidebyside, each with four figure containing an identical image. Since the images are identical and the width is set to 20% they should all line up nicely with little effort. Since the default for margins is automatic, the remaining 20% of the overall width will be used for three inter-panel spaces of 5% and two margins of 2.5% each. Note the numbering of these as independent figures. We have left the captions empty for reasons of space, but you could add more information. Note that in print, a page break is allowed between any two of the sidebyside and cannot be suppressed.

Figure22.27
Figure22.28
Figure22.29
Figure22.30
Figure22.31
Figure22.32
Figure22.33
Figure22.34
Figure22.35
Figure22.36
Figure22.37
Figure22.38

We recycle the prior sbsgroup but now put it in its own overall figure. That will allow a caption for the whole group, and will cause the twelve figures to be subcaptioned. Except the subcaptioning is not implemented. Soon.

(a)
(b)
(c)
(d)
(e)
(f)
(g)
(h)
(i)
(j)
(k)
(l)
Figure22.39Twelve images, arranged in a grid

One more test. We override the spacing and vertical alignments of the middle sidebyside. Note that it is easy to make a panel so skinny that even the smallest possible caption does not fit in the width.

Figure22.40
Figure22.41
Figure22.42
Figure22.43
Figure22.44
Figure22.45
Figure22.46
Figure22.47
Figure22.48
Figure22.49
Figure22.50
Figure22.51

Subsection22.16Testing Styling of Related Elements

This subsection has non-side-by-side structures, to aid with the effects of styling decisions across the range of possibilities. First a figure with a caption holding a scaled image and a cross-reference for knowl testing: Figure 22.52.

Figure22.52A traditional figure