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.
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 24.4 and Figure 24.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 24.1. You can also cross-reference the subfigures individually, for example: Figure 24.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.
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 24.7
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 figure s 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.
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.
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 24.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
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 24.12 and math: \(x^2\)
You can place text next to numbered figures, as shown below in Figure 24.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 24.12 and math: \(x^2\)
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.
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 1
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 24.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 (24.23.(b)), or perhaps we might cross-reference by title, Color Shades.
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>.
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.
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.
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 LaTeXtabular 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.
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.
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.)
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.
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 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.
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>.
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 24.57.
