SA Side-By-Side Panels

Section 25 Side-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, 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.

Subsection 25.1 Figures 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 25.4 and Figure 25.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 25.1. You can also cross-reference the subfigures individually, for example: Figure 25.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.

a white square outlined in blue covered by a black X — (a)

Subsection 25.2 Images

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 images 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 25.7

Figure 25.7. Two equally-spaced (identical) images

Subsection 25.3 Common 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.

Table 25.8. sidebyside and figure interactions

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)

Subsection 25.4 Vertical 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.

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.

Subsection 25.5 Text Next to Text and Images

Text can be put next to other blocks of text using the stack element, which can contain multiple paragraphs using the p element (see Subsection 25.12). If only one paragraph is required, simply use the p element on its own.

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

Similarly, text can be put next to images.

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

Subsection 25.6 Image 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 LaTeX 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.

jpg

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

www.texample.net/tikz/examples/

pdf svg

Images by Stefan Kottwitz

Venn Diagram
²
www.texample.net/tikz/examples/venn/
Work Flow
³
www.texample.net/tikz/examples/smart-circle/

Subsection 25.7 Tables Side-By-Side

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

1111	2222
aaaa	bbbb
AAAA	BBBB

(a) width=50%

1111	2222
aaaa	bbbb
AAAA	BBBB

(b) width=25%

Figure 25.14. Side-by-Side, with tables as children

1111	2222
aaaa	bbbb
AAAA	BBBB

(a) Table with automatic widths

1111	2222
aaaa	bbbb
AAAA	BBBB

(b) Table with automatic widths

Figure 25.15. Widths 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 25.16–25.18.

1111	2222
aaaa	bbbb
AAAA	BBBB

Table 25.16.

1111	2222
aaaa	bbbb
AAAA	BBBB

Table 25.17.

1111	2222
aaaa	bbbb
AAAA	BBBB

Table 25.18.

Subsection 25.8 Tables Next to Figures

Tables and figures can go next to each other, as demonstrated in Table 25.19 and Figure 25.20, plus within an overall captioned figure, Figure 25.21.

1111	2222
aaaa	bbbb
AAAA	BBBB

Table 25.19. Table next to a Figure

Subsection 25.9 Tables Next to Text

Tables can go next to blocks of text using the <stack> element (see Subsection 25.12).

1111	2222
aaaa	bbbb
AAAA	BBBB

Table 25.22. Table next to text

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

Subsection 25.10 Tabular 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

Subsection 25.11 Lists 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 25.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 (25.23.(b)), or perhaps we might cross-reference by title, Color Shades.

Dr. Seuss again.

One fish
Two fish
⁴
Not fishes
Red fish
Blue fish

(a) Sea Life

Blue
⁵
in many shades
1. Light
2. Navy
3. Royal
Red
1. Maroon
2. Pink
3. Shocking

This ends our example.

(b) Color Shades

Figure 25.23. Two named lists

These same two lists can individually be the panels of a <sidebyside>, where here vertical alignment on the bottom attempts to align the titles, which are placed below for panels of a <sidebyside>.

Dr. Seuss again.

One fish
⁶
No more fishes
Two fish
Red fish
Blue fish

List 25.24. Sea Life

Blue
1. Light
2. Navy
3. Royal
Red
⁷
a really nice color
1. Maroon
2. Pink
3. Shocking

This ends our example.

List 25.25. Color Shades

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.

This is
1. a very
  1. wide
    
    rectangle

Subsection 25.12 Stacking: Back to Vertical Flow

You might wish to mix disparate items within a panel, returning to a vertical flow within a panel. For example, you might want a diagram to the left and some paragraphs of commentary to the right. Or perhaps a photograph on one side and a list of bullet points to the other side. A <stack> is a container that can only be used to collect several items into a single panel of a <sidebyside>. You cannot point to it, but you can point to its contents as usual. Contents may be anything you could otherwise put into a sidebyside panel that does not have a <caption> or a <title>. In particular, these panels cannot be sub-numbered since the panel cannot be made into a <figure>.

Similar items can also be stacked, of course. Most importantly, a normal panel will accept a single paragraph. If you want several paragraphs, simply collect them in a stack.

A simple sentence inside a single <p> as the first item in a stack.

A less simple sentence that will wrap inside the panel to make the right panel taller and allow us to experiment with sliding the left panel contents up and down, here it is placed in the middle.

We have an image to the left, as a regular panel (not a stack). In the right panel we stack a list of properties, followed by a descriptive paragraph. We middle-align the stack at the bottom, just as a demonstration (it would likely look better with top alignment).

Blue
Square
Geometric

The blue-ness of the border contrasts with the stark emptieness of the white interior, evoking images of blue skies and vast sandy deserts. The harsh black cross draws the viewer’s attention to the exact center.

In LaTeX an image or a tabular can be used within a paragraph. Here we test a mixture of the three items to make sure they are properly separated in a conversion to LaTeX.

Paragraph one.

Paragraph two.

1111	2222
aaaa	bbbb
AAAA	BBBB

We imagine a <sidebyside> using a <stack> to enable constructions like a table of data in one panel, and maybe a plot with some text next to it.

In the toy example next, the list of data is rigid, so we have set the first panel width to 40%, a value obtained experimentally to just contain the list. This allow us to set the second panel to a width of 58%, and we use no margins. If you try to balance the heights of the two panels, this can become a bit of a zero-sum game. A wider second column means the text occupies fewer lines, but the wider image also creates a taller image, consuming more vertical space.

Figure 25.26. Experimental results collected in a figure

Bully Pulpit.

Remember that <sidebyside> has attributes that strongly influence layout. That is intentional. But to support a variety of output formats, it does not allow overly-precise control, and they be viewed as providing hints to an implementer of a conversion. So for example, do not expect <sidebyside> to function like a LaTeX tabular or an HTML table.

In particular, elements of two consecutive <stack> will not line up, unless perhaps you construct them identically. Consider a <sbsgroup> for something closer to putting items into rows.

Subsection 25.13 Other Panels

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

Footnotes: Fermat allusion at 2.1.
Examples: Mystery derivative at 4.2.
Definition-like: A mathematical statement with no proof 4.15.
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.15.
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;
}

Figure 25.27. “Hello, World!” in Pascal and C++

Figure 25.28. A graph defined by data (from Keller and Trotter’s Applied Combinatorics)

Subsection 25.14 Poems as Side-By-Side Panels

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

Fire and Ice

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

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

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,
…

Oscar Wilde

Subsection 25.15 Side-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.

Figure 25.29. Overall 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

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 on Stanza One.

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 on Stanza Two.

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 on Stanza Three.

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 on Stanza Four.

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.

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.

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.

Subsection 25.16 Testing a Side-By-Side First

A <sidebyside> that appears first within some other container can wreak havoc in LaTeX output. Below we have this situation twice, once in an <activity>, then in an <example>, then in a <paragraphs>.

Activity 25.1.

Here is text block 1

Here is text block 2

Example 25.55.

Here is text block 1

Here is text block 2

And a <sbsgroup> in similar circumstances.

Example 25.56.

Here is text block 1

Here is text block 2

Here is text block 3

Here is text block 4

First Child of a Paragraphs.

A	B
C	D

\(\alpha\)	\(\beta\)
\(\gamma\)	\(\delta\)

Subsection 25.17 Testing 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 25.57.

Prev Top Next

\(i\)	\(t_i\)	\(x_i\)	\(y_i\)
0	0.00	0.0000	0.5000
1	0.20	0.1000	0.4800
2	0.40	0.1960	0.4560
3	0.60	0.2872	0.4295
4	0.80	0.3731	0.4027
5	1.00	0.4536	0.3783
6	1.20	0.5293	0.3591
7	1.40	0.6011	0.3480
8	1.60	0.6707	0.3474
9	1.80	0.7402	0.3603
10	2.00	0.8123	0.3900