Skip to main content
Logo image

Section 29 Atomic Objects

View Source for section
<section xml:id="atomic-items" label="section-atomic-items">
    <title>Atomic Objects</title>
    <introduction>
      <p>
        Some <pretext /> objects are relatively indivisable and are used as components of other structures.
        We call them <term>atomic</term>,
        even if the term is not perfect.
        A good example is <tag>image</tag>
        (next, <xref ref="atomic-image" />).
        This section is arranged according to these objects and tests the various ways they can be employed.
      </p>
      <p>
        We frequently include some nonsense text inside short intervening paragraphs to test spacing and establish margins.
      </p>
    </introduction>

    <subsection xml:id="atomic-image">
      <title><tag>image</tag></title>
      <p>
        An <tag>image</tag> can be placed in five different ways:
        <ol>
          <li>
            all by itself,
            as a peer of <tag>p</tag> typically, with layout control,
          </li>
          <li>
            inside a <tag>figure</tag>, earning a number and caption,
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured,
          </li>
          <li>
            inside a <tag>figure</tag> inside a <tag>sidebyside</tag>,
            with size and layout configured,
            with a number and caption, and
          </li>
          <li>
            inside a <tag>figure</tag> inside a <tag>sidebyside</tag> inside a <tag>figure</tag>,
            with size and layout configured,
            with a number and caption, but now sub-numbered ((a), (b), (c),<ellipsis />).
          </li>
        </ol>
        Examples of each, and more.
      </p>
      <p>
        All by itsef, with no layout specified,
        so showing the default size and placement.
        Vivamus in congue massa.
        Morbi condimentum ac magna at accumsan.
        Vestibulum ac augue eu lorem semper gravida.
      </p>
      <image source="images/nz-landscape.jpg" />
      <p>
        Width set at 40%, so equal margins and thus centered.
        Aenean faucibus augue tellus,
        et sollicitudin tortor finibus non.
        Maecenas semper dolor quis diam placerat,
        iaculis sollicitudin augue finibus.
        Vestibulum facilisis ligula lectus,
        ac tristique nisl aliquet non.
      </p>
      <image source="images/nz-landscape.jpg" width="40%" />
      <p>
        Asymmetric margins of 20% and 40% given,
        implying 40% width, equal to previous instance.
        Vivamus suscipit diam eget mi cursus viverra.
      </p>
      <image source="images/nz-landscape.jpg" margins="20% 40%" />
      <p>
        As a plain component of a <tag>sidebyside</tag>.
        Widths here are 20% and 30%, margins and gaps are automatic,
        default alignment on top edges.
        Nulla pharetra imperdiet elit,
        in sodales nibh blandit ultricies.
        Maecenas efficitur ac felis ut pharetra.
      </p>
      <sidebyside widths="20% 30%">
        <image source="images/nz-landscape.jpg" />
        <image source="images/nz-landscape.jpg" />
      </sidebyside>
      <p>
        Inside a <tag>figure</tag> with no adjustments, so default behavior.
        Note how a <tag>figure</tag> occupies the entire width of the page,
        so then does the caption.
      </p>
      <figure>
        <caption>New Zealand Landscape</caption>
        <image source="images/nz-landscape.jpg" />
      </figure>
      <p>
        Inside a <tag>figure</tag> with asymmetric (large) margins of 30% and 60%. Quisque finibus augue sit amet facilisis fringilla.
        Aenean faucibus augue tellus,
        et sollicitudin tortor finibus non.
      </p>
      <figure>
        <caption>New Zealand Landscape</caption>
        <image source="images/nz-landscape.jpg" margins="30% 60%" />
      </figure>
      <p>
        Inside figures inside a <tag>sidebyside</tag>.
        Same widths as previous <tag>sidebyside</tag> but alignment on bottoms of the panels,
        to partially align captions.
        Note how the captions are constrained in width by the width of the panels of the side-by-side.
      </p>
      <sidebyside widths="20% 30%" valign="bottom">
        <figure>
          <caption>NZ Landscape</caption>
          <image source="images/nz-landscape.jpg" />
        </figure>
        <figure>
          <caption>New Zealand Terrascape</caption>
          <image source="images/nz-landscape.jpg" />
        </figure>
      </sidebyside>
      <p>
        Identical code to previous example,
        but now wrapped in an overall <tag>figure</tag>,
        which has its own caption and number,
        leaving the interior figures to be sub-numbered.
        Cross-references use the full number:
        <xref ref="nz-land" text="type-global" />.
      </p>
      <figure>
        <caption>Amalgamation of Scapes</caption>
        <sidebyside widths="20% 30%" valign="bottom">
          <figure>
            <caption>NZ Landscape</caption>
            <image source="images/nz-landscape.jpg" />
          </figure>
          <figure xml:id="nz-land">
            <caption>New Zealand Terrascape</caption>
            <image source="images/nz-landscape.jpg" />
          </figure>
        </sidebyside>
      </figure>
      <p>
        For <latex />, in some circumstances it is desirable to print the image on the next line,
        but backed up by some amount.
        This
        <q>top-aligns</q>
        the image with a number of some sort off to the left.
        The following are tests for this behavior.
        Here is a list.
        <ol>
          <li>
            <image margins="0% 70%" source="images/nz-landscape.jpg" />
          </li>
          <li><image source="images/nz-landscape.jpg" /></li>
        </ol>
      </p>
      <p>
        A <c>rotation="n"</c> attribute applied to a bare image will rotate the image by n<degree />.
        The vertical space adjusts to accomodate the rotated image in the latex version but not in the html version.
      </p>
      <figure>
        <caption>Rotated Images</caption>
        <sidebyside width="33%" valign="bottom">
          <figure>
            <caption><c>rotate="180"</c></caption>
            <image source="images/Yellow_Duck.png" rotate="180" />
          </figure>
          <figure>
            <caption><c>rotate="15"</c></caption>
            <image source="images/Yellow_Duck.png" rotate="15" />
          </figure>
        </sidebyside>
      </figure>
      <p>
        For pdf output destined for print,
        <ie /> when the publication file entry <c>latex/@print="yes"</c>,
        a <c>@landscape="yes"</c> attribute applied to a <tag>figure</tag>,
        <tag>table</tag>,
        <tag>list</tag> or <tag>listing</tag> will cause the object to be rotated 90<degree /> and presented on its own page.
        Placement of the float is determined by <latex /> and multipage objects are not supported.
      </p>
      <figure xml:id="propulsion_system2" landscape="yes">
        <caption>This landscape figure will be rotated so the long edge is vertical, and will appear on its own page in <em>print PDF</em> output.</caption>
        <image source="images/propulsion_system" />
      </figure>
      <figure xml:id="rotated-fig-with-sbs" landscape="yes">
        <caption>Wide figure containing a sidebyside containing a rotated image.  This will be rotated and appear on its own page in <term>print PDF</term> output.</caption>
        <sidebyside widths="25% 70%" margins="0%" valign="bottom" landscape="true">
          <figure>
            <caption>Quack</caption>
            <image rotate="10" source="images/Yellow_Duck.png" />
          </figure>
          <figure>
            <caption>Propulsion System</caption>
            <image source="images/propulsion_system" />
          </figure>
        </sidebyside>
      </figure>
      <exercise>
        <task>
          <statement>
            <image margins="0% 70%" source="images/nz-landscape.jpg" />
          </statement>
        </task>
        <task>
          <statement>
            <image source="images/nz-landscape.jpg" />
          </statement>
        </task>
      </exercise>
      <exercises>
        <exercise>
          <task>
            <statement>
              <image margins="0% 70%" source="images/nz-landscape.jpg" />
            </statement>
          </task>
          <task>
            <statement>
              <image source="images/nz-landscape.jpg" />
            </statement>
          </task>
        </exercise>
        <exercisegroup cols="2">
          <exercise>
            <statement>
              <image margins="0% 70%" source="images/nz-landscape.jpg" />
            </statement>
          </exercise>
          <exercise>
            <statement>
              <image source="images/nz-landscape.jpg" />
            </statement>
          </exercise>
        </exercisegroup>
      </exercises>
    </subsection>
    <subsection xml:id="atomic-video">
      <title><tag>video</tag></title>
      <p>
        An <tag>video</tag> can be placed in five different ways:
        <ol>
          <li>
            all by itself,
            as a peer of <tag>p</tag> typically, with layout control,
          </li>
          <li>
            inside a <tag>figure</tag>, earning a number and caption,
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured,
          </li>
          <li>
            inside a <tag>figure</tag> inside a <tag>sidebyside</tag>,
            with size and layout configured,
            with a number and caption, and
          </li>
          <li>
            inside a <tag>figure</tag> inside a <tag>sidebyside</tag> inside a <tag>figure</tag>,
            with size and layout configured,
            with a number and caption, but now sub-numbered ((a), (b), (c),<ellipsis />).
          </li>
        </ol>
        Examples of each, and more.
      </p>
      <p>
        Videos can be realized in many forms,
        and can come from a variety of sources.
        See <xref ref="section-video" text="type-global" /> for tests of some of that variety.
        Here we are testing placement within surroundings and testing the schema for location.
        But we do have two videos in each test,
        one provided as a local file and one embedded from a service.
      </p>
      <p>
        All by itsef, with no layout specified,
        so showing the default size and placement.
        Vivamus in congue massa.
        Morbi condimentum ac magna at accumsan.
        Vestibulum ac augue eu lorem semper gravida.
      </p>
      <video xml:id="ups-promo-7" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
      <p>
        Vestibulum facilisis ligula lectus,
        ac tristique nisl aliquet non.
        Quisque ornare felis arcu.
        Vivamus suscipit diam eget mi cursus viverra.
      </p>
      <video xml:id="pre-roll-countdown-7" youtube="Srmdij0CU1U" />
      <p>
        Width set at 40%, so equal margins and thus centered.
        Aenean faucibus augue tellus,
        et sollicitudin tortor finibus non.
        Maecenas semper dolor quis diam placerat,
        iaculis sollicitudin augue finibus.
        Vestibulum facilisis ligula lectus,
        ac tristique nisl aliquet non.
      </p>
      <video xml:id="ups-promo-8" source="video/ups-visitor-guide-360" width="40%" preview="preview/ups-promo-preview.jpg" />
      <p>
        Vestibulum facilisis ligula lectus,
        ac tristique nisl aliquet non.
        Quisque ornare felis arcu.
        Vivamus suscipit diam eget mi cursus viverra.
      </p>
      <video xml:id="pre-roll-countdown-8" youtube="Srmdij0CU1U" width="40%" />
      <p>
        Asymmetric margins of 20% and 40% given,
        implying 40% width, equal to previous instance.
        Vivamus suscipit diam eget mi cursus viverra.
      </p>
      <video xml:id="ups-promo-9" source="video/ups-visitor-guide-360" margins="20% 40%" preview="preview/ups-promo-preview.jpg" />
      <p>
        Vestibulum facilisis ligula lectus,
        ac tristique nisl aliquet non.
        Quisque ornare felis arcu.
        Vivamus suscipit diam eget mi cursus viverra.
      </p>
      <video xml:id="pre-roll-countdown-9" youtube="Srmdij0CU1U" margins="20% 40%" />
      <p>
        As a plain component of a <tag>sidebyside</tag>.
        Widths here are 20% and 30%, margins and gaps are automatic,
        default alignment on top edges.
        Nulla pharetra imperdiet elit,
        in sodales nibh blandit ultricies.
        Maecenas efficitur ac felis ut pharetra.
      </p>
      <sidebyside widths="20% 30%">
        <video xml:id="ups-promo-10" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
        <video xml:id="pre-roll-countdown-10" youtube="Srmdij0CU1U" />
      </sidebyside>
      <p>
        Inside a <tag>figure</tag> with no adjustments, so default behavior.
        Note how a <tag>figure</tag> occupies the entire width of the page,
        so then does the caption.
      </p>
      <figure>
        <caption>University of Puget Sound Promotional Video</caption>
        <video xml:id="ups-promo-11" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
      </figure>
      <p>
        Vestibulum facilisis ligula lectus,
        ac tristique nisl aliquet non.
        Quisque ornare felis arcu.
        Vivamus suscipit diam eget mi cursus viverra.
      </p>
      <figure>
        <caption>Pre-Roll Countdown</caption>
        <video xml:id="pre-roll-countdown-11" youtube="Srmdij0CU1U" />
      </figure>
      <p>
        Inside a <tag>figure</tag> with asymmetric (large) margins of 30% and 60%. Quisque finibus augue sit amet facilisis fringilla.
        Aenean faucibus augue tellus,
        et sollicitudin tortor finibus non.
      </p>
      <figure>
        <caption>University of Puget Sound Promotional Video</caption>
        <video xml:id="ups-promo-12" source="video/ups-visitor-guide-360" margins="30% 60%" preview="preview/ups-promo-preview.jpg" />
      </figure>
      <p>
        Vestibulum facilisis ligula lectus,
        ac tristique nisl aliquet non.
        Quisque ornare felis arcu.
        Vivamus suscipit diam eget mi cursus viverra.
      </p>
      <figure>
        <caption>Pre-Roll Countdown</caption>
        <video xml:id="pre-roll-countdown-12" youtube="Srmdij0CU1U" margins="30% 60%" />
      </figure>
      <p>
        Inside figures inside a <tag>sidebyside</tag>.
        Same widths as previous <tag>sidebyside</tag> but alignment on bottoms of the panels,
        to partially align captions.
        Note how the captions are constrained in width by the width of the panels of the side-by-side.
      </p>
      <sidebyside widths="20% 30%" valign="bottom">
        <figure>
          <caption>Pre-Roll Countdown</caption>
          <video xml:id="pre-roll-countdown-13" youtube="Srmdij0CU1U" />
        </figure>
        <figure>
          <caption>University of Puget Sound Promotional Video</caption>
          <video xml:id="ups-promo-13" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
        </figure>
      </sidebyside>
      <p>
        Identical code to previous example,
        but now wrapped in an overall <tag>figure</tag>,
        which has its own caption and number,
        leaving the interior figures to be sub-numbered.
        Cross-references use the full number:
        <xref ref="ups-video" text="type-global" />.
      </p>
      <figure>
        <caption>Amalgamation of Videos</caption>
        <sidebyside widths="20% 30%" valign="bottom">
          <figure>
            <caption>Pre-Roll Countdown</caption>
            <video xml:id="pre-roll-countdown-14" youtube="Srmdij0CU1U" />
          </figure>
          <figure xml:id="ups-video">
            <caption>University of Puget Sound Promotional Video</caption>
            <video xml:id="ups-promo-14" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
          </figure>
        </sidebyside>
      </figure>
    </subsection>
    <subsection xml:id="atomic-program">
      <title><tag>program</tag>, <tag>console</tag></title>
      <p>
        A <tag>program</tag> and/or <tag>console</tag> can be placed in at least six different ways:
        <ol>
          <li>
            all by itself,
            as a peer of <tag>p</tag> typically, with layout control
          </li>
          <li>
            inside a <tag>listing</tag>, earning a number and caption,
            with layout control
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured,
            and inside a <tag>figure</tag>
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured,
            with each inside a <tag>listing</tag>, earning different numbers
          </li>
          <li>
            inside a <tag>figure</tag> inside a <tag>sidebyside</tag> inside a <tag>listing</tag>,
            with size and layout configured,
            with a number and caption, but now sub-numbered ((a), (b), (c),<ellipsis />).
          </li>
        </ol>
        Examples of each, and more.
      </p>
      <p>
        Programs can be realized in many forms,
        and can come from a variety of sources.
        See <xref ref="section-video" text="type-global" /> for tests of some of that variety.
        Here we are testing placement within surroundings and testing the schema for location.
        But we do have two videos in each test,
        one provided as a local file and one embedded from a service.
      </p>
      <p>
        All by itsef, with no layout specified,
        so showing the default size and placement.
        Vivamus in congue massa.
        Morbi condimentum ac magna at accumsan.
        Vestibulum ac augue eu lorem semper gravida.
      </p>
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
      <p>
        Now a program with shorter lines, with no layout control.
      </p>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
      <p>
        And a <tag>console</tag> element,
        also with no layout control.
      </p>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
      <p>
        Now similar examples, but with layout control: margins and width.
      </p>
      <p>
        A <tag>program</tag> with a <attr>width</attr> attribute,
        so centered and with equal margins.
        Note how the lines word wrap due to the smaller width.
      </p>
<program language="r" width="60%">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
      <p>
        A <tag>program</tag> with short lines,
        so significant, and asymmetric margins,
        which experimentally do not induce any word-wrapping.
      </p>
<program language="c" margins="15% 20%">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
      <p>
        A longer <tag>console</tag>,
        with margins so significant the appearance is ill-advised.
      </p>
<console margins="50% 15%">
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
      <p>
        Two <tag>listing</tag>, with <tag>caption</tag>, and no layout control.
      </p>
<listing>
<caption>Hello, World! in C</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>A console session on a Raspberry Pi</caption>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
</listing>
      <p>
        Same two <tag>listing</tag>,
        but now with layout control on the <tag>program</tag> and <tag>console</tag>.
      </p>
<listing>
<caption>Hello, World! in C</caption>
<program language="c" margins="40% 20%" width="40%">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>A console session on a Raspberry Pi</caption>
<console margins="10% 10%">
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
</listing>
      <p>
        This <tag>sidebyside</tag> gives each panel a 30% width.
        The remaining 10% is apportioned for margins and separation.
      </p>
      <sidebyside width="30%">
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
      </sidebyside>
      <p>
        This is the same three-panel <tag>sidebyside</tag>,
        but now inside of a <tag>figure</tag>,
        earning a number and a <tag>caption</tag>.
      </p>
      <figure>
        <caption>Some Code Samples</caption>
        <sidebyside width="30%">
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
        </sidebyside>
      </figure>
      <p>
        Finally, a smaller <tag>program</tag> and a smaller <tag>console</tag>,
        each inside a <tag>listing</tag>,
        as the two panels of a <tag>sidebyside</tag> with no margins,
        and slightly different widths
        (to control word-wrapping).
        The panels have been aligned vertically so their captions align.
      </p>
      <sidebyside margins="0% 0%" widths="35% 55%" valign="bottom">
<listing>
<caption>Hello!</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>Raspberry Pi</caption>
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
</listing>
      </sidebyside>
      <p>
        And again, the two-panel <tag>sidebyside</tag> of <tag>listing</tag>,
        but now inside a <tag>figure</tag> that has a number and a caption.
        And then the <tag>listing</tag> are sub-numbered as (a) and (b).
      </p>
      <figure>
        <caption>Two Code Listings</caption>
        <sidebyside margins="0% 0%" widths="35% 55%" valign="bottom">
<listing>
<caption>Hello!</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>Raspberry Pi</caption>
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
</listing>
        </sidebyside>
      </figure>
    </subsection>
    <subsection xml:id="atomic-tabular">
      <title><tag>tabular</tag></title>
      <p>
        A <tag>tabular</tag> can be placed in six different ways:
        <ol>
          <li>
            all by itself, as a peer of <tag>p</tag> typically,
            with no layout control and hence with a
            <q>natural width,</q>
            and centered
          </li>
          <li>
            all by itself, as a peer of <tag>p</tag> typically,
            with explicit layout control,
          </li>
          <li>
            inside a <tag>table</tag>, earning a number and title,
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured,
          </li>
          <li>
            inside a <tag>table</tag> inside a <tag>sidebyside</tag>,
            with size and layout configured,
            with a number and title, and
          </li>
          <li>
            inside a <tag>table</tag> inside a <tag>sidebyside</tag> inside a <tag>figure</tag>,
            with size and layout configured,
            with a number and title, but now sub-numbered ((a), (b), (c),<ellipsis />).
          </li>
        </ol>
        Examples of each, and more.
      </p>
      <p>
        A <tag>tabular</tag> realized by <latex /> for PDF/print will normally be as wide as necessary to hold the content,
        without word-wrapping the content of any cell that is not explicitly authored that way.
        This is the most rigid of the content types we call
        <q>planar.</q>
        So for <pretext /> output as <latex />,
        when you explicitly constrain the width to be less than the
        <q>natural width</q>
        (including use as a panel of a <tag>sidebyside</tag>,
        or even setting margins) the table will be scaled <em>down</em> in width,
        which can result in an apparent font size very much smaller than that of the surrounding text.
        Note that we do not ever scale a tabular up to be wider with a larger font size.
        Note also that if there is no attempt to control the space for the table
        (no layout control, not in a <tag>sidebyside</tag>)
        then no scaling is attempted at all and the table may be wider than the text and protrude into the right margin.
        For more, see the three examples at:
        <xref ref="natural-too-wide" text="type-global" /> , <xref ref="scale-down-auto" text="type-global" />, <xref ref="scale-down-100" text="type-global" />.
        Generally, much of the commentary and testing here is about <latex />/PDF/print.
        While for <init>HTML</init> output the cells will usually automatically word-wrap to fit in the available space,
        without adjusting the font size.
        Some might like this behavior and some might not.
      </p>
      <p>
        Data in a table form can be placed in amongst a series of paragraphs.
        With no layout control, it will occupy its
        <q>natural width</q>
        and be centered.
      </p>
      <tabular>
        <row header="yes">
          <cell>State</cell>
          <cell>Population</cell>
          <cell>Area (sq. mi.)</cell>
          <cell>Statehood (Year)</cell>
        </row>
        <row>
          <cell>Washington</cell>
          <cell>7,614,893</cell>
          <cell>71,362</cell>
          <cell>1889</cell>
        </row>
        <row>
          <cell>Oregon</cell>
          <cell>4,217,737</cell>
          <cell>98,381</cell>
          <cell>1859</cell>
        </row>
        <row>
          <cell>California</cell>
          <cell>39,512,223</cell>
          <cell>163,696</cell>
          <cell>1850</cell>
        </row>
      </tabular>
      <p>
        The same effect can be had by specifying that the <attr>width</attr> attribute have the value <c>auto</c>,
        but do not specify any <attr>margins</attr>.
        We test multiple footnotes in a <tag>tabular</tag>,
        not included in a <tag>table</tag>.
      </p>
      <tabular width="auto">
        <row header="yes">
          <cell>State<fn>
            Only from the West Coast.
            </fn></cell>
          <cell>Population</cell>
          <cell>Area (sq. mi.)</cell>
          <cell>Statehood (Year)</cell>
        </row>
        <row>
          <cell>Washington</cell>
          <cell>7,614,893</cell>
          <cell>71,362</cell>
          <cell>1889</cell>
        </row>
        <row>
          <cell>Oregon</cell>
          <cell>4,217,737</cell>
          <cell>98,381</cell>
          <cell>1859</cell>
        </row>
        <row>
          <cell>California</cell>
          <cell>39,512,223<fn>
            Wow! That is as big as many countries.
            </fn></cell>
          <cell>163,696</cell>
          <cell>1850</cell>
        </row>
      </tabular>
      <p>
        In amongst a run of paragraphs
        (or similar)
        a <tag>tabular</tag> can be placed with layout control.
        For <latex /> output,
        this will scale the table to fit within the explicit, or implicit, width.
        This can result in obvious differences in the apparent font size.
        We first have a <attr>width</attr> that is experimentally similar to the natural width,
        with asymetric margins.
        Then a narrow width, and a wide width, as an illustration.
      </p>
      <tabular width="81.61%">
        <row header="yes">
          <cell>State</cell>
          <cell>Population</cell>
          <cell>Area (sq. mi.)</cell>
          <cell>Statehood (Year)</cell>
        </row>
        <row>
          <cell>Washington</cell>
          <cell>7,614,893</cell>
          <cell>71,362</cell>
          <cell>1889</cell>
        </row>
        <row>
          <cell>Oregon</cell>
          <cell>4,217,737</cell>
          <cell>98,381</cell>
          <cell>1859</cell>
        </row>
        <row>
          <cell>California</cell>
          <cell>39,512,223</cell>
          <cell>163,696</cell>
          <cell>1850</cell>
        </row>
      </tabular>
      <p>
        Narrow. 45% width. 20% margin left, 35% margin right.
      </p>
      <tabular width="45%" margins="20% 35%">
        <row header="yes">
          <cell>State</cell>
          <cell>Population</cell>
          <cell>Area (sq. mi.)</cell>
          <cell>Statehood (Year)</cell>
        </row>
        <row>
          <cell>Washington</cell>
          <cell>7,614,893</cell>
          <cell>71,362</cell>
          <cell>1889</cell>
        </row>
        <row>
          <cell>Oregon</cell>
          <cell>4,217,737</cell>
          <cell>98,381</cell>
          <cell>1859</cell>
        </row>
        <row>
          <cell>California</cell>
          <cell>39,512,223</cell>
          <cell>163,696</cell>
          <cell>1850</cell>
        </row>
      </tabular>
      <p>
        Wide. 97% width. 1% margin left, 2% right.
      </p>
      <tabular width="97%" margins="1% 2%">
        <row header="yes">
          <cell>State</cell>
          <cell>Population</cell>
          <cell>Area (sq. mi.)</cell>
          <cell>Statehood (Year)</cell>
        </row>
        <row>
          <cell>Washington</cell>
          <cell>7,614,893</cell>
          <cell>71,362</cell>
          <cell>1889</cell>
        </row>
        <row>
          <cell>Oregon</cell>
          <cell>4,217,737</cell>
          <cell>98,381</cell>
          <cell>1859</cell>
        </row>
        <row>
          <cell>California</cell>
          <cell>39,512,223</cell>
          <cell>163,696</cell>
          <cell>1850</cell>
        </row>
      </tabular>
      <p>
        Naturally, a <tag>tabular</tag> can be placed inside a <tag>table</tag>,
        earning a number and a title.
      </p>
      <table>
        <title>Natural Width</title>
        <tabular>
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
      </table>
      <p>
        A little narrower, but still centered by default.
      </p>
      <table>
        <title>Width of 60%, automatic centering</title>
        <tabular width="60%">
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
      </table>
      <p>
        Very narrow, asymmetric margins.
      </p>
      <table>
        <title>Width of 30%, 30% left margin, 40% right margin</title>
        <tabular width="30%" margins="30% 40%">
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
      </table>
      <p>
        Wider than necessary, asymmetric margins.
      </p>
      <table>
        <title>Width of 90%, 8% left margin, 2% right margin</title>
        <tabular width="90%" margins="8% 2%">
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
      </table>
      <p>
        The next table is purposely much too wide.
        In <xref ref="natural-too-wide" text="type-global" /> we make no attempt to control the width,
        and so it will extend into the margins.
        In <xref ref="scale-down-auto" text="type-global" /> we have simple added the attribute <c>width="auto"</c>.
        This attempt to use layout control will cause an automatic reduction in width and a smaller apparent font size.
        Adjusting margins providing an explicit percentage width,
        or placing the tabular as a panel of <tag>sidebyside</tag> will have the same effect.
        In <xref ref="scale-down-100" text="type-global" /> we have set the width explicity to 100% and so it should be identical to the automatic width case just prior.
      </p>
      <table xml:id="natural-too-wide">
        <title>Tabular too wide, no layout control</title>
        <tabular>
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
            <cell>Capitol City</cell>
            <cell>Largest City</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
            <cell>Olympia</cell>
            <cell>Seattle</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
            <cell>Salem</cell>
            <cell>Portland</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
            <cell>Sacremento</cell>
            <cell>Los Angeles</cell>
          </row>
        </tabular>
      </table>
      <table xml:id="scale-down-auto">
        <title>Tabular too wide, scale to automatic width</title>
        <tabular width="auto">
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
            <cell>Capitol City</cell>
            <cell>Largest City</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
            <cell>Olympia</cell>
            <cell>Seattle</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
            <cell>Salem</cell>
            <cell>Portland</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
            <cell>Sacremento</cell>
            <cell>Los Angeles</cell>
          </row>
        </tabular>
      </table>
      <table xml:id="scale-down-100">
        <title>Tabular too wide, scale to 100% width</title>
        <tabular width="100%">
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
            <cell>Capitol City</cell>
            <cell>Largest City</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
            <cell>Olympia</cell>
            <cell>Seattle</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
            <cell>Salem</cell>
            <cell>Portland</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
            <cell>Sacremento</cell>
            <cell>Los Angeles</cell>
          </row>
        </tabular>
      </table>
      <p>
        Now into <tag>sidebyside</tag> in various ways and with various sizes.
        First, two <tag>tabular</tag> as panels with widths at 60% and 30%. Note that in <latex />/PDF/print the tabular of functional values does not need the full 30% width,
        so it is at its natural size and centered within its panel.
      </p>
      <sidebyside widths="60% 30%">
        <tabular>
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
        <tabular>
          <row header="yes">
            <cell><m>x</m></cell>
            <cell><m>f(x)</m></cell>
          </row>
          <row>
            <cell>3</cell>
            <cell>9.734</cell>
          </row>
          <row>
            <cell>5</cell>
            <cell>2.175</cell>
          </row>
        </tabular>
      </sidebyside>
      <p>
        Let's do that again,
        but with widths experimentally set to make font sizes match
        (approximately).
      </p>
      <sidebyside widths="81.61% 12.75%">
        <tabular>
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
        <tabular>
          <row header="yes">
            <cell><m>x</m></cell>
            <cell><m>f(x)</m></cell>
          </row>
          <row>
            <cell>3</cell>
            <cell>9.734</cell>
          </row>
          <row>
            <cell>5</cell>
            <cell>2.175</cell>
          </row>
        </tabular>
      </sidebyside>
      <p>
        Same tabular, which fills roughly 80% by itself,
        packed into a single <tag>sidebyside</tag> with just a 2% gap,
        and no side margins.
      </p>
      <sidebyside widths="49% 49%" margins="0% 0%">
        <tabular left="medium" top="medium">
          <col />
          <col />
          <col />
          <col right="medium" />
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row bottom="medium">
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
        <tabular left="medium" top="medium">
          <col />
          <col />
          <col />
          <col right="medium" />
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row bottom="medium">
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
      </sidebyside>
      <p>
        Natural widths, but now as a pair of tables.
      </p>
      <sidebyside widths="81.61% 12.75%">
        <table>
          <title>West Coast</title>
          <tabular>
            <row header="yes">
              <cell>State</cell>
              <cell>Population</cell>
              <cell>Area (sq. mi.)</cell>
              <cell>Statehood (Year)</cell>
            </row>
            <row>
              <cell>Washington</cell>
              <cell>7,614,893</cell>
              <cell>71,362</cell>
              <cell>1889</cell>
            </row>
            <row>
              <cell>Oregon</cell>
              <cell>4,217,737</cell>
              <cell>98,381</cell>
              <cell>1859</cell>
            </row>
            <row>
              <cell>California</cell>
              <cell>39,512,223</cell>
              <cell>163,696</cell>
              <cell>1850</cell>
            </row>
          </tabular>
        </table>
        <table>
          <title>Function Values</title>
          <tabular>
            <row header="yes">
              <cell><m>x</m></cell>
              <cell><m>f(x)</m></cell>
            </row>
            <row>
              <cell>3</cell>
              <cell>9.734</cell>
            </row>
            <row>
              <cell>5</cell>
              <cell>2.175</cell>
            </row>
          </tabular>
        </table>
      </sidebyside>
      <p>
        Finally, as two individual <tag>table</tag>,
        grouped and laid out via a <tag>sidebyside</tag>,
        and collected as a <tag>figure</tag>.
        Which causes sub-numbering of the two enclosed <tag>table</tag>.
      </p>
      <figure>
        <caption>Geography and Mathematics</caption>
        <sidebyside widths="81.61% 12.75%">
          <table>
            <title>West Coast</title>
            <tabular>
              <row header="yes">
                <cell>State</cell>
                <cell>Population</cell>
                <cell>Area (sq. mi.)</cell>
                <cell>Statehood (Year)</cell>
              </row>
              <row>
                <cell>Washington</cell>
                <cell>7,614,893</cell>
                <cell>71,362</cell>
                <cell>1889</cell>
              </row>
              <row>
                <cell>Oregon</cell>
                <cell>4,217,737</cell>
                <cell>98,381</cell>
                <cell>1859</cell>
              </row>
              <row>
                <cell>California</cell>
                <cell>39,512,223</cell>
                <cell>163,696</cell>
                <cell>1850</cell>
              </row>
            </tabular>
          </table>
          <table>
            <title>Function Values</title>
            <tabular>
              <row header="yes">
                <cell><m>x</m></cell>
                <cell><m>f(x)</m></cell>
              </row>
              <row>
                <cell>3</cell>
                <cell>9.734</cell>
              </row>
              <row>
                <cell>5</cell>
                <cell>2.175</cell>
              </row>
            </tabular>
          </table>
        </sidebyside>
      </figure>
    </subsection>
  </section>
Some PreTeXt objects are relatively indivisable and are used as components of other structures. We call them atomic, even if the term is not perfect. A good example is <image> (next, 29.1). This section is arranged according to these objects and tests the various ways they can be employed.
We frequently include some nonsense text inside short intervening paragraphs to test spacing and establish margins.

Subsection 29.1 <image>

View Source for subsection
<subsection xml:id="atomic-image">
  <title><tag>image</tag></title>
  <p>
    An <tag>image</tag> can be placed in five different ways:
    <ol>
      <li>
        all by itself,
        as a peer of <tag>p</tag> typically, with layout control,
      </li>
      <li>
        inside a <tag>figure</tag>, earning a number and caption,
      </li>
      <li>
        inside a <tag>sidebyside</tag>,
        with size and layout configured,
      </li>
      <li>
        inside a <tag>figure</tag> inside a <tag>sidebyside</tag>,
        with size and layout configured,
        with a number and caption, and
      </li>
      <li>
        inside a <tag>figure</tag> inside a <tag>sidebyside</tag> inside a <tag>figure</tag>,
        with size and layout configured,
        with a number and caption, but now sub-numbered ((a), (b), (c),<ellipsis />).
      </li>
    </ol>
    Examples of each, and more.
  </p>
  <p>
    All by itsef, with no layout specified,
    so showing the default size and placement.
    Vivamus in congue massa.
    Morbi condimentum ac magna at accumsan.
    Vestibulum ac augue eu lorem semper gravida.
  </p>
  <image source="images/nz-landscape.jpg" />
  <p>
    Width set at 40%, so equal margins and thus centered.
    Aenean faucibus augue tellus,
    et sollicitudin tortor finibus non.
    Maecenas semper dolor quis diam placerat,
    iaculis sollicitudin augue finibus.
    Vestibulum facilisis ligula lectus,
    ac tristique nisl aliquet non.
  </p>
  <image source="images/nz-landscape.jpg" width="40%" />
  <p>
    Asymmetric margins of 20% and 40% given,
    implying 40% width, equal to previous instance.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>
  <image source="images/nz-landscape.jpg" margins="20% 40%" />
  <p>
    As a plain component of a <tag>sidebyside</tag>.
    Widths here are 20% and 30%, margins and gaps are automatic,
    default alignment on top edges.
    Nulla pharetra imperdiet elit,
    in sodales nibh blandit ultricies.
    Maecenas efficitur ac felis ut pharetra.
  </p>
  <sidebyside widths="20% 30%">
    <image source="images/nz-landscape.jpg" />
    <image source="images/nz-landscape.jpg" />
  </sidebyside>
  <p>
    Inside a <tag>figure</tag> with no adjustments, so default behavior.
    Note how a <tag>figure</tag> occupies the entire width of the page,
    so then does the caption.
  </p>
  <figure>
    <caption>New Zealand Landscape</caption>
    <image source="images/nz-landscape.jpg" />
  </figure>
  <p>
    Inside a <tag>figure</tag> with asymmetric (large) margins of 30% and 60%. Quisque finibus augue sit amet facilisis fringilla.
    Aenean faucibus augue tellus,
    et sollicitudin tortor finibus non.
  </p>
  <figure>
    <caption>New Zealand Landscape</caption>
    <image source="images/nz-landscape.jpg" margins="30% 60%" />
  </figure>
  <p>
    Inside figures inside a <tag>sidebyside</tag>.
    Same widths as previous <tag>sidebyside</tag> but alignment on bottoms of the panels,
    to partially align captions.
    Note how the captions are constrained in width by the width of the panels of the side-by-side.
  </p>
  <sidebyside widths="20% 30%" valign="bottom">
    <figure>
      <caption>NZ Landscape</caption>
      <image source="images/nz-landscape.jpg" />
    </figure>
    <figure>
      <caption>New Zealand Terrascape</caption>
      <image source="images/nz-landscape.jpg" />
    </figure>
  </sidebyside>
  <p>
    Identical code to previous example,
    but now wrapped in an overall <tag>figure</tag>,
    which has its own caption and number,
    leaving the interior figures to be sub-numbered.
    Cross-references use the full number:
    <xref ref="nz-land" text="type-global" />.
  </p>
  <figure>
    <caption>Amalgamation of Scapes</caption>
    <sidebyside widths="20% 30%" valign="bottom">
      <figure>
        <caption>NZ Landscape</caption>
        <image source="images/nz-landscape.jpg" />
      </figure>
      <figure xml:id="nz-land">
        <caption>New Zealand Terrascape</caption>
        <image source="images/nz-landscape.jpg" />
      </figure>
    </sidebyside>
  </figure>
  <p>
    For <latex />, in some circumstances it is desirable to print the image on the next line,
    but backed up by some amount.
    This
    <q>top-aligns</q>
    the image with a number of some sort off to the left.
    The following are tests for this behavior.
    Here is a list.
    <ol>
      <li>
        <image margins="0% 70%" source="images/nz-landscape.jpg" />
      </li>
      <li><image source="images/nz-landscape.jpg" /></li>
    </ol>
  </p>
  <p>
    A <c>rotation="n"</c> attribute applied to a bare image will rotate the image by n<degree />.
    The vertical space adjusts to accomodate the rotated image in the latex version but not in the html version.
  </p>
  <figure>
    <caption>Rotated Images</caption>
    <sidebyside width="33%" valign="bottom">
      <figure>
        <caption><c>rotate="180"</c></caption>
        <image source="images/Yellow_Duck.png" rotate="180" />
      </figure>
      <figure>
        <caption><c>rotate="15"</c></caption>
        <image source="images/Yellow_Duck.png" rotate="15" />
      </figure>
    </sidebyside>
  </figure>
  <p>
    For pdf output destined for print,
    <ie /> when the publication file entry <c>latex/@print="yes"</c>,
    a <c>@landscape="yes"</c> attribute applied to a <tag>figure</tag>,
    <tag>table</tag>,
    <tag>list</tag> or <tag>listing</tag> will cause the object to be rotated 90<degree /> and presented on its own page.
    Placement of the float is determined by <latex /> and multipage objects are not supported.
  </p>
  <figure xml:id="propulsion_system2" landscape="yes">
    <caption>This landscape figure will be rotated so the long edge is vertical, and will appear on its own page in <em>print PDF</em> output.</caption>
    <image source="images/propulsion_system" />
  </figure>
  <figure xml:id="rotated-fig-with-sbs" landscape="yes">
    <caption>Wide figure containing a sidebyside containing a rotated image.  This will be rotated and appear on its own page in <term>print PDF</term> output.</caption>
    <sidebyside widths="25% 70%" margins="0%" valign="bottom" landscape="true">
      <figure>
        <caption>Quack</caption>
        <image rotate="10" source="images/Yellow_Duck.png" />
      </figure>
      <figure>
        <caption>Propulsion System</caption>
        <image source="images/propulsion_system" />
      </figure>
    </sidebyside>
  </figure>
  <exercise>
    <task>
      <statement>
        <image margins="0% 70%" source="images/nz-landscape.jpg" />
      </statement>
    </task>
    <task>
      <statement>
        <image source="images/nz-landscape.jpg" />
      </statement>
    </task>
  </exercise>
  <exercises>
    <exercise>
      <task>
        <statement>
          <image margins="0% 70%" source="images/nz-landscape.jpg" />
        </statement>
      </task>
      <task>
        <statement>
          <image source="images/nz-landscape.jpg" />
        </statement>
      </task>
    </exercise>
    <exercisegroup cols="2">
      <exercise>
        <statement>
          <image margins="0% 70%" source="images/nz-landscape.jpg" />
        </statement>
      </exercise>
      <exercise>
        <statement>
          <image source="images/nz-landscape.jpg" />
        </statement>
      </exercise>
    </exercisegroup>
  </exercises>
</subsection>
An <image> can be placed in five different ways:
  1. all by itself, as a peer of <p> typically, with layout control,
  2. inside a <figure>, earning a number and caption,
  3. inside a <sidebyside>, with size and layout configured,
  4. inside a <figure> inside a <sidebyside>, with size and layout configured, with a number and caption, and
  5. inside a <figure> inside a <sidebyside> inside a <figure>, with size and layout configured, with a number and caption, but now sub-numbered ((a), (b), (c),…).
Examples of each, and more.
All by itsef, with no layout specified, so showing the default size and placement. Vivamus in congue massa. Morbi condimentum ac magna at accumsan. Vestibulum ac augue eu lorem semper gravida.
Width set at 40%, so equal margins and thus centered. Aenean faucibus augue tellus, et sollicitudin tortor finibus non. Maecenas semper dolor quis diam placerat, iaculis sollicitudin augue finibus. Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non.
Asymmetric margins of 20% and 40% given, implying 40% width, equal to previous instance. Vivamus suscipit diam eget mi cursus viverra.
As a plain component of a <sidebyside>. Widths here are 20% and 30%, margins and gaps are automatic, default alignment on top edges. Nulla pharetra imperdiet elit, in sodales nibh blandit ultricies. Maecenas efficitur ac felis ut pharetra.
Inside a <figure> with no adjustments, so default behavior. Note how a <figure> occupies the entire width of the page, so then does the caption.
View Source for figure
<figure>
  <caption>New Zealand Landscape</caption>
  <image source="images/nz-landscape.jpg" />
</figure>
Figure 29.1. New Zealand Landscape
Inside a <figure> with asymmetric (large) margins of 30% and 60%. Quisque finibus augue sit amet facilisis fringilla. Aenean faucibus augue tellus, et sollicitudin tortor finibus non.
View Source for figure
<figure>
  <caption>New Zealand Landscape</caption>
  <image source="images/nz-landscape.jpg" margins="30% 60%" />
</figure>
Figure 29.2. New Zealand Landscape
Inside figures inside a <sidebyside>. Same widths as previous <sidebyside> but alignment on bottoms of the panels, to partially align captions. Note how the captions are constrained in width by the width of the panels of the side-by-side.
View Source for figure
<figure>
  <caption>NZ Landscape</caption>
  <image source="images/nz-landscape.jpg" />
</figure>
Figure 29.3. NZ Landscape
View Source for figure
<figure>
  <caption>New Zealand Terrascape</caption>
  <image source="images/nz-landscape.jpg" />
</figure>
Figure 29.4. New Zealand Terrascape
Identical code to previous example, but now wrapped in an overall <figure>, which has its own caption and number, leaving the interior figures to be sub-numbered. Cross-references use the full number: Figure 29.5.(b).
View Source for figure
<figure>
  <caption>Amalgamation of Scapes</caption>
  <sidebyside widths="20% 30%" valign="bottom">
    <figure>
      <caption>NZ Landscape</caption>
      <image source="images/nz-landscape.jpg" />
    </figure>
    <figure xml:id="nz-land">
      <caption>New Zealand Terrascape</caption>
      <image source="images/nz-landscape.jpg" />
    </figure>
  </sidebyside>
</figure>
View Source for figure
<figure>
  <caption>NZ Landscape</caption>
  <image source="images/nz-landscape.jpg" />
</figure>
(a) NZ Landscape
View Source for figure
<figure xml:id="nz-land">
  <caption>New Zealand Terrascape</caption>
  <image source="images/nz-landscape.jpg" />
</figure>
(b) New Zealand Terrascape
Figure 29.5. Amalgamation of Scapes
For , in some circumstances it is desirable to print the image on the next line, but backed up by some amount. This “top-aligns” the image with a number of some sort off to the left. The following are tests for this behavior. Here is a list.
A rotation="n" attribute applied to a bare image will rotate the image by n°. The vertical space adjusts to accomodate the rotated image in the latex version but not in the html version.
View Source for figure
<figure>
  <caption>Rotated Images</caption>
  <sidebyside width="33%" valign="bottom">
    <figure>
      <caption><c>rotate="180"</c></caption>
      <image source="images/Yellow_Duck.png" rotate="180" />
    </figure>
    <figure>
      <caption><c>rotate="15"</c></caption>
      <image source="images/Yellow_Duck.png" rotate="15" />
    </figure>
  </sidebyside>
</figure>
View Source for figure
<figure>
  <caption><c>rotate="180"</c></caption>
  <image source="images/Yellow_Duck.png" rotate="180" />
</figure>
(a) rotate="180"
View Source for figure
<figure>
  <caption><c>rotate="15"</c></caption>
  <image source="images/Yellow_Duck.png" rotate="15" />
</figure>
(b) rotate="15"
Figure 29.6. Rotated Images
For pdf output destined for print, i.e. when the publication file entry latex/@print="yes", a @landscape="yes" attribute applied to a <figure>, <table>, <list> or <listing> will cause the object to be rotated 90° and presented on its own page. Placement of the float is determined by and multipage objects are not supported.
View Source for figure
<figure xml:id="propulsion_system2" landscape="yes">
  <caption>This landscape figure will be rotated so the long edge is vertical, and will appear on its own page in <em>print PDF</em> output.</caption>
  <image source="images/propulsion_system" />
</figure>
Figure 29.7. This landscape figure will be rotated so the long edge is vertical, and will appear on its own page in print PDF output.
View Source for figure
<figure xml:id="rotated-fig-with-sbs" landscape="yes">
  <caption>Wide figure containing a sidebyside containing a rotated image.  This will be rotated and appear on its own page in <term>print PDF</term> output.</caption>
  <sidebyside widths="25% 70%" margins="0%" valign="bottom" landscape="true">
    <figure>
      <caption>Quack</caption>
      <image rotate="10" source="images/Yellow_Duck.png" />
    </figure>
    <figure>
      <caption>Propulsion System</caption>
      <image source="images/propulsion_system" />
    </figure>
  </sidebyside>
</figure>
View Source for figure
<figure>
  <caption>Quack</caption>
  <image rotate="10" source="images/Yellow_Duck.png" />
</figure>
(a) Quack
View Source for figure
<figure>
  <caption>Propulsion System</caption>
  <image source="images/propulsion_system" />
</figure>
(b) Propulsion System
Figure 29.8. Wide figure containing a sidebyside containing a rotated image. This will be rotated and appear on its own page in print PDF output.

Checkpoint 29.9.

View Source for exercise
<exercise>
  <task>
    <statement>
      <image margins="0% 70%" source="images/nz-landscape.jpg" />
    </statement>
  </task>
  <task>
    <statement>
      <image source="images/nz-landscape.jpg" />
    </statement>
  </task>
</exercise>
(a)
View Source for task
<task>
  <statement>
    <image margins="0% 70%" source="images/nz-landscape.jpg" />
  </statement>
</task>
(b)
View Source for task
<task>
  <statement>
    <image source="images/nz-landscape.jpg" />
  </statement>
</task>

Exercises Exercises

View Source for exercises
<exercises>
  <exercise>
    <task>
      <statement>
        <image margins="0% 70%" source="images/nz-landscape.jpg" />
      </statement>
    </task>
    <task>
      <statement>
        <image source="images/nz-landscape.jpg" />
      </statement>
    </task>
  </exercise>
  <exercisegroup cols="2">
    <exercise>
      <statement>
        <image margins="0% 70%" source="images/nz-landscape.jpg" />
      </statement>
    </exercise>
    <exercise>
      <statement>
        <image source="images/nz-landscape.jpg" />
      </statement>
    </exercise>
  </exercisegroup>
</exercises>
1.
View Source for exercise
<exercise>
  <task>
    <statement>
      <image margins="0% 70%" source="images/nz-landscape.jpg" />
    </statement>
  </task>
  <task>
    <statement>
      <image source="images/nz-landscape.jpg" />
    </statement>
  </task>
</exercise>
(a)
View Source for task
<task>
  <statement>
    <image margins="0% 70%" source="images/nz-landscape.jpg" />
  </statement>
</task>
(b)
View Source for task
<task>
  <statement>
    <image source="images/nz-landscape.jpg" />
  </statement>
</task>
Exercise Group.
View Source for exercisegroup
<exercisegroup cols="2">
  <exercise>
    <statement>
      <image margins="0% 70%" source="images/nz-landscape.jpg" />
    </statement>
  </exercise>
  <exercise>
    <statement>
      <image source="images/nz-landscape.jpg" />
    </statement>
  </exercise>
</exercisegroup>
2.
View Source for exercise
<exercise>
  <statement>
    <image margins="0% 70%" source="images/nz-landscape.jpg" />
  </statement>
</exercise>
3.
View Source for exercise
<exercise>
  <statement>
    <image source="images/nz-landscape.jpg" />
  </statement>
</exercise>

Subsection 29.2 <video>

View Source for subsection
<subsection xml:id="atomic-video">
  <title><tag>video</tag></title>
  <p>
    An <tag>video</tag> can be placed in five different ways:
    <ol>
      <li>
        all by itself,
        as a peer of <tag>p</tag> typically, with layout control,
      </li>
      <li>
        inside a <tag>figure</tag>, earning a number and caption,
      </li>
      <li>
        inside a <tag>sidebyside</tag>,
        with size and layout configured,
      </li>
      <li>
        inside a <tag>figure</tag> inside a <tag>sidebyside</tag>,
        with size and layout configured,
        with a number and caption, and
      </li>
      <li>
        inside a <tag>figure</tag> inside a <tag>sidebyside</tag> inside a <tag>figure</tag>,
        with size and layout configured,
        with a number and caption, but now sub-numbered ((a), (b), (c),<ellipsis />).
      </li>
    </ol>
    Examples of each, and more.
  </p>
  <p>
    Videos can be realized in many forms,
    and can come from a variety of sources.
    See <xref ref="section-video" text="type-global" /> for tests of some of that variety.
    Here we are testing placement within surroundings and testing the schema for location.
    But we do have two videos in each test,
    one provided as a local file and one embedded from a service.
  </p>
  <p>
    All by itsef, with no layout specified,
    so showing the default size and placement.
    Vivamus in congue massa.
    Morbi condimentum ac magna at accumsan.
    Vestibulum ac augue eu lorem semper gravida.
  </p>
  <video xml:id="ups-promo-7" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
  <p>
    Vestibulum facilisis ligula lectus,
    ac tristique nisl aliquet non.
    Quisque ornare felis arcu.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>
  <video xml:id="pre-roll-countdown-7" youtube="Srmdij0CU1U" />
  <p>
    Width set at 40%, so equal margins and thus centered.
    Aenean faucibus augue tellus,
    et sollicitudin tortor finibus non.
    Maecenas semper dolor quis diam placerat,
    iaculis sollicitudin augue finibus.
    Vestibulum facilisis ligula lectus,
    ac tristique nisl aliquet non.
  </p>
  <video xml:id="ups-promo-8" source="video/ups-visitor-guide-360" width="40%" preview="preview/ups-promo-preview.jpg" />
  <p>
    Vestibulum facilisis ligula lectus,
    ac tristique nisl aliquet non.
    Quisque ornare felis arcu.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>
  <video xml:id="pre-roll-countdown-8" youtube="Srmdij0CU1U" width="40%" />
  <p>
    Asymmetric margins of 20% and 40% given,
    implying 40% width, equal to previous instance.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>
  <video xml:id="ups-promo-9" source="video/ups-visitor-guide-360" margins="20% 40%" preview="preview/ups-promo-preview.jpg" />
  <p>
    Vestibulum facilisis ligula lectus,
    ac tristique nisl aliquet non.
    Quisque ornare felis arcu.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>
  <video xml:id="pre-roll-countdown-9" youtube="Srmdij0CU1U" margins="20% 40%" />
  <p>
    As a plain component of a <tag>sidebyside</tag>.
    Widths here are 20% and 30%, margins and gaps are automatic,
    default alignment on top edges.
    Nulla pharetra imperdiet elit,
    in sodales nibh blandit ultricies.
    Maecenas efficitur ac felis ut pharetra.
  </p>
  <sidebyside widths="20% 30%">
    <video xml:id="ups-promo-10" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
    <video xml:id="pre-roll-countdown-10" youtube="Srmdij0CU1U" />
  </sidebyside>
  <p>
    Inside a <tag>figure</tag> with no adjustments, so default behavior.
    Note how a <tag>figure</tag> occupies the entire width of the page,
    so then does the caption.
  </p>
  <figure>
    <caption>University of Puget Sound Promotional Video</caption>
    <video xml:id="ups-promo-11" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
  </figure>
  <p>
    Vestibulum facilisis ligula lectus,
    ac tristique nisl aliquet non.
    Quisque ornare felis arcu.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>
  <figure>
    <caption>Pre-Roll Countdown</caption>
    <video xml:id="pre-roll-countdown-11" youtube="Srmdij0CU1U" />
  </figure>
  <p>
    Inside a <tag>figure</tag> with asymmetric (large) margins of 30% and 60%. Quisque finibus augue sit amet facilisis fringilla.
    Aenean faucibus augue tellus,
    et sollicitudin tortor finibus non.
  </p>
  <figure>
    <caption>University of Puget Sound Promotional Video</caption>
    <video xml:id="ups-promo-12" source="video/ups-visitor-guide-360" margins="30% 60%" preview="preview/ups-promo-preview.jpg" />
  </figure>
  <p>
    Vestibulum facilisis ligula lectus,
    ac tristique nisl aliquet non.
    Quisque ornare felis arcu.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>
  <figure>
    <caption>Pre-Roll Countdown</caption>
    <video xml:id="pre-roll-countdown-12" youtube="Srmdij0CU1U" margins="30% 60%" />
  </figure>
  <p>
    Inside figures inside a <tag>sidebyside</tag>.
    Same widths as previous <tag>sidebyside</tag> but alignment on bottoms of the panels,
    to partially align captions.
    Note how the captions are constrained in width by the width of the panels of the side-by-side.
  </p>
  <sidebyside widths="20% 30%" valign="bottom">
    <figure>
      <caption>Pre-Roll Countdown</caption>
      <video xml:id="pre-roll-countdown-13" youtube="Srmdij0CU1U" />
    </figure>
    <figure>
      <caption>University of Puget Sound Promotional Video</caption>
      <video xml:id="ups-promo-13" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
    </figure>
  </sidebyside>
  <p>
    Identical code to previous example,
    but now wrapped in an overall <tag>figure</tag>,
    which has its own caption and number,
    leaving the interior figures to be sub-numbered.
    Cross-references use the full number:
    <xref ref="ups-video" text="type-global" />.
  </p>
  <figure>
    <caption>Amalgamation of Videos</caption>
    <sidebyside widths="20% 30%" valign="bottom">
      <figure>
        <caption>Pre-Roll Countdown</caption>
        <video xml:id="pre-roll-countdown-14" youtube="Srmdij0CU1U" />
      </figure>
      <figure xml:id="ups-video">
        <caption>University of Puget Sound Promotional Video</caption>
        <video xml:id="ups-promo-14" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
      </figure>
    </sidebyside>
  </figure>
</subsection>
An <video> can be placed in five different ways:
  1. all by itself, as a peer of <p> typically, with layout control,
  2. inside a <figure>, earning a number and caption,
  3. inside a <sidebyside>, with size and layout configured,
  4. inside a <figure> inside a <sidebyside>, with size and layout configured, with a number and caption, and
  5. inside a <figure> inside a <sidebyside> inside a <figure>, with size and layout configured, with a number and caption, but now sub-numbered ((a), (b), (c),…).
Examples of each, and more.
Videos can be realized in many forms, and can come from a variety of sources. See Section 19 for tests of some of that variety. Here we are testing placement within surroundings and testing the schema for location. But we do have two videos in each test, one provided as a local file and one embedded from a service.
All by itsef, with no layout specified, so showing the default size and placement. Vivamus in congue massa. Morbi condimentum ac magna at accumsan. Vestibulum ac augue eu lorem semper gravida.
Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non. Quisque ornare felis arcu. Vivamus suscipit diam eget mi cursus viverra.
Width set at 40%, so equal margins and thus centered. Aenean faucibus augue tellus, et sollicitudin tortor finibus non. Maecenas semper dolor quis diam placerat, iaculis sollicitudin augue finibus. Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non.
Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non. Quisque ornare felis arcu. Vivamus suscipit diam eget mi cursus viverra.
Asymmetric margins of 20% and 40% given, implying 40% width, equal to previous instance. Vivamus suscipit diam eget mi cursus viverra.
Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non. Quisque ornare felis arcu. Vivamus suscipit diam eget mi cursus viverra.
As a plain component of a <sidebyside>. Widths here are 20% and 30%, margins and gaps are automatic, default alignment on top edges. Nulla pharetra imperdiet elit, in sodales nibh blandit ultricies. Maecenas efficitur ac felis ut pharetra.
Inside a <figure> with no adjustments, so default behavior. Note how a <figure> occupies the entire width of the page, so then does the caption.
View Source for figure
<figure>
  <caption>University of Puget Sound Promotional Video</caption>
  <video xml:id="ups-promo-11" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
</figure>
Figure 29.10. University of Puget Sound Promotional Video
Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non. Quisque ornare felis arcu. Vivamus suscipit diam eget mi cursus viverra.
View Source for figure
<figure>
  <caption>Pre-Roll Countdown</caption>
  <video xml:id="pre-roll-countdown-11" youtube="Srmdij0CU1U" />
</figure>
Figure 29.11. Pre-Roll Countdown
Inside a <figure> with asymmetric (large) margins of 30% and 60%. Quisque finibus augue sit amet facilisis fringilla. Aenean faucibus augue tellus, et sollicitudin tortor finibus non.
View Source for figure
<figure>
  <caption>University of Puget Sound Promotional Video</caption>
  <video xml:id="ups-promo-12" source="video/ups-visitor-guide-360" margins="30% 60%" preview="preview/ups-promo-preview.jpg" />
</figure>
Figure 29.12. University of Puget Sound Promotional Video
Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non. Quisque ornare felis arcu. Vivamus suscipit diam eget mi cursus viverra.
View Source for figure
<figure>
  <caption>Pre-Roll Countdown</caption>
  <video xml:id="pre-roll-countdown-12" youtube="Srmdij0CU1U" margins="30% 60%" />
</figure>
Figure 29.13. Pre-Roll Countdown
Inside figures inside a <sidebyside>. Same widths as previous <sidebyside> but alignment on bottoms of the panels, to partially align captions. Note how the captions are constrained in width by the width of the panels of the side-by-side.
View Source for figure
<figure>
  <caption>Pre-Roll Countdown</caption>
  <video xml:id="pre-roll-countdown-13" youtube="Srmdij0CU1U" />
</figure>
Figure 29.14. Pre-Roll Countdown
View Source for figure
<figure>
  <caption>University of Puget Sound Promotional Video</caption>
  <video xml:id="ups-promo-13" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
</figure>
Figure 29.15. University of Puget Sound Promotional Video
Identical code to previous example, but now wrapped in an overall <figure>, which has its own caption and number, leaving the interior figures to be sub-numbered. Cross-references use the full number: Figure 29.16.(b).
View Source for figure
<figure>
  <caption>Amalgamation of Videos</caption>
  <sidebyside widths="20% 30%" valign="bottom">
    <figure>
      <caption>Pre-Roll Countdown</caption>
      <video xml:id="pre-roll-countdown-14" youtube="Srmdij0CU1U" />
    </figure>
    <figure xml:id="ups-video">
      <caption>University of Puget Sound Promotional Video</caption>
      <video xml:id="ups-promo-14" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
    </figure>
  </sidebyside>
</figure>
View Source for figure
<figure>
  <caption>Pre-Roll Countdown</caption>
  <video xml:id="pre-roll-countdown-14" youtube="Srmdij0CU1U" />
</figure>
(a) Pre-Roll Countdown
View Source for figure
<figure xml:id="ups-video">
  <caption>University of Puget Sound Promotional Video</caption>
  <video xml:id="ups-promo-14" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
</figure>
(b) University of Puget Sound Promotional Video
Figure 29.16. Amalgamation of Videos

Subsection 29.3 <program>, <console>

View Source for subsection
<subsection xml:id="atomic-program">
      <title><tag>program</tag>, <tag>console</tag></title>
      <p>
        A <tag>program</tag> and/or <tag>console</tag> can be placed in at least six different ways:
        <ol>
          <li>
            all by itself,
            as a peer of <tag>p</tag> typically, with layout control
          </li>
          <li>
            inside a <tag>listing</tag>, earning a number and caption,
            with layout control
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured,
            and inside a <tag>figure</tag>
          </li>
          <li>
            inside a <tag>sidebyside</tag>,
            with size and layout configured,
            with each inside a <tag>listing</tag>, earning different numbers
          </li>
          <li>
            inside a <tag>figure</tag> inside a <tag>sidebyside</tag> inside a <tag>listing</tag>,
            with size and layout configured,
            with a number and caption, but now sub-numbered ((a), (b), (c),<ellipsis />).
          </li>
        </ol>
        Examples of each, and more.
      </p>
      <p>
        Programs can be realized in many forms,
        and can come from a variety of sources.
        See <xref ref="section-video" text="type-global" /> for tests of some of that variety.
        Here we are testing placement within surroundings and testing the schema for location.
        But we do have two videos in each test,
        one provided as a local file and one embedded from a service.
      </p>
      <p>
        All by itsef, with no layout specified,
        so showing the default size and placement.
        Vivamus in congue massa.
        Morbi condimentum ac magna at accumsan.
        Vestibulum ac augue eu lorem semper gravida.
      </p>
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
      <p>
        Now a program with shorter lines, with no layout control.
      </p>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
      <p>
        And a <tag>console</tag> element,
        also with no layout control.
      </p>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
      <p>
        Now similar examples, but with layout control: margins and width.
      </p>
      <p>
        A <tag>program</tag> with a <attr>width</attr> attribute,
        so centered and with equal margins.
        Note how the lines word wrap due to the smaller width.
      </p>
<program language="r" width="60%">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
      <p>
        A <tag>program</tag> with short lines,
        so significant, and asymmetric margins,
        which experimentally do not induce any word-wrapping.
      </p>
<program language="c" margins="15% 20%">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
      <p>
        A longer <tag>console</tag>,
        with margins so significant the appearance is ill-advised.
      </p>
<console margins="50% 15%">
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
      <p>
        Two <tag>listing</tag>, with <tag>caption</tag>, and no layout control.
      </p>
<listing>
<caption>Hello, World! in C</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>A console session on a Raspberry Pi</caption>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
</listing>
      <p>
        Same two <tag>listing</tag>,
        but now with layout control on the <tag>program</tag> and <tag>console</tag>.
      </p>
<listing>
<caption>Hello, World! in C</caption>
<program language="c" margins="40% 20%" width="40%">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>A console session on a Raspberry Pi</caption>
<console margins="10% 10%">
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
</listing>
      <p>
        This <tag>sidebyside</tag> gives each panel a 30% width.
        The remaining 10% is apportioned for margins and separation.
      </p>
      <sidebyside width="30%">
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
      </sidebyside>
      <p>
        This is the same three-panel <tag>sidebyside</tag>,
        but now inside of a <tag>figure</tag>,
        earning a number and a <tag>caption</tag>.
      </p>
      <figure>
        <caption>Some Code Samples</caption>
        <sidebyside width="30%">
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
        </sidebyside>
      </figure>
      <p>
        Finally, a smaller <tag>program</tag> and a smaller <tag>console</tag>,
        each inside a <tag>listing</tag>,
        as the two panels of a <tag>sidebyside</tag> with no margins,
        and slightly different widths
        (to control word-wrapping).
        The panels have been aligned vertically so their captions align.
      </p>
      <sidebyside margins="0% 0%" widths="35% 55%" valign="bottom">
<listing>
<caption>Hello!</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>Raspberry Pi</caption>
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
</listing>
      </sidebyside>
      <p>
        And again, the two-panel <tag>sidebyside</tag> of <tag>listing</tag>,
        but now inside a <tag>figure</tag> that has a number and a caption.
        And then the <tag>listing</tag> are sub-numbered as (a) and (b).
      </p>
      <figure>
        <caption>Two Code Listings</caption>
        <sidebyside margins="0% 0%" widths="35% 55%" valign="bottom">
<listing>
<caption>Hello!</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>Raspberry Pi</caption>
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
</listing>
        </sidebyside>
      </figure>
    </subsection>
A <program> and/or <console> can be placed in at least six different ways:
  1. all by itself, as a peer of <p> typically, with layout control
  2. inside a <listing>, earning a number and caption, with layout control
  3. inside a <sidebyside>, with size and layout configured
  4. inside a <sidebyside>, with size and layout configured, and inside a <figure>
  5. inside a <sidebyside>, with size and layout configured, with each inside a <listing>, earning different numbers
  6. inside a <figure> inside a <sidebyside> inside a <listing>, with size and layout configured, with a number and caption, but now sub-numbered ((a), (b), (c),…).
Examples of each, and more.
Programs can be realized in many forms, and can come from a variety of sources. See Section 19 for tests of some of that variety. Here we are testing placement within surroundings and testing the schema for location. But we do have two videos in each test, one provided as a local file and one embedded from a service.
All by itsef, with no layout specified, so showing the default size and placement. Vivamus in congue massa. Morbi condimentum ac magna at accumsan. Vestibulum ac augue eu lorem semper gravida.
View Source for program
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
n_loops <- 10
x.means <- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x <- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] <- mean(x)
}
x.means
Now a program with shorter lines, with no layout control.
View Source for program
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
And a <console> element, also with no layout control.
View Source for console
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
pi@raspberrypi ~/progs/chap02 $ gcc -o intAndFloat intAndFloat.c
pi@raspberrypi ~/progs/chap02 $ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
pi@raspberrypi ~/progs/chap02 $ 
Now similar examples, but with layout control: margins and width.
A <program> with a @width attribute, so centered and with equal margins. Note how the lines word wrap due to the smaller width.
View Source for program
<program language="r" width="60%">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
n_loops <- 10
x.means <- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x <- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] <- mean(x)
}
x.means
A <program> with short lines, so significant, and asymmetric margins, which experimentally do not induce any word-wrapping.
View Source for program
<program language="c" margins="15% 20%">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
A longer <console>, with margins so significant the appearance is ill-advised.
View Source for console
<console margins="50% 15%">
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
pi@raspberrypi ~/progs/chap02 $ gcc -Wall -o intAndFloat intAndFloat.c
pi@raspberrypi ~/progs/chap02 $ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
pi@raspberrypi ~/progs/chap02 $ 
Two <listing>, with <caption>, and no layout control.
View Source for listing
<listing>
<caption>Hello, World! in C</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
View Source for program
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
Listing 29.17. Hello, World! in C
View Source for listing
<listing>
<caption>A console session on a Raspberry Pi</caption>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
</listing>
View Source for console
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
pi@raspberrypi ~/progs/chap02 $ gcc -Wall -o intAndFloat intAndFloat.c
pi@raspberrypi ~/progs/chap02 $ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
pi@raspberrypi ~/progs/chap02 $ 
Listing 29.18. A console session on a Raspberry Pi
Same two <listing>, but now with layout control on the <program> and <console>.
View Source for listing
<listing>
<caption>Hello, World! in C</caption>
<program language="c" margins="40% 20%" width="40%">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
View Source for program
<program language="c" margins="40% 20%" width="40%">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
Listing 29.19. Hello, World! in C
View Source for listing
<listing>
<caption>A console session on a Raspberry Pi</caption>
<console margins="10% 10%">
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
</listing>
View Source for console
<console margins="10% 10%">
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
pi@raspberrypi ~/progs/chap02 $ gcc -Wall -o intAndFloat intAndFloat.c
pi@raspberrypi ~/progs/chap02 $ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
pi@raspberrypi ~/progs/chap02 $ 
Listing 29.20. A console session on a Raspberry Pi
This <sidebyside> gives each panel a 30% width. The remaining 10% is apportioned for margins and separation.
View Source for program
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
View Source for console
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
pi@raspberrypi ~/progs/chap02 $ gcc -Wall -o intAndFloat intAndFloat.c
pi@raspberrypi ~/progs/chap02 $ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
pi@raspberrypi ~/progs/chap02 $ 
View Source for program
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
n_loops <- 10
x.means <- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x <- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] <- mean(x)
}
x.means
This is the same three-panel <sidebyside>, but now inside of a <figure>, earning a number and a <caption>.
View Source for figure
<figure>
        <caption>Some Code Samples</caption>
        <sidebyside width="30%">
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
        </sidebyside>
      </figure>
View Source for program
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
View Source for console
<console>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">gcc -Wall -o intAndFloat intAndFloat.c</input>
<input prompt="pi@raspberrypi ~/progs/chap02 $ ">./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input prompt="pi@raspberrypi ~/progs/chap02 $ " />
</console>
pi@raspberrypi ~/progs/chap02 $ gcc -Wall -o intAndFloat intAndFloat.c
pi@raspberrypi ~/progs/chap02 $ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
pi@raspberrypi ~/progs/chap02 $ 
View Source for program
<program language="r">
<code>
n_loops &lt;- 10
x.means &lt;- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x &lt;- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] &lt;- mean(x)
}
x.means
</code>
</program>
n_loops <- 10
x.means <- numeric(n_loops)  # create a vector of zeros for results
for (i in 1:n_loops){
x <- as.integer(runif(100, 1, 7))  # 1 to 6, uniformly
x.means[i] <- mean(x)
}
x.means
Figure 29.21. Some Code Samples
Finally, a smaller <program> and a smaller <console>, each inside a <listing>, as the two panels of a <sidebyside> with no margins, and slightly different widths (to control word-wrapping). The panels have been aligned vertically so their captions align.
View Source for listing
<listing>
<caption>Hello!</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
View Source for program
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
Listing 29.22. Hello!
View Source for listing
<listing>
<caption>Raspberry Pi</caption>
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
</listing>
View Source for console
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
$ gcc -Wall -o intAndFloat intAndFloat.c
$ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
$ 
Listing 29.23. Raspberry Pi
And again, the two-panel <sidebyside> of <listing>, but now inside a <figure> that has a number and a caption. And then the <listing> are sub-numbered as (a) and (b).
View Source for figure
<figure>
        <caption>Two Code Listings</caption>
        <sidebyside margins="0% 0%" widths="35% 55%" valign="bottom">
<listing>
<caption>Hello!</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
<listing>
<caption>Raspberry Pi</caption>
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
</listing>
        </sidebyside>
      </figure>
View Source for listing
<listing>
<caption>Hello!</caption>
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
</listing>
View Source for program
<program language="c">
<code>
/* Hello World program */
#include&lt;stdio.h&gt;
main()
{
printf("Hello, World!");
}
</code>
</program>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello, World!");
}
(a) Hello!
View Source for listing
<listing>
<caption>Raspberry Pi</caption>
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
</listing>
View Source for console
<console>
<input>gcc -Wall -o intAndFloat intAndFloat.c</input>
<input>./intAndFloat</input>
<output>
The integer is 19088743 and the float is 19088.742188
</output>
<input />
</console>
$ gcc -Wall -o intAndFloat intAndFloat.c
$ ./intAndFloat
The integer is 19088743 and the float is 19088.742188
$ 
(b) Raspberry Pi
Figure 29.24. Two Code Listings

Subsection 29.4 <tabular>

View Source for subsection
<subsection xml:id="atomic-tabular">
  <title><tag>tabular</tag></title>
  <p>
    A <tag>tabular</tag> can be placed in six different ways:
    <ol>
      <li>
        all by itself, as a peer of <tag>p</tag> typically,
        with no layout control and hence with a
        <q>natural width,</q>
        and centered
      </li>
      <li>
        all by itself, as a peer of <tag>p</tag> typically,
        with explicit layout control,
      </li>
      <li>
        inside a <tag>table</tag>, earning a number and title,
      </li>
      <li>
        inside a <tag>sidebyside</tag>,
        with size and layout configured,
      </li>
      <li>
        inside a <tag>table</tag> inside a <tag>sidebyside</tag>,
        with size and layout configured,
        with a number and title, and
      </li>
      <li>
        inside a <tag>table</tag> inside a <tag>sidebyside</tag> inside a <tag>figure</tag>,
        with size and layout configured,
        with a number and title, but now sub-numbered ((a), (b), (c),<ellipsis />).
      </li>
    </ol>
    Examples of each, and more.
  </p>
  <p>
    A <tag>tabular</tag> realized by <latex /> for PDF/print will normally be as wide as necessary to hold the content,
    without word-wrapping the content of any cell that is not explicitly authored that way.
    This is the most rigid of the content types we call
    <q>planar.</q>
    So for <pretext /> output as <latex />,
    when you explicitly constrain the width to be less than the
    <q>natural width</q>
    (including use as a panel of a <tag>sidebyside</tag>,
    or even setting margins) the table will be scaled <em>down</em> in width,
    which can result in an apparent font size very much smaller than that of the surrounding text.
    Note that we do not ever scale a tabular up to be wider with a larger font size.
    Note also that if there is no attempt to control the space for the table
    (no layout control, not in a <tag>sidebyside</tag>)
    then no scaling is attempted at all and the table may be wider than the text and protrude into the right margin.
    For more, see the three examples at:
    <xref ref="natural-too-wide" text="type-global" /> , <xref ref="scale-down-auto" text="type-global" />, <xref ref="scale-down-100" text="type-global" />.
    Generally, much of the commentary and testing here is about <latex />/PDF/print.
    While for <init>HTML</init> output the cells will usually automatically word-wrap to fit in the available space,
    without adjusting the font size.
    Some might like this behavior and some might not.
  </p>
  <p>
    Data in a table form can be placed in amongst a series of paragraphs.
    With no layout control, it will occupy its
    <q>natural width</q>
    and be centered.
  </p>
  <tabular>
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
  <p>
    The same effect can be had by specifying that the <attr>width</attr> attribute have the value <c>auto</c>,
    but do not specify any <attr>margins</attr>.
    We test multiple footnotes in a <tag>tabular</tag>,
    not included in a <tag>table</tag>.
  </p>
  <tabular width="auto">
    <row header="yes">
      <cell>State<fn>
        Only from the West Coast.
        </fn></cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223<fn>
        Wow! That is as big as many countries.
        </fn></cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
  <p>
    In amongst a run of paragraphs
    (or similar)
    a <tag>tabular</tag> can be placed with layout control.
    For <latex /> output,
    this will scale the table to fit within the explicit, or implicit, width.
    This can result in obvious differences in the apparent font size.
    We first have a <attr>width</attr> that is experimentally similar to the natural width,
    with asymetric margins.
    Then a narrow width, and a wide width, as an illustration.
  </p>
  <tabular width="81.61%">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
  <p>
    Narrow. 45% width. 20% margin left, 35% margin right.
  </p>
  <tabular width="45%" margins="20% 35%">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
  <p>
    Wide. 97% width. 1% margin left, 2% right.
  </p>
  <tabular width="97%" margins="1% 2%">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
  <p>
    Naturally, a <tag>tabular</tag> can be placed inside a <tag>table</tag>,
    earning a number and a title.
  </p>
  <table>
    <title>Natural Width</title>
    <tabular>
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
  </table>
  <p>
    A little narrower, but still centered by default.
  </p>
  <table>
    <title>Width of 60%, automatic centering</title>
    <tabular width="60%">
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
  </table>
  <p>
    Very narrow, asymmetric margins.
  </p>
  <table>
    <title>Width of 30%, 30% left margin, 40% right margin</title>
    <tabular width="30%" margins="30% 40%">
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
  </table>
  <p>
    Wider than necessary, asymmetric margins.
  </p>
  <table>
    <title>Width of 90%, 8% left margin, 2% right margin</title>
    <tabular width="90%" margins="8% 2%">
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
  </table>
  <p>
    The next table is purposely much too wide.
    In <xref ref="natural-too-wide" text="type-global" /> we make no attempt to control the width,
    and so it will extend into the margins.
    In <xref ref="scale-down-auto" text="type-global" /> we have simple added the attribute <c>width="auto"</c>.
    This attempt to use layout control will cause an automatic reduction in width and a smaller apparent font size.
    Adjusting margins providing an explicit percentage width,
    or placing the tabular as a panel of <tag>sidebyside</tag> will have the same effect.
    In <xref ref="scale-down-100" text="type-global" /> we have set the width explicity to 100% and so it should be identical to the automatic width case just prior.
  </p>
  <table xml:id="natural-too-wide">
    <title>Tabular too wide, no layout control</title>
    <tabular>
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
        <cell>Capitol City</cell>
        <cell>Largest City</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
        <cell>Olympia</cell>
        <cell>Seattle</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
        <cell>Salem</cell>
        <cell>Portland</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
        <cell>Sacremento</cell>
        <cell>Los Angeles</cell>
      </row>
    </tabular>
  </table>
  <table xml:id="scale-down-auto">
    <title>Tabular too wide, scale to automatic width</title>
    <tabular width="auto">
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
        <cell>Capitol City</cell>
        <cell>Largest City</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
        <cell>Olympia</cell>
        <cell>Seattle</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
        <cell>Salem</cell>
        <cell>Portland</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
        <cell>Sacremento</cell>
        <cell>Los Angeles</cell>
      </row>
    </tabular>
  </table>
  <table xml:id="scale-down-100">
    <title>Tabular too wide, scale to 100% width</title>
    <tabular width="100%">
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
        <cell>Capitol City</cell>
        <cell>Largest City</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
        <cell>Olympia</cell>
        <cell>Seattle</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
        <cell>Salem</cell>
        <cell>Portland</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
        <cell>Sacremento</cell>
        <cell>Los Angeles</cell>
      </row>
    </tabular>
  </table>
  <p>
    Now into <tag>sidebyside</tag> in various ways and with various sizes.
    First, two <tag>tabular</tag> as panels with widths at 60% and 30%. Note that in <latex />/PDF/print the tabular of functional values does not need the full 30% width,
    so it is at its natural size and centered within its panel.
  </p>
  <sidebyside widths="60% 30%">
    <tabular>
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
    <tabular>
      <row header="yes">
        <cell><m>x</m></cell>
        <cell><m>f(x)</m></cell>
      </row>
      <row>
        <cell>3</cell>
        <cell>9.734</cell>
      </row>
      <row>
        <cell>5</cell>
        <cell>2.175</cell>
      </row>
    </tabular>
  </sidebyside>
  <p>
    Let's do that again,
    but with widths experimentally set to make font sizes match
    (approximately).
  </p>
  <sidebyside widths="81.61% 12.75%">
    <tabular>
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row>
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
    <tabular>
      <row header="yes">
        <cell><m>x</m></cell>
        <cell><m>f(x)</m></cell>
      </row>
      <row>
        <cell>3</cell>
        <cell>9.734</cell>
      </row>
      <row>
        <cell>5</cell>
        <cell>2.175</cell>
      </row>
    </tabular>
  </sidebyside>
  <p>
    Same tabular, which fills roughly 80% by itself,
    packed into a single <tag>sidebyside</tag> with just a 2% gap,
    and no side margins.
  </p>
  <sidebyside widths="49% 49%" margins="0% 0%">
    <tabular left="medium" top="medium">
      <col />
      <col />
      <col />
      <col right="medium" />
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row bottom="medium">
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
    <tabular left="medium" top="medium">
      <col />
      <col />
      <col />
      <col right="medium" />
      <row header="yes">
        <cell>State</cell>
        <cell>Population</cell>
        <cell>Area (sq. mi.)</cell>
        <cell>Statehood (Year)</cell>
      </row>
      <row>
        <cell>Washington</cell>
        <cell>7,614,893</cell>
        <cell>71,362</cell>
        <cell>1889</cell>
      </row>
      <row>
        <cell>Oregon</cell>
        <cell>4,217,737</cell>
        <cell>98,381</cell>
        <cell>1859</cell>
      </row>
      <row bottom="medium">
        <cell>California</cell>
        <cell>39,512,223</cell>
        <cell>163,696</cell>
        <cell>1850</cell>
      </row>
    </tabular>
  </sidebyside>
  <p>
    Natural widths, but now as a pair of tables.
  </p>
  <sidebyside widths="81.61% 12.75%">
    <table>
      <title>West Coast</title>
      <tabular>
        <row header="yes">
          <cell>State</cell>
          <cell>Population</cell>
          <cell>Area (sq. mi.)</cell>
          <cell>Statehood (Year)</cell>
        </row>
        <row>
          <cell>Washington</cell>
          <cell>7,614,893</cell>
          <cell>71,362</cell>
          <cell>1889</cell>
        </row>
        <row>
          <cell>Oregon</cell>
          <cell>4,217,737</cell>
          <cell>98,381</cell>
          <cell>1859</cell>
        </row>
        <row>
          <cell>California</cell>
          <cell>39,512,223</cell>
          <cell>163,696</cell>
          <cell>1850</cell>
        </row>
      </tabular>
    </table>
    <table>
      <title>Function Values</title>
      <tabular>
        <row header="yes">
          <cell><m>x</m></cell>
          <cell><m>f(x)</m></cell>
        </row>
        <row>
          <cell>3</cell>
          <cell>9.734</cell>
        </row>
        <row>
          <cell>5</cell>
          <cell>2.175</cell>
        </row>
      </tabular>
    </table>
  </sidebyside>
  <p>
    Finally, as two individual <tag>table</tag>,
    grouped and laid out via a <tag>sidebyside</tag>,
    and collected as a <tag>figure</tag>.
    Which causes sub-numbering of the two enclosed <tag>table</tag>.
  </p>
  <figure>
    <caption>Geography and Mathematics</caption>
    <sidebyside widths="81.61% 12.75%">
      <table>
        <title>West Coast</title>
        <tabular>
          <row header="yes">
            <cell>State</cell>
            <cell>Population</cell>
            <cell>Area (sq. mi.)</cell>
            <cell>Statehood (Year)</cell>
          </row>
          <row>
            <cell>Washington</cell>
            <cell>7,614,893</cell>
            <cell>71,362</cell>
            <cell>1889</cell>
          </row>
          <row>
            <cell>Oregon</cell>
            <cell>4,217,737</cell>
            <cell>98,381</cell>
            <cell>1859</cell>
          </row>
          <row>
            <cell>California</cell>
            <cell>39,512,223</cell>
            <cell>163,696</cell>
            <cell>1850</cell>
          </row>
        </tabular>
      </table>
      <table>
        <title>Function Values</title>
        <tabular>
          <row header="yes">
            <cell><m>x</m></cell>
            <cell><m>f(x)</m></cell>
          </row>
          <row>
            <cell>3</cell>
            <cell>9.734</cell>
          </row>
          <row>
            <cell>5</cell>
            <cell>2.175</cell>
          </row>
        </tabular>
      </table>
    </sidebyside>
  </figure>
</subsection>
A <tabular> can be placed in six different ways:
  1. all by itself, as a peer of <p> typically, with no layout control and hence with a “natural width,” and centered
  2. all by itself, as a peer of <p> typically, with explicit layout control,
  3. inside a <table>, earning a number and title,
  4. inside a <sidebyside>, with size and layout configured,
  5. inside a <table> inside a <sidebyside>, with size and layout configured, with a number and title, and
  6. inside a <table> inside a <sidebyside> inside a <figure>, with size and layout configured, with a number and title, but now sub-numbered ((a), (b), (c),…).
Examples of each, and more.
A <tabular> realized by for PDF/print will normally be as wide as necessary to hold the content, without word-wrapping the content of any cell that is not explicitly authored that way. This is the most rigid of the content types we call “planar.” So for PreTeXt output as , when you explicitly constrain the width to be less than the “natural width” (including use as a panel of a <sidebyside>, or even setting margins) the table will be scaled down in width, which can result in an apparent font size very much smaller than that of the surrounding text. Note that we do not ever scale a tabular up to be wider with a larger font size. Note also that if there is no attempt to control the space for the table (no layout control, not in a <sidebyside>) then no scaling is attempted at all and the table may be wider than the text and protrude into the right margin. For more, see the three examples at: Table 29.29 , Table 29.30, Table 29.31. Generally, much of the commentary and testing here is about /PDF/print. While for HTML output the cells will usually automatically word-wrap to fit in the available space, without adjusting the font size. Some might like this behavior and some might not.
Data in a table form can be placed in amongst a series of paragraphs. With no layout control, it will occupy its “natural width” and be centered.
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
The same effect can be had by specifying that the @width attribute have the value auto, but do not specify any @margins. We test multiple footnotes in a <tabular>, not included in a <table>.
State
 1 
Only from the West Coast.
Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223
 2 
Wow! That is as big as many countries.
163,696 1850
In amongst a run of paragraphs (or similar) a <tabular> can be placed with layout control. For output, this will scale the table to fit within the explicit, or implicit, width. This can result in obvious differences in the apparent font size. We first have a @width that is experimentally similar to the natural width, with asymetric margins. Then a narrow width, and a wide width, as an illustration.
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
Narrow. 45% width. 20% margin left, 35% margin right.
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
Wide. 97% width. 1% margin left, 2% right.
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
Naturally, a <tabular> can be placed inside a <table>, earning a number and a title.
View Source for table
<table>
  <title>Natural Width</title>
  <tabular>
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
</table>
Table 29.25. Natural Width
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
A little narrower, but still centered by default.
View Source for table
<table>
  <title>Width of 60%, automatic centering</title>
  <tabular width="60%">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
</table>
Table 29.26. Width of 60%, automatic centering
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
Very narrow, asymmetric margins.
View Source for table
<table>
  <title>Width of 30%, 30% left margin, 40% right margin</title>
  <tabular width="30%" margins="30% 40%">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
</table>
Table 29.27. Width of 30%, 30% left margin, 40% right margin
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
Wider than necessary, asymmetric margins.
View Source for table
<table>
  <title>Width of 90%, 8% left margin, 2% right margin</title>
  <tabular width="90%" margins="8% 2%">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
</table>
Table 29.28. Width of 90%, 8% left margin, 2% right margin
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
The next table is purposely much too wide. In Table 29.29 we make no attempt to control the width, and so it will extend into the margins. In Table 29.30 we have simple added the attribute width="auto". This attempt to use layout control will cause an automatic reduction in width and a smaller apparent font size. Adjusting margins providing an explicit percentage width, or placing the tabular as a panel of <sidebyside> will have the same effect. In Table 29.31 we have set the width explicity to 100% and so it should be identical to the automatic width case just prior.
View Source for table
<table xml:id="natural-too-wide">
  <title>Tabular too wide, no layout control</title>
  <tabular>
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
      <cell>Capitol City</cell>
      <cell>Largest City</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
      <cell>Olympia</cell>
      <cell>Seattle</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
      <cell>Salem</cell>
      <cell>Portland</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
      <cell>Sacremento</cell>
      <cell>Los Angeles</cell>
    </row>
  </tabular>
</table>
Table 29.29. Tabular too wide, no layout control
State Population Area (sq. mi.) Statehood (Year) Capitol City Largest City
Washington 7,614,893 71,362 1889 Olympia Seattle
Oregon 4,217,737 98,381 1859 Salem Portland
California 39,512,223 163,696 1850 Sacremento Los Angeles
View Source for table
<table xml:id="scale-down-auto">
  <title>Tabular too wide, scale to automatic width</title>
  <tabular width="auto">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
      <cell>Capitol City</cell>
      <cell>Largest City</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
      <cell>Olympia</cell>
      <cell>Seattle</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
      <cell>Salem</cell>
      <cell>Portland</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
      <cell>Sacremento</cell>
      <cell>Los Angeles</cell>
    </row>
  </tabular>
</table>
Table 29.30. Tabular too wide, scale to automatic width
State Population Area (sq. mi.) Statehood (Year) Capitol City Largest City
Washington 7,614,893 71,362 1889 Olympia Seattle
Oregon 4,217,737 98,381 1859 Salem Portland
California 39,512,223 163,696 1850 Sacremento Los Angeles
View Source for table
<table xml:id="scale-down-100">
  <title>Tabular too wide, scale to 100% width</title>
  <tabular width="100%">
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
      <cell>Capitol City</cell>
      <cell>Largest City</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
      <cell>Olympia</cell>
      <cell>Seattle</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
      <cell>Salem</cell>
      <cell>Portland</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
      <cell>Sacremento</cell>
      <cell>Los Angeles</cell>
    </row>
  </tabular>
</table>
Table 29.31. Tabular too wide, scale to 100% width
State Population Area (sq. mi.) Statehood (Year) Capitol City Largest City
Washington 7,614,893 71,362 1889 Olympia Seattle
Oregon 4,217,737 98,381 1859 Salem Portland
California 39,512,223 163,696 1850 Sacremento Los Angeles
Now into <sidebyside> in various ways and with various sizes. First, two <tabular> as panels with widths at 60% and 30%. Note that in /PDF/print the tabular of functional values does not need the full 30% width, so it is at its natural size and centered within its panel.
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
\(x\) \(f(x)\)
3 9.734
5 2.175
Let’s do that again, but with widths experimentally set to make font sizes match (approximately).
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
\(x\) \(f(x)\)
3 9.734
5 2.175
Same tabular, which fills roughly 80% by itself, packed into a single <sidebyside> with just a 2% gap, and no side margins.
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
Natural widths, but now as a pair of tables.
View Source for table
<table>
  <title>West Coast</title>
  <tabular>
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
</table>
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
Table 29.32. West Coast
View Source for table
<table>
  <title>Function Values</title>
  <tabular>
    <row header="yes">
      <cell><m>x</m></cell>
      <cell><m>f(x)</m></cell>
    </row>
    <row>
      <cell>3</cell>
      <cell>9.734</cell>
    </row>
    <row>
      <cell>5</cell>
      <cell>2.175</cell>
    </row>
  </tabular>
</table>
\(x\) \(f(x)\)
3 9.734
5 2.175
Table 29.33. Function Values
Finally, as two individual <table>, grouped and laid out via a <sidebyside>, and collected as a <figure>. Which causes sub-numbering of the two enclosed <table>.
View Source for figure
<figure>
  <caption>Geography and Mathematics</caption>
  <sidebyside widths="81.61% 12.75%">
    <table>
      <title>West Coast</title>
      <tabular>
        <row header="yes">
          <cell>State</cell>
          <cell>Population</cell>
          <cell>Area (sq. mi.)</cell>
          <cell>Statehood (Year)</cell>
        </row>
        <row>
          <cell>Washington</cell>
          <cell>7,614,893</cell>
          <cell>71,362</cell>
          <cell>1889</cell>
        </row>
        <row>
          <cell>Oregon</cell>
          <cell>4,217,737</cell>
          <cell>98,381</cell>
          <cell>1859</cell>
        </row>
        <row>
          <cell>California</cell>
          <cell>39,512,223</cell>
          <cell>163,696</cell>
          <cell>1850</cell>
        </row>
      </tabular>
    </table>
    <table>
      <title>Function Values</title>
      <tabular>
        <row header="yes">
          <cell><m>x</m></cell>
          <cell><m>f(x)</m></cell>
        </row>
        <row>
          <cell>3</cell>
          <cell>9.734</cell>
        </row>
        <row>
          <cell>5</cell>
          <cell>2.175</cell>
        </row>
      </tabular>
    </table>
  </sidebyside>
</figure>
View Source for table
<table>
  <title>West Coast</title>
  <tabular>
    <row header="yes">
      <cell>State</cell>
      <cell>Population</cell>
      <cell>Area (sq. mi.)</cell>
      <cell>Statehood (Year)</cell>
    </row>
    <row>
      <cell>Washington</cell>
      <cell>7,614,893</cell>
      <cell>71,362</cell>
      <cell>1889</cell>
    </row>
    <row>
      <cell>Oregon</cell>
      <cell>4,217,737</cell>
      <cell>98,381</cell>
      <cell>1859</cell>
    </row>
    <row>
      <cell>California</cell>
      <cell>39,512,223</cell>
      <cell>163,696</cell>
      <cell>1850</cell>
    </row>
  </tabular>
</table>
State Population Area (sq. mi.) Statehood (Year)
Washington 7,614,893 71,362 1889
Oregon 4,217,737 98,381 1859
California 39,512,223 163,696 1850
(a) West Coast
View Source for table
<table>
  <title>Function Values</title>
  <tabular>
    <row header="yes">
      <cell><m>x</m></cell>
      <cell><m>f(x)</m></cell>
    </row>
    <row>
      <cell>3</cell>
      <cell>9.734</cell>
    </row>
    <row>
      <cell>5</cell>
      <cell>2.175</cell>
    </row>
  </tabular>
</table>
\(x\) \(f(x)\)
3 9.734
5 2.175
(b) Function Values
Figure 29.34. Geography and Mathematics