Skip to main content

Section 12 List Calisthenics

View Source

Subsection 12.1 Lists, Generally

Use ol to make an ordered list, and ul to make an unordered (bulleted) list. In both cases, use li for each entry. If an entry contains more than one paragraph, then each must be wrapped in p.

This section contains nested lists, to demonstrate how they get assigned labels (numbering, symbols). But we begin with two simple lists, demonstrating an ordered list and an unordered list. See the end of section for an example of a description list. Note in the source the optional use of a paragraph (p) for the list items of the list of colors.

  1. First.

  2. Second 1 .

  3. Third.

Next, we have a list with no customization and multiple levels to test the defaults. allows a maximum of four levels of ordered/numbered lists, and a total of six levels if some unordered lists are mixed in. The second-level defaults (lower-case Latin) are formatted slightly different in versus HTML. The HTML style is not easy to adjust, but you can specify the version to match if it is important. Note that to have nested lists you must structure your list items as paragraphs, since a list may only appear within a <p> element.

  1. A title on a top-level item.

    Level 1, first.

  2. Level 1, second.

    1. Level 2, first.

    2. Level 2, second.

      1. Level 3, first.

      2. Level 3, second.

        1. Level 4, first.

        2. Level 4, second.

        3. Title on xref'ed list item.

          Level 4, third.

      3. Level 3, third.

    3. A title on a nested item.

      Level 2, third.

  3. Level 1, third.

Items in ordered lists (only) may be be give an xml:id and then may be the target of an xref. We test three here, referencing down into the hierarchy above. Level 1, second: 2. Level 3, second: 2.b.ii. Level 4, third: 2.b.ii.C. Note that if a list item of an ordered list is contained within a list item of an unordered list, then its number will not be defined.

And now a four-level deep unordered list with the default labels supplied by PreTeXt (disc, circle, square, disc). Again, the defalt order for Markdown/Jupyter (disc, square, circle, circle) is different than for and HTML (disc, circle, square, disc)

  • A title on a top-level item.

    Level 1, first.

  • Level 1, second.

    • Level 2, first.

    • Level 2, second.

      • Level 3, first.

      • Level 3, second.

        • Level 4, first.

        • Level 4, second.

        • Level 4, third.

      • A title on a nested item.

        Level 2, third.

    • Level 2, third.

  • Level 1, third.

And a total of six levels with a mix of ordered and unordered lists, the most that out-of-the-box- is able to handle.

  1. Level 1, first.

  2. Level 1, second.

    1. Level 2, first.

    2. Level 2, second.

      • Level 3, first.

      • Level 3, second.

        1. Level 4, first.

        2. Level 4, second.

          1. Level 5, first.

          2. Level 5, second.

            • Level 6, first.

            • Level 6, second.

            • Level 6, third.

          3. Level 5, third.

        3. Level 4, third.

      • Level 3, third.

    3. Level 2, third.

  3. Level 1, third.

Now, nested lists with the defaults replaced by custom choices. First, an ordered list, three deep, upper Roman numerals, then upper-case Latin, then more traditional Arabic numerals on the three elements of the third level. Note the adornments of the labels will be rendered in LaTeX, but not in HTML.

  1. Level 1, first.

  2. Level 1, second.

    1. Level 2, first.

    2. Level 2, second.

      1. Level 3, first.

      2. Level 3, second.

      3. Level 3, third.

    3. Level 2, third.

  3. Level 1, third.

A nested unordered list, with labels given as squares on the outer list and nothing (blank) on the inner lists.

  • Level 1, first.

  • Level 1, second.

    • Level 2, first.

    • Level 2, second.

  • Level 1, third.

A nested ordered list, to test intramural cross-references.

  1. Level 1, first.

  2. Level 1, second.

    • Level 2, first.

    • Level 2, second.

  3. Level 1, third. With a cross-reference to second list item, 2.

  4. Level 1, fourth. Whose number should not change when the knowl just prior is opened.

An ordered list may begin at zero by using a numeral zero in the @label attribute, instead of numeral one.

  1. First

  2. Second

    1. Uno

    2. Dos

    3. Tres

  3. Third

The next definition is very poorly worded. It is meant to test leading off with a list (bad form), for which normally begins right after the heading.

Definition 12.1. Group.

  1. There is a binary operation, denoted “\(\cdot\)”.

  2. The operation is associative.

  3. There is an identity element, \(e\text{.}\)

  4. For every element \(b\text{,}\) there is an element \(c\) (the inverse), such that

    \begin{equation*} b\cdot c=c\cdot b = e\text{.} \end{equation*}

If these conditions are met for a set \(G\text{,}\) then we say \(G\) is a group.

Exercises and References are specialized subdivisions you can put anywhere. They are implemented as top-level lists, so should share behavior. For example, an exercise may have many parts and when expressed as a list, should have the expected labels.

Similarly, References may have lists in their annotations. Unlikely? But possible.

The next two subdivisions are an Exercises subdivision and a References subdivision, which have lists within an exercise and a bibliographic item (respectively).

Subsection 12.2 List Spacing, I

This is a short list that ends a subsection, so can be used to address the necessary spacing. We also test two XML elements separated by a space (which should not go missing).

  1. One item.

  2. Two ducks.

  3. Three items. Plus a few more words to check that long entries in a two column list look good.

  4. Four items.

  5. Another long entry that simultaneously tests that long entries look good in a list, and also tests an odd number of entries in a two column list.

Subsection 12.3 List Spacing, II

This is another short list that ends a subsection, so can be used to address the necessary spacing.

  • Uno item.

  • Dos items.

  • Tres item.

  • Quattro items.

And a paragraph after that list so that spacing can be checked.

Subsection 12.4 List items containing only inline math

Testing list items containing only math.

There are many places where it makes sense to have a list of mathematical terms, or possibly equations. For example, one might wish to provide a list of derivative formulas. With such lists, the author may wish to have display mathematics, but almost certainly they don't want it centered. One can work around this by using the \displaystyle command. However, it would be nice if a list item containing only math used display mode by default.

  1. A list item containing some text in a paragraph, as well as some inline math: \(\int_a^b x^2\,dx = \frac{x^3}{3}\text{.}\)

  2. A list item with text and math \(\int_a^b x^2\,dx\text{,}\) not in a paragraph.

  3. \(\displaystyle \frac{d}{dx}\tan(x) = \sec^2(x) = \frac{1}{\cos^2(x)}\)

  4. \(\displaystyle \sum_{i=0}^n r^i = \frac{1-r^{n+1}}{1-r}\)

Now, a p that isn't in a list, followed by a list that's in a p.

  • \(\sum_{n=1}^\infty\frac{1}{n^2}=\frac{\pi^2}{6}\) A list item starting with some math, followed by text, all in a p

  • \(\displaystyle \frac{a}{b}\div \frac{c}{d} = \frac{ad}{bc}\)

  • \(\displaystyle \tan\theta = \frac{\sin\theta}{\cos\theta} \)

The above assemblage had some lists in it, just to see what will happen. While we're at it, we might try adding lists that are in a list.

List 12.2. A list of items, some of which contain math
  1. A first list item, containing some text. The next list item will contain only math, with the m tag inline with the li tag.

  2. A list item with text and math \(\int_a^b x^2\,dx\text{,}\) not in a paragraph.

  3. \(\displaystyle \int_a^b f'(x)\, dx = f(b)-f(a)\)

  4. The next two list items will contain, respectively, a list item containing only math, where the math is on a new line, then the same again, but with two new lines, and a list item containing math within a p, first inline, and then after a line break.

  5. \(\displaystyle \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}}\)

  6. \(\displaystyle \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}}\)

  7. \(\displaystyle \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}}\)

  8. \(\displaystyle \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}}\)

And now, a list in a paragraph.

  • A paragraph that begins with text, then some math: \(\sum_{n=1}^\infty\frac{1}{n^2}=\frac{\pi^2}{6}\) And now some more text. The next two list items contain:

    1. Math only, inline.

    2. Math only, with a newline.

    3. Math only, but in a paragraph. Also the next item on this list has math, just to see what happens in a nested list.

    4. \(\displaystyle \int_a^x \frac{d}{dt}f(t)\,dt = f(x)-f(a)\)

  • \(\displaystyle \frac{a}{b}\div \frac{c}{d} = \frac{ad}{bc}\)

  • \(\displaystyle \tan\theta = \frac{\sin\theta}{\cos\theta} \)

  • \(\displaystyle \frac{a}{b}\gt \sum_{i=3}^{76}\frac{x^2}{y^2}\)

Inclusion of any text other than math will kill the automatic display style. For example, this would happen if one were to add punctuation after the math.

  • \(\int_a^b \frac{\sin(x)}{x}\,dx\text{,}\)

  • \(\displaystyle \int_a^b \frac{\sin(x)}{x}\,dx\)

List items can have titles. We try that here, along with testing list items structured with paragraphs.

  • With \displaystyle added automatically.

    \(\displaystyle \sum_{n=1}^\infty ar^n\)

  • Two paragraphs.

    \(\sum_{n=1}^\infty ar^n\)

    \(\sum_{n=1}^\infty ar^n\)

  • One paragraph, extra text.

    So, \(\sum_{n=1}^\infty ar^n\)

  • Two elements (only).

    \(\sum_{n=1}^\infty ar^n\)

Subsection 12.5 Difficult List Items

In Subsection 12.4 we were careful about lone bits of math inside list items. The <cd> element is used with indentation, which is likely superfluous inside a list item that is already being indented. Here we test lone <cd> elements inside of list items in various configurations.

Unordered list, one-deep.

  • Foo Bar Foo
    Bar Foo Bar
    

  • This list item is a long paragraph with a <cd> in the middle which should be indented some to indicate its participation in the paragraph.

    Foo Bar Foo
    Bar
    Bar Foo Bar
    Foo
    

    This list item is a long paragraph with a <cd> in the middle which should be indented some to indicate its participation in the paragraph.

  • Foo Bar Foo
    Bar
    Bar Foo Bar
    Foo
    

Intervening paragraph, to illuminate spacing at both the top and bottom of a list. Intervening paragraph, to illuminate spacing at both the top and bottom of a list. Intervening paragraph, to illuminate spacing at both the top and bottom of a list. Intervening paragraph, to illuminate spacing at top and bottom of a list.

Ordered lists, two-deep, mixed.

  1. First item, outer level.

    1. First inner item, cd only
      Foo Bar Foo
      Bar
      Bar Foo Bar
      Foo
      

    2. Second inner item, a paragraph in a list item.

    3. Third inner item, cd only
      Foo Bar Foo
      Foo Bar Foo
      Bar Foo Bar
      

  2. cd inside second item, outer level
    Bar
    Bar Foo Bar
    Foo
    

Subsection 12.6 Description Lists

Use dl to make a description list . Inside of those tags, use li for each entry. Then, use title to specify the term being described and p to specify the description.

A “description” list has a short term or phrase that is prominent, followed by a short description. It is modeled on the lists of similar structure in both and HTML. It makes for a nice medium-weight way to define terms, somewhere in-between the term tag which just makes a term prominent in a sentence, and a definition, which is set off, has a heading, a number, and a title. Do not try to manage the separation between the title and the description by employing punctuation (but you can include a question-mark or exclamation-point if necessary). For example, do not include a colon to the end of the title. This example is from Bob Plantz.

Central Processing Unit (CPU)

Controls most of the activities of the computer, performs the arithmetic and logical operations, and contains a small amount of very fast memory.

Memory

Provides storage for the instructions for the CPU and the data they manipulate.

Input/Output (I/O)

Communicates with the outside world and with mass storage devices (e.g., disks).

Bus!

A communication pathway with a protocol specifying exactly how the pathway is used. (The punctuation is just for testing.)

\(\displaystyle \sum_{n=0}^\infty x^n = \frac{1}{1-x}\)

A geometric series. The formula is valid if \(|x| < 1\text{.}\)

Some presentations can be assisted by a hint from the author about the lengths of the titles. You can choose to provide a width attribute on a dl element with possible values narrow and medium. The value refers (somewhat confusingly) to the distance between the left margin and the description. The default is medium, which is illustrated above. Conversion to ignores the attribute. An example with narrow:

Red

The color of the sun at sunset.

Blue

The color of a clear sky. Also a synonym for “depressed or sad”, the title of a 1971 Joni Mitchell album (and more than a dozen other musical albums), the period of Picasso's work between 1901 and 1904, and much more!

Aqua

The color of shallow tropical waters.

Math \(x^2\)

Sorry, not a color but testing titles with math in them.

“i” before “e” except after “c,” unless it sounds like “a” as in “neighbor” and “weigh”

Get feisty about that weird counterfeit rule: seize the day and don't have a heifer, man.

Avocado

Avocado is the the color with hex code #568203, and also the main ingredient in guacamole.

Magenta

Magenta is a color, and a character in Rocky Horror.

Zymurgist

A scientist who studies the chemical process of fermentation in brewing and distilling. Also the alphabetically last 9-letter word in the English language.

Byzantium

Byzantium is the the color with hex code #702963, and also an ancient Greek city which later became known as Constantinople, and today is called Istanbul.

Convection

Circulating motion in a fluid.

Elementary

No literary detective ever said “Elementary my dear Watson.” In particular, Sherlock Holmes never said that.

Understand

Perceive the intended meaning of.

Washington

A state, a district, the man on the US $1 bill and on the US quarter. Did you ever notice that on the US dime, the value is stated as “one dime”? But how is one to know that a dime is worth 10 cents?

Aquamarine

Aquamarine is a color, and a mineral.

Those who cannot remember the past are condemned to repeat it.

George Santayana wrote those words in 1905. A similar aphorism is misattributed to Winston Churchill. The idea is embodied in the 4th principle: PreTeXt respects the good design practices which have been developed over the past centuries.

\(\displaystyle \zeta(s) = \sum_{n=1}^\infty n^{-s} \)

The Riemann \(\zeta\)-function is defined by a Dirichlet series, valid for \(\Re(s) > 1\text{.}\)

main() is a void function

A dl with width="narrow" might be a useful way to give commentary on a program listing.

Subsection 12.7 Named Lists

A list can be wrapped with a <list> element, so that it earns a number, can be given a title and have an introduction and conclusion. Cross-references to individual list items get a bit involved as they are prefixed with the number of the list and then the number of the item, so conceivably you could get a number like 4.5.3:2.a.ii. The colon is used to indicate the transition from the number of the list within divisions and the numbers coming from the list hierarchy, since it has two small dots.

List 12.3. Colors of the Rainbow

Because the colors are always in the same order, an ordered list is natural here. The colors change continuously, but are often divided up into large ranges that human perception can easily distinguish.

  1. Red

  2. Orange

  3. Yellow

  4. Green

  5. Blue

  6. Indigo

  7. Violet

So some people use the acronym ROY-G-BIV to remember this sequence.

This next list is used for testing cross-references to it. See Section 20.

List 12.4. A named list of targets

This is the introduction to this named list, which references an item within, via the hybrid @text attribute: Item B.c. At one time this paragraph was inadvertently centered—that bug has been fixed.

    1. A and i

    2. A and ii

    3. A and iii

    1. B and a

    2. B and b

    3. B and c (target of some cross-references)

    • The next three cross-references point to a list item, just above. It is interesting because the list is named, hence numbered. The global reference uses the full number, while the local reference uses the number from within the list. The hybrid reference recognizes that the target is within the same named list, so the number can be shorter. An identical hybrid cross-reference appears within the <introduction> to this list, an immediately following, but outside the <list>.

    • Cross-reference within named list (global): Item 12.4:B.c

    • Cross-reference within named list (hybrid): Item B.c

    • Cross-reference within named list (local): Item B.c

      1. C and bullet and 1

      2. C and bullet and 2

      3. C and bullet and 3

    • C and bullet

    • C and bullet

This is a paragraph just outside the preceding named list, which references an item within, via the hybrid @text attribute: Item 12.4:B.c.

This is a paragraph with three lists contained within it. For HTML output we have to “inside-out” the lists.

  1. A one item ordered list.

In other words, the text before, after, and between, needs to each be encapsulated as an HTML p element of its own.

  • A one item unordered list.

Including definition lists.

Define Me

A one item definition list.

That's all!

A one item list, whose item is a paragraph with two contained ordered lists, separated by text.

  • Introductory text.

    1. First item, first list.

    Intermediate text.

    1. First item, second list.

    Concluding text.

Subsection 12.8 Testing List Decompositions

A list in a paragraph is a construction in HTML that browsers try to correct, which leads to unpredictable results, so we have to decompose an author's paragraph with lists into a sequence of HTML paragraphs, interrupted by lists. This subsection is only relevant to HTML output, and only for testing.

  1. This paragraph opens with an ordered list.

  2. Testing the id, and other info that should be at the top of the paragraph.

Now the paragraph continues, and we have an index item here, so we can test cross-references back here.

Exercises 12.9 Exercises (with lists)

1.

This exercise should have several parts, and labels should follow the defaults for second-level lists (since the exercise is numbered according to the top-level default).

  1. Exercise 1, first part.

  2. Exercise 1, second part.

    1. Exercise 1, second part, first refinement.

  3. Exercise 1, third part.

2.

Table 12.5. Table Alignment Example
1111, 2222 3333
aaaa bbbb,cccc
AAAA BBBB CCCC

This exercise (a list item really) has a table first. Default aligns it vertically above the exercise number. Placement here tests correcting that alignment.

A small test of cross-references to subsidiary parts of exercises. Exercise 1, third part: 12.9.1.c. Exercise 1, second part, first refinement: 12.9.1.b.i.

References 12.10 References (with lists in Annotations)

[1]
  
Some book would be listed here.
Note.

Here is the annotation and an ordered list as part of that annotation.

  1. Book 1, first part.

  2. Book 1, second part.

  3. Book 1, third part.

Footnote in an unstructured list item
One of our favorite colors