Derivatives and IntegralsAn Annotated Discourse

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.

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

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.

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%. In general, in the case of a single panel, the left margin, right margin, and panel width should all add up 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.

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.

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.

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\)

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.

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).

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.

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

1111	2222
aaaa	bbbb
AAAA	BBBB

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

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

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.

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

            

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

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

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;
}

graph1.txt
9
6 2
1 5
1 7
6 8
9 1
4 3
5 7
1 3
5 9
7 9

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

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.

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.