From b9545f6f152ac8c3f05ee9df8d402271d41d6a33 Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Mon, 14 Jul 2025 09:54:48 -0400 Subject: [PATCH 01/12] pre-PR-draft --- css/components/_pretext.scss | 1 + css/components/elements/_veil.scss | 22 ++++++++++ examples/sample-article/sample-article.xml | 51 ++++++++++++++++++++++ js/pretext_add_on.js | 13 ++++++ xsl/pretext-common.xsl | 3 ++ xsl/pretext-html.xsl | 13 ++++++ 6 files changed, 103 insertions(+) create mode 100644 css/components/elements/_veil.scss diff --git a/css/components/_pretext.scss b/css/components/_pretext.scss index 000908540f..e3663deafa 100644 --- a/css/components/_pretext.scss +++ b/css/components/_pretext.scss @@ -9,6 +9,7 @@ $navbar-breakpoint: 800px !default; @use 'spacing'; @use 'elements/lists'; @use 'elements/fillin'; +@use 'elements/veil'; @use 'elements/headings'; @use 'elements/links'; @use 'elements/tables'; diff --git a/css/components/elements/_veil.scss b/css/components/elements/_veil.scss new file mode 100644 index 0000000000..b8a4845070 --- /dev/null +++ b/css/components/elements/_veil.scss @@ -0,0 +1,22 @@ +.veil-toggle { + background-color: #007bff; + color: white; + padding: 0.05rem 0.25rem; + border-radius: 0.25rem; + font-size: 0.85rem; + font-weight: bold; + cursor: pointer; + white-space: nowrap; +} + +.veil-toggle.slide-away { + display: none; +} + +.veil-content { + display: none; +} + +.veil-content.visible { + display: inline; +} \ No newline at end of file diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index 7eefb7f866..2a2acf9b9b 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -10186,6 +10186,57 @@ along with MathBook XML. If not, see . +
+ <c>veil</c> Testing + +

+ The function f(t) = e^{-t} satisfies the differential equation + f'(t) = -f(t), + which is characteristic of exponential decay. +

+ +

+ This sentence contains a simple hidden phrase and continues normally. +

+ +

+ Here is a veil wrapping emphasized hidden text within an emphasized span. +

+ +

+ You can also hide inline math like f(t) = e^{-t} without breaking the flow. +

+ +

+ A slightly more complex example with a link: + + Learn more at PreTeXt or explore g(x) = x^2 + 1. + +

+ +

+ Testing long hidden text: + + This is a very long phrase that includes emphasis, an external link, + inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. + +

+ +

+ Multiple consecutive veils: \cos(t) + first hidden, then some regular text, and second hidden part. +

+ + + h(t) = \sin(t) tiger + + +

+ Final test: a veil at the end of the sentence. +

+ +
+ diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index ce10f481ec..e4369b0191 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -8614,6 +8614,19 @@ along with MathBook XML. If not, see . + + veil + + + + + + + \textcolor{gray}{\underline{ + + }} + + From 23bf2c225c93e24df064f3dadfb67e87ce2a52c5 Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Mon, 14 Jul 2025 13:17:39 -0400 Subject: [PATCH 02/12] round-2 --- examples/sample-article/sample-article.xml | 16043 +------------------ xsl/pretext-html.xsl | 2 +- xsl/pretext-latex-common.xsl | 46 +- 3 files changed, 117 insertions(+), 15974 deletions(-) diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index 2a2acf9b9b..91bac03c2f 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -302,15982 +302,94 @@ along with MathBook XML. If not, see . - -
- The Fundamental Theorem - -

There is a remarkable theorem:And fortunately we do not need to try to write it in the margin!

- - - The Fundamental Theorem of Calculus - Fundamental Theorem of Calculus - - -

If f(x) is continuous, and the derivative of F(x) is f(x), then \definiteintegral{a}{b}{f(x)}{x}=F(b)-F(a)test: buried in theorem/statement/p

- - -

Left to the reader.

- - - - - -

You will find almost nothing about all this in the article , nor in the book , since they belong in some other article, but we can cite them out-of-order for practice anyway.

- - - -

When we are writing we do not always know what we want to cite, or just where subsequent material will end up. For example, we might want a citation to or we might want to reference a later.

- -

We can also embed todos in the source by making an XML comment that begins with the four characters todo, and selectively display them, so you may not see the one here in the output you are looking at now. Or maybe you do see it?

- - - -

Because a definite integral can be computed using an antiderivative, we have the following definition.

- - - - - indefinite integralintegralindefinite integral - - \int\,f(x)\,dx - indefinite integral of f(x) - - -

Suppose that \frac{d}{dx}F(x)=f(x). Then the indefinite integral of f(x) is F(x) and is written as \int\,f(x)\,dx=F(x).

- - -
- - - -
- Computing Integrals with Sage (<m>\int</m>) - - - Computing Integrals with Sage (∫) - - Sageintegration - Sageintegrationcell - Sageintegrationnumerical - numericalSage integration - numericalSage - - numerics - numericsSage - numerical integrationSagecellSage - - AF - AG - AH - AB - ABC - ABCD - ABCA - - - X - XF - XG - XH - XY - XYZD - XYZA - - - mixed-content emphasized - structured-content emphasized - sorted as if Cat - sorted as if Quorum - unitsZ (sort as A) - unitsA (sort as Z) - verbatim text, use sortby - - \rhofibers - - - - - Cayley graphcayley graphCAYLEY GRAPH - - - - x as a variable - -

Sage can compute definite integrals. The output contains the approximate numerical value of the definite integral, followed by an upper bound of the error in the approximation.

- - - numerical_integral(sin(x)^2, (0, 2)) - - (1.189200623826982, 1.320277913471315e-14) - - -

Given the Fundamental Theorem, we would find the antiderivative useful.Cayley graphx as a variable

- - - integral(sin(x)^2, x) - 1/2*x - 1/4*sin(2*x) - - -

The same command can be used to employ the antiderivative in the application of the Fundamental Theorem. Notice that the answer is exact and any further manipulation is likely to be simply producing a numerical approximation.cayley graph

- - - - integral(sin(x)^2, (x, 0, 2)) - -1/4*sin(4) + 1 - - -

There are integrals you really do not want to evaluate, or you do not want your reader to evaluate. A Sage cell can be configured for display purposes onlyyou can look but you cannot touch.CAYLEY GRAPH

- - - integral(e^(x^2), x) - -1/2*I*sqrt(pi)*erf(I*x) - - -

You can give a Sage element a doctestdoctestattributesdoctest attribute, whose value mirrors the optional hash tags used in Sage doctests. Possible values are random, long time, not implemented, not tested, known bug, absolute, relative, and optional. The values absolute and relative refer to floating-point tolerances for equality and require a second attribute tolerance to specify a floating point value. The value optional refers to the test requiring that an optional Sage package be present. The name of that package should be provided in the package attribute.

- - -

The next cell is marked in the source as doctest="random", and so is specified as unpredictable and not tested. But there is some sample output which will appear in the version (and always be the same). - c - A bug test, sorted as cbc one - A bug test, sorted as cxc two - A bug test, sorted as cbc three -

- - - random() - 0.11736021338650582 - - -

While the next cell is random, the returned value will never be more than 0.01 away from 12, since the random() function stays between 0 and 1. So we provide 12.005 as the expected answer, but test with an absolute tolerance of \epsilon=0.006.

- - - 12 + 0.01*random() - 12.005 - - -

Sage has some functions which affect output, generally making mathematics look more like mathematics via syntax. This is a simple test, and you should see the variable and superscript in italics, properly formatted as output when viewed within HTML output. We have provided expected output for doctesting, but it is sort of silly to have this as part of output, even if it is instructive.

- - - pretty_print(html("$a^2$")) - <script type="math/tex">a^2</script> - - - -

Sage, and by extension, the Sage Cell Server, can interpret several languages. The next example has code in the R language,R a popular open source language for statistics. As an author, you add the attribute language="r" to your sage element. (The default language is Sage, so you do not need to indicate that repeatedly.) Note that a language like R likes to use a less than character, <, special character in XML. You need to escape it by writing &lt; as we have done in the source for this example. (See the discussion in .)

- -

As a reader you learn that the Evaluate button for a pre-loaded Sage cell will indicate the language in use.

- - - - ruth <- c(22, 25, 34, 35, 41, 41, 46, 46, 46, 47, 49, 54, 54, 59, 60) - bonds <- c(16, 25, 24, 19, 33, 25, 34, 46, 37, 33, 42, 40, 37, 34, 49, 73, 46, 45, 45, 5, 26, 28) - dimaggio <- c(12, 14, 20, 21, 25, 29, 30, 30, 31, 32, 32, 39, 46) - summary(ruth) - summary(bonds) - summary(dimaggio) - boxplot(ruth, bonds, dimaggio) - - - -

The Sage Cell Server supports the following languages: sage, gap, gp, html, maxima, octave, python, r, and singular.

- -

Here is another R cell. Unfortunately, it seems Sage's doctest facility cannot be used easily with code from other languages. In the source for this example, we have employed the XML escape sequence, &lt; several times (see ).

- - - - age <- c(25, 30, 56) - gender <- c("male", "female", "male") - weight <- c(160, 110, 220) - mydata <- data.frame(age,gender,weight) - summary(mydata) - cor(mydata$age,mydata$weight) - mean(mydata$age) - sd(mydata$age) - plot(mydata$age,mydata$weight) - - - - -

The Sage Cell server imports a few important R packages. As of 2022-06-04 these are deSolve, ggplot2, pracma, survey, swirl, and tidyverse. This next example uses the ggplot library for both a data set and the plotting capabilities. Note the initial use of the library() function. This is a modified version of the Bubble plot example at Top 50 ggplot2 Visualizations The Master List.

- - - - # load package and data - library(ggplot2) - data(mpg, package="ggplot2") - - mpg_select <- mpg[mpg$manufacturer %in% c("audi", "ford", "honda", "hyundai"), ] - - # Scatterplot - g <- ggplot(mpg_select, aes(displ, cty)) + - labs(subtitle="mpg: Displacement vs City Mileage", - title="Bubble chart") - - g + geom_jitter(aes(col=manufacturer, size=hwy)) + - geom_smooth(aes(col=manufacturer), method="lm", se=F) - - - -

Here is a blank Sage cell that you may use for practice and experimentation with the commands above. Note that this cell allows a choice of languages, and is not linked with any of the previous cells, so a reader would need to start fresh, or cut/paste definitions from other cells.

- - - -

On the other hand a sage element with no content will also create an empty Sage cell for the reader's use, but now it will be specific to a particular language and linked to others of the same language. Run the R cell above that defines the variable ruth and then try typing summary(ruth) in the cell below.

- - - -

You can make Sage blocks which are of type="invisible", which will never be shown to a reader, but which get doctested. Why do this? If some code produces an error, and you hope it is fixed someday, use an invisible block to raise the error. Once fixed, the doctest will fail, and you can adjust your commentary to suit. There is such a block right now, but you will need to go to the source to see it.

- - - - graphs(augment='vertices').next() - - Traceback (most recent call last): - ... - NotImplementedError - - - -

Our maximum width for text, designed for readability, suggests you should format your Sage code with a maximum of about 54 characters. On a mobile device, the number of displayed characters might be as low as 28 in portrait orientation, and again around 50 in landscape. You can use a variety of techniques to shorten long lines, such as using intermediate variables. Since Sage is just a huge Python library, you can use any of Python's facilities for handling long lines. These include a continuation character (which I try to avoid using) or natural places where you can break long lines, such as between entries of a list. Also, if writing loops or functions, you may wish to have your indentation be only two characters wide (rather than, say, four).

- -

Sage output can sometimes be quite long, though this has improved with some changes in Sage's output routines. Output code should be included primarily for doctesting purposes, and in this use, you may break at almost whitespace character and the doctesting framework will adjust accordingly. You may wish to show sample output in a static format, like a PDF, so you can consider formatting your output to fit the width constraints of that medium. Or you may even adjust exactly what is output, to keep it from being too verbose. Sage doctesting also allows for a wild-card style syntax which allows you to skip over huge chunks of meaningless or unpredictable output, such as tracebacks on error messages.

- -

This paragraph is just a placeholder. It has handful of index entries, all starting with the letters gas, taken from Indexing for Editors and Authors: A Practical Guide to Understanding Indexes by Leise, Mertes, and Badgett. The intent is to test letter-by-letter versus word-by-word sorting of index entries. We use a word-by-word order, resulting in:

    -
  1. gas
    2. -
  2. gas masks
    3. -
  3. gas production
    4. -
  4. gas works
    5. -
  5. gasoline
    6. -
  6. gastritis
    7. -
- gasoline - gas works - gas - gas masks - gas production - gastritis -

- - - Titled Sage Cells - Sage cellwith a title - - - integral(sin(x)^2, x) - 1/2*x - 1/4*sin(2*x) - - -

You can place Sage cells inside of a paragraphs if you want to give them a title, but no numbers, .

- -
- - - -
- An Interesting Corollary - - - Fundamental Structures - - -

This is an objectives element you are reading, and this is its introduction. This early section has really grown and tries to accomplish many things. Not all of them are listed here.

- - -
    -
  1. Display various blocks, fundamental units of the flow.
    2. -
  2. More.
    3. -
  3. Evermore.
    4. -
- - -

This concludes the (incomplete) objectives for this section, so now we can carry-on as before.

- - - - -

This is a cross-reference to one of the objectives above, forced to use the phrase-global form of the text. It should describe the objective as belonging to the section (rather than the objectives), since objectives are one-per-subdivision and are numbered based upon the containing division: . For comparison this is the (forced) type-global cross-reference: .

- -

The Fundamental Theorem comes in two flavors, where usually one is a corollary of the other.

- - - - Second Version of <acro>FTC</acro> - - - - - Leibniz, Newton - Fundamental Theorem of CalculusCorollary - -

Suppose f(x) is a continuous function. Then \frac{d}{dx}\definiteintegral{a}{x}{f(t)}{t}=f(x).

- - -

We simply take the indicated derivative, applying Theorem at - \frac{d}{dx}\definiteintegral{a}{x}{f(t)}{t}&=\frac{d}{dx}\left(F(x)-F(a)\right) - &=\frac{d}{dx}F(x)-\frac{d}{dx}F(a) - &=f(x)-0 = f(x) - .

- - -

A justification, which is one of the variants of a proof.

- - - - - - - - Alternate Proof -

You can have multiple proofs, and they can have titles which replace the word Proof as a heading. Here we just exercise displayed math with no automatic numbering, and an elective number on the middle equation. - \frac{d}{dx}\definiteintegral{a}{x}{f(t)}{t}&=\frac{d}{dx}\left(F(x)-F(a)\right) - &=\frac{d}{dx}F(x)-\frac{d}{dx}F(a) - &=f(x)-0 = f(x) -

- - - -

The alternative version of the Fundamental Theorem (FTC) in is a compact way to express the result.

- -

For testing purposes, there is a simple bare Sage Cell here.

- - - c = 832 - c - - - - - A Mysterious Derivative! -

So if we define a function with its variable employed as a limit of integration, like so K(z)=\definiteintegral{345}{z}{x^4\sin(x^2)}{x} then we get the derivative of that function so easily it seems like a mystery, \frac{d}{dz}K(z)=z^4\sin(z^2). That's it.

- -

For testing purposes, there is a simple Sage Cell here, buried inside an example that should be a knowl (embedded in the page).

- - - 2+2 - - -

We test a Sage cell inside a knowl, which should set the value of a variable that will be available to subsequent cells within the knowl.

- - - - a = 6 - a - - - - - - b = a + 10 - b - - - -

Even if you ran the cell at the top of this page, within this knowl the value of the variable c is not known, so the next cell will cause an error.

- - - - c + 400 - - - - -

The Sage cells on a page will remember results computed elsewhere on the page. If you rely on this feature, remind your readers to evaluate all the necessary cells and that they perhaps need to be evaluated in a certain order.

- - - - c/2 - - - -

There are some Sage cells in the previous (knowled) example. The results there are restricted to the knowl. In other words, the scope of those cells is the knowl. So if you opened the example and executed the Sage cells there, or if you skipped the example entirely, the next cell should not know the values of those variables and will raise an error.

- - - - a + b - - - -

We cross-reference the example just prior, , to test the simple Sage cells that will now be part of a cross-reference knowl (an external file).

- - - An Equivalent Claim - -

This claim is an equivalence: it is true if and only if it is correct.

- - -

Our purpose here is to show how you can structure a proof with cases, such as an equivalence structured with the arrows typically used to demonstrate the two directions involved in the proof, by using the direction attribute on a case element.

- - -

Nulla non lectus suscipit, bibendum leo quis, dignissim justo. In urna turpis, tincidunt id elementum id, faucibus ac tellus.

- - - -

Quisque auctor ligula turpis, ut aliquam urna consectetur hendrerit. Aenean porta dolor et justo facilisis feugiat in sed sapien. Nullam porta ex et commodo semper.

- - - - Case 3b: The inductive step - -

A case may also have a title, whose formatting and structure is entirely up to the author. This then becomes the text of a cross-reference, as well.

- - - - Why Not Try This? - -

A case (or any other element with a default title) did not always handle title-ending punctuation correctly. So we try an example title with a question mark.

- - - - Necessity - -

If you like, you can have both indications.

- - - -

No direction, no title, then just a generic title.

- - - - Exciting Proof! -

We test here that punctuation at the end of the title of a proof is handled correctly.

- - - Exact Proof -

This proof should fill exactly three lines (as of defaults in place 2018-12-31) and so the tombstone/Halmos should be on a fourth line, and then flush right. xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx.

- - - - - A List of Equivalent Statements - -

- The following are equivalent. -

    -
  1. This statement is equivalent to all those below.
    2. -
  2. This statement is equivalent to the statement above and to all those below.
    3. -
  3. This statement is equivalent to the two statements above and to the statement below.
    4. -
  4. This statement is equivalent to all those above.
    5. -
-

- - -

Our purpose here is to show how you can structure a proof with cases to address the circular logic required to prove the equivalence of a list of statements, by using the direction attribute on a case element. You should order the list of statements in the order that you would like to prove ``this statement implies the next.''

- - -

Here we would prove that the first statement implies the second.

- - - -

Here we would prove that the second statement implies the third.

- - - - The trickiest case - -

This time we include a title to describe the nature of this case. But we would still need to prove that the third statement implies the last.

- - - - Wrap-around - -

Finally, we would complete the cycle of logic by proving that the last statement implies the first.

- - - - - -

We can also use direction set to cycle in a stand-alone proof of our TFAE claim. If we include a ref on the proof that points to the original claim, then the formatting of the markers on the statement list will be honored in our cases.

- - -

Once again we will prove that the four statements in are equivalent.

- - -

Another argument that the first statement implies the second.

- - - -

And another argument that the second statement implies the third.

- - - - Not so tricky this time - -

Why did we find it so difficult before to prove that the third statement implies the last?

- - - - Wrap-around - -

And once more we complete the cycle of logic.

- - - - -

A couple more times to check that the default list markers get applied to the directional cases properly.

- - - Another List of Equivalent Statements - -

- The ol that creates the list below does not have marker. -

    -
  1. This statement is equivalent to the two below.
    2. -
  2. This statement is equivalent to both the statement above and to the statement below.
    3. -
  3. This statement is equivalent to the two above.
    4. -
-

- - -

You know the drill by now.

- - -

Does the first statement imply the second?

- - - - The <q>middle</q> case -

Does the second statement imply the third?

- - - -

And finally, does the third imply the first?

- - - - - -

This proof includes a ref to the preceding claim.

- - - - -

Does the first statement imply the second?

- - - - The <q>middle</q> case -

Does the second statement imply the third?

- - - -

And finally, does the third imply the first?

- - - - -

This proof does not include a ref, and so the direction indicators get default markers.

- - - - -

Does the first statement imply the second?

- - - -

And finally, does the second imply the first?

- - - - - - - - - - A Pedagogical Note about <xref ref="subsection-second-FTC" text="type-global"/> - - - Symbolic and Numerical Integrals - -

The Fundamental Theorem explains why we use the same notation for a definite integral, which is a numerical calculation,Which I think sometimes students lose sight of. and an antiderivative, which is a symbolic expression.

- - - Essay Question: Compare and Contrast - -

Write a short paragraph which compares, and contrasts, the definite and indefinite integral. This is an exercise which sits in the midst of the narrative, so is formatted more like an example or a remark. It can have a hint and a solution, but this one does not. It can have a title, which this one does.

- - -

Start writing!

- - - - - - - - Advice - -

Using an integral sign for an antiderivative (aka indefinite integral) would seem to make the Fundamental Theorem a fait accompli. So I would suggest not conflating the notation for two very different things until the Fundamental Theorem exposes them as being highly related.

- - - An Example of Structure - -

This is an example of an example with a bit more structure. Specifically, the example has a title, as usual, but then has a statement, which is separate from the solution. Why did we implement an example in two ways?

- - -

Authors asked for it and it seemed a very natural thing to do, even if we only had an unstructured version for a long time.

- - - - - An Example of a Question - -

Any kind of question can be marked as such with question. Or similarly, as a problem. They behave identically to examples, such as the one preceding and are numbered along with theorems, examples. etc.

- - -

You can have a solution. Or several, even if you don't ask a question.

- - -

See?

- - - - - An Inline Exercise - - -

There are lots of exercises in this sample article, but mostly they are in special exercise sections. Sometimes you just want to sprinkle some exercises through the narrative. We call these inline exercises, in contrast to divisional exercises. The inline exercises look a bit more like a theorem or definition, with titles and fully-qualified numbers.

- -

These may also have hints, answers and solutions.

- - -

A good hint.

- - -

42.

- - -

If your exercise feels like proving a theorem, then you might want to make some comments, but also clearly delineate which part of the solution is a the complete proof.

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lorem diam, convallis in nulla sed, accumsan fermentum urna. Pellentesque aliquet leo elit, ut consequat nunc dapibus ac. Sed lobortis leo tincidunt, vulputate nunc at, ultricies leo. Vivamus purus diam, tristique laoreet purus eget, mollis gravida sapien. Nunc vulputate nisl ac mauris hendrerit cursus. Sed vel molestie velit. Suspendisse sem sem, elementum at vehicula id, volutpat ac mi. Nullam ullamcorper fringilla purus in accumsan. Mauris at nunc accumsan orci dictum vulputate id id augue. Suspendisse at dignissim elit, non euismod nunc. Aliquam faucibus magna ac molestie semper. Aliquam hendrerit sem sit amet metus congue tempor. Donec laoreet laoreet metus, id interdum purus mattis vulputate. Proin condimentum vitae erat varius mollis. Donec venenatis libero sed turpis pretium tempor.

- -

Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra. Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

- - - - - - - - - An Example of with <m>\frac12</m> math formula <m>\displaystyle{\int e^x \, dx}</m> in the title - -

- Just for testing math in knowls, - and also extra whitespace in a p. -

- - - -

There are many different blocks you can employ, and they mostly behave the same way. A projectproject is very similar to a questionquestion or problemproblem

- - - Start Exploring <pretext/> - -

You could grab the minimal.xml file from the examples/minimal directory and experiment with that.

- -

Projects get their own independent numbering scheme, since they may be central to your textbook, workbook, or lab manual. If you process this sample article with level for project numbering set to 0 then you will get consecutive numbers from the beginning of your book, starting with 1.

- - - - - Exploring Explorations - - -

This is an exploration.exploration Other similar possibilities are projectproject, activityactivity, tasktask, and investigationinvestigation.

- -

Note that projects, activities, explorations, tasks and investigations share the independent numbering scheme, so it is really only intended you use one of these. If you want a variant of the name ( Directed Activity) you can use the renamerename an environment facility ().

- - - -

This is a solution to the exploration. In practice, you might choose to not make this visible for students, but instead include it as part of some guidance you might provide to instructors ( an Instructor's Manual).

- - - - - Hints, Answers, Solutions - - -

This is quite the activity upcoming. This is a prelude authored within the activity element, but visually just prior.

- - - -

Another variant of these project-like items is to possibly include a hint and an answer before the solution.

- - - -

Just a little help.

- - - -

The result, but no help in getting there.

- - - -

Everything to get it all done, in detail.

- - - -

This was quite the activity just now. This is a postlude authored within the activity element, but visually just after.

- - - - - A Note on Remarks - -

remark, convention, note, observation and warning are designed to hold very simple contents, with no additional structure (no proofs, no solutions, ).

- -

But they do carry a title and a number, can be the target of a cross-reference, and may be optionally knowlized in HTML with the html.knowl.remark processing switch.

- -

And distinctly different from a note in a biblioA gratuitous footnote to test prior bug confusing this with a note in a biblio..

- - - - -

An exercise can be structured with task.

- - - A very structured exercise - - -

This is an over-arching introduction to the whole exercise. We follow with some tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - A super-simple task -

This first task is very simple, just a paragraph. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

Now three paragraphs. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - A title of a task that has a subtask with an <tag>answer</tag> for the Solutions - -

This second task is further divided by more tasks. This is its introduction. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - A task with a title and an <tag>answer</tag> for the Solutions - -

A really simple subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

A short paragraph, before an answer.

- - -

With a proof.

- -

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- -

And a bit more to say.

- - - - -

A subtask with an answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

Right! In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - -

Three simple sub-sub-tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

First subsubtask. Short paragraph.

- - - A second three-deep subsubtask! -

Second subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

Third subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

The conclusion of the structured subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

A simple task as the last subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

This concludes our structured second task. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - - -

This third top-level task is intermediate in complexity, you are reading the statement, which is followed by more items. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

One hint. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

First answer. In interdum suscipit ullamcorper.

- - -

Second answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

At last, the solution. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - -

This is a conclusion where you could summarize the exercise. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

The following project is nearly identical to the preceding exercise.

- - - A very structured project - - -

The next block is a project, demonstrating the use of the task element to structure its parts. You are reading the prelude now. The project has lots of nonsense words, so we can test spacing the nested items. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

This is an over-arching introduction to the whole project. We follow with some tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

This first task is very simple, just a paragraph. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

Now three paragraphs. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - -

This second task is further divided by more tasks. This is its introduction. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

A really simple subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

A short paragraph, before an answer.

- - -

With a proof.

- -

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- -

And a bit more to say.

- - - - -

A subtask with an answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

Right! In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - -

Two simple sub-sub-tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

First subsubtask. Short paragraph.

- - -

Second subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - - - -

Third subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

The conclusion of the structured subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

A simple task as the last subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

This concludes our structured second task. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - - -

This third top-level task is intermediate in complexity, you are reading the statement, which is followed by more items. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

One hint. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

First answer. In interdum suscipit ullamcorper.

- - -

Second answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

-

In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - -

At last, the solution. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - -

This is a conclusion where you could summarize the project. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - -

This postlude appears visually outside the project, but is authored within, to make clear its attachment to the project. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

- - - - - Notation mathématique 2 - -

The following example, from Elise Desgreniers, is structured with task.

- - -

Écrivez chacun des exemples suivants avec les conditions pertinentes.

- - - -

Soit l'ensemble A=\lbrace 1,2,3,4,5\rbrace.

-

On constate que cet ensemble contient uniquement des entiers positifs allant de 1 à 5.

-

Donc, on peut écrire A=\lbrace x\mid x\in\mathbb{N}\text{ et } 1\leq x\leq 5\rbrace.

- - - - -

\{3,6,9,12,15,\ldots,27,30\}

- - -

Ce sont des multiples de 3.

- - -

\{x\mid x=3y \text{ et } 1\leq y\leq 10 \text{ et } y\in\mathbb{N}\}

- - - - -

\{1,3,5,7,9,11,\ldots\}

- - -

Ce sont des nombres impairs.

- - -

\{x\mid x\mod 2=1 \text{ et } x\in\mathbb{N}\}

- - - - -

\{2,3,5,7,11,13,17,19,23,\ldots\}

- - -

Ce sont des nombres premiers.

- - -

\{x\mid x\text{ est un nombre premier positif}\}

- - - - -

\{1,4,9,16,25,36,\ldots,961\}

- - -

Ce sont des carrés parfaits.

- - -

\{x\mid x=y^2 \text{ et } 1\leq y\leq 31\text{ et } y\in\mathbb{N}\}

- - - - -

\{1,8,27,64,125,\ldots\}

- - -

Ce sont des cubes parfaits.

- - -

\{x\mid x=y^3 \text{ et } y\in\mathbb{N^*}\}

- - - - -

Notes or examples related to computation or technology can go in blocks of the same name.

- - - Sample Use of Sage - -

This would be a good place to talk about Sage, including a cell or two.

- - - diff(x^4, x) - 4*x^3 - - -

But you might want to describe how to use some other calculator, or maybe some numerical method.

- - - - A <tag>paragraphs</tag> with a <tag>project</tag> with an <tag>answer</tag> - -

The solutions to a project (and similar) once did not migrate to the automatically-generated solutions.

- - - -

A simple project, no tasks, just an answer.

- - -

Here's the answer we are looking for.

- - - - - - - - -

This is an exercise in an Exercises subdivision at the level of a subsubsection. There is no question other than if the numbering is appropriate. Here is a self-referential link: Exercise.

- -

The subsubsection has no title in the source, so one is provided automatically, and will adjust according to the language of the document.

- - -

This solution will migrate to a list of solutions in the backmatter. We include a sidebyside as a test.

- -

This is a skinny paragraph which should be just 30% of the width.

-

And another skinny paragraph which should also be just 30% of the width.

- - - - - - -

An exercise can be structured with parts, called task. This is the introduction.

- - -

Do this.

- - -

And the other thing.

- - - - - - - reading questions -

A set of reading questions may have an introduction, perhaps for preparatory explanation.

-

If a student has logged in to the HTML version, - then they can answer the reading questions directly in the book. - Inline math LaTeX can be entered using - $...$ or \(...\) delimiters, - and inline AsciiMath using backticks `...` as delimiters. - Here are some `gratuitous backticks` to check that AsciiMath is only - active in the answers to reading questions. -

- - - -

- This is a reading question that you might have a student answer prior to a class session, - based on reading part of the book. - A quick glance before class can help you tailor class time to the specific needs of your students. - The perfect reading question will reveal whether the student has read and understood the material, - and will be difficult to answer if they have not. - What do you think of that? -

- - - -

- And a second one, with a cross-reference to the first, - as a check on numbering: - . - Reading questions are allowed to have answers, - but providing answers misses the point of a reading question, - and the answer knowl interacts poorly with the mechanism used to - allow students to answer directly in the book. - Do you think the schema should ban answers to reading questions? -

- - - -

And for symmetry, a conclusion.

- - - - - glossary - -

A glossary may have a headnote, perhaps with some explanation. This glossary is a specialized division within a section. Placement in the back matter is another option, see the .

- - - - bar -

A part of foobar. See .

- - - - foobar -

A synonym for the acronym FUBAR.

- - - - - Solutions for This Subsection - solutionsfor a division - - -

This is an introduction, where you might explain that this division of this subsection contains various hints, answers, solutions of inline exercises, divisional exercises, and/or project-like blocks. See the source to see just how this solutions division was built.

- - - - - -

And a conclusion to this solutions division, which may not be readily apparent as distinct from the final division's worth of solutions, but since it is not prefixed with a number, it may be different enough.

- - - - - - - Theorem-Like Environments - -

There are a variety of pre-defined environments in . All take a title, and must have a statement. Some have proofs (theorems, corollaries, ), while some do not have proofs (conjectures, axioms, principles).

- - - The Title Principle - - -

It is a fundamental principle that many elements can have a title. Try it and see. If you get better formatting, then it is being recognized. If it looks very plain, check the documentation and perhaps make a feature request.

- - - -

More precisely, theorem, corollary, lemma, algorithm, proposition, claim, fact, and identity, all behave exactly the same, requiring a statement (as a sequence of paragraphs) followed by an optional proof, and may have an optional title. The elements axiom, conjecture, principle, heuristic, hypothesis, and assumption are functionally the same, barring a proof (since they would never have one!). Definitions are an exception, as it is natural to place notation withinsee the source for Definition for an example.

- - - - Linking Sage Cells - Sage cellslinking - -

Sage cells share their results on a per-webpage basis, or a per-knowl basis, so if you move to a new chapter, section, or subsection that happens to be on another webpage, your Sage computations are gone and you start fresh. But maybe you need some results from elsewhere. As an author, you can make an exact copy of a cell in another location by placing the code in an external file, which is pure text, freed from any need to format for XML processing. So, in particular, there is no need to escape ampersands and angle brackets, nor is there employment of the CDATA mechanism. But the real value is that there is just one version to edit, and any changes will be reflected in both copies. We demonstrate this in the sample book, since it has the xinclude mechanism in place. In the chapter on groups, find the section on Sage and then find the discussion of subgroups, and you will find an example of two identical Sage cells produced from one source file.

- -

You can also specify certain cells to be auto-evaluated, by setting the auto-evaluate attribute to yes. The resulting cell will not have a button for evaluation (so editing it would be pointless). See the source of this sample article for the two examples below.

- -

2023-08-17: support just now is for the use case of a small portion of code, not a huge library of helper routines.

- -

Two cells with the default language sage.

- - - k = 404 - - - - 2*k - - -

Two cells with language python.

- - - - k = 4112 - print("Assigned an initial value to the variable k") - - - - - - k = 2*k - print(k) - - - - - - - Hierarchy - - - Structure - -

This section of this article has subsections and subsubsections. In a book you can have chapters enclosing multiple sections. There is one finer subdivision, it is achieved with the paragraphs element.

- -

It is basically a sequence of paragraphs, where the first one gets an inline title. You are reading the second, and final, paragraph of one right now. It is useful for organizing very short documents, where numbered subdivisions might be overkill.

- - - - A Second Paragraphs -

This is a second consecutive paragraphs element, so should seem related to its title, but distinct from the two paragraphs in the grouping with the title Structure immediately prior.

- - - - - Assemblages: Collections and Summaries - -

An assemblage is a collection, or summary, that does not have much structure to it. So you are limited to paragraphs and friends (p, blockquote, pre) and side-by-sides that do not contain captioned items (sidebyside, sbsgroup). The intent is that contents are not numbered, so cannot be cross-referenced individually, and so also do not become knowls. You may place image, tabular, and program inside a sidebyside, in addition to other objects that do not have captions. Note that p may by extension contain lists (ol, ul, dl). Despite limited structure, the presentation should draw attention to it, because the contents should be seen as more important in some way. It should be highlighted in some manner. If you need to connect the entire assemblage with material elsewhere, you can do that with the usual xref/xml:id mechanism.assemblage

- -

What have we seen so far in this (disorganized) sample?

    -

  • Theorems, definitions and corollaries. ()

    • -

  • Sage cells, including with R. ()

    • -

  • Lots of document structure, like introductions and conclusions (next). ()

    • -

- -

A sample table, as a tabular inside a sidebyside with no caption, follows.

- - - ABC - UnoDosTres - - - - -

This is a small assemblage with no title, simply to make sure the surrounding box behaves properly, especially for output.

- - - - Assemblages containing <m>\mu \forall \tau \mathbb{H} = \emptyset \kappa</m> - -

It is acceptable for an assemblage to contain mathematical content, even in its title.

- - - - - Introductions and Conclusions - - - An Introductory Introduction - -

Any subdivision may have a sequence of paragraphs within an introduction that precedes subsequent further subdivisions. You are reading one now. They are always leaves of the document structure, so are rendered on some pages that reference the following subdivisions.

- -

An introduction or conclusion is an extremely restrictive container with simple presentation. A title is optional (and probably not advisable). Content is meant to be short and unstructured, in particular, nothing that can be numbered is allowed. If this feels too restrictive, then place your content in an initial numbered subdivision and perhaps title it Introduction. Or make your entire subdivion unstructured and place whatever you want into it.

- -

This ends this introduction to introductions.

- - - - Test One - -

An intervening subsubsection just after an introduction.

- - - - Test Two - -

An intervening subsection section which contains an exercises division which must be at the level of a Subsubsubsection.

- - -

An inline exercise to examine any clash with divisional exercises below.

- - -

An answer so there is something to appear in a solutions.

- - - - - What Did You Learn? - - -

A mock exercise to appease validation.

- - -

An answer so there is something to appear in a solutions.

- - - - -

And a second to help with formatting the division heading.

- - - - - - - -

A mock exercise to appease validation.

- - -

An answer so there is something to appear in a solutions.

- - - - -

And a second to help with formatting the division heading.

- - - - - - - Test Three - -

An intervening subsubsection just before a conclusion.

- - - -

Entirely analogous to introductions are conclusions. Any subdivision may have a sequence of paragraphs within a conclusion that follows previous further subdivisions. You are reading one now. They are always leaves of the document structure, so are rendered on some pages that reference the preceding subdivisions.

- -

This concludes this conclusion (and this subsection and this section).

- - - - - Some Paragraph-Level Markup - -

Text within a paragraph may be emphasizedememphasisstyling wordsemstyling wordsemphasis with em or if you want to take it to the next level you can identify the text as an alertalertstyling wordsalert with alert.

- -

Similarly, within a paragraph, you can identify edits between versions as inserted text that has been addedstyling wordsinsert with insert or as deleted text that has been removedstyling wordsdelete with delete. Note that these identified edits are slightly different than stale text that you want to retain, but which is no longer relevantstyling wordsstale, which is accomplished with stale. The original request for stale text came from an instructor with an online list of student topics for presentations, and as students claimed topics they were marked as no longer available for other students.

- -

If you need a fill-in blank, like this , it can be obtained with an empty fillin element that defaults to roughly a 10-character width. You can use the characters attribute to make the rule longer or shorter, such as a 40-character blank: . The character count is approximate, based on typical character widths within a proportional font carrying English language text. Adjust to suit, or request a language-specific adjustment if it is critical.

- -

This paragraph is intended to make a fillin appear right at the start of the second line in print and then the next paragraph has nothing but a fillin. Both are for testing purposes.

- -

- -

The following are fillin with rows and/or cols attributes (at least one of which is greater than 1): , , .

- -

Long after we started this mess, we added tags to mark up tags and attributes. The elements are: tag, tage, attr. Examples of how these render are (respectively): section, hash, width. Perhaps this document will make greater use of these tags.

- -

We supply two provisional cross-references for testing purposes only: , .

- - - - -

A conclusion here, which we fill with some numbering tests.

- -

This is a cross-reference to one of the outcomes, forced to use the type-global form of the text. It should describe the outcome as belonging to the section (rather than the outcomes), since outcomes are one-per-subdivision and are numbered based upon the containing division: . For comparison this is the (forced) type-global cross-reference: .

- - - - Fundamental Structures, Revisited - - -

This is a outcomes element you are reading, and this is its introduction. This early section has really grown and we have tried to accomplish many things. Not all of them are listed here.

- - -
    -
  1. Display various blocks, fundamental units of the flow.
    2. -
  2. More, and this is what the cross-references above are pointing to.
    3. -
  3. Evermore.
    4. -
- - -

This concludes the (incomplete) outcomes for this section, so now we can carry-on to the next section.

- - -
- - - -
- Some Facts and Figures - footnotes - - - -

Because of the Fundamental TheoremFirst test footnote, for every derivative we know, there is an antiderivative we might find useful. Because of the Fundamental Theorem of CalculusSecond test footnote, we recycle the \int symbol as notation for an antiderivative.

    -
  • -

    Derivatives

      -
    1. \frac{d}{dx}x^n = nx^{n-1}
      2. -
    2. \frac{d}{dx}e^x = e^x
      3. -
    3. \frac{d}{dx}\cos(x) = -\sin(x)
      4. -

    -
    • -

  • Antiderivatives

      -
    1. \indefiniteintegral{x^n}{x} = \displaystyle\frac{x^{n-1}}{n+1}\text{ if }n\neq -1
      2. -
    2. \indefiniteintegral{e^x}{x} = e^x
      3. -
    3. \indefiniteintegral{\sin(x)}{x} = -\cos(x)
      4. -

    -
    • -

- - -

You canThird test footnote gain a greater understanding of derivatives by studying the graphs of functions with their derivatives. CanFourth test footnote you discern the derivativeantiderivativeFifth test footnote relationship in Figure?

- - - - -
- A function and its derivative - - - a third degree polynomial with a local max and a local min; - its derivative is plotted on the same axes - - -
- -

ListsSixth test footnote can have multiple columns. With HTML items displayed in row-major order (horizontally first) andSeventh test footnote with items are displayed in column-major order (vertically first). When one order, or the other, becomes workable in both variants, maybe we will be consistent in presentation. (Note that with just one row, it makes no difference.) We used it above for the two itemsderivatives and integralswhere each item was a list of its own. Here are two more examples, one with short snippets and lots of columns, the other with lots of text in paragraphs.listmulticolumn

    -

  1. Red

    2. -

  2. Blue

    3. -

  3. Green

    4. -

  4. Purple

    5. -

  5. Yellow

    6. -

  6. Black

    7. -

  7. Orange

    8. -

  8. Pink

    9. -

  9. Salmonstrange colors

    10. -

  10. Aqua

    11. -

  11. Cyan

    12. -

  12. Pucestrange colors

    13. -
    -
  • -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lorem diam, convallis in nulla sed, accumsan fermentum urna. Pellentesque aliquet leo elit, ut consequat nunc dapibus ac. Sed lobortis leo tincidunt, vulputate nunc at, ultricies leo. Vivamus purus diam, tristique laoreet purus eget, mollis gravida sapien. Nunc vulputate nisl ac mauris hendrerit cursus. Sed vel molestie velit. Suspendisse sem sem, elementum at vehicula id, volutpat ac mi. Nullam ullamcorper fringilla purus in accumsan. Mauris at nunc accumsan orci dictum vulputate id id augue. Suspendisse at dignissim elit, non euismod nunc. Aliquam faucibus magna ac molestie semper. Aliquam hendrerit sem sit amet metus congue tempor. Donec laoreet laoreet metus, id interdum purus mattis vulputate. Proin condimentum vitae erat varius mollis. Donec venenatis libero sed turpis pretium tempor.

    - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra. Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    -
    • - -
  • -

    Donec vestibulum auctor nisl. Nullam placerat interdum dui. Quisque lobortis scelerisque augue imperdiet placerat. Maecenas ultricies massa tempor, laoreet urna a, eleifend enim. Integer sed suscipit odio. Pellentesque non dapibus diam, eget tempus dui. Maecenas sollicitudin magna viverra, egestas velit nec, tristique sem. Cras iaculis mattis dui ac cursus. Integer volutpat, urna vel tempus convallis, erat nisi consectetur turpis, id varius dolor lorem vitae mauris. Phasellus erat orci, laoreet commodo gravida quis, congue in lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent at bibendum turpis. Pellentesque est nisl, dapibus at sagittis non, ultricies in nunc. Etiam ipsum arcu, porta sed feugiat eget, facilisis nec libero. Mauris tempor convallis felis.

    - -

    Cras iaculis sapien elit, at convallis ligula convallis nec. Duis ante tortor, euismod a libero vitae, ornare viverra purus. Pellentesque facilisis urna a velit volutpat, in malesuada tortor porttitor. Sed vehicula mauris id lectus dignissim, eget consectetur dui pellentesque. Sed vel quam molestie, euismod ligula ac, venenatis arcu. Fusce sit amet sapien non urna dignissim tempus in vitae metus. Aliquam arcu turpis, mattis non libero eu, lacinia feugiat turpis. Phasellus rhoncus lacinia lacus facilisis ullamcorper. Praesent hendrerit accumsan neque, eu dignissim est consequat sed. Nulla facilisi. Proin at mi scelerisque, scelerisque felis ut, tristique diam. Proin in leo in lorem porttitor varius. Praesent condimentum in dui sit amet blandit. In imperdiet blandit congue.

    -
    • - -
  • -

    Ut nec sem vitae ipsum interdum vestibulum sit amet sed velit. Aliquam tempor nibh vitae augue pulvinar, at ultricies urna commodo. Donec in porta lectus, ac sagittis felis. Vestibulum tincidunt quis metus facilisis luctus. In lobortis lacus vel ornare vehicula. Duis aliquet, ligula semper sodales adipiscing, augue nibh ornare ante, quis pulvinar justo mi eget mi. Mauris varius imperdiet vehicula. Duis dignissim magna quis velit mattis, in cursus lectus vehicula. Morbi quis tempus felis, ut gravida nisi.

    - -

    Vivamus eu commodo est, pretium fringilla dolor. Curabitur vel sollicitudin libero. Integer sit amet auctor felis. Maecenas sagittis erat at ante feugiat, in tincidunt ligula pretium. Integer eget auctor ipsum, quis volutpat felis. Morbi id dignissim eros. Suspendisse aliquet pulvinar lorem gravida egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nec massa dui. Suspendisse convallis lacus sit amet adipiscing varius. Suspendisse tempus diam vitae justo ornare, in condimentum metus pharetra. Curabitur sem dolor, auctor vitae sagittis vestibulum, posuere imperdiet metus. Etiam pretium lacus urna, vel auctor diam tincidunt non. Etiam viverra sodales iaculis.

    -
    • - -
  • -

    Sed varius leo urna. Phasellus tempus mollis ultricies. Curabitur non neque aliquet, facilisis tortor in, sodales dui. Donec hendrerit ultricies nulla mollis rhoncus. In vel lobortis est. Vestibulum consectetur lacus vel sem dignissim vestibulum. Etiam sed elementum ligula, vel congue turpis. Morbi nec diam mattis, venenatis eros et, elementum tellus. Integer sed orci ornare, elementum elit id, lacinia augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et libero id turpis pharetra faucibus. Integer consequat dignissim semper. Donec pretium magna at ullamcorper ultricies. Nam quis suscipit elit. Donec cursus tellus et venenatis feugiat. Mauris dictum molestie leo, vitae aliquet metus luctus vitae.

    - -

    Ut id iaculis leo. Sed nec vestibulum mi. Mauris est mauris, porta in nulla eget, bibendum luctus nisl. Praesent et posuere felis, molestie vehicula velit. Nulla a nunc venenatis, aliquam orci nec, congue felis. Vestibulum a dolor nisi. Morbi sed nisi nulla. Nam iaculis felis a enim blandit, at venenatis diam congue. Nulla augue diam, egestas eget fermentum nec, posuere eget risus. Praesent egestas nulla eros, eget accumsan augue euismod vel. Pellentesque pellentesque non erat vitae posuere. Curabitur lacus arcu, varius sed risus ut, ullamcorper tincidunt lorem. Sed et lacus dignissim, tincidunt nisl ac, porttitor sapien.

    -
    • -

- - - -
- - - - - -
- Some Advanced Ideas - - - -

The multi-row displayed mathematics in the proof of the Fundamental Theorem had equations aligned on the equals signs via the & character. Sometimes you don't want that. Here is an example with some differential equations, with each equation centered and unnumbered, - {\mathcal L}(y')(s) = s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) - {\mathcal L}(y'')(s) = s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0) - . - - \rho - this symbol could be used for lots of things, but we are just trying to make a super-long description to get it to wrap within the column where it belongs, which is sometimes set to a fixed width to accomodate really complicated explanations - - rho, a test - Just prior to this sentence, in the middle of this paragraph, is an idx and a notation, adjacent, but separated by some whitespace in the authored source. That insignificant whitespace will be removed akways, which will be a (slightly) noticeable improvement in the output. We test referencing notation here, placed before the sentence-ending period and right after some inline mathematicsfor \mathbb{Z}_n\mathbb{Z}_n(ring of) integers modulo n.

- -

has a device where you can interrupt a sequence of equations with a small amout of text and preserve the equation alignment on either side. Here are two tests of that device, with aligned equations and non-aligned equations. Study the source to see use and differences. (The math does not make sense.)

- -

Aligned and numbered first. - {\mathcal L}(y')(s) &= s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) - {\mathcal L}(y'')(s) &= s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0). - And so it follows that, - {\mathcal L}(y')(s)^{++} &= s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) - {\mathcal L}(y'')(s)^{5} &= s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0). -

- -

Now with no numbers and no alignment. We include two cross-references in the intertext portion for testing. - {\mathcal L}(y')(s) = s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) - {\mathcal L}(y'')(s) = s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0). - First an external reference to and internal cross-reference to . And so it follows that, - {\mathcal L}(y')(s)^{++} = s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) - {\mathcal L}(y'')(s)^{5} = s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0) - .

- -

Tables can get quite complex. Simple ones are simpler, such as this example of numerical computations for Euler's method in just a bit.

- -

But first we make a figure with two very simple tables next to each other. This causes the very first instance of table to actually be a subtable, which exposes a bug provoked by Emiliano Vega and fixed around 2020-08-06. (So we have to place this early to create the same behavior that exposed the bug.)

- -
- Buggy sub-tables - - - - First - - One - -
- - Second - - Two - -
- -
- - - Euler's approximation for Duffing's Equation with <m>h = 0.2</m> - - - i - t_i - x_i - y_i - - 00.000.00000.5000 - 10.200.10000.4800 - 20.400.19600.4560 - 30.600.28720.4295 - 40.800.37310.4027 - 51.000.45360.3783 - 61.200.52930.3591 - 71.400.60110.3480 - 81.600.67070.3474 - 91.800.74020.3603 - - 102.000.81230.3900 - -
- -
- -
- Mathematics - - -

To be able to create both and HTML output (plus variations), we rely on MathJax, which in turn supports an extensive subset of the mathematical symbols normally available. The AMSMath symbol set is a good approximation. The Guide has a link to the complete list of macros supported by MathJax. We load the AMSsymbols library.

- - - - - Basic Mathematics - -

The following is from the MathJax demonstration page, an identity due to Ramanujan:\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }

- -

And again, from the MathJax demonstration page, Maxwell's equations:Maxwell's equations - \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} - \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho - \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} - \nabla \cdot \vec{\mathbf{B}} & = 0 - \nablagradient operator

- -

Historically, we provided internal support for the package extpfeil. As of 2023-10-19 this has become an author election (see the docinfo section in the source of this document). We preeserve a small test that this extensible arrows library is being included properly:A\xmapsto[\text{bijection}]{\Phi+\Psi+\Theta}B

- -

Look back at the top of the source file of this document to see how to include your macros just once. For best results keep your macros simple and semantic.

- -

once provided modest built-in support for slanted, or beveled, or nice fractions. To wit, we mean fractions such as: \sfrac{3}{8}. Use the pre-defined \sfrac{}{} macro in your mathematics to achieve this presentation. The presentation in HTML is subpar, but could improve as MathJax provides support. It is now an author's responsibility to add support for superior typesetting for PDF output by loading the xfrac package with the following in docinfo: - <math-package latex-name="xfrac" mathjax-name=""/> - which is what we have done here as a test. See the Guide for more details.

- -

We consider a system of equations. We number the first and last equation (there are just two) and include an xml:id on each. We reference the whole system later as the range of equations from the first to the last. - \frac{dx}{dt} \amp = x^2 - 4x - y + 4 - \frac{dy}{dt} \amp = x^3 - y. -

- - - - - Displayed Mathematics - -

Multi-line displays of mathematics are achieved with the md tag (math display), and the variant that produces numbers on each line, mdn (math display numbered), used within a paragraph (p). As a good example of how XML syntax is superior, you author n lines of equations by enclosing each line inside of a mrow tag, rather than using n-1 separators (such as \\).

- -

If you use no ampersands to express alignment (read ahead), then each equation is centered independently on the width of the text. This is implemented according to the AMSmath package's gather environment. Example: - \frac{dx}{dt} = x^2 - 4x - y + 4 - \frac{dy}{dt} = x^3 - y. -

- -

An ampersand is used, in two ways, to describe positioning several equations per line, organized in columns. We have created the pre-defined macro \amp as one way specify these, but the escape sequence &amp; may be used also. The second, fourth, sixth, ampersands separate columns, and the spacing between columns will be provided automatically. The first, third, fifth, ampersands are alignment points for the equations in each column. Typically this is placed just prior to a binary operator, such as an equal sign (\amp = ), or for a column of explanations or commentary, just prior to the \text{} macro. Note that this scenario suggests always having an odd number of ampersands in each mrow. In the example below, alignment is on the equals sign in the first two columns, and provides left-justification to the explanations in the third column. N.B.: the use below of the \text{} macro does not include mathematics within its argument. Doing so may yield unpredictable results depending on your choice of delimiters for the mathematics (and using an m tag will be ineffective). - \frac{dx}{dt} \amp = x^2 - 4x - y + 4 \amp \frac{dy}{dt} \amp = x^3 - y \amp\amp x, y\text{ version} - \frac{dw}{dt} \amp = z^3 - w \amp \frac{dz}{dt} \amp = z^2 - 4z - w + 4 \amp\amp z, w\text{ version} -

- -

will automatically detect the presence or absence of ampersands, but by defining macros for entire aligned equations, you can effectively hide the ampersands. So the @alignment attribute can override automatic detection. We use a simple macro to demonstrate setting alignment='align' to override the use of a gather environment and use a align environment instead. Example: - \myequation{\frac{dx}{dt}}{x^2 - 4x - y + 4} - \myequation{\frac{dy}{dt}}{x^3 - y}. -

- -

The AMSmath package's alignat environment is a third variant of alignment. It never happens automatically, you need to ask for it with alignment="alignat". It is very similar to align but adds no space between the equation columns. So you can leave it that way, or you can add your own extra space to suit. Here is a previous example with no inter-column space: - \frac{dx}{dt} \amp = x^2 - 4x - y + 4 \amp \frac{dy}{dt} \amp = x^3 - y \amp\amp x, y\text{ version} - \frac{dw}{dt} \amp = z^3 - w \amp \frac{dz}{dt} \amp = z^2 - 4z - w + 4 \amp\amp z, w\text{ version} - . This modified example has a middle row with three columns, while the other rows have just one column, as a test of our routines for determining the mrow with the greatest number of ampersands (and how many there are), - \frac{dw}{dt} &= z^3 - w - \frac{dx}{dt} &= x^2 - 4x - y + 4 & \frac{dy}{dt} &= x^3 - y&& x, y\text{ third column} - \frac{dw}{dt} & = z^3 - w - . Final example demonstrates that ampersands in other objects (matrices here) can wreak havoc with computing the number of columns. So we provide yet another attribute to override automatic detection, alignat-columns. This is the number of columns not the number of ampersands. Generally, for c columns, there will be 2c-1 ampersands. - A &= \begin{bmatrix}1 & 2 \\ 3 & 4\end{bmatrix} - & - I &= \begin{bmatrix}1 & 0 \\ 0 & 1\end{bmatrix} - . One caveat: if your number of ampersands is even (see advice above about using an odd number) behavior should still be correct, as in next example.

- -

If you want super-precise control over alignment of the terms of a system of equations (linear or not) you can use the alignat option to advantage by not including any extra space. This example is modified slightly from a post by Alex Jordan: - 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 - x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 - x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13. - Beautiful.

- -

A long equation, to check layout on various screen sizes. This is Weil's explicit formula for the - Riemann \zeta-function: - - \sum_\gamma S_-(\gamma) = \frac{\log Q}{\pi} \hat S_-(0) - + \frac{1}{2\pi} \sum_{j=1}^d \Re\left\{ \int_{-\infty}^\infty \frac{\Gamma'}{\Gamma}\left(\frac{1}{4} + \frac{it}{2} + \mu_j\right)S_-(t) dt\right\} - - \frac{d}{2\pi}\hat S_-(0)\log \pi - . -

- - Excessive Display Mathematics - -

In print versions, a long run of displayed equations often needs to be broken across pages. If you are reading some other version of this, then there is nothing to see here. But for output it could be interesting. First, with no extra effort, this page-long display should break naturally, no matter how the preceding material changes. - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - .

-

In this version we have turned off page breaking for the entire display, but then allowed a break at every fourth equation, so you should see a reasonably attractive page break right after one of the m^2+n^2=p^2 equations. - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - x^2+y^2=z^2 - a^2+b^2=c^2 - \alpha^2+\beta^2=\gamma^2 - m^2+n^2=p^2 - - .

-

So. Do not take any extra steps and let figure out the breaks. If you do not like a break, modify the md or mdn to go back to the AMSmath default behavior and not break at all. Ever. Or rather, go further and modify an individual mrow to suggest that it is a good place for a break.

- - -

This is a poorly-authored paragaph to test the conversion to HTML. There are two displayed equations, separated by a period ending the first one's sentence, which should migrate into the display, and not leave behind an empty paragraph: z+y = z. a + b = c. This final sentence should remain, inside another HTML paragraph, without the second equation's period.

- - - - <latex/> Packages and MathJax Extensions - -

If you would like to enhance your mathematics by using a macro from a package and there is a MathJax extension which implements the same macro, then you may use this with your mathematics as we demonstrate here.

- -

This example is from Jason Underdown.Underdown, Jason The package is named cancel and is included in the TeXLive distribution, so is fairly standard. The particular macro being demonstrated is \cancelto{}{}. \lim_{b \rightarrow \infty}\left[\cancelto{0}{-\frac{1}{s}e^{-sb}} + \frac{1}{s}\right]. Look at the source of this article to see the package name being supplied in a math-package element within the docinfo section. That is the only setup required to make the macro usable in and HTML output.canceling a termcancelto macro

- -

See the Guide subsection about MathJax Extensions for more detail.

- - - - Advanced Mathematics - -

MathJax is extremely capable in rendering a subset of in web browsers, and improving all the time. You can get fairly fancy with some of its supported commands. In particular, if you need to mix in a few words with your mathematics, the \text{} macro is supported. For example, you might use an if or an otherwise in the definition of a piecewise function.

- -

Consider that the first line below is text sandwiched in-between two Greek letters, wrapped in a \text{} macro. In HTML output we have taken care that the font for text material within display mathematics should match the font of the surrounding paragraph, as also happens with output. The second line is nearly identical in the source, but is just naked text being rendered like a slew of variables. - \alpha\text{ is not equal to }\beta - \alpha is not equal to \beta - \alpha\neq\beta - . We are not suggesting here that using words in place of symbols, as in the first line, is a good practice. (It is not.)

- -

The following example is a good stress-test of using the \text{} macro to achieve certain effects. Note the Unicode left and right smart quotes. This a contribution from Alex Jordan as part of his work on APEX Calculus. - y \rightarrow \frac{\sin(0) }{0} \rightarrow {{\text{“}}\atop{}}\frac{0}{0}{{\text{”}}\atop{}}\text{.} - And another one from Alex. Note the use of the \mathord{} and \mathrel{} macros to control spacing around the mathematical symbols. Examine the source to see how the quotation marks have been authored with XML syntax for Unicode characters, since we do not allow most markup inside mathematics. - \zeta(1)=\sum_{n=1}^{\infty}\frac{1}{n}\mathrel{\text{ “}\mathord{=}{\text{” }}}\prod_{p}\left(\frac{1}{1-1/p}\right)=\prod_{p}\left(\frac{1}{1-p^{-1}}\right) -

- -

Generally, you cannot use any XML elements inside of the mathematics elements. An exception is the xref element which you might want to use to provide justifications for the steps of a derivation. Here is a visual example that is mathematically meaningless, - A&=B+C&& - &=D+E&& - &=F+G&&A nice result - .

- -

Scott Beaver likes to write short chains of equalities all in one line, with the cross-references sitting on each equals sign. Here we test the \overset and \underset macros wrapping a xref, with and without content, inside an me element. Note that \stackrel is obsolete, and \overunderset is not yet supported by MathJax (but see GitHub #2704). The mathematics is Scott's, the reasons are totally unrelated to the math. - AC-AD - \overset{}{=} - A(C-D) - \underset{}{=} - A0_{n\times p} - \overset{Thm.}{=} - 0_{m\times p} - - We suggest using cross-references that only display numbers (xref with text set to global) since if you stick to elements like theorem, lemma, definition, or axiom, then the numbers will be unambiguous and the target of the cross-reference will contain full information. But note that if you mix in divisions, or perhaps figures, as reasons then there is a possibility that numbers will need to be qualified by their type. We have provided an abbreviation for one cross-reference to (which will not benefit from automatic translation to other languages). -

- - - - Local Tags on Equations - -

If you are not writing a research monograph, maybe (a) you will not use many numbered equations, or do not like the looks of them, or feel they scare your readers, and (b) maybe your cross-references are always local-ish, like strictly within an example or a proof. For this situation you can create, and employ, a local tag on a displayed equation. Nothing enforces the idea of what constitutes local, and there is nothing to stop you from using the same symbols more than once. With freedom comes responsibility.

- -

Use the @tag attribute on an mrow, only. (Remember, you can have just one mrow.) The behavior is identical within an md or mdn. The value of the @tag attribute is a symbol name. The prefix d means double, and the prefix t means triple. So allowed values are - star, dstar, tstar - dagger, ddagger, tdagger - daggerdbl, ddaggerdbl, tdaggerdbl - hash, dhash, thash - maltese, dmaltese, tmaltese - Cross-references to these tagged equations happens in the usual way and should behave as expected. We test the double versions to make sure the symbols render properly in various output formats. - c^2 \amp = a^2+b^2 - c^2 \amp = a^2+b^2 - c^2 \amp = a^2+b^2 - c^2 \amp = a^2+b^2 - c^2 \amp = a^2+b^2 - z^2 \amp = x^2+y^2 - Here are the local cross-references: , , , , . We test another farther away in , contrary to our advice above.

- - - - Commutative Diagrams - -

This diagram is authored by Tom Judson using the syntax of the AMS CD package. Inside of a me element start with \begin{CD}. Remember to escape the less-than character. - \begin{CD} - E[x]/\langle p(x) \rangle @>\psi>> F[x]/\langle q(x) \rangle\\ - @VV{\sigma}V @VV{\tau}V\\ - E(\alpha) @>\overline{\phi}>> F(\beta)\\ - @VVV @VVV\\ - E @>\phi>> F - \end{CD} - While this package is not as flexible as some generic drawing packages, it has the advantage of full support by MathJax, and thus the HTML version will be more accessible.

- - - - Line-Breaking after Mathematics - -

As of 2021-05-14, in HTML output the next sentence should just fill a full line across the page. We take active measures to bind the concluding period to the final bit of mathematics, the variable x. The prevents a bad line break which could see the period begin a new line, all by itself. In the event that the line-breaking siutation improves, we could relax these measures. This testing is only relevant to HTML output, not output.

- -

xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx x.

- - - - Fonts and Mathematics - -

This section is about testing types and sizes of fonts, not so much about using different typefaces. First, one long displayed equation, which is designed to be full-width for output when using defaults as of 2020-01-29 (commit defd4bffd462e7ea).

- -

Start paragraph.a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2End paragraph.

- -

The next paragraph has five ways to write the sine of x, bracketed by plain text versions. This tests font size and the fonts employed. The raw source of this paragraph is (spread over two lines) - sin x | <m>\sin x</m> | <m>\text{sin}\ x</m> | <m>\mathrm{sin}\ x</m> | - <m>\text{sin}x</m> | <m>sin x</m> | sin x - The five ways, from good to bad,

    -
  1. The best way, using \sin. Note the distance to the x.
    2. -
  2. With a \text{} macro.
    3. -
  3. With a \mathrm{} macro. Not recommended for .
    4. -
  4. Without a space. Note that the previous two require explicit spacing.
    5. -
  5. No extra effort, so renders as a product of four variables.
    6. -

- -

sin x | \sin x | \text{sin}\ x | \mathrm{sin}\ x | \text{sin}x | sin x | sin x

- -

Finally a simple paragraph that places a text x next to a variable x.

- -

wordxxx+xxxword

- - - - - Miscellaneous - -

In HTML output, a MathJax workaround for a Safari rendering bug was inserting extra spaces after textual subscripts and superscripts (MathJax thread). CSS now applies a correction. The following tests if the CSS fix is sufficient, and could be used to test the necessity of our fix in the future. Following is the original report, though NOT has been moved to a superscript: - - T_\text{clk}-t_\text{su} \gt t_\text{clk-Q} + \max\left( t_\text{XOR}, t^\text{NOT} \right) - . There should not be anything to see in /PDF output. (2021-10-21)

- - -
- -
- Grouping Samples - - -

While building or testing a rendering of PreTeXt, especially in HTML, it can be useful to see all the various elements that potentially create visual blocks in one place. So they are collected here.

- -

We will omit content specific blocks like figures, images, tables, as those elements have significant stress testing of their own elsewhere.

- -

Please add any similar elements that are created or that you discover are missing from this page.

- - - - - - Our goals -

A minimal objective.

-
    -
  • Stress test HTML themes
    • -
  • Locally, test objectives
    • -
- - - - Remark-like Blocks - - A title -

A minimal remark.

- - - A title -

A minimal convention.

- - - A title -

A minimal note.

- - - A title -

A minimal observation.

- - - A title -

A minimal warning.

- - - A title -

A minimal insight.

- - - - - Example-like Blocks - - A title -

A minimal example.

- - - A title -

A structured example.

 - - -

A structured example.

- -

A hint

 -

An answer

 -

A solution

 - -

The conclusion.

 - - - A title -

A minimal question.

- - - A title -

A minimal problem.

- - - A title -

A minimal observation.

- - - A title -

A minimal warning.

- - - A title -

A minimal insight.

- - - - - Theorem-like Blocks - - A title -

A minimal theorem.

- - - A title -

A theorem with a proof.

- -

The proof of the theorem.

- - - - A title -

A minimal corollary.

- - - A title -

A minimal lemma.

- - - A title -

A minimal algorithm.

- - - A title -

A minimal proposition.

- - - A title -

A minimal claim.

- - - A title -

A minimal fact.

- - - A title -

A minimal identity.

- - - A title -

A stand-alone proof.

- - - - - Axiom-like Blocks - - A title -

A minimal axiom.

- - - A title -

A minimal conjecture.

- - - A title -

A minimal principle.

- - - A title -

A minimal heuristic.

- - - A title -

A minimal hypothesis.

- - - A title -

A minimal assumption.

- - - - - Definition-like Blocks - - A title -

A minimal definition.

- - - - - Aside-like Blocks -

Three asides are below.

- - - A title -

A minimal biographical.

- - - A title -

A minimal biographical.

- - - A title -

A minimal historical.

- - - - - Computation-like Blocks - - A title -

A minimal computation.

- - - A title -

A minimal technology.

- - - A title -

A minimal data.

- - - - - Project-like Blocks - - A title -

A minimal project.

- - - A title -

A minimal activity.

- - - A title -

A minimal exploration.

- - - A title -

A minimal investigation.

- - - - -

A minimal assemblage.

- - - - Wrap-up -

A minimal conclusion.

- - - -
- -
- Entering Text in Paragraphs, Titles, Captions - Text in Paragraphs - - - Entering Text in Paragraphs - - -

XML, and therefore , is a markup language. But by and large, what you type into your source will be what you see in your output. So there is not much to say. Except that eventually will be essential. However we do test various tricky situations here (which have technical explanations we avoid). See the Author's Guide for a superior treatment of the topics addressed here.

- - - - Special <init>XML</init> characters - -

One of the goals of is to relieve an author of managing the numerous conflicts when mixing languages that use different characters for special purposes. But, of course, XML has its own special characters.

- -

If you type a less-than symbol in your source, the XML processor thinks you are starting an opening, or closing, tag. So how do you get a less-than sign into your source so that it survives into your output, like this: <? You use an escaped version. Type literally, the four characters &lt; in your source. Then the XML processor will know you want the character and will not mistake it for a tag. But now we want to get an ampersand into our source like: &. How? Another escaped version of a character, literally the five characters &amp;.

- -

Otherwise, keys on your keyboard, even international versions, should be fine in your source and behave as expected. WYTIWYG = What You Type Is What You Get. So the principal concession to using XML markup is the following very simple rule.

- -
-

Rather than pressing the < and & keys on your keyboard, instead always enter the escape sequences &lt; and &amp; as replacements.

-
- -

Simple. And it will work in running text, verbatim text (like when authoring the content of c or pre elements), and mixed into syntax to desribe mathematical expressions. XML has three other escape sequences &gt;, &apos;, and &quot;, for the characters >, ', and " (respectively). But they seem largely unnecessary for authoring in PreTeXt, as we now demonstrate by typing them directly from our keyboard into our source: >, ', and ".

- - -

How was &amp; authored? Work it out, and then check the source here for the answer.

- - - - - Quotations - -

The qquotations tag will provide beginning and ending double quotations, while the sq tag will behave similarly but provide single quotes. Given the complexity of quotations, the different symbols used in different languages, and the over-simplified versions provided on keyboards, it is necessary to use markup.

- -

The roots of education are bitter, but the fruit is sweet. (Aristotle)

- -

It is always wise to look ahead, but difficult to look further than you can see. (Winston Churchill)

- -

A large quote can be accomodated with the blockquote tag, which can carry within itself an attribution element.

- -
-

The problem with writing a book in verse is, to be successful, it has to sound like you knocked it off on a rainy Friday afternoon. It has to sound easy. When you can do it, it helps tremendously because it's a thing that forces kids to read on. You have this unconsummated feeling if you stop.

- Dr. Seuss -
- -

We say that again, to test a multiline attribution of a block quotation. Notice how the dash appears automatically, and that it is a quotation dash in HTML, distinct from other sorts of dashes.

- -
-

The problem with writing a book in verse is, to be successful, it has to sound like you knocked it off on a rainy Friday afternoon. It has to sound easy. When you can do it, it helps tremendously because it's a thing that forces kids to read on. You have this unconsummated feeling if you stop.

- - Dr. Seuss - Children's Author - -
- -

Sometimes a quote may extend across several paragraphs. Or a balanced pair of quotations marks crosses an XML boundary, so we need left, right, single and double versions. (For example, see Section on poetry.) Here are all four in a haphazard order: , , , . These should be a last resort, and not a replacement for the q and sq tags. The left/right versions are used for the following quote from Abraham Lincoln, which we have edited into two paragraphs.

- -

I am not bound to win, but I am bound to be true. I am not bound to succeed, but I am bound to live by the light that I have.

- -

I must stand with anybody that stands right, and stand with him while he is right, and part with him when he goes wrong.

- -

And as a tests, we try some crazy combinations of quotes, which would normally give some trouble where the quotation marks are adjacent.

    -

  • we use single quotes inside of double quotes

    • -

  • double quotes inside of single quotes with more

    • -

  • single quotes tight inside of double quotes

    • -

  • double quotes tight inside of single quotes

    • -

  • An absurd test of two adjacent single quotes inside a pair of double quotes

    • -

  • you would never do this, but a pair of single quotes

    • -

- -

N.B. We have taken no special care to protect against interactions of the actual quote characters (described above) in with themselves, or with the grouping tags.

- - - - Groupings - -

It is possible to make some other groupings like quotations, such as {some emphasized text grouped within braces}, or [a Book Title inside brackets], an Article Title, some foreign words inside angle brackets, or just a bit of text within double brackets. Some of these are used extensively by scholars who study texts to note various restorations or deletions. Note that the foreign element may have a xml:lang attribute.

- -

Note that the angle brackets, and , are not the keyboard characters, < and >. Your best bet is to use the provided angles element when constructing a balanced pair. Similarly, dblbrackets is provided to make the double-bracket characters easily available, since they are likely not on your keyboard.

- - - - Characters, Symbols, and Constructions - -

Verbatim, inline text, is accomplished with the c element. One special consideration: if your editor splits a line in the middle, we will fix it. This sentence has two - words that we purposely split with a newline character in the middle. In output you should see a space between the words.

- -

Some keyboard characters are ambiguous. Is the character ' an apostrophe or a right single quote? We presume the former, ', and provide markup as an alternative for the latter (described above). Is / used to separate words, or to form a fraction? We presume the former, /, and provide solidus, , for the latter. We test some other characters straight from our US keyboard (with two being escape sequences).

- -

~ ` ! @ # $ % ^ & * ( ) _ - + = [ ] { } | \ ; : ' " , < . > ? /

- -

And again as verbatim text.

- -

~ ` ! @ # $ % ^ & * ( ) _ - + = [ ] { } | \ ; : ' " , < . > ? /

- -

Note that for a long time had empty elements for many of these characters, as a consequence of naïveté. So you might see dollar, ampersand, or others in old source. They will be deprecated and will raise warnings.

- -

Now, when a character is nowhere to be found on your keyboard, we provide conveniences as markup. Or a keyboard character may have a different variant which we implement as an empty element. Here we test many of these. Read the Author's Guide for tags and more detail.

- -

- - - - - - - - - - - - - - - -

- -

There are a few common abbreviations of Latin phrases that can be achieved in HTML one way, and in with a slightly different mechanism. These are due to 's treatment of a period (full stop), depending on its surroundings. So not reserved characters, but just divergent treatment. Using these will lead to the best quality in all your outputs. See Will Robertson's informative and arcane blog post on the topic if you want the full story for the treatment of a full stop in .

- - - TagRealizationMeaning - - ad anno Domini, in the year of the Lord - am ante meridiem, before midday - bc English, before Christ - ca circa, about - eg exempli gratia, for example - etal et alia, and others - etc et caetera, and the rest - ie id est, in other words - nb nota bene, note well - pm post meridiem, after midday - ps post scriptum, after what has been written - vs versus, against - viz videlicet, namely - - -

We also distinguish between abbreviations (vs.), acronyms (SCUBA) and initialisms (XML). This is a test of the text version of a multiplication symbol: 24.

- - -

Simple coordinates with degrees, minutes, seconds, or temperature, or distance in feet and inches. We parked the car at 36160.83N, 1223547.27W, and since it was 93F, we walked 5053.6 so we could swim in the bay.

- -

An em dash is the long dash used much like parentheses (not an en dash used to denote a range, such as a range of page numbers). It should not have spaces around it, but some style guides allow for a thin space, whichwe test right now. A publication file entry can be set to none or thin to control this.

- - - - Currency - -

For best results, be certain the right Unicode characters are in your source. If you only need a certain symbol rarely, you can enter it in your source via its Unicode number. For example, to obtain a peso, type &#x20B1;. This table has been tested with our default fonts, and should be fine for HTML output. Please report any difficulties with different fonts, as there are extra measures we can take to make these more robust. (We've already done this for the Paraguayan guaraní.)

- - Supported Currency - - - Sign - Unicode - Name - - - $ - U+0024 - dollar - - - ¢ - U+00A2 - cent - - - £ - U+00A3 - sterling - - - ¤ - U+00A4 - currency - - - ¥ - U+00A5 - yen - - - ƒ - U+0192 - florin - - - ฿ - U+0E3F - baht - - - ₡ - U+20A1 - colon - - - ₤ - U+20A4 - lira - - - ₦ - U+20A6 - naira - - - ₩ - U+20A9 - won - - - ₫ - U+20AB - dong - - - € - U+20AC - euro - - - ₱ - U+20B1 - peso - - - ₲ - U+20B2 - guarani - - -
- - - - Icons in Text - -

A limited supply of icons can be used when explaining how to use some computer application. The empty element is icon and the attribute is name.

- -

We sprinkle a few into a few sentences to check baselines and font sizing. We sprinkle a few into a few sentences to check baselines and font sizing. We sprinkle a few into a few sentences to check baselines and font sizing. We sprinkle a few into a few sentences to check baselines and font sizing.

- - - User-Interface Icons - - - - - - - - - - NameIcon - NameIcon - NameIcon - - - arrow-down - arrow-left - arrow-right - - - arrow-up - file-save - gear - - - menu - wrench - - - - - - -
- - - Creative Commons License Icons - - - - - - - - - - NameIcon - NameIcon - NameIcon - - - cc - cc-by - cc-sa - - - cc-nc - cc-pd - cc-zero - - - - -
- -

Nominations of new icons must

    -
  • Have a Unicode character representation.
    • -
  • Be in the HTML/CSS/JS Font Awesome 5 catalog.
    • -
  • Be in the fontawesome5 package.
    • -
  • Have a reasonably semantic name.
    • -
Please supply all this information, including the official Unicode name, with your request. Better yet, form a pull request.

- - - Icons, <c>xelatex</c>, and Fonts - -

When processing a file with xelatex the Font Awesome 5 icons are expected to be in a system font whose name is Font Awesome 5 Free. This is not a filename, and installing the fontawesome5 package into your installation does not always guarantee that this font will automatically be available as a system font.

- -

The Publisher's Guide contains some discussion about installing fonts into a system, as part of the documentation of creating a style, and has particular warnings about only using the fontawesome5 package as a vehicle for installing and accessing these fonts.

- - - - - Keyboard Keys - keyboard keys - -

Your text can include specialized text meant to look like a key on the keyboard of a calculator or other device. So you can go b Enter < or F1. Or maybe a sequence as: Tab > Ctrl > T. Use the kbd element, with the label of the key as content.

- -

There is a growing supply of keys which are labeled with graphics rather than text, such as a left arrow , right arrow , up arrow , down arrow , and Enter . See The Guide for the definitive list. In the literal column means the symbol/character is the content of a kbd element, while the named column means the symbol/character has been chosen via the value of the name attribute of an empty kbd element.

- - - Named keys - - - - Literal - Named - - - Ampersand - & - - - - Less than - < - - - - Greater than - > - - - - Dollar - $ - - - - Per cent - % - - - - Open brace - { - - - - Close brace - } - - - - Hash - # - - - - Backslash - \ - - - - Tilde - ~ - - - - Circumflex - ^ - - - - Underscore - _ - - - -
- - - Upper Case - - - ~ - ! - @ - # - $ - % - ^ - & - * - ( - ) - _ - + - - - - Tab - Q - W - E - R - T - Y - U - I - O - P - { - } - | - - - CapsLock - A - S - D - F - G - H - J - K - L - : - ' - Enter - - - - Shift - Z - X - C - V - B - N - M - < - > - ? - Shift - - - -
- - - Lower Case - - - ` - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 0 - - - = - - - - Tab - q - w - e - r - t - y - u - i - o - p - [ - ] - \ - - - CapsLock - a - s - d - f - g - h - j - k - l - ; - ' - Enter - - - - Shift - z - x - c - v - b - n - m - , - . - / - Shift - - - -
- - - - URLs, such as <url href="http://example.com"/> - linkexternal, url - referenceexternal, url - -

The url element can be used to create an external reference. The mandatory href attribute is the actual URL complete with the protocol (e.g. https://). Content for the element is optional, and if provided will be the clickable text. In this case, a visual attribute can be provided, and this will become a footnote with a more friendly version of the URL. When no content is provided, the clickable will be the URL with a preference for an optional visual. This subsection has some (extreme) tests and we leave complete documentation and full details for the Guide.

- -

A long URL for testing: . Notice in the source that you do not put any tags inside the href or visual attributes, but you may need to provide XML escape sequences (see ).

- -

A url element with content will get a footnote, by containing the (simplified) URL in the highly-recommended visual attribute. If you do not provide the visual attribute in this case, then you will get the href value repeated, possibly with some editing. If you insist, you can make the visual attribute identical to the href attribute. Some tests:

    -
  • With a useful visual attribute
    • -
  • With a duplicate visual attribute
    • -
  • With no visual attribute, so an edited one is formulated (no protocol)
    • -

- -

Here is a totally bogus URL, which contains every possible legal character, so if this fails to convert there is some problematic character. In order to test the use of a percent sign (%) in a URL, we follow it by two hex digits, specifically, 58, which is a way to represent the character X in a URL. Normal text, monospace text, url with just href, url with href and visual, url with href, visual and content. Notice how the various versions do, or do not, line-break in /PDF output, including the (potentially confusing) use of a use of a hyphen in the normal text version

- -
- -

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%-._~:/?#[]@!$&'()*+,;=

- -

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%-._~:/?#[]@!$&'()*+,;=

- -

- -

- -

Characters to a footnote

- -
- -

Line-breaking in /PDF output is specialized, using path separators (slashes) as candidates for splitting across lines:

- -

We are not fans of footnotes, they are totally unstructured.Carleson's Theorem - A URL in a footnote migrates around, and so care must be taken. - This paragraph has two footnotes, one with a real URL from Jesse Oldroyd, another with a fake URL from the above suite. - For good measure, we repeat the URL found in the first footnote (which lacks its own footnote by designAnd if you do provide a link like Carleson's Theorem in a footnote, provide an easy-to-read reference, such as en.wikipedia.org/wiki/Carleson%27s_theorem since the extra footnote and any visual will be squelched.): - Carleson's Theorem. - And we include a no-content version of the same link, with a visual version provided and employed: - .

- - - - - Biological Names - biological names - biological namestaxon - scientific namesbiological names - -

The taxontaxonbiological namestaxon element can be used all by itself to get an italicized scientific name, as in Escherichia coli. It can also be structured with the elements genusgenusbiological namesgenus and species,speciesbiological namesspecies as in using both together in Cyclopskolensis. Or the subelements can be used individually. Rules for capitalization are presently your responsibility as an author. Possible improvements include new subelements, attributes for database identifiers, and checks on capitalization. Also, we might automatically abbreviate the genus after first use.

- -

There is an attribute, @ncbincbi attributeattributesncbi attributebiological namesncbi attribute that you can use on the taxon element to precisely identify the organism you are discussing using an identification number from the National Center for Biotechnology Information. Their taxonomy is at www.ncbi.nlm.nih.gov/taxonomy. Right now, we do not do anything with this attribute, but things like links are certainly possible. See the source of this document to see it in use with Drosophilamiranda which could be used to construct a link to further information via id number or even further information via just the name.

- - - - Verbatim in titles, <c>\a&b#c%d~e{f}g$h_i^j</c>, OK - -

You can test the migration of the special characters in this section title by requesting a 2-deep Table of Contents via the publication file.

- - - - Special Situations - -

Sage defines a nice syntax for generators of algebraic structures, but we must remember to use an escape sequence for the < symbol (see ).

- - - - P.<t> = ZZ[] - P - - Univariate Polynomial Ring in t over Integer Ring - - -

There is an alternate Sage syntax, which avoids the less-than and greater symbols.

- - - - R = ZZ['u'] - u = R.gen(0) - (u, R) - - (u, Univariate Polynomial Ring in u over Integer Ring) - - -

Ampersands, less-than, and greater symbols are likely to be necessary in source code, such as Sage code (think generators of field extensions) or TikZ code (think arrowheads), and in matrices (think separating entries). If you have a big matrix, or a huge chunk of TikZ code, you can protect it all at once from the XML processor by wrapping it in <![CDATA[]]>. It should be possible to write without ever using the CDATA mechanism, but it might get tedious in places to use the supplied macros or XML escape sequences. This construction is often mis-understood as a solution better remedied by reading again.

- -

We test the three pre-defined macros for &, <, and > with a pair of aligned equations: - a^2 + b^2\amp\lt c^2 - c^2\amp\gt a^2 + b^2 -

- - - - Jupyter Notebook, Markdown, MathJax, Delimiters - -

A Jupyter notebook allows a mix of HTML (our logistical preference for a conversion) and Markown (another set of special characters and their escaped versions). Certain pairs of delimiters, when appearing in consecutive HTML code elements require extraordinary care. But the one nut we cannot crack is pairs of dollar signs. So the next paragraph is known to render badly in a Jupyter notebook, but should otherwise be a bit boring.

- -

$ and $

- - - - <latex/> Characters, Ligatures, and More - -

This section is just for testing, and the more you know about , the more we would encourage you to not to read this. Look to the Author's Guide for the right way to author your source.

- -

The ten reserved characters, directly in the source: # $ % ^ & _ { } ~ \. And again: X#X$X%X^X&X_X{X}X~X\X, but smashed up tight to intermediate characters.

- -

In a verbatim presentation: # $ % ^ & _ { } ~ \.

- -

And X#X$X%X^X&X_X{X}X~X\X. (These verbatim versions are authored in different paragraphs to work around the Jupyter notebook bug described above.)

- -

We also disrupt certain constructions from . Attempting to sneak-in any traditional macro for the purposes of -only output, such as, say a \newpage, will fail since the leading backslash will be caught and converted to \textbackslash. (See? It just happened twice.) For technical reasons we want to particularly test \textbackslash, \textbraceleft, and \textbraceright.

- -

Four ligatures, --, ---, ``, and '', authored in running text, --, ---, ``, ''. It may be hard to tell that the two consecutive apostrophes have not coalesced into a curly left smart quote, but see below, the spacing is subtly different.

- -

We want the double quote mark from your keyboard, ", to not morph into some other character: ".

- -

More testing: runs of hyphens. Such as: - (one), -- (two), --- (three), ---- (four), ----- (five), ------ (six), ------- (seven). Use the empty elements ndash and mdash for the longer dashes/hyphens.

- -

Runs of apostrophes should not become smart right double quotes: ' (one), '' (two), ''' (three), '''' (four), ''''' (five), '''''' (six), ''''''' (seven). You might want to cut-and-paste these into a text file to convince yourself there are the right number of characters. Here are two smart right double quotes, separated by a non-breaking space, for visual comparison: . Or 30 apostrophes on a line of their own (longer) followed by 15 smart right double quotes (shorter).

-

''''''''''''''''''''''''''''''.

-

.

- -

Runs of backticks (accent grave) should not become smart left double quotes when the output is processed by : ` (one), `` (two), ``` (three), ```` (four), ````` (five), `````` (six), ``````` (seven). Furthermore, in a context where Markdown syntax is recognized as well ( a Jupyter notebook), paired backticks should not produce `inline verbatim text`.

- -

The next paragraph has a long run of words separated/joined by the keyboard forward-slash character. With this input, will not line-break at the slash, nor will it hypenate anywhere. automatically provides an improved slash, which will line-break, as you should see below in output. There is a bad right margin, but that is due to the absurdity of this test. This sort of problem should be no better or worse for the use of this character. Further refinements (zero-width space) and packages can be used to get hyphenation. HTML will line-break rationally with no extra help. Remember the solidus character for super-simple text fractions like 732 (which will not line-break), and math elements or SI unit markup for technical work.

- -

A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line.

- - - - <init>HTML</init> and accidental mathematics - -

We render mathematics in web pages with the fantastic MathJax Javascript library. Simplifying just a bit, it recognizes syntax within a page, takes control of that text, and replaces it wth nice fonts and formatting. Now, if you write about you might well have some mathematics in your examples. Best practice would be to use verbatim text for that, and we mark off such text as being off-limits to MathJax.

- -

But if you are writing running text, then you can (accidentally) author some text which MathJax recognizes and converts to something (unintended). And if you are doing this intentionally, then you have ignored markup for mathematics, and are missing out on some features.

- -

A few tests that we can prevent any accidents.

- -

Inline mathematics: \(x^2\).

- -

Display mathematics: \begin{align}x^2+y^2=z^2\end{align}

- -

Double backticks is a common construction, which in /PDF output should not become an opening quote-mark. Also, a single backtick in HTML is a signal for MathJax to interpret ASCIIMath, and then a double backtick causes random pieces of mathematics on a page to not render at all. So we have a quotation authored -style: ``We have nothing to fear, but fear itself.''

- -
- -
- Graphics - - -

In addition to including images created externally (e.g. photographs), supports several languages for describing diagrams and pictures with human-readable source code ( plain text), rather than using a paint program. This section describes the various methods for incorporationg, or generating, graphis, images or diagrams.

- - - - Images from External Sources - -

If you have raster images (photographs, etc.) then they are specified with complete filenames, as above in Figure or just below.

- -
- New Zealand Landscape, commons.wikimedia.org, CC-BY-SA-2.0 - -
- -

If you have existing images that are vector graphics, then PDF format works best for output and SVG format works best for HTML. The utility pdf2svg works well for converting PDF to SVG. In this case, specify your source as a filename, but leave off the file extension, and the appropriate version will be used for the current output format.

- -

The image below is provided from a PDF file in output, and was converted to an SVG for use with the HTML output. It has been explicitly scaled to a width of 65% of the text width.

- -
- Complete graph on 16 vertices, from www.texample.net - -
- - - Footnote Buried - -

Nested tcolorbox (in conversion) need special care when footnotes are interior.

- - -

A paragraph interior to a sidebyside with a footnoteInterior footnote. buried inside the paragraph.

-

A second paragraph, just to avoid a one-panel warning.

- - -

The final paragraph of this remark, randomly placed, to test footnotes in conversions.

- - - - - <prefigure/> - image - image image - -

is a standalone project for authoring mathematical diagrams (see ). Its philosophy and approach are much like that of , and is tightly integrated into . One key feature is excellent support for the creation of accessible output formats.

- -

As of 2024-11-06 development continues for itself, and fine-tuning of its integration within . But it is usable now for projects that want to use it.

    -
  • You can author diagrams, and then generate SVG, PDF, and PNG output versions with the pretext/pretext script (see the Guide), and expect them to render in HTML, PDF, and EPUB output formats.
    • -
  • Look for automatic generation to come to the -CLI sometime very soon.
    • -
  • has excellent support for annotations within an SVG diagram, supporting their use by screenreaders, for example. See an example below.
    • -
  • Production of tactile versions is now possible, though they are not incorporated explicitly into any of the output formats. Perhaps they will become available via archive links or as a zip archive.
    • -

- -

This is a basic diagram, in the sense that it does not use all the features of or .

- -
- Solution to a differential equation - - - - f(t,y) = (y[1], -pi*y[0]-0.3*y[1]) - - - - - - - x(t) - x'(t) - - - - - -
- -

This next diagram employs some macros that are defined in the usual way in docinfo and are employed to produce the names of some vectors in the labels. The blue line is colored blue by a global declaration, also in docinfo.

- - - - - v=(2,1) - b=(2,4) - bhat=dot(v,b)/dot(v,v) * v - bperp = b - bhat - - - - - - - - - - - - - - - - - - - - - -

The next diagram is authored with annotations, arranged in a hierarchy of increasing refinement and detail. Each identified graphical component will read its annotation and show it on the screen below the diagram. When a reader clicks on the image, a high-level summary will be read using the author-provided annotation. The down and up arrow keys enable a reader to explore the diagram in more or less detail while the right and left arrow keys reveal features at the same level of detail. When the focus is on the graph, pressing "O" will produce a sonification of the graph.

- - - - - a=1 - f(x) = exp(x/3)*cos(x) - - - - - - (a,f(a)) - - - - - - - - - - - - - - - - - -

Including annotations enables a new type of interactive diagram within a document offering potential benefits for all readers. In particular, annotations allow an author to call the reader's attention to specific details in a diagram and how they are related to one another so that the diagram and surrounding text are more tightly integrated. The annotated diagram below introduces Fibonacci tilings, which are one-dimensional analogs of Penrose tilings, and offers an explanation of their aperiodicity. Of course, surrounding text would usually provide a richer context for a diagram like this.

- -
- Fibonacci tilings are one-dimensional analogs of Penrose tilings. The diagram on the left introduces the process of deflation that is used to produce tilings while the diagram on the right explains why they are aperiodic. - - - - - - phi=(sqrt(5)+1)/2 - height=0.25 - top=1 - bottom=0 - left=0 - right=2 - colors={0:'blue', 1:'red'} - widths={0:phi, 1:1} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - phi=(sqrt(5)+1)/2 - height=0.25 - width=5+8*phi - colors={0:'blue', 1:'red'} - widths={0:phi, 1:1} - tiling2=[0,1,0,0,1] - tiling1=[0,1,0,0,1,0,1,0] - tiling0=[0,1,0,0,1,0,1,0,0,1,0,0,1] - tilings=[tiling0, tiling1, tiling2] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -

For sighted readers, here is an example of a tactile version of one of the above diagrams. It is generated automatically from the same source as the other version. Imagine this being printed with an embosser so that the parts of the diagram, and the braille labels, are raised up from the paper and can be explored with one's fingertips. This image is a PNG produced specifically for this document. Typically, a tactile diagram produced by will be a PDF ready to be sent to an appropriate embosser. Notice that adds a caption indicating the diagram's location in the document along the top of the diagram.

- - - - - - <latex/> images - image - image image - -

There are several graphics engine packages that a document can employ. Code from these packages renders diagrams automatically as part of normal processing of files. For HTML output the pretext script produces SVG versions of the pictures. The script can also produce standalone source files, PDFs, PNGs, and EPSs. The packages should be loaded in docinfo/latex-image-preamble, which is also where global package settings should be made. If any ampersands occur in your code you should use the \amp macro pre-defined by . These first examples are from the TeXample.net site. Note that any macros used in the rest of your document may be employed in the -standalone or Asymptote diagrams (with this feature coming to Sage graphics next?).

- - -
- TikZ Electronics Diagram - - - a pile of electronic components wired together - - - - =triangle 45] - \draw - % Drawing the blocks of first filter : - node at (0,0)[right=-3mm]{\Large \textbullet} - node [input, name=input1] {} - node [sum, right of=input1] (suma1) {\suma} - node [block, right of=suma1] (inte1) {\inte} - node at (6.8,0)[block] (Q1) {\Large $Q_1$} - node [block, below of=inte1] (ret1) {\Large$T_1$}; - % Joining blocks. - % Commands \draw with options like [->] must be written individually - \draw[->](input1) -- node {$X(Z)$}(suma1); - \draw[->](suma1) -- node {} (inte1); - \draw[->](inte1) -- node {} (Q1); - \draw[->](ret1) -| node[near end]{} (suma1); - % Adder - \draw - node at (5.4,-4) [sum, name=suma2] {\suma} - % Second stage of filter - node at (1,-6) [sum, name=suma3] {\suma} - node [block, right of=suma3] (inte2) {\inte} - node [sum, right of=inte2] (suma4) {\suma} - node [block, right of=suma4] (inte3) {\inte} - node [block, right of=inte3] (Q2) {\Large$Q_2$} - node at (9,-8) [block, name=ret2] {\Large$T_2$} - ; - % Joining the blocks of second filter - \draw[->] (suma3) -- node {} (inte2); - \draw[->] (inte2) -- node {} (suma4); - \draw[->] (suma4) -- node {} (inte3); - \draw[->] (inte3) -- node {} (Q2); - \draw[->] (ret2) -| (suma3); - \draw[->] (ret2) -| (suma4); - % Third stage of filter: - % Defining nodes: - \draw - node at (11.5, 0) [sum, name=suma5]{\suma} - node [output, right of=suma5]{} - node [block, below of=suma5] (deriv1){\derv} - node [output, right of=suma5] (sal2){} - ; - % Joining the blocks: - \draw[->] (suma2) -| node {}(suma3); - \draw[->] (Q1) -- (8,0) |- node {}(ret1); - \draw[->] (8,0) |- (suma2); - \draw[->] (5.4,0) -- (suma2); - \draw[->] (Q1) -- node {}(suma5); - \draw[->] (deriv1) -- node {}(suma5); - \draw[->] (Q2) -| node {}(deriv1); - \draw[<->] (ret2) -| node {}(deriv1); - \draw[->] (suma5) -- node {$Y(Z)$}(sal2); - % Drawing nodes with \textbullet - \draw - node at (8,0) {\textbullet} - node at (8,-2){\textbullet} - node at (5.4,0){\textbullet} - node at (5,-8){\textbullet} - node at (11.5,-6){\textbullet} - ; - % Boxing and labelling noise shapers - \draw [color=gray,thick](-0.5,-3) rectangle (9,1); - \node at (-0.5,1) [above=5mm, right=0mm] {\textsc{first-order noise shaper}}; - \draw [color=gray,thick](-0.5,-9) rectangle (12.5,-5); - \node at (-0.5,-9) [below=5mm, right=0mm] {\textsc{second-order noise shaper}}; - \end{tikzpicture}]]> - - -
- -

The next example began life in Sketch, which will output TikZ code (though the code has been edited by hand for readability).

- - -
- TikZ Cone Drawing - - - - ](1.643,1.853)--(1.643,.12); - \filldraw[conefill](.913,1.8)--(1.369,.1)--(1.162,-.283) - --(.775,1.545)--cycle; - \draw[arrows=->,line width=.4pt](.274,-.5)--(0,0)--(0,2.86); - \draw[arrows=-,line width=.4pt](0,0)--(-1.369,-.1); - \draw[arrows=->,line width=.4pt](-1.369,-.1)--(-2.1,-.153); - \filldraw[conefill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) - --(-.913,1.667)--cycle; - \draw(-1.369,.073)--(-1.369,2.76); - \draw(1.004,1.807)--(1.734,1.86); - \filldraw[conefill](.775,1.545)--(1.162,-.283)--(.274,-.5) - --(.183,1.4)--cycle; - \draw[arrows=<->](0,2.34)--(-.913,2.273); - \draw(-.913,1.84)--(-.913,2.447); - \draw[arrows=<->](0,2.687)--(-1.369,2.587); - \filldraw[conefill](.183,1.4)--(.274,-.5)--(-.775,-.424) - --(-.516,1.45)--cycle; - \draw[arrows=<-,line width=.4pt](.42,-.767)--(.274,-.5); - \node[ann] at (-.456,2.307) {$r_0$}; - \node[ann] at (-.685,2.637) {$r_1$}; - \node[ann] at (1.643,.987) {$h$}; - \path (.42,-.767) node[below] {$x$} - (0,2.86) node[above] {$y$} - (-2.1,-.153) node[left] {$z$}; - % Second version of the cone - \begin{scope}[xshift=3.5cm] - \filldraw[ghostdraw,ghostfill](-.775,1.922)--(-1.162,.283)--(-.274,.5) - --(-.183,2.067)--cycle; - \filldraw[ghostdraw,ghostfill](-.183,2.067)--(-.274,.5)--(.775,.424) - --(.516,2.016)--cycle; - \filldraw[ghostdraw,ghostfill](.516,2.016)--(.775,.424)--(1.369,.1) - --(.913,1.8)--cycle; - \filldraw[ghostdraw,ghostfill](-.913,1.667)--(-1.369,-.1)--(-1.162,.283) - --(-.775,1.922)--cycle; - \filldraw[ghostdraw,ghostfill](.913,1.8)--(1.369,.1)--(1.162,-.283) - --(.775,1.545)--cycle; - \filldraw[ghostdraw,ghostfill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) - --(-.913,1.667)--cycle; - \filldraw[ghostdraw,ghostfill](.775,1.545)--(1.162,-.283)--(.274,-.5) - --(.183,1.4)--cycle; - \filldraw[fill=red,fill opacity=0.5](-.516,1.45)--(-.775,-.424)--(.274,-.5) - --(.183,1.4)--cycle; - \fill(-.775,-.424) circle (2pt); - \fill(.274,-.5) circle (2pt); - \fill(-.516,1.45) circle (2pt); - \fill(.183,1.4) circle (2pt); - \path[font=\footnotesize] - (.913,1.8) node[right] {$i\hbox{$=$}0$} - (1.369,.1) node[right] {$i\hbox{$=$}1$}; - \path[font=\footnotesize] - (-.645,.513) node[left] {$j$} - (.228,.45) node[right] {$j\hbox{$+$}1$}; - \draw (-.209,.482)+(-60:.25) [yscale=1.3,->] arc(-60:240:.25); - \fill[black,font=\footnotesize] - (-.516,1.45) node [above] {$P_{00}$} - (-.775,-.424) node [below] {$P_{10}$} - (.183,1.4) node [above] {$P_{01}$} - (.274,-.5) node [below] {$P_{11}$}; - \end{scope} - \end{tikzpicture}]]> - - -
- -

The pgfplots package was included in docinfo/latex-image-preamble. Here, it is used. Also, here we demonstrate using \amp where you would normally use an ampersand in . There are known issues with xelatex processing any gradient shading in tikz. To (successfully) create the gradient shading in the 3D image here, you may need to use pdflatex until developers resolve this issue.

- -
- Sample pgfplots plot - - - a Cartesian plane with a function graph, a parametric curve, and some points - - - - , - smooth, - thin, - color = blue, - ]{4*ln(x)/ln(10)}; - \addplot[ - only marks, - ]coordinates{ - (0,2) - (4,3) - (2,4) - (3,4)}; - \addplot[ - variable = \t, - domain = 0:360, - samples = 200, - color = orange, - ]({3*sin(2*t)}, {2*cos(5*t)}); - \end{axis} - \amp - \begin{axis}[axis lines = box, width = 0.5\linewidth] - \addplot3[ - surf, - faceted color = blue, - samples = 15, - domain = 0:1, - y domain = -1:1 - ]{x^2 - y^2}; - \end{axis}\\ - }; - \end{tikzpicture}]]> - - -
- -

A plot might use a graphics language to draw the axes and grid, but the data might be from an experiment and live in an external file that you do not wish to place in your source. Place such a file in a subdirectory directly below the directory where your master source file resides. Then indicate this directory in a docinfo/directories/@data attribute of your source. But you must prefix the path with data/ as in the source below.

- -
- External data in a pgfplots plot - - - a Cartesian plot of electric potential over time; - - - - - - -
- -

The TikZ image in the next figure is made up from two PNG images (the shark and the swimmer), in addition to various TikZ commands. The images reside in a source directory, numerical/attack, so the image files (shark.png, swimmer.png) are prefixed in the TikZ code with data/attack so the creation of the image will be successful. This example is courtesy of Stephen Brown.

- -
- An illustration of the shark trying to catch you as you swim to shore. - - - \begin{tikzpicture} - \tikzset{ ragged border/.style={ decoration={random steps, segment length=1mm, amplitude=0.5mm}, decorate, } } - \fill[cyan!30] decorate[ragged border]{ (0,2) -- (8,2) } -- (8,0) -- (0,0) -- cycle; - \fill[yellow!30] decorate[ragged border]{ (8,2) -- (8,0) } -- (9,0) -- (9,2) -- cycle; - \draw (1.5,1) node {\scalebox{-0.2}[0.2]{\includegraphics{data/attack/shark.png}}}; - \draw (5,1) node {\includegraphics[scale=0.05]{data/attack/swimmer.png}}; - \draw[|-|] (1.5,3) node [above] {\(\SI{0}{m}\)} -- (5,3) node [above] {\(\SI{50}{m}\)}; - \draw[|-|] (5,3) -- (8,3) node [above] {\(\SI{70}{m}\)}; - \end{tikzpicture} - - -
- -

- A Cartesian plot might benefit from having a description with a - tabular that lays bare the data used to to plot points. -

- -
- Full description with tabular - - - a plot of some data points - - -

- A Cartesian graph plotting the following data. -

- - - - - - - x - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - - - y - 5 - 3 - 8 - 9 - 5 - 5 - 8 - 2 - 3 - - - - - \begin{tikzpicture} - \begin{axis}[ - xmin=0, - xmax=10, - ymin=-0,ymax=10, - xlabel={\(x\)}, - ylabel={\(y\)}, - ] - \addplot[only marks] coordinates {(1,5) (2,3) (3,8) (4,9) (5,5) (6,5) (7,8) (8,2) (9,3)}; - \end{axis} - \end{tikzpicture} - - -
- -

The next image requires three passes with to get everything in place. It is placed here to test that the code in the Pythion script correctly recognizes this requirement.

- -
- A matrix with colored entries - - - - - - \begin{tikzpicture} - \node{ - $\begin{bNiceArray}{ccc|cc}[ - code-before={\cellcolor{green!72}{1-1,2-2,3-3}\cellcolor{teal!72}{1-2,2-3,3-4}\cellcolor{yellow!72}{1-3,2-4,3-5}} - ] - 3 \amp 4 \amp 0 \amp 1 \amp 4 \\ - -2 \amp 3 \amp 1 \amp -2 \amp 3 \\ - 0 \amp 2 \amp 1 \amp 0 \amp 2 - \end{bNiceArray}$ - }; - \end{tikzpicture} - - -
- -

PSTricks is a package for drawing diagrams and pictures, dating back to the days before PDF, when PostScript (PS) was king. Given its history, it does not seem to work easily with the pdflatex engine. But it will work easily with the xelatex engine. We try to keep this present sample document workable with both engines, so we have presented an example of the use of PSTricks in the xelatex-exclusive sample document where we test obscure fonts and characters. So your best bet is to look there.PSTricks

- -

There are suggestions online that \usepackage[pdf]{pstricks}along with pdflatex --shell-escape *.tex is workable. We could not make it happen, and a shell escape can be a dangerous security hole. That said, updates to this approach are welcome.

- - - - Asymptote, 2D - -

The Asymptoteasymptote graphics language graphics language may be placed in your source to draw graphs, diagrams or pictures. Rules for formatting code are identical to those for Sage code. For more on Asymptote see .

- - - -

This is a simple physics diagram about levers, taken from the Asymptote documentation. In the HTML version of this article, the images are SVG's and so should scale nicely when you zoom in on the page.

- - - - -
- Asymptote Lever Demonstration - - moments on a lever - - size(200,0); - - pair z0=(0,0); - pair z1=(2,0); - pair z2=(5,0); - pair zf=z1+0.75*(z2-z1); - - draw(z1--z2); - dot(z1,red+0.15cm); - dot(z2,darkgreen+0.3cm); - label("$m$",z1,1.2N,red); - label("$M$",z2,1.5N,darkgreen); - label("$\hat{\ }$",zf,0.2*S,fontsize(24pt)+blue); - - pair s=-0.2*I; - draw("$x$",z0+s--z1+s,N,red,Arrows,Bars,PenMargins); - - s=-0.5*I; - draw("$\bar{x}$",z0+s--zf+s,blue,Arrows,Bars,PenMargins); - - s=-0.95*I; - draw("$X$",z0+s--z2+s,darkgreen,Arrows,Bars,PenMargins); - - -
- -

And a colorful contour plot with logarithmic scale. Again, from the Asymptote documentation. This SVG image employs two additional PNG images for the two parts where the color varies continuously.

- - -
- Asymptote Contour Plot - - - import graph; - import palette; - - size(10cm,10cm,IgnoreAspect); - - real f(real x, real y) { - return 0.9*pow10(2*sin(x/5+2*y^0.25)) + 0.1*(1+cos(10*log(y))); - } - - scale(Linear,Log,Log); - - pen[] Palette=BWRainbow(); - - bounds range=image(f,Automatic,(0,1),(100,100),nx=200,Palette); - - xaxis("$x$",BottomTop,LeftTicks,above=true); - yaxis("$y$",LeftRight,RightTicks,above=true); - - palette("$f(x,y)$",range,(0,200),(100,250),Top,Palette, - PaletteTicks(ptick=linewidth(0.5*linewidth()))); - - -
- -

Here is the lever diagram again, but now we have added an integral to one of the legends, using a macro of our own, which is idential to one we used in the early part of this article. The point is, we only needed to define the macro once for the entire document, and it is available as we make Asymptote diagrams. This device can be used to maintain flexibility and consistency in your choice of notation.

- -
- Aymptote Lever, plus Integral - - - size(200,0); - - pair z0=(0,0); - pair z1=(2,0); - pair z2=(5,0); - pair zf=z1+0.75*(z2-z1); - - draw(z1--z2); - dot(z1,red+0.15cm); - dot(z2,darkgreen+0.3cm); - label("$m$",z1,1.2N,red); - label("$M$",z2,1.5N,darkgreen); - label("$\hat{\ }$",zf,0.2*S,fontsize(24pt)+blue); - - pair s=-0.2*I; - draw("$x$",z0+s--z1+s,N,red,Arrows,Bars,PenMargins); - - s=-0.5*I; - draw("$\bar{x}=\definiteintegral{0}{1}{x\delta(x)}{x}$",z0+s--zf+s,blue,Arrows,Bars,PenMargins); - - s=-1.05*I; - draw("$X$",z0+s--z2+s,darkgreen,Arrows,Bars,PenMargins); - - -
- - - - - Asymptote, 3D via WebGL - -

Asymptote can create an HTML file that is an interactive version of a 3D shape. At this writing (2020-05-18) support via the pretext script is evolving. Plus, you will need newer versions of Asymptote and the dvisvgm utility to duplicate all of the results being displayed here in this testing document. The other distinction is that the author needs to provide the aspect ratio of the figure, and this should be placed on the asymptote element (not on the image element). is from the Asymptote Gallery.

- -
- Work Cone (Asymptote Interactive 3D Image) - - - import solids; - size(0,150); - currentprojection=orthographic(0,-30,5); - - real r=4; - real h=10; - real s=8; - real x=r*s/h; - - real sr=5; - real xr=r*sr/h; - - real s1=sr-0.1; - real x1=r*s1/h; - - real s2=sr+0.2; - real x2=r*s2/h; - - render render=render(compression=0,merge=true); - - draw(scale(x1,x1,-s1)*shift(-Z)*unitcone,lightblue+opacity(0.5),render); - - path3 p=(x2,0,s2)--(x,0,s+0.005); - revolution a=revolution(p,Z); - draw(surface(a),lightblue+opacity(0.5),render); - - path3 q=(x,0,s)--(r,0,h); - revolution b=revolution(q,Z); - draw(surface(b),white+opacity(0.5),render); - - draw((-r-1,0,0)--(r+1,0,0)); - draw((0,0,0)--(0,0,h+1),dashed); - - path3 w=(x1,0,s1)--(x2,0,s2)--(0,0,s2); - revolution b=revolution(w,Z); - draw(surface(b),blue+opacity(0.5),render); - draw(circle((0,0,s2),x2)); - draw(circle((0,0,s1),x1)); - - draw("$x$",(xr,0,0)--(xr,0,sr),red,Arrow3,PenMargin3); - draw("$r$",(0,0,sr)--(xr,0,sr),N,red); - draw((string) r,(0,0,h)--(r,0,h),N,red); - draw((string) h,(r,0,0)--(r,0,h),red,Arrow3,PenMargin3); - draw((string) s,(-x,0,0)--(-x,0,s),W,red,Arrow3,Bar3,PenMargin3); - - -
- -

These 3D images in HTML output are rotable with a pointing device (mouse, trackpad) with a click-and-drag. A finger should suffice on touch-sensitive devices (phones, tablets). Zooming in and out can be accomplished with a mouse wheel, or by pinching. As a contribution to the accessibility of HTML output, keyboard controls will also allow for exploration of these images. (Make sure the image has focus when you attempt to use these.)

- - - - - - - 3D Image Keyboard Controls - - KeyAction - xRotate around x-axis - yRotate around y-axis - zRotate around z-axis - +Enlarge image - -Shrink image - hReturn to home position - -
- -

And finally, an example of a 3-D graph (from the Asymptote documentation again). This WebGL image is a beautiful example of a Riemann surface. As you rotate the image, notice how the reflection of the light source varies, along with the brightness of various regions of the surface. This example is accomplished with just 10 lines of Asymptote code.

- - - - -
- Asymptote 3-D Surface - - - // Riemann surface of z^{1/n} - import graph3; - import palette; - - int n=3; - - size(200,300,keepAspect=false); - - currentprojection=orthographic(10,10,5); - currentlight=(10,10,5); - triple f(pair t) {return (t.x*cos(t.y),t.x*sin(t.y),t.x^(1/n)*sin(t.y/n));} - - surface s=surface(f,(0,0),(1,2pi*n),8,16,Spline); - s.colors(palette(s.map(zpart),Rainbow())); - - draw(s,meshpen=black,render(merge=true)); - - -
- - - - Mermaid Diagrams - Mermaid diagrams - -

Mermaid is a Markdown-inspired tool for authoring various kinds of diagrams. Below, three of the available diagram types are demonstrated. For a full listing of diagram types, see the Mermaid Documentation. The Mermaid live editoris a great tool for testing the syntax of your mermaid diagrams.

- -

In PreTeXt, you can specify a Mermaid theme via common/mermaid/@theme

- -
- Mermaid Git Diagram - - - A git diagram in Mermaid - - - --- - title: Example Git diagram - --- - gitGraph - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit - - -
- -
- Mermaid Class Diagram - - - A class diagram in Mermaid - - - classDiagram - Animal <|-- Duck - Animal <-- Fish - Animal <|-- Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } - - -
- -
- Mermaid Seuqnece Diagram - - - A sequence diagram in Mermaid - - - sequenceDiagram - participant Alice - participant Bob - Alice->>John: Hello John, how are you? - loop HealthCheck - John->>John: Fight against hypochondria - end - Note right of John: Rational thoughts <br/>prevail! - John-->>Alice: Great! - John->>Bob: How about you? - Bob-->>John: Jolly good! - - -
- - - - Sage Plots - Sage plots - -

Any of the numerous capabilities of Sage may be used to produce any graphics object, be it the simple graph of a single-variable function or some realization of a more complicated object. All of the usual rules about formatting Sage code (esp. indentation) apply, along with one more caveat. The last line of your Sage code must return a Sage Graphics object (or 3D plot). The pretext script will isolate this last line, use it as the RHS of an assignment statement, and the Sage .save() method will be called to generate the image, which is either a Portable Document Format (PDF) file amenable to output, or a Scalable Vector Graphics (SVG) file amenable to HTML output. For visualizations of 3D plots, Sage will only produce Portable Network Graphics (PNG) files, which can be included in HTML pages or output. For complete documentation, see the Guide as this subsection is not comprehensive.

- -
- A Sage standard parabola, on [-2,4] - - a standard parabola on the interval [-2,4] - - f(x) = x^2 - plot(f, (x, -2, 4), color='green', thickness=3) - - -
- -

Pay careful attention to the requirement that the last line of your code be a graphics object. In particular, while show() might appear to do the right thing, it evaluates to Python's None object and that is just what you will get. The code for Figure illustrates creating two graphics objects and combining them into an expression on the last line that evaluates to a graphics object.

- -
- Two Sage plots on one set of axes - - - f(x) = x^4 - g(x) = -x^4 - up = plot(f, (x, -1.5, 1.5), color='blue', thickness=2) - down = plot(g, (x, -1.5, 1.5), color='red', thickness=2) - up + down - - -
- -

Sage code comprised of just a single line was once mishandled, leading to no ouput. From Jean-Sébastien Turcotte we have the example that revealed the problem.

- -
- Les vecteurs \vec{u} et \vec{v} - - -

- Les vecteurs \vec{u} et \vec{v}sont tracés tel que demandé, - respectivement en rouge et en bleu. -

- - - plot(vector([-1,2]),color='red')+plot(vector([2,1]),color='blue') - - -
- -

The following examples are from the Sage Tour. We package them into a sidebyside layout element, see .

- - - - -
- A Sage multigraph of a sentence - - - stnc = 'I am a cool multiedge graph with loops' - g = DiGraph({}, loops=True, multiedges=True) - for a,b in [(stnc[i], stnc[i+1]) for i in srange(len(stnc)-1)]: - g.add_edge(a, b, b) - g.plot(color_by_label=True, edge_style='solid', figsize=(8,8)) - - -
- - - -
- Sage polynomial approximations of f(x)=1/(1+25x^2) - - - - def f(x): - return RDF(1 / (1 + 25 * x^2)) - - def runge(): - R = PolynomialRing(RDF, 'x') - g = plot(f, -1, 1, rgbcolor='red', thickness=1) - polynom = [] - for i, n in enumerate([6, 8, 10, 12]): - data = [(x, f(x)) for x in xsrange(-1, 1, 2 / (n - 1), include_endpoint=True)] - polynom.append(R.lagrange_polynomial(data)) - g += list_plot(data, rgbcolor='black', pointsize=5) - g += plot(polynom, -1, 1, fill=f, fillalpha=0.2, thickness=0) - return g - - runge() - - -
- - -

From the Sage documentation, with slight modifications, credited to Douglas Summers-Stay. A plot of the implicity defined surface 2 = \cos(x + ty) + \cos(x - ty) + \cos(y + tz) + \cos(y - tz) + \cos(z - tx) + \cos(z + tx) in rectangular xyz coordinates, with t equal to the golden ratio. If you set plot_points=100 in the Sage code, you will get a very smooth rendering, but also a quite large HTML file. We have used plot_points=50 to reduce the file size by a factor of four. Note the need for a value of 3d for the variant attribute, and an explicit aspect ratio with aspect. Arrow keys, a mouse scroll wheel, plus grabbing with a left or a right mouse button, can be used to manipulate the image.

- -
- A Sage implicitly defined 3D surface - - - var('x y z') - T = RDF(golden_ratio) - p = 2 - (cos(x + T*y) + cos(x - T*y) + cos(y + T*z) + cos(y - T*z) + cos(z - T*x) + cos(z + T*x)) - r = 4.77 - implicit_plot3d(p, (x, -r, r), (y, -r, r), (z, -r, r), plot_points=50, frame=False) - - -
- - - - Inkscape Images - -

Inkscape is a great tool for creating images. It ticks all the boxes: open source, mature, cross-platform, standards-compliant. Read much more about it in The Guide. In HTML output the two images below are both in SVG format. The first is pure SVG, while the second has embedded information that makes it easier to edit in Inkscape. You could view the source for this page in the HTML version, deduce the filename of the second image, download it, and manipulate it profitably with Inkscape. Both files are quite small, but the first is half the size of the second. In PDF the two images come from files that are identical, so nothing is being tested. The PDF version is smaller still.

- -
- Inkscape Stars, Plain SVG (left), Inkscape SVG (right), from Bethany Llewellyn - - - - -
- - - - - Copies of Images - -

Sometimes you want to use the same image more than once. Here we just point to a PNG file that we repeat often throughout this sample.

- -
- Copy of raster image, in a figure, so now numbered and captioned - -
- -

For images described by code, such as TikZ code in a latex-image element, this is a bit subtler. See the Guide for a complete description. We also demonstrate this with the sample book, since it is all set up with the xinclude mechanism. See the two plots of the 8-th roots of unity in the complex numbers section of the chapter on cyclic groups.

- - - - Caption Testing - -

A caption could be as substantial as a paragraph, here we test out one such example.

- -
- A caption can be a whole paragraph with lots of technical details, and maybe a hyperlink to something external, such as or . There could be some inline mathematics, such as x^2 + y^2 = c^2. Would a knowl open here? Recursively? Let's see: . Display mathematics, side-by-sides, theorems, and lots of other things should be banned. Footnotes sound like a bad idea. Strange characters should be fine: . - - -
- - - - Captionless Images - -

We strongly suggest placing images within a figure, as we have done above, so that you can reference them, and use the (required) caption to explain what they are. However there are places, such as a preface, where numbered items are not permitted. So you might want a solo image there. Or maybe graphics are an illustration of sorts, and a numbered figure feels like overkill. Or it is part of an exercise or proof of a theorem. But notice that you cannot then use this image as the target of a cross-reference, so you may need to refer to some enclosing container.

- -

The image can be scaled by specifying the width as a percentage, including the percent-sign (%). The height is scaled to preserve the aspect ratio. There is no facility to change the height, it is your responsibility to manage the aspect ratio independently. The margins can be given as a pair of percentages, separated by a space. The width defaults to 100%, while margins defaults to the value auto, which will center the image. Missing values are computed sensibly, and there is robust error-checking. The layout control here is a subset of what is available for the more elaborate sidebyside element, see .

- -

Two simple examples. The first has width 10% and so defaults to being centered, and the second has width 10% and left margin of 25%.

- - - -

A paragraph, just to show where the first stops and the second ends.

- - - -

You might wish to place a single image flush-left, or flush-right. You can specify the margins attribute as a pair of percentages for different left and right margins. The following are laid out with two margins, with a 0% left margin and right margin (respectively).

- - - - - -

We place two images right above one another, to test spacing of consecutive images (provided they stay on the same page!).

- - - - - - - Testing (2019-06-02) - -

All the images above are specified by filenames. We need to test how various options behave when incorporated into the (new) implementation for images, being introduced with solo images.

- -

A tikz image recycled from above, now 40% width, with 40% left margin, 20% right margin.

- - - - - ](1.643,1.853)--(1.643,.12); - \filldraw[conefill](.913,1.8)--(1.369,.1)--(1.162,-.283) - --(.775,1.545)--cycle; - \draw[arrows=->,line width=.4pt](.274,-.5)--(0,0)--(0,2.86); - \draw[arrows=-,line width=.4pt](0,0)--(-1.369,-.1); - \draw[arrows=->,line width=.4pt](-1.369,-.1)--(-2.1,-.153); - \filldraw[conefill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) - --(-.913,1.667)--cycle; - \draw(-1.369,.073)--(-1.369,2.76); - \draw(1.004,1.807)--(1.734,1.86); - \filldraw[conefill](.775,1.545)--(1.162,-.283)--(.274,-.5) - --(.183,1.4)--cycle; - \draw[arrows=<->](0,2.34)--(-.913,2.273); - \draw(-.913,1.84)--(-.913,2.447); - \draw[arrows=<->](0,2.687)--(-1.369,2.587); - \filldraw[conefill](.183,1.4)--(.274,-.5)--(-.775,-.424) - --(-.516,1.45)--cycle; - \draw[arrows=<-,line width=.4pt](.42,-.767)--(.274,-.5); - \node[ann] at (-.456,2.307) {$r_0$}; - \node[ann] at (-.685,2.637) {$r_1$}; - \node[ann] at (1.643,.987) {$h$}; - \path (.42,-.767) node[below] {$x$} - (0,2.86) node[above] {$y$} - (-2.1,-.153) node[left] {$z$}; - % Second version of the cone - \begin{scope}[xshift=3.5cm] - \filldraw[ghostdraw,ghostfill](-.775,1.922)--(-1.162,.283)--(-.274,.5) - --(-.183,2.067)--cycle; - \filldraw[ghostdraw,ghostfill](-.183,2.067)--(-.274,.5)--(.775,.424) - --(.516,2.016)--cycle; - \filldraw[ghostdraw,ghostfill](.516,2.016)--(.775,.424)--(1.369,.1) - --(.913,1.8)--cycle; - \filldraw[ghostdraw,ghostfill](-.913,1.667)--(-1.369,-.1)--(-1.162,.283) - --(-.775,1.922)--cycle; - \filldraw[ghostdraw,ghostfill](.913,1.8)--(1.369,.1)--(1.162,-.283) - --(.775,1.545)--cycle; - \filldraw[ghostdraw,ghostfill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) - --(-.913,1.667)--cycle; - \filldraw[ghostdraw,ghostfill](.775,1.545)--(1.162,-.283)--(.274,-.5) - --(.183,1.4)--cycle; - \filldraw[fill=red,fill opacity=0.5](-.516,1.45)--(-.775,-.424)--(.274,-.5) - --(.183,1.4)--cycle; - \fill(-.775,-.424) circle (2pt); - \fill(.274,-.5) circle (2pt); - \fill(-.516,1.45) circle (2pt); - \fill(.183,1.4) circle (2pt); - \path[font=\footnotesize] - (.913,1.8) node[right] {$i\hbox{$=$}0$} - (1.369,.1) node[right] {$i\hbox{$=$}1$}; - \path[font=\footnotesize] - (-.645,.513) node[left] {$j$} - (.228,.45) node[right] {$j\hbox{$+$}1$}; - \draw (-.209,.482)+(-60:.25) [yscale=1.3,->] arc(-60:240:.25); - \fill[black,font=\footnotesize] - (-.516,1.45) node [above] {$P_{00}$} - (-.775,-.424) node [below] {$P_{10}$} - (.183,1.4) node [above] {$P_{01}$} - (.274,-.5) node [below] {$P_{11}$}; - \end{scope} - \end{tikzpicture}]]> - - - -

A pgfplot image recycled from above, now 20% width, with 40% left margin, 40% right margin, and no longer legible.

- - - - - - - - - -

An Asymptote image, with zero layout control, so 100% width.

- - - moments on a lever - - // The next comment was seen in the wild, and the angle brackets - // are non-ASCII Unicode characters, which was disrupting communication - // with the Asymptote server, so we include the comment here for testing. - // The actual comment is immaterial for the lever diagram. - // - // The path is an elliptical helix ⟨ cos t, 2sin t, t/pi ⟩. - // - size(200,0); - - pair z0=(0,0); - pair z1=(2,0); - pair z2=(5,0); - pair zf=z1+0.75*(z2-z1); - - draw(z1--z2); - dot(z1,red+0.15cm); - dot(z2,darkgreen+0.3cm); - label("$m$",z1,1.2N,red); - label("$M$",z2,1.5N,darkgreen); - label("$\hat{\ }$",zf,0.2*S,fontsize(24pt)+blue); - - pair s=-0.2*I; - draw("$x$",z0+s--z1+s,N,red,Arrows,Bars,PenMargins); - - s=-0.5*I; - draw("$\bar{x}$",z0+s--zf+s,blue,Arrows,Bars,PenMargins); - - s=-0.95*I; - draw("$X$",z0+s--z2+s,darkgreen,Arrows,Bars,PenMargins); - - - -

A Sage example, pushed to the right margin.

- - - a standard parabola on the interval [-2,4] - - f(x) = x^2 - plot(f, (x, -2, 4), color='green', thickness=3) - - - - - - - Technical Details - -

The table below is a summary of how graphics and images are specified, constructed and manipulated. Additional processing is indicated by reference to the Python script pretext. Images need to be placed relative to the file that includes them during compilation, and placed relative to the HTML files which reference/include them. Author-provided image files may be placed in any subdirectory, and the @source attribute should include the complete relative path with the subdirectory. Files generated by the pretext script will be specified in the output using the relative directory images, which can be changed. There is no reason author-provided files cannot also be placed in this same directory (presuming no duplicate names). [This table is presently more readable in HTML, the PDF version will improve.]

- - - - Element - Specification - /Print - HTML - Notes - - - - image/@source - full relative path, w/ extension - directly included - directly included - author-provided PNG, JPEG - - - - image/@source - full relative path, w/o extension - presumes PDF - presumes SVG - author-provided - - - - image/latex-image-code - -compatible source - directly included - SVG via pretext - tikz, pgfplots, xypic - - - - image/sageplot - Sage code - PDF via pretext - SVG via pretext - PNG for 3-D - - - - image/asymptote - Asymptote code - PDF via pretext - SVG via pretext - - - - -

In the early stages of a writing project, it may be best not to track provisional image files built with pretext under version control, and just regenerate them periodically (see the -r option for pretext). As a project matures, then it makes sense to put stable files under version control for collaborators and others. In every case, managing graphics files (and other aspects of production), is much more pleasurable with a script (shell, Makefile, etc.)

- - - - Accessibility -

- An image should either have a non-empty description, - a non-empty shortdescription, or set decorative to the - value yes. Some of the following images comply, and some do not. There's - not really anything to see here visually, this is testing notifications made - elsewhere. -

- - - -

No description, no shortdescription, no decorative set to yes

- -

No description, no shortdescription, decorative set to yes

- - - -

No description, empty shortdescription, no decorative set to yes

- - - -

No description, empty shortdescription, decorative set to yes

- - - - - -

No description, too long shortdescription, no decorative set to yes

- - This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. - -

No description, too long shortdescription, decorative set to yes

- - This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. - - - -

No description, good shortdescription, no decorative set to yes

- - a white square outlined in blue covered by a black X - -

No description, good shortdescription, decorative set to yes

- - a white square outlined in blue covered by a black X - - - -

Description, no shortdescription, no decorative set to yes

- - -

- A white square outlined in blue covered by a black X. -

- - -

Description, no shortdescription, decorative set to yes

- - -

- A white square outlined in blue covered by a black X. -

- - - - -

Description, empty shortdescription, no decorative set to yes

- - - -

- A white square outlined in blue covered by a black X. -

- - -

Description, empty shortdescription, decorative set to yes

- - - -

- A white square outlined in blue covered by a black X. -

- - - - -

Description, too long shortdescription, no decorative set to yes

- - This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. - -

- A white square outlined in blue covered by a black X. -

- - -

Description, too long shortdescription, decorative set to yes

- - This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. - -

- A white square outlined in blue covered by a black X. -

- - - - -

Description, good shortdescription, no decorative set to yes

- - a white square outlined in blue covered by a black X - -

- A white square outlined in blue covered by a black X. -

- - -

Description, good shortdescription, decorative set to yes

- - a white square outlined in blue covered by a black X - -

- A white square outlined in blue covered by a black X. -

- - - - - -
- -
- Further Reading - - - Specialized Subdivisions - -

In a longer work you might wish to have some references on a per-chapter basis, or similar. You can make a references subdivision anywhere to hold bibliographic items, and you can reference the items like any other item. For example, we can cite the article below , included an indication that a specific chapter may be relevant.

- - - - Exercises - - - -

No problem here, but the next two are in an exercise group with an introduction and a conclusion, along with an optional title. The two problems of the exercise group should be indented some to indicate the grouping.

-

N.B. An exercisegroup is meant to hold a collection of (short) exercises with common, shared, instructions. Do not use this structure to subdivide an exercises division, as you will eventually be disappointed. Instead, use the available, but under development as of 2019-11-02, subexercises, which requires a title.

- - - - - Two Derivative Problems - exercise grouptwo derivatives - - -

In the next two problems compute the indicated derivative.

- -

You could connect the image above with the exercises following as part of this introduction for the exercisegroup.

- - - - -

f(x)=x^3, \frac{df}{dx}. This sentence is just a bunch of gibberish to check where the second line of the problem begins relative to the first line.

-

We cross-reference the next problem in this exercise group. For the phrase-global form, the common element of the cross-reference and the target should be the exercises division, and not the enclosing exercisegroup: .

- - - - derivativecosine - -

y = \cos(x), y^\prime.

- - - - -

Note that the previous two problems used very different notation for the function and the resulting derivative.

- - - - - -

This isn't really an exercise, but an explanation that the next exercisegroup has a title and no introduction, which once resulted in some aberrant formatting in output.

- - - - Two More Derivative Problems - - -

Some common instructions would go here in the introduction

- - - -

f(x)=x^3, \frac{df}{dx}. This sentence is just a bunch of gibberish to check where the second line of the problem begins relative to the first line.

-

We cross-reference the next problem in this exercise group. For the phrase-global form, the common element of the cross-reference and the target should be the exercises division, and not the enclosing exercisegroup: .

- - - - -

y = \cos(x), y^\prime.

- - - - - - -

Compute \int 3x^2\,dx.

- - - - -

One of the few things you can place inside of mathematics is a fill-in blank.fill-in blank We demonstrate a few scenarios here. See details on syntax in the use is identical within mathematics.

    -

  • Inside inline math (short, space for x): \sin()

    • - -

  • Inside inline math (default, space for XXX): \sin()

    • - -

  • Inside exponents and subscripts (each is space for the string 12). In this case, be sure to wrap your exponents and subscripts in braces, as would be good practice anyway: x^{5+}\,y_{}

    • - -

  • Inside inline math (too long for this line probably, 40 characters long): \tan()

    • - -

  • So use inside a displayed equation16\log\spacelike this one.

    • - -

  • Inside the second line of a multi-line display: - y &= x^7\,x^8 - &= x^{} -

    • -

  • - This fillin has the historical characters attribute for a fillin inside math: 1++4=10, which may be more convenient, but may not side properly in places like subscripts, superscripts, fractions, limits of integrals, and so on. -

    • -

- - - - - - - More Exercises - - - -

This is not a real exercise, we just want to explain that this is another subsection of exercises, which has two consecutive exercise groups.

- - - - -

Introduction to first exercise group.

 - -

Only exercise of first group.

 - -

Conclusion to first exercise group.

 - - - -

Introduction to second exercise group.

 - -

First exercise of second group.

 - - -

Second exercise of second group.

 - -

Conclusion to second exercise group.

 - - - -

An exercisegroup can have a cols attribute taking a value from 26. Exercises will progress by row, in so many columns. On a small screen, the HTML exercises may reorganize into fewer columns.

 - -

1+2

 - - -

3+4+5

 -

Addition is associative.

 -

12

 -

First, add 3 and 4 to get 7, then add 5 to arrive at 12.

 - - -

5+6

 - - -

Add seven to eight.

 -

15

 - - -

9+10

 - - -

1+2

 - - -

3+4+5

 -

Addition is associative.

 -

12

 - -

First, add 3 and 4 to get 7, then add 5 to arrive at 12.

- -

A simple argument.

- -

And a bit more.

- - - -

5+6

 - - -

Add seven to eight.

 -

15

 - - -

9+10

 - - -

1+2

 - - -

3+4+5

 -

Addition is associative.

 -

12

 -

First, add 3 and 4 to get 7, then add 5 to arrive at 12.

 - - -

5+6

 - - -

Add seven to eight.

 -

15

 - - -

9+10

 - - -

1+2

 - - -

3+4+5

 -

Addition is associative.

 -

12

 -

First, add 3 and 4 to get 7, then add 5 to arrive at 12.

 - - -

5+6

 - - -

Add seven to eight.

 -

15

 - - -

9+10

 - -

This feature was designed with short drill exercises in mind. With long exercises, or exercises with long hints, answers, or solutions, there is a risk that the output will have bad page breaks in the vicinity (just before) such an exercise that occupies too much vertical space. Edit, rearrange, or use fewer columns to see if the situation improves.

 - - - - -

- Make a table and a graph for the function f(x)=x^2. -

- - - - - - x - f(x) - - - 0 - 0 - - - 1 - 1 - - - 2 - 4 - - - 3 - 9 - - - - - \begin{tikzpicture} - \begin{axis} - \addplot[domain=-1.5:4, blue, thick, {stealth}-{stealth}] {x^2}; - \end{axis} - \end{tikzpicture} - - - - - - - - - References - referenceswithin a section - - -

These items are here to test basic formatting of references.

- - - Gilbert Strang, The Fundamental Theorem of Linear Algebra, The American Mathematical Monthly November 1993, 100 9, 848855. - - - J. B. Conrey and D. W. Farmer - Mean values of <m>L</m>-functions and symmetry - Internat. Math. Res. Notices - 17 - 2000 - - - - Robert A. Beezer, A First Course in Linear Algebra, 3rd Edition, Congruent Press, 2012. -

An online, open-sourceA gratuitous footnote to test prior bug confusing this with a REMARK-LIKE note. offering.

 - - - - H. Davenport - Multiplicative Number Theory - GTM - 74 - Springer-Verlag New York, NY - 2000 - xiv+177 - A note may accompany a bibliographic item, such as saying the manuscript is under review. But it cannot contain any formatting. - - - Alexander Rosswell, Diffeomorphisms of Penciled Fiber Bundles, Mathematicians of America 2020, 2 6, 884888. - - , Diffeomorphisms of Penciled Fiber Bundles, Part 2, Mathematicians of America 2021, 3 4, 102103. - - -

This is a conclusion, which has not been used very much in this sample. Did you see that the entry for has a short annotation? So you can make annotated bibliographies easily.

- - - -
- -
- List Calisthenics - - - Lists, Generally - ordered list - listordered - unordered list - listunordered - -

- Use ol to make an ordered list,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. - unordered list - listordered - listunordered -

- - -

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. -
  2. SecondFootnote in an unstructured list item.
    3. -
  3. Third.
    4. -
    -

  • RedOne of our favorite colors

    • -

  • Green

    • -

  • Yellow

    • -

  • Purple

    • -

- -

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

    Level 1, second.

      -

    1. Level 2, first.

      2. -

    2. Level 2, second.

        -

      1. Level 3, first.

        2. -

      2. Level 3, second.

          -

        1. Level 4, first.

          2. -

        2. Level 4, second.

          3. -
        3. - Title on xref'ed list item -

          Level 4, third.

          4. -

        -
        3. -

      3. Level 3, third.

        4. -

      -
      3. -
    3. - A title on a nested item -

      Level 2, third.

      -
      4. -

    -
    3. -

  3. Level 1, third.

    4. -

- -

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: . Level 3, second: . Level 4, third: . 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 (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. -

  2. Level 1, second.

      -

    1. Level 2, first.

      2. -

    2. Level 2, second.

        -

      • Level 3, first.

        • -

      • Level 3, second.

          -

        1. Level 4, first.

          2. -

        2. Level 4, second.

            -

          1. Level 5, first.

            2. -

          2. Level 5, second.

              -

            • Level 6, first.

              • -

            • Level 6, second.

              • -

            • Level 6, third.

              • -

            -
            3. -

          3. Level 5, third.

            4. -

          -
          3. -

        3. Level 4, third.

          4. -

        -
        • -

      • Level 3, third.

        • -

      -
      3. -

    3. Level 2, third.

      4. -

    -
    3. -

  3. Level 1, third.

    4. -

- -

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 not currently be rendered by WebKit-based browsers (such as Safari) when viewing HTML output.

    -

  1. Level 1, first.

    2. -

  2. Level 1, second.

      -

    1. Level 2, first.

      2. -

    2. Level 2, second.

        -

      1. Level 3, first.

        2. -

      2. Level 3, second.

        3. -

      3. Level 3, third.

        4. -

      -
      3. -

    3. Level 2, third.

      4. -

    -
    3. -

  3. Level 1, third.

    4. -

- -

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

  2. Level 1, second.

      -

    • Level 2, first.

      • -

    • Level 2, second.

      • -

    -
    3. -

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

    4. -

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

    5. -

- -

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

    -
  1. First
    2. -
  2. -

    Second

      -
    1. Uno
      2. -
    2. Dos
      3. -
    3. Tres
      4. -

    -
    3. -
  3. Third
    4. -

- - -

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.

- - - Group - Group - -

groupdefinitionparagraphinitial list

    -
  1. There is a binary operation, denoted \cdot.
    2. -
  2. The operation is associative.
    3. -
  3. There is an identity element, e.
    4. -

  4. For every element b, there is an element c (the inverse), such that b\cdot c=c\cdot b = e.

    5. -

-

If these conditions are met for a set G, 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).

- - - - 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. -
  2. Two ducks.
    3. -
  3. Three items. Plus a few more words to check that long entries in a two column list look good.
    4. -
  4. Four items.
    5. -
  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.
    6. -

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

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

    -
    2. -
  2. A list item with text and math \int_a^b x^2\,dx, not in a paragraph.
    3. -
  3. - \frac{d}{dx}\tan(x) = \sec^2(x) = \frac{1}{\cos^2(x)} -
    4. - -
  4. \sum_{i=0}^n r^i = \frac{1-r^{n+1}}{1-r}
    5. -
- \int f(x)\,dx - math in lists \frac{d}{dx}(\sin(x))=\cos(x) -

- - -

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

    -
    • - -
  • \frac{a}{b}\div \frac{c}{d} = \frac{ad}{bc}
    • - -
  • - - \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. -

- - - 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. -
  2. A list item with text and math \int_a^b x^2\,dx, not in a paragraph.
    3. -
  3. \int_a^b f'(x)\, dx = f(b)-f(a)
    4. - -
  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. - -
  5. - \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}} -
    6. - -
  6. - \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}} -
    7. - -

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

    8. - -
  8. -

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

    -
    9. -
- - -

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

      - Math only, with a newline. -

      -
      3. - -
    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. - -
    4. \int_a^x \frac{d}{dt}f(t)\,dt = f(x)-f(a)
      5. -
    -

    -
    • - -
  • \frac{a}{b}\div \frac{c}{d} = \frac{ad}{bc}
    • - -
  • - - \tan\theta = \frac{\sin\theta}{\cos\theta} - -
    • - -
  • -

    - \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,
    • -
  • \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 <c>\displaystyle</c> added automatically -

    \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

    -
    • -

- - - - Difficult List Items - -

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

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

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

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

- - - - Description Lists - -

Use dl to make a description listdescription listlistdescription. 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 - description listlistdescription - 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.

    -

    This is a second paragraph that should appear indented in PDF output.

    -
    • - -
  • - 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 (, disks).

    -
    • - -
  • - Bus! -

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

    -
    • - -
  • - <m>\displaystyle \sum_{n=0}^\infty x^n = \frac{1}{1-x}</m> -

    A geometric series. The formula is valid if |x| < 1.

    -
    • -

    - -

    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.On a sunny day! (Testing footnotes in description lists for output.)

    -
    • -
  • - Math <m>x^2</m> - - -

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

    -
    • -
  • - <q>i</q> before <q>e</q> except after <q>c,</q> unless it sounds like <q>a</q> as in <q>neighbor</q> and <q>weigh</q> -

    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: respects the good design practices which have been developed over the past centuries.

    -
    • -
  • - <m>\displaystyle \zeta(s) = \sum_{n=1}^\infty n^{-s} </m> -

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

    -
    • -
  • - <c>main()</c> is a void function -

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

    -
    • -

    - -

    You can nest description lists, though items might get crowded horizontally. We expand our computer list a bit. -

    -
  • - Expanded CPU -

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

    -
  • - Arithmetic -

    The kind of computations that give a computer the name computer.

    -
    • -
  • - Logic -

    Operations that make decisions, if this, then that, plus: and, or, and not.

    -
    • -
  • - Memory -

    Space to store information and results, permanently or temporarily.

    -
    • -

    -

    This is a second paragraph that should appear indented in PDF output.

    -
    • - -
  • - 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 (, disks).

    -
    • - -
  • - Bus! -

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

    -
    • - -
  • - <m>\displaystyle \sum_{n=0}^\infty x^n = \frac{1}{1-x}</m> -

    A geometric series. The formula is valid if |x| < 1.

    -
    • -

    -     - - - Named Lists - named listlistnamed - -

    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.

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

    2. Orange

      3. -

    3. Yellow

      4. -

    4. Green

      5. -

    5. Blue

      6. -

    6. Indigo

      7. -

    7. Violet

      8. -
    - - -

    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 .

    - - - A named list of targets - -

    This is the introduction to this named list, which references an item within, via the hybrid text attribute: . At one time this paragraph was inadvertently centeredthat bug has been fixed.

    -     -
      -
    1. -

      -

        -
      1. A and i
        2. -
      2. A and ii
        3. -
      3. A and iii
        4. -
      -

      -
      2. -
    2. -

      -

        -
      1. B and a
        2. -
      2. B and b
        3. -
      3. B and c (target of some cross-references)
        4. -
      -

      -
      3. -
    3. -

      -

        -
      • 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):
        • -
      • Cross-reference within named list (hybrid):
        • -
      • Cross-reference within named list (local):
        • -
      • -

        -

          -
        1. C and bullet and 1
          2. -
        2. C and bullet and 2
          3. -
        3. C and bullet and 3
          4. -
        -

        -
        • -
      • C and bullet
        • -
      • C and bullet
        • -
      -

      -
      4. -
    -     - -

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

    - -

    listThis 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.
      2. -
    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.
        2. -
      Intermediate text.
        -
      1. First item, second list.
        2. -
      Concluding text.

      • -

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

    - -

      -
    1. This paragraph opens with an ordered list.
      2. -
    2. Testing the id, and other info that should be at the top of the paragraph.
      3. -
    Now the paragraph continues, and we have an index item here, so we can test cross-references back here.paragraphopens with list

    - -     - - - List Column Testing - -

    This is a list arranged into two columns with some intentional layout challenges. The math is too long to fit in one column and can't be wrapped - it reduces the number of columns in its row. The long text items can be wrapped and stay within their column. -

      -
    1. One item.
      2. -
    2. Two ducks.
      3. -
    3. - - 3u \amp {}+{} 1v \amp {}+{} 3w \amp {}+{} 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 - 2u \amp {}+{} 2v \amp {}-{} 2w \amp {}+{} x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 - 1u \amp {}-{} 3v \amp {}+{} 1w \amp {}+{} x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13 - -
      4. -
    4. Short item.
      5. -
    5. A long item that can be wrapped over multiple lines.
      6. -
    6. Four items.
      7. -
      8. -
    8. 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.
      9. -

    -     - - - - Exercises (with lists) - - - -

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

    2. Exercise 1, second part.

        -

      1. Exercise 1, second part, first refinement.

        2. -

      -
      3. -

    3. Exercise 1, third part.

      4. -

    -     -     - - - - - 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: . Exercise 1, second part, first refinement: .

    -     - -     - - - References (with lists in Annotations) - - - Some book would be listed here. - -

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

      -
    1. Book 1, first part.
      2. -
    2. Book 1, second part.
      3. -
    3. Book 1, third part.
      4. -

    -     -     -     -
    - -
    - Table Calisthenics - - - - c = 832 - c - - - -

    That was a Sage cell just now, which has nothing to do with tables. But we needed someplace to test placement right after a division heading. Carry on.

    - -

    A very minimal table, hence with left-justified cells, no borders. We do wrap the tabular element in a table element to get centering, numbering and a caption. Footnotes inside cells are tested here.

    - - - Some Colors - - - Red - GreenGreen can be a very sick looking color. - Yellow - - - Blue - White - Pink - - -
    - -

    Note that tables may be constructed using the Complex Table Editor tool online at latex-tables.comand then exported in syntax.

    - -

    Tables can be used and abused many ways. We describe long division of polynomials by using vertical and horizontal borders on individual entries of a tabular. The division lines are slightly thicker than the subtraction lines. This is a good example of the typical abuse of tables for horizontal and vertical layout. At least we have called it a Figure, not a Table.

    - -
    - Polynomial Long Division - - - - - - - - x - - - 5 - - - x - + - 2 - x^2 - - - 3x - - - 8 - - - - - - x^2 - + - 2x - - - - - - - - - - -5x - - - 8 - - - - - - - - -5x - - - 10 - - - - - - - - - - 2 - - -
    - -

    An example of aligning table cells' contents horizontally. See the source for comments.

    - - - - - - Horizontal Alignment Example - - - - - - - - - 1234567890 - 1234567890 - 1234567890 - 1234567890 - - - - - - [First - Second - Third - Fourth - - - - A - B - C - D - - - - 1 - 2 - 3 - 4 - - - -
    - -

    Example from above, but now with horizontal rules, plus an extra row to test the bottom border. See the source for comments.

    - - - - Horizontal Rules Example - - - - - - - - - 1234567890 - 1234567890 - 1234567890 - 1234567890 - - - - First - Second - Third - Fourth - - - - A - B - C - D - - - - 1 - 2 - 3 - 4 - - - - 1 - 2 - 3 - 4 - - - -
    - - -

    For a table without a caption, create a tabular and place it directly within the current division. This will allow control over the horizontal placment, but without a caption, there is no number, and the tabular cannot be cross-referenced.

    - - One - -

    Same example as before, but now with vertical rules. See the source for comments.

    - - - Vertical Rules Example - - - - - - - - - 1234567890 - 1234567890 - 1234567890 - 1234567890 - - - - First - Second - Third - Fourth - - - - A - B - C - D - - - - 1 - 2 - 3 - 4 - - - - 1 - 2 - 3 - 4 - - - -
    - - - Progressively Thicker Rules Example - - - - - - - 1111 - 2222 - 3333 - - - aaaa - bbbb - cccc - - - AAAA - BBBB - CCCC - - -
    - - - Column Span Example - - - - - - - 1111, 2222 - 3333 - - - aaaa - bbbb,cccc - - - AAAA - BBBB - CCCC - - -
    - -

    A list whose first item is a table. In output a \leavevmode is necessary to keep this organized (item number, then table as content).

    - -

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

    - - - Example Environment with Leading Table - - - - Column Spans, No <c>col</c> Elements, Nine Columns - - - - 1 - 2+3 - 4 - 5+6+7 - 8+9 - - - 1 - 2 - 3 - 4 - 5 - 6 - 7+8 - 9 - - - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - - -
    - -

    This example tests several things. In output, figures, tables, listings and side-by-sides are floats whose placement can migrate, but we have tries to supress this behavior. However, a float that is the first item of an environment (like a theorem or an example) can still float to a position before its title. If that does not happen here, then our additional defenses are working.

    - -

    This example also checks that the total number of columns is correctly computed from the first row, which features several colspan attributes.

    -     - -

    A bare minimum table (one row with one cell) to test edge cases:

    - - - One entry table - - - One - - -
    - -

    Table cells with a fixed width where text wraps are known as paragraph cells. A cell will be created as a paragraph cell if and only if it has p children. And such cells should only have p children. The width of a paragraph cell is determined by a width attribute on the corresponding col (as a percentage). If the column has a non-paragraph cell with contents that are wider than the paragraph cells, results will be undesirable. There is presently no implementation for a paragraph cell that has a colspan greater than 1, although cells with colspan greater than 1 that are above or below a paragraph cell will behave. Setting width on a col that has no paragraph cells may produce unexpected results. A valign for the parent row (or the ambient tabular) can control vertical alignment (top, middle, or bottom). A paragraph cell's halign attribute (left, center, right, or justify) controls how the text is justfied. Cells inherit halign from row, col, and tabular in that order of preference. In a non-paragraph cell where halign='justify', the horizontal alignment will match the behavior of halign='left'.

    - - - Time Units - - - - - - - Unit - Stands For - Definition - Roughly - - - - second -

    the duration of 9192631770 periods of the radiation corresponding to the transition between the two hyperfine levels of the ground state of the cesium-133 atom

    -

    an extraneous paragraph just to demonstrate the inter-paragraph formatting.

     -

    the time it takes you to say the phrase differential calculus

     -     - - - minute -

    exactly 60 seconds

     -

    how long it takes to microwave a full dinner plate from the refrigerator

     -     - - - hour -

    exactly 3600 seconds; exaclty 60 minutes

     -

    the length of one episode of a premium cable television show

     -     - -
    - -

    Table cells can have multiline content using line elements. This is not the same thing as a paragraph cellline breaking will happen precisely where the author tells it to. A line will not break, even on a narrow screen. If a cell uses a line, it must only use a sequence of lines and no other content. As with paragraph cells, you can use a valign attribute for the row.

    - - - <abbr>Dr.</abbr> Seuss lines - - - - One Fish - Two Fish - Red Fish - Blue Fish - - - I am the Lorax. - I speak for the trees. - Self-referential: - - - Look at me! - Look at me! - Look at me NOW! - It is fun to have fun. - But you have - to know how. - - - -
    - -

    This is a table torture test with many combinations of halign, valign, colspan, p children, and line children.

    - - - Table Torture Test - - - - - - - - - - - - - - - - - - - Cell too wide - - - - Lf md -

    Lef mid par cel

     - Rt md -

    Rig mid par cel

     - Cn md -

    Cen mid par cel

     - Js md -

    Jus mid par cel jus mid par cel

     - -     - - Colspan=2lef midwith lines - Colspan=3 rig mid - LinesBetweenPar - LinesBetweenNo Par -

    Par in row with lines

     - -     - - L t -

    Lef top par cel

     - R t -

    Rig top par cel

     - C t -

    Cen top par cel

     - J t -

    Jus top par cel jus top par cel

     - -     - - L b -

    Lef bot par cel

     - R b -

    Rig bot par cel

     - C b -

    Cen bot par cel

     - J b -

    Jus bot par cel jus bot par cel

     - -     - - Colspan=3 lef bot - Colspan=2rig botwith lines - LinesUnderPar - LinesUnderNo Par -

    Par in row with lines

     - -     - -
    - -

    And now a sidebyside with a table and a tabular to check that width is scaled appropriately. See Section to learn about sidebysides.

    - -
    - Some text from the US Constitution - - - - - - A1.S1 -

    All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.

    -

    Should be 50% of 45% except perhaps on small screens.

     -     -     - - - - - - A1.S2.C1 -

    The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.

    -

    Should be 50% of 55% except perhaps on small screens.

     -     -     -     -
    - -

    Tables are formed in output with copious use of the \multicolumn macro to override more global alignment settings, and to spread the content of one cell across several columns. However, sometimes 's special characters have behaved badly in this situation. So the table below, two items per row, is just designed for testing. But of course, it should still render fine in other formats. The three test cases are from , but without 50 alphabetic characters and 8 digits, which should not be problems in this context. In order to test the use of a percent sign (%) in a URL, we follow it by two hex digits, specifically, 58, which is a way to represent the character X in a URL. The first column's entries are forced to be wrapped in a \multicolumn by specifying their horizontal alignment. The second column's entries will not be wrapped in a \multicolumn. So the two columns will look identical, other than the first having a left alignment, and the second has the default center alignment. (This table is known to render poorly in a Jupyter notebook. The cause is four dollar signs present in rows 1 and 3, and is explained in .)

    - - - Problematic Table Cells for <latex/> - - - 1 - 09az%-._~:/?#[]@!$&'()*+,;= - 09az%-._~:/?#[]@!$&'()*+,;= - - - - 2 - e.com/09az%58-._~:/?#[]@!$&'()*+,;= - e.com/09az%58-._~:/?#[]@!$&'()*+,;= - - - - 3 - - - - -
    - -

    Now, the same table repeatedly, but with different headers. No care has been taken with alignment or rules, which could improve how these look.

    - - - No Headers - - - 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 - - -
    - - - One Row Header - - - 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 - - -
    - - - One Row Header, Multiline - - - 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 - - -
    - - - Two Row Headers - - - State - Population - Area - Statehood - - - - - (sq. mi.) - (Year) - - - Washington - 7,614,893 - 71,362 - 1889 - - - Oregon - 4,217,737 - 98,381 - 1859 - - - California - 39,512,223 - 163,696 - 1850 - - -
    - - - One Vertical Row Header - - - 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 - - -
    - - - One Vertical Row Header, Multiline - - - 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 - - -
    - - - Two Vertical Row Headers - - - State - Population - Area - Statehood - - - - - (sq. mi.) - (Year) - - - Washington - 7,614,893 - 71,362 - 1889 - - - Oregon - 4,217,737 - 98,381 - 1859 - - - California - 39,512,223 - 163,696 - 1850 - - -
    - - - One Row Header, with Rules - - - 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 - - -
    - - - One Row Header, Multiline, with Rules - - - 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 has a progression of thicker rules in the header, plus a progression of thicker rules across the columns. For testing, not for aesthetics.

    - - - Two Row Header, Many Rules - - - - - - - State - Population - Area - Statehood - - - - - (sq. mi.) - (Year) - - - Washington - 7,614,893 - 71,362 - 1889 - - - Oregon - 4,217,737 - 98,381 - 1859 - - - California - 39,512,223 - 163,696 - 1850 - - -
    - -

    We now finish this section with some long tables. Ones that will not fit on a single printed page. So this is only of interest when producing this sample article as a PDF. First a naked tabular, which should force a new page to start, and then still overrun the end of the page.

    - - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - -

    Now the same tabular, but within a table. Behavior should be similar, a new page and then it overruns the bottom of the page.

    - - - - A Lot of Colors - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - -
    - -

    When you wish to allow a tabular to split itself at a page break, you can add the attribute break with the value yes. Certainly this will control a table or tabular which is longer than a page, but will also allow a shorter one to break. This might useful in a draft stage before undertaking page-fitting.

    - -

    Here is the long tabular again, but with the break attribute set to yes.

    - - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - -

    Here is the long table again, but with the break attribute set to yes on the tabular.

    - - - A Lot of Colors, Breaking - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - - Red - Green - Yellow - - - Blue - White - Pink - - -
    - -

    This device is not ideal, as some features of tables are not behaving as expected. More precisely, we switch from the standard tabular environment to the longtable environment from the package of the same name when table-breaking is requested. So there may be some undesirable interaction with other packages. For one, full-width horizontal rules seem to become as wide as the page (rather than as wide as the tabular). The following table is repeated but as a breakable tabular. The longtable package documentation suggests it accomodates the array package, but it also seems to make a variety of redefinitions. Furthermore, a panel of a side-by-side cannot be a breakable tabular, or a compilation error occurs.

    - - - Horizontal Rules Example - - - - - - - - - 1234567890 - 1234567890 - 1234567890 - 1234567890 - - - - First - Second - Third - Fourth - - - - A - B - C - D - - - - 1 - 2 - 3 - 4 - - - - 1 - 2 - 3 - 4 - - - -
    - -

    Here is a consecutive pair of bare tabular to test vertical space between them.

    - - - - - t - 2/3 - 2/303 - 2/30003 - 2/3000003 - - - g(t) - -1 - -1 - -1 - -1 - - - - - - - t - 2/5 - 2/505 - 2/50005 - 2/5000005 - - - g(t) - 1 - 1 - 1 - 1 - - - -

    The longtable package allows for headers and footers indicating continued tables. A possible enhancement is to support this feature in the case of a long table.

    -
    - -
    - Interactive Elements, Authored in Javascript - - Interactive Elements, Authored - - Interactive Elements, Authored - interactive elementsauthored - embedded interactive elementsauthored - - - -

    When outputting Web page versions, it is possible to embed a variety of dynamic interactive elements. In a /PDF version, these will necessarily need to be replaced by some static substitute, such as a screenshot. See for the specifics of embedding instances of the Sage Cell Server, which is more elaborate, and not entirely similar.

    - -

    Interactives in this section are those for which you provide code you have authored. Generally, the libraries involved to support this have open licenses, though the player for GeoGebra may be an exception. Creating these assumes some familiarity with HTML and Javascript. See for more interactives that are perhaps simpler to create or use.

    - -

    (2018-06-22) Almost everything in this section is under active development and not stable yet. Feel free to experiment and make suggestions and requests. This page takes a while to completely load, so be patient.

    -     - - - HTML5 Canvas - -

    HTML5 introduced the canvas element, which can be thought of a blank slate, a place to draw or write on. So has the slate element for a similar purpose. Generally, but not exclusively, HTML5 writes on a canvas using the Javascript language. We demonstrate this approach to interactive diagrams in this subsection.

    - -

    The following examples are from David Austin's excellent Understanding Linear Algebra textbook, which can be found at - merganser.math.gvsu.edu/david/linear.algebra/ula/index.html - David's contribution of examples, and assistance designing the elements is greatly appreciated. Alright, let's learn some linear algebra. Yes, there are some learning opportunities in this subsection.

    - -
    - A simple eigenvector demonstration - - - - -

    Let \vec{x} be represented by the red arrow, and A\vec{x} by the grey arrow, for some particular 2\times 2 matrix A. Drag the tip of the red arrow to see the grey arrow change.

    -     -     -
    - - -

    The interactive in shows a vector \vec{x} in red, and the matrix-vector product A\vec{x} in grey, for a particular 2\times 2 matrix A. The four entries of the matrix A are coded into the interactive. Can you deduce A simply by using the interactive? Which theorem is the key?

    -     - -
    - Eigenvector demonstration - - - - - -

    Let \vec{x} be represented by the red arrow, and A\vec{x} by the grey arrow, for a 2\times 2 matrix A. Drag the tip of the red arrow to see the grey arrow change. Or drag the blue sliders to change the numerical values of the four entries of the 2\times 2 matrix A. You will not see the grey vector until you change the matrix using one of the two sliders on the left. Why is that? What are the eigenvectors of the initial matrix?

    -     -     -
    - -

    The next example has ten slate elements communicating with each other, and arranged with the layout features of a sidebyside (see ).

    - -
    - Affine Transformations - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Flipping Woody -

    Parameters a, b, d, and e, form a 2\times 2 matrix A, while c and f form a vector \vec{b}. The two views of Woody shows the effect of the mapping \vec{x}\mapsto A\vec{x} + \vec{b}.

    -     -     -
    - - -

    If your interactive employs a slate with a surface attribute whose value is html, then you are advised to augment each top-level (HTML) element within the slate with the attribute: - xmlns="http://www.w3.org/1999/xhtml" - This will identify all of the elements within the slate as HTML elements and not as elements. The danger is that elements with the same name in both languages, such as li and table, will be mis-identified. This could be harmless, but could also create chaos, such as disrupting numbering of elements.

    - -

    See the source code of this document for examples: , .

    - -

    Note that the HTML that is output can vary slightly from your source in small, harmless ways, such as empty (self-closing) elements being output with both an opening and a closing tag. Please report any significant discrepancies. Soon this requirement will be enforced in the code.

    -     - -

    It is also possible to add script elements within an interactive that contain properly escaped JS code. These elements will be placed at the end of the document created to hold the interactive content and can interactive with the other elements within the interactive but can not directly interact with the surrounding page.

    - -

    Authors are strongly discouraged from trying to incorporate complex code in the form of a script, but it can be a useful tool to call more complex code that is linked via source on the interactive.

    - -

    This example uses a script to draw Hello World to a slate

    - -
    - A simple embedded script example - - - - - -
    - -     - - - D3.js - D3.js - -

    D3 is a Javascript library for Data-Driven Documents, which might greatly enhance some data you wish to display. In short, it uses the animation capabilities of SVG. Available examples seem sensitive to the version of the library, so we have examples using different versions. Use the version attribute on interactive to specify the version number. The default is 5.

    - -

    The first example uses the force layout and collision detection from Version 3. (The necessary commands are very different in Version 4.) Pretend you are a working shepherding dog. Can you separate, and catch, one of the herd?

    - -

    This is adapted from a block by Mike Bostock with a GPL license. A similar demonstration, only using an HTML5 canvas is at .

    - -
    - Force layout and collision detection - - - -

    Place your mouse/pointer at the center of the interactive to repel the 200 circles.

    -     -     -
    - -

    Similar, but different, this demonstration of a graph layout uses Version 4 of the library. Technical notes:

      -
    • We have changed the size of the nodes, and their number, to fit in a smaller space.
      • -
    • The Javascript script uses introspection to size itself, which would be a good general practice.
      • -

    - -

    This is adapted from a block by shimizu with a GPL license.

    - -
    - Graph Layout - - - -

    Drag a vertex to a new location to see the graph adjust its layout.

    -     -     -
    - - - Graph Planarity - -

    Can you move the vertices to new locations such that the resulting graph is planar? (In other words, no edges cross?)

    -     -     - -

    Finally an example that actually uses some data. Here is the description from the original block by Martin Chorley with an MIT License.

    - -
    -

    This visualisation uses a D3 force simulation to show the Twitter relationships between the Assembly Members in the Welsh Assembly in terms of the number of times each assembly member has mentioned another assembly member in a tweet.

    - -

    Twitter relationships were mined on 22/03/2017, and are representative of the conversational relationships on that date. Links between AMs represent a conversational relationship: one AM has mentioned the other. Party colour indicates the direction of the mention.

    - -

    Hover over the nodes to fade out non-connected nodes.

    - -

    Rather than using intermediate nodes to create curved links (as in Mike Bostock's block), this adds curves by adding a calculated control point for each edge.

    -
    - -

    Technical notes:

      -
    • Once the nodes organize themselves (automatically in the beginning), they cannot be moved.
      • -
    • We have adjusted the margins in an attempt to keep names visible on the right side, but without giving up too much space.
      • -
    • We have adjust the repelling force, and the collision buffer, to better fit the available space.
      • -
    • This example required its own CSS, which we have included as part of the interactive.
      • -
    • The data collected from the Twitter analysis is contained in a JSON file, mention_network.json, and where the script loads that file, it has a hardcoded path. So this example is a bit brittle, should that file move.
      • -

    - -
    - Tweet mentions within the Welsh Assembly - - - -

    Hover on the name of an Assembly Member to concentrate on their tweet mentions.

    -     -     -
    -     - - - SVG - -

    Entirely similar to using an HTML5 canvas element (), it is possible to control an SVG element with Javascript. This example is from Mark McClure.

    - -

    Look carefully at the source and rendering of this example as HTML. The functions to choose from via radio buttons, and the change in x, denoted later as h, are being rendered as mathematics by the Javascript MathJax library. However, this cannot be accomplished with simply $...$ nor by simply \(...\), but instead by using the \(...\) and then also wrapping that in a span element with a class attribute set to process-math. (The latter is how we instruct MathJax as to which parts of a page to process, or not). So to have MathJax render a nice x^2 in this context (math inside HTML inside a slate inside an interactive) would be accomplished with - <span class="process-math">x^2</span> -

    - -
    - Tangent and secant slopes - - - -
    - Calculus consists of those problems in mathematics that can be solved with the - following basic approach: -
    -
    - Approximate and take a limit! -
    -
    - The simplest, standard, geometric example of this process is the approximation - of the slope of a tangent line with a secant line. - Here's an illustration of this basic idea. -
    -
    - Choose \(f\): - - - \(f(x)=x^2\) - - - - \(f(x)=\frac{1}{3}e^x\) - - - - \(f(x)=\sin(2x^2)+x/4\) - -
    -     - - - - -
    - - - - - -
    - - -
    Show secant line
    		 - - - -
    \(h\) =
    secant slope =
    tangent slope =
    -
    -     - -

    Select a function with the radio buttons, then use the checkbox to add the secant line. The denominator of the difference quotient, h, can be adjusted with the slider and the red point will react to the different values. The green point is the point of tangency, and can be dragged with the mouse.

    -     -     -
    - - - Changing Secant Lines - -

    When discussing the derivative as a limit, we think of the point of tangency as being fixed (the green point in ) and the other point defining the secant line as changing (the red point in ). Switch it up! Fix a large value of h (positive or negative) and then change the point of tangency (the green point). Discuss what you observe.

    -     -     -     - - - JSXGraph - JSXGraph - -

    JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser. Now a slate will be what JSXGraph calls a board. Again, you use Javascript to write onto a slate, but have some powerful shortcuts available from the JSXGraph library. For this reason, calls JSXGraph a language, similar in may respects to how Sage is a language, but is really a Python library. So realize that the syntax for using JSXGraph is that of Javascript.

    - -

    Place Javascript inside a file that is specified with the source attribute of the interactive element. Then just be certain that xml:id of the interactive element is passed as the HTML id in an (early) call to JSXGraph's initBoard() method.

    - -

    The following example was contributed by Rick Roesler. The figure is comprised of four stack elements within a sidebyside. By varying the time in the top box, the reader can observe the displacement, velocity, and acceleration of a ball thrown upward with an initial velocity of 30 m/s.

    - -
    - 1-Dimensional Kinematics - - - - - - - - - - -

    Use the time slider in the top panel to vary the time from 0 sec to 6 sec. Observe how the displacement, velocity, and acceleration vary with time.

    -     - - - -     -
    - -

    The plot below is the curve r=a+b\theta in polar coordinates, for 0\leq\theta\leq 8\pi. It may be manipulated with the sliders to control the shape of the curve. Point A is contrained to the curve, but may be dragged to a new location. At A the tangent line and normal line are plotted as dashed red lines. Use the controls in the lower left to adjust the viewing window. This Archimedean Spiral is taken from the JSXGraph example wiki. The code could be written in 7 lines. Width is 80% and aspect ratio is 4:3.

    - -
    - The Archimedian Spiral r = a + b\theta, 0\leq\theta\leq 8\pi - Archimedian Spiral - - - - -

    Drag the sliders to change the parameters a and b. Controls in the lower-right will adjust the viewing window.

    -     -     -
    - -

    Here is a more elaborate example, from the JSXGraph Showcase, titled Infinity.

    - -

    There are two active sliders to control the shape and shading of the graphic, and hovering the mouse near one of the edges will highlight the entirety of one of the 30 quadrangles. Finally, each of the four red corners may be dragged to a new location. Code is 47 lines. Width is 60% and aspect ratio is the default, 1:1, a square.

    - -
    - Infinity, from the JSXGraph Showcase - - - - -

    Drag the sliders to change the pattern, and drag any of the four red corners to change the overall shape.

    -     -     -
    - -

    Here are the two new examples. They have been included in a sidebyside layout element with equal widths (see ) so they can be placed horizontally across the page. They are not wrapped as figures, so cannot be cross-referenced. These are again from the JSXGraph example wiki, the left being Fermat's Spiral and the right being a demonstration of B-splines.

    - - - - - -

    Drag the slider to change the curve.

    -     -     - - - - -

    Any of the 8 red control points may be moved anywhere.

    -     -     -     - -

    Finally, a piecewise function you can control, with traces of the domain values and range values in two other JSXGraph boards. Boards and HTML buttons have been laid out using the sidebyside layout element.

    - -
    - Piecewise Function - - - - - - - - - - - - - - - - - - - - -

    The slider of the left panel will trace out the piecewise function. Simultaneously, the domain will be traced in the middle panel, and the range in the right panel.

    -     -     -
    - -

    Generally, we load an interactive into an HTML iframe to sandbox (isolate) it from other interactives. We does this for your own protection. So, for example, one interactive cannot talk to another. If two slate need to communicate, then they are related, and should be placed into a single interactive, allowed to layout themselves, or grouped within a sidebyside allowing finer control. Even if we have this under control, you might still enjoy reading Your JS is a Mess at mikecavaliere.com/your-js-is-a-mess-javascript-namespacing/.

    -     - - - JessieCode - JessieCode - -

    JessieCode is a scripting language for JSXGraph. It provides the core geometric and graphing features of JSXGraph without accessing the underlying JavaScript. In order to use JessieCode, you simply create the HTML div element as you would for any other JSXGraph interactive plot and then provide the JessieCode script, which focuses on the geometric elements.

    - -

    Because JessieCode is provided by JSXGraph, the interactive platform is jsxgraph. The slate, however, uses surface with value jessiecode. The script can be embedded directly in your code. As usual, you would need to remember to escape the special characters. JessieCode uses < and > for inequalities as well as for declaring objects used to style geometric elements, and && is the boolean AND operator. Alternatively, you can provide the file as a separate resource, providing the URL with a source attribute. Attributes defining the JSXBoard at the time it is created should be included as attributes of the slate, including boundingbox, axis, and grid.

    - -

    For this first example, the JessieCode was included directly in the XML source as the contents of the associated slate.

    - -
    - Finding the Tangent Line of a Quadratic Function - - - - - a = slider([-4.5,4], [-1.5,4], [-2,1,2]) - << - name:"a", - snapWidth:0.25, - point1: << frozen: true >>, - point2: << frozen: true >> - >>; - b = slider([-4.5,3.5], [-1.5,3.5], [-4,-1,4]) - << - name:"b", - snapWidth:0.5, - point1: << frozen: true >>, - point2: << frozen: true >> - >>; - c = slider([-4.5,3], [-1.5,3], [-4,0,4]) - << - name:"c", - snapWidth:0.5, - point1: << frozen: true >>, - point2: << frozen: true >> - >>; - fGraph = functiongraph(function(x) { - return a.Value()*x^2 + b.Value()*x + c.Value(); - }); - P = glider(1,0, fGraph); - Q = point(2,2) - << name:"P" >>; - secant = line(P,Q) - << color: (function() { - m = (Q.Y() - P.Y())/(Q.X() - P.X()); - dydx = 2*a.Value()*P.X() + b.Value(); - cVal = "red"; - if (abs(m-dydx) < 0.001) { - cVal = "blue"; - } - return cVal; - }) - >>; - dydxValue = text(-4, 1.5, function() { - m = 2*a.Value()*P.X() + b.Value(); - return ("dy/dx = " + trunc(m,3)); - }) - << frozen: true >>; - mValue = text(-4, 1, function() { - m = (Q.Y() - P.Y())/(Q.X() - P.X()); - return ("m = " + trunc(m,3)); - }) - << frozen: true >>; - - -

    Use the sliders to set the parameters of the quadratic f(x)=ax^2+bx+c. Drag the point A on the graph and the point P to define a line. Try to make the line tangent at the point at A and observe the resulting slope of the tangent line.

    -     -     -
    - -

    For this second example, the JessieCode was included through an associated script file, loaded by the browser.

    -
    - Graph of a function that is continuous but not differentiable at x=0 because the slope of the secant line has no limit. - - - -

    Drag the point B to move the point on the graph and change the secant line. Notice that there is no well-defined limiting tangent line as x \to 0.

    -     -     -
    -     - - - Sage Interacts - Sageinteracts - -

    Sage, and the Sage Cell Server, support interactive demonstrations, called interacts.

      -
    • The interactive elements are nearly trivial to construct.
      • -
    • An interact is simply a single Python function (acted on by a decorator).
      • -
    • You have the full mathematical power of Sage at your disposal, so can do some very powerful computations with high precision (or exactly).
      • -
    • The interface is not as polished as what you can achieve with Javascript libraries.
      • -
    • Graphics refresh with a round-trip to the server, so are not nearly as fluid as with other tools.
      • -
    Note that each interact is insulated from the others, unlike our other employment of the Sage Cell Server.

    - -

    This example is by Marshall Hampton, taken from the Sage interact wiki, specifically Numerical integrals with the midpoint rule.

    - -

    Also notice that when viewed in dark mode, this sample respects the rendering intent. That is due to dark-mode-enabled applied to it.

    - - - -
    - Numerical integrals using the midpoint rule - - - - - - - var('x') - @interact - def midpoint(n = slider(1,100,1,4), f = input_box(default = "x^2", type = str, width=40), start = input_box(default = "0", type = str, width=6), end = input_box(default = "1", type = str,width=6)): - a = N(start) - b = N(end) - func = sage_eval(f, locals={'x':x}) - dx = (b-a)/n - midxs = [q*dx+dx/2 + a for q in range(n)] - midys = [func(x=x_val) for x_val in midxs] - rects = Graphics() - for q in range(n): - xm = midxs[q] - ym = midys[q] - rects = rects + line([[xm-dx/2,0],[xm-dx/2,ym],[xm+dx/2,ym],[xm+dx/2,0]], rgbcolor = (1,0,0)) + point((xm,ym), rgbcolor = (1,0,0)) - min_y = min(0, find_local_minimum(func,a,b)[0]) - max_y = max(0, find_local_maximum(func,a,b)[0]) - pretty_print(html('<h3>Numerical integrals with the midpoint rule</h3>')) - pretty_print(html('$\\int_{a}^{b}{f(x) dx} {\\approx} \\sum_i{f(x_i) \\Delta x}$')) - print("\n\nSage numerical answer: " + str(integral_numerical(func,a,b,max_points = 200)[0])) - print("Midpoint estimated answer: " + str(RDF(dx*sum([midys[q] for q in range(n)])))) - show(plot(func,a,b) + rects, xmin = a, xmax = b, ymin = min_y, ymax = max_y,figsize=5) - - -
    - -     - - - Geogebra - -

    To embed a GeoGebra applet as-is from GeoGebra's Classroom Resources site (by material ID), see . To design your own applet (either from scratch, or modifying something that already exists in one of those three forms) you may use one of Geogebra's Apps to embed the material in your document. (But note, use of the App comes with licensing restrictions.) will handle most of the technical details for you.

    - -

    Do one of the following:

      -
    1. Identify a material ID from GeoGebra's Classroom Resources site. You might even make the material yourself on that site.
      2. -
    2. Obtain a .ggb file from GeoGebra. You might construct something on a desktop installation of GeoGebra and save it. If you have a base64-encoded string for a GeoGebra applet, but you don't have a .ggb file, you can decode the string and save the result. For example, at .
      3. -
    3. Obtain a base64 encoded string for a GeoGebra applet. You might first open a .ggb file in a desktop installation of GeoGebra, and push ctrl-shift-B (command-shift-B on a Mac) and then the string will be in your clipboard.
      4. -
    4. None of the above, with the intention to make an applet from scratch.
      5. -

    - -

    Then mimic the examples that follow, using GeoGebra API commands documented at Geogebra API Manual, but do not include the ggbApplet. or applet. used in examples to prefix the functionsthat part of the code will be provided automatically by .

    - -

    Jack Green created an applet on the Classroom Resources site with ID D4s2v4ft, which you may view at . Suppose you would like to use this in your project, but change something about it. We will change something trivial, making the y-axis ticks be separated 5 apart instead of 10 apart. We also decide we want a different aspect ratio and overall width. One gotcha: the original applet is loaded and then uses width and aspect attributes to resize the viewing window using the top left corner as an anchor. This does not rescale axes and that may leave you with important elements missing from the viewing window. So here we reset the viewing window to return to values that are in the original. Lastly, we disable zooming, which is not helpful for this applet. To do each of these things, we rely on the GeoGebra API manual at Geogebra API Manual. It is important to use one command per line.

    - -
    - GeoGebra: modified material ID - - - setAxisSteps(1, 1, 5, 1); - setCoordSystem(-0.7, 8, -6, 56); - enableShiftDragZoom(false); - - -
    - -

    The same can be done with a .ggb file. Here we use two provided by David Rosoff, and one provided by Tevian Dray. The path to the file needs to be relative. First, David's original.

    - -
    - GeoGebra: .ggb file - - - -
    - -

    Now we modify David's applet in a few ways.

    - -
    - GeoGebra: modified from .ggb file - - - setCoordSystem(-6, 10, -6, 6); - setLabelVisible("b", false); - setLabelVisible("c", false); - setLabelVisible("d", false); - setAxisLabels(1,"x","y","z"); - evalCommand("r = Slider(1,4,0.1)"); - showResetIcon(true); - - -
    - -
    - GeoGebra: modified from .ggb file - - - setCoordSystem(-15,5,-5,5); - setAnimating("θ", true); - - -
    - -

    In this one provided by Tevian Dray, we make no modifications (except for those imposed by the scaling). You will need to zoom out a bit, and then pan over some, to see all the pieces.

    - -
    - GeoGebra: a constructive proof that SAS congruence holds in Euclidean geometry (from Tevian Dray) - - - -

    Drag some of the points and some of the circles to change them, and watch the remainder react.

    -     -     -
    - -

    You could also use a base64-encoded string of the .ggb file. You might come across such a string somewhere, or you might generate one by opening a .ggb file in a desktop installation of GeoGebra, and pushing ctrl-shift-B (command-shift-B on a Mac) to get the string in your clipboard. If you do this, you could use a base64 attribute in place of the source attribute in the previous example. We don't do that here because such a string is generally over 5000 characters long and we are keeping the sample article source a bit cleaner.

    - -

    The next example shows how you can communicate between a GeoGebra applet and a slate contained in the interactive. The process is mediated by javascript code specified in the source attribute of the interactive. Event listeners in the code update the HTML when the diagram changes or vice-versa. MathJax is also notified when it needs to update math.

    - -

    Note that this example has a slate whose surface is pretext and a slate whose surface is html, the latter requiring a namespace declaration. The former produces HTML according to the templates, which is fairly predictable, but never guaranteed to always be identical over time. A slate uses familiar syntax, produces results styled consistently, but might break in the future. While an HTML slate is similar, the results will not be styled, but it does allow for a wider range of HTML elements (a button element here) and will not change over time.

    - -

    The indefinite integral in the last row of the table is a gratuitious test that aurhors' macros from docinfo are available to MathJax. Finally, a slate will only recognize p, tabular, sidebyside, and sbsgroup as children. Make a feature request if you have a good case for more.

    - -
    - Geogebra/ Communications - - - evalCommand("B2 = 3"); - evalCommand("C2 = -1"); - evalCommand("D2 = 2"); - evalCommand("B3 = -1"); - evalCommand("C3 = 4"); - evalCommand("D3 = 1"); - setValue("showAB",true); - setValue("showBA",false); - evalCommand("ZoomIn(-Z,-Z,-Z/2,Z,Z,Z/2)"); - evalCommand("SetViewDirection((1,1,1/2))"); - enableRightClick(false); - - - - - - - - - - - - \ - x - y - z - - - - \mathbf{A} - - - - - - - \mathbf{B} - - - - - - - \indefiniteintegral{x^4}{x} - - - - - - - - -

    - - -

    -     -     - - -

    - - -

    - This interactive shows \vec{r}_{AB}, the displacement vector from \vec{A} to \vec{B} and the corresponding unit displacement vector \lambda_{AB}. -

    - -

    - You may change \vec{A} and \vec{B} by moving the red and blue dots. - Click the dot to switch between x-y mode and z mode. - Coordinates of \vec{A} and \vec{B} can also be entered into the table directly. -

    - -     -
    - -

    Lastly, you may just wish to build something from scratch using GeoGebra API. Note that for accessibilty reasons, some objects are rendered unselectable with the setFixed command. Perhaps this should have been done with the previous examples, but that is more difficult when you do not know all of their names. Note that the GeoGebra scripting command setAttribute also changes the webpage's focus, so it is better to set the perspective using an attribute of the slate.

    - -
    - GeoGebra: from scratch - - - setRounding("3s"); - setCoordSystem(-1,1,-1,1); - setGridVisible(false); - setAxesVisible(false, false); - evalCommand("f(x)=If(x>0,sqrt(x),0)"); - setVisible("f", false); - evalCommand("T=20"); - evalCommand("t=Slider(0,T)"); - setAnimating("t", true); - evalCommand("v=Vector((cos(t),sin(t)))"); - evalCommand("r=Slider(0,1)"); - evalCommand("r=(sqrt(5)-1)/2"); - evalCommand("r=Slider(0,1,0.001)"); - evalCommand("N=Min(100,floor(T/r))"); - evalCommand("Seeds = Sequence(f(t - n r) / sqrt(T) (cos(n r 2 pi), sin(n r 2 pi)), n, 0, N)"); - setFixed("v", false, false); - setFixed("Seeds", false, false); - - -
    - -     - - - CircuitJS - -

    CircuitJS is an electronic circuit simulator. A circuit can be described by a language, which PreTeXt will interpret and submit for rendering. The next two examples are identical, but provided in slightly different ways, see the source for more. Preview images for PDF will be added later.

    - -
    - CircuitJS Example (source via an encoded attribute) - - -
    - -
    - CircuitJS Example (source authored directly) - - - - $ 1 0.000005 10.20027730826997 58 5 50 5e-11 - R 464 32 464 -16 0 0 40 3.3 0 0 0.5 - g 464 224 464 240 0 0 - s 464 32 464 128 0 0 false - s 464 128 464 224 0 1 false - x 274 181 431 184 4 12 bottom\sswitch\s(to\sground) - x 312 85 426 88 4 12 top\sswitch\s(to\sVdd) - O 464 128 544 128 1 0 - x 532 110 593 113 4 12 output\spin - - -
    -     - - - IFrames from Files - -

    An iframe is an HTML element that allows embedding of a complete web page within another one. Here we use this device to provide interactive 3D diagrams built with other tools.

    - -

    We begin with a Jupyter notebook hosted on . News of success on other hosts for Jupyter notebook servers will allow us to expand this description. We use a Sage kernel and create a 3D surface suggested by Juan Carlos Bustamante: - var('x,y') - plot3d(x^2 - y^2, (x,-1,1), (y,-1,1), color="orange", mesh=true) - - News of other computational engines that produce similar graphics will also allow us to further expand this description. Note that for the case of Sage 3D plots, support for the sageplot element makes this even easier. For example, see .

    - -

    A button in the lower right allows for several options, one is Save as HTML, which will produce a complete self-contained web page we can recycle. We save this file with our other externally-created images, in a directory that we choose to name iframeyou can use another name. Then we make an interactive with an iframe attribute that has the filename, starting from iframe/ (in other words, do not include the name of your managed directory of external images).

    - -
    - Sage+Jupyter iframe - -
    - - -

    Note that the downloaded file has links to specific versions of the three.js library, which are beyond our control, and beyond your control. So there is a future where these images may need updating. You could put your source code into a (large) comment with your project's source for safe-keeping in the future. See for the server version.

    -     - - - threejs - -

    Once upon a time there was an example here using the threejs 3D Javascript library. It was one of the project's examples, licensed with an MIT License, with minimal modifications.

    - -

    But it would seem to have become a bit more complicated to embed and our example was not rendering. As of 2022-08-08, we have removed it. Of course, you can find it in the git repository, perhaps searching on the date string just mentioned. It woulld be interesting to see if our interactive framework could still support the changes.

    - -

    The following two examples are meant to be instructive (only). The end result is accomplished in a much more straightforward way be the method in . We illustrate a way to get a three.js image out of an HTML page as a Javascript file and render it on a slate. We follow the second method in a blog post from the n-Category Cafe.

      -
    1. Open a Jupyter Notebook that utilizes a Sage kernel. This can be done easily at CoCalc (and for free initially).
      2. - -
    2. Sketch a surface using Sage code. We recycle the suggestion from Juan Carlos Bustamante in : - var('x,y') - plot3d(x^2 - y^2, (x,-1,1), (y,-1,1), color="orange", mesh=true) -
      3. - -
    3. Look for a button (in the lower-right) which will provide a menu option Save as HTML. Save the resulting HTML file, and open a copy in a text editor.
      4. - -
    4. -

      You are now looking for two HTML script elements. One will tell you just which version of three.js is being used, vis a @src attribute. For the second example below we located - https://cdn.jsdelivr.net/gh/sagemath/threejs-sage@r122/build/three.min.js - The @r122 will likely be a version number, which is a good thing for the longevity of your work. This will get used in the source attribute of your interactive, which will have platform set to javascript.

      - -

      The second script element is likely huge and has many generic functions defined it. There may be a huge variable full of data points computed by Sage. Copy the contents of this script element into a new Javascript file (so use a .js extension). Do not edit in any way until you read further. Once adjusted, this file too gets specified in the source attribute of your interactive.

      -
      5. - -
    5. Your interactive needs a slate element for the graphic to draw on, and you will need to give it a proper xml:id attribute, plus teh surface will be set to div. Then you need to edit the Javascript file to connect the graphic with the slate, via IDs in your source and on teh HTML div created by the slate. Look at the provided examples to see how. Do not make any other edits to this file, even if tempted.
      6. - -
    6. Study the two examples below, and mimic how they were constructed.
      7. -

    - -

    First, the example given in the blog post referenced above.

    - -
    - threejs catenoid surface, from n-Category Cafe - - - -
    - -

    Second, the example from JC Bustamante.

    - -
    - threejs saddle by Sage - - - -
    - -     - - - DoenetML - -

    - DoenetML is a markup language - inspired by for semantically describing interactive - mathematics applets for the web. Use - interactive[@platform="doenetml"] with a - slate[@surface="doenetml"] to include DoenetML content - within your document. -

    -

    - Since DoenetML is similar to, - but not completely compatible with, XML, it cannot be authored - directly within a PreTeXt document without painstakingly escaping - every < as &lt; and every & - as &amp;. However, a convenient workflow to avoid this - is to author your DoenetML in a separate file like - example.doenetml, then include this file - within your document using - <xi:include parse="text" href="path/to/example.doenetml"/>. - Altenatively, you can enclose your DoenetML in a CDATA, as we do below. -

    - -
    - DoenetML example - - - - - - Adjust the vectors \vec u, \vec v, and \vec w in the left - graph to visualize the areas calculated by - \det[\vec u\hspace{0.5em}\vec w], \det[\vec v\hspace{0.5em}\vec w], - and - \det[\vec u+\vec v\hspace{0.5em}\vec w]. -

    - - - $cv.x/$v.x - - - - - \det[\vec u\hspace{0.5em}\vec w], - \det[\vec v\hspace{0.5em}\vec w] - - - (6,2) - - - - (3,7) - - - - (9,5) - - - - - - - - - - \det[\vec u+\vec v\hspace{0.5em}\vec w] - - - - $w - - - - $uPlusV - - - - - - - - - ]]> -     -     -
    - -     -
    - -
    - Interactive Elements, Server - interactive elementsserver - embedded interactive elementsserver - - - -

    When outputting Web page versions, it is possible to embed a variety of dynamic interactive elements. In a /PDF version, these will necessarily need to be replaced by some static substitute, such as a screenshot. See for the specifics of embedding instances of the Sage Cell Server, which is more elaborate, and not entirely similar.

    - -

    Interactives in this section have code that lives on a server somewhere (in the cloud). So maybe you uploaded an interactive demonstration, or maybe somebody else did. In this sense, these are easier to create or use. But pay attention, the code may come with restrictive licenses, even if you are the author originally. See for more interactives that can be free as in freedom or liberté. CalcPlot3D is the notable exception here.

    - -

    (2018-06-22) Almost everything in this section is under active development and not stable yet. Feel free to experiment and make suggestions and requests. This page takes a while to completely load, so be patient.

    -     - - - GeoGebra - Geogebraserver - Geogebramaterial - -

    A Geogebra material is something you might use in a class. It could also be called an interactive demonstration. Go browsing at and find something appropriate for your project. Or make an account and create your own.

    - -

    Once you find a material that looks instructive, it will be at a URL such ashttps://www.geogebra.org/m/KGn2d4Qd and you want to pick off the identifier on the end, in this case KGn2d4Qd. Then author<interactive geogebra="KGn2d4Qd" /> At this writing (2018-02-04) you will want to place this inside a figure, with a caption, as we do right now with material KGn2d4Qd.

    - -

    The shape of the material will be fixed, so guess (or measure with an on-screen ruler), the aspect ratio and use that in the interactive element. If the width of the original material is anything other than 800 pixels, you should add material-width with the actual material width (units are pixels).

    - -
    - Right Triangle Paradox - -
    - -

    There are some optional control elements that Geogebra provides, such as the presence of the toolbar and the reset button. These can be controlled by adding the following additional attributes to the interactive. -

      -

    • toolbar="yes": add the Geogebra toolbar above the material

      • -

    • algebra-input="yes": add an entry box below the material to add graphical objects using algebra formulas or Geogebra graphical commands

      • -

    • reset-icon="yes": enable the reset icon

      • -

    • shift-drag-zoom="yes": enable ability to drag and zoom the viewing context

      • -
    -

    - -

    Note that materials hosted at geogebra.org have a non-standard, non-commercial license you must agree to before you can download them as source code. Perhaps you must forfeit your copyright when you upload a material? We have not investigated this thoroughly.

    -     - - - Desmos Graphs - Desmos graphs - -

    Desmos provides interactive graphing applications. The following example was created by Ann Cary and made available via the Share function of Desmos. You can make your own Desmos graph, choose the Share icon, and the Embed option, to get a URL such as https://www.desmos.com/calculator/ttox1bvxku You want to pick off the identifier on the end, in this case ttox1bvxku, then author<interactive desmos="ttox1bvxku" width="60%" aspect="2:3" /> as we have done here.

    - -

    The static image employed in the version of this article was obtained by viewing the graph at the Desmos site (, not the embedded version in the HTML version), and using the Share button to export a PNG image. In this case, we used a Medium Rectangle and Thick lines.

    - -
    - Graph of ln(x^2+5)-3 - -
    - -

    Note that Desmos has extensive Terms of Service which include restrictions on commercial uses.

    -     - - - CalcPlot3D - CalcPlot3D - -

    CalcPlot3D is a Javascript application for creating, visualizing, and understanding plots of 3D surfaces. So it would be an ideal companion to a book on multivariate calculus, but should be useful in other courses of study.

    - -

    To use it, start at the online app version. Create a plot and adjust the image to a viewpoint and scale if you like. Then, click the menu/hamburger icon in the upper-left and choose File. From here you can save a PNG image for the static version, but you also want to select Encode View in URL. Now your browser address bar is filled with a query string (all the stuff after the question-mark) that has all the information necessary to reproduce your plot (and view). Copy everything after the first question-mark to the interactive/code element. Be sure to replace any ampersands by &amp; (see the Author's Guide for more about certain characters in URLs). Examine the source for the examples below to see how they are authored. The Help Manual for CalcPlot3D is also available off the menu/hamburger icon in the upper-left.

    - -

    In grab the image with your mouse and rotate it in various directions. Then while the image has focus, press the 3 key (short for 3-D), to get a 3D view, which will require some red-blue 3D glasses to fully appreciate. Press the key again to return to a regular view.

    - -

    When using a version with controls (e.g. ), or the full application (e.g. ), specify an aspect ratio that is wider than it is tall. Start with aspect="3:2", and perhaps fine-tune from there.

    - -
    - Intersection of two planes (minimal embedding) - -
    - -
    - Probability wavefunction with contours (includes controls) - -
    - -
    - Plot of f(x,y)=\dfrac{1}{y-x^2} on [-2,2]\times[-2,2] (full application) - -
    -     - - - IFrames from Servers - -

    The iFrame versions of interactives can point to a network location, presuming the endpoint is reasonably well-behaved. If you are using this sytematically, let us know and perhpas it should become a more dedicated construction. See for the local file version.

    - -

    This example is from PhET Interactive Simulations.

    - -
    - Fourier: Making Waves iframe - -
    - -

    Anything that suggests you can embed an interactive widget via an iFrame is fair game for this feature. This is a Google Map of the state of California, for use in a French language document, from Julien Giol. The necessary URL is obtained by using the Share feature, and then the Embed a map option has HTML with the URL in a src attribute.

    - -
    - California. - -
    -     -
    - -
    - Interactive Exercises - - -

    Interactive components, just for testing, no commentary.

    -     - - - True/False - - -

    A True/False question.

    -     - - - True/False - vector space - -

    Every vector space has finite dimension.

    -     - -

    The vector space of all polynomials with finite degree has a basis, B = \{1,x,x^2,x^3,\dots\}, which is infinte.

    -     - -

    P_n, the vector space of polynomials with degree at most n, has dimension n+1 by . [Cross-reference is just a demo, content is not relevant.] What happens if we relax the defintion and remove the parameter n?

    -     -     -     - - - Multiple-Choice - - -

    Multiple-Choice problem

    -     - - - Multiple-Choice, Not Randomized, One Answer - stop signs - -

    What color is a stop sign?

    -     - - - -

    Green

    -     - -

    Green means go!.

    -     -     - - -

    Red

    -     - -

    Red is universally used for prohibited activities or serious warnings.

    -     -     - - -

    White

    -     - -

    White might be hard to see.

    -     -     -     - -

    What did you see last time you went driving?

    -     - -

    Maybe go out for a drive?

    -     -     -     - - - Parsons Problem, Math Proof - - -

    With some MathJax.

    -     - - - Parsons Problem, Mathematical Proof - even numbers - -

    Create a proof of the theorem: If n is an even number, then n\equiv 0\mod 2.

    -     - - -

    Suppose n is even.

    -     - -

    Then n is a prime number.

     -

    Then there exists an m so that n = 2m.

     -

    Then there exists an m so that n = 2m + 1.

     -     - -

    Click the heels of your ruby slippers together three times.

    -     - -

    So we have the displayed equation: n = 2m + 0.

    -

    This is a superfluous second paragraph in this block.

    -     - -

    Thus n\equiv 0\mod 2.

    -     -     - -

    Dorothy will not be much help with this proof.

    -     -     - -     - - - Parsons Problem, Code - - -

    Programming Parsons problem, requiring indentation.

    -     - - - Parsons Problem, Programming - prime numbers - Sieve of Eratosthenes - -

    The Sieve of Eratosthenes computes prime numbers by starting with a finite list of the integers bigger than 1. The first member of the list is a prime and is saved/recorded. Then all multiples of that prime (which not a prime, excepting the prime itself!) are removed from the list. Now the first number remaining in the list is the next prime number. And the process repeats.

    -

    The code blocks below can be rearranged to form one of the many possible programs to implement this algorithm to compute a list of all the primes less than 250. [Ed. this version of this problem requires the reader to provide the necessary indentation.]

    -     - - - n = 250 - - - - primes = [] - candidates = list(range(2,n)) - - - candidates = [] - primes = list(range(2,n)) - - - - primes = candidates + [p] - - - while candidates: - - - p = candidates[0] - primes.append(p) - - - for nonprime in range(p, n, p): - - - if nonprime in candidates: - candidates.remove(nonprime) - - - print(primes) - - -     -     - - - Matching - - -

    Events and dates.

    -     - - - - Matching Problem, Dates - matching US dates - -

    Match each event in United States history with the year it happened.

    -     - -

    Review Encyclopedia Brittania, 25 Decade-Defining Events in U.S. Historyurl.

    -     - - - Monroe Doctrine - 1823 - - - Haymarket Riot - 1886 - - - Louisiana Purchase - 1803 - - - Battle of Gettysburg - 1863 - - -     -     - - - Clickable Area - - -

    Words, not code.

    -     - - - Clickable Areas, <q>Regular</q> Text - - -

    Identify (by clicking, or by circling) all of the nouns in this quotation by Eleanor Roosevelt.

    -     - - -

    The future belongs to those who believe in the beauty of their dreams.

    -     - - -

    The incorrect words are pronouns.

    -     -     -     - - - Old-Style Fillin-In - - -

    Do not use this as a model for new exercises. Just for backwards-compatibility.

    -     - - - Fill-In, String and Number Answers - - -

    Complete the following line of a Python program so that it will declare an integer variable age with an initial value of 5.

    -

    age = ;

    -     - - - - -

    A variable of type int is appropriate for whole number ages.

    -     -     - - -

    Remember that Java uses just the first three letters of the word integer to define an integral type.

    -     -     -     - - - -

    An integer variable may be initialized to a value.

    -     -     - - -

    Use 5 as the initial value of the variable.

    -     -     -     -     -     -     - - - A Reading Question - - - Short Answer - - -

    This should be built with a text-box, only on a capable server (Runestone). So it can be answered

    -     - -     -     - - - Faux Subsection - -

    We used exercises divisions above, and need a subsection to feed the schema.

    -     -
    - -
    - Dynamic Exercises - - -

    This section demonstrates the use of dynamic randomized exercises built upon the framework of Runestone components. These demonstration problems incorporate a library supporting mathematical expressions both for varying the content of the statement of the exercises as well as the checking of submitted answers.

    -     - - - Dynamic Fill-In - - -

    The first problem illustrates revised markup for fill-in problems that don't involve randomization and use simple string and number comparison tests. Later exercises illustrate the use of dynamically generated mathematical expressions.

    -     - - - Fill-In, String and Number Answers - - -

    Complete the following line of a Python program so that it will declare an integer variable age with an initial value of 5.

    -

    age = ;

    -     - - - - - -

    A variable of type int is appropriate for whole number ages.

    -     -     - - .* - -

    Remember that Java uses just the first three letters of the word integer to define an integral type.

    -     -     -     - - - - -

    An integer variable may be initialized to a value.

    -     -     - - .* - -

    Use 5 as the initial value of the variable.

    -     -     -     -     -     - - - Fill-In, Multiple Strings, Custom Checker - - -

    - In order to apply the Integral Test to a sequence \{a_n\}, - the function a(n) = a_n must be - , and . -

    -     - - - - - - - - - - - - - You already gave that answer. - - - - - - - - - You already gave that answer. - - - -     - - - Fill-In Formula (Dynamic) - -

    Find a formula for a cubic function f(x) that has roots at x=, x=, and x= and so that f(0)=.

    -

    f(x)=

    -     - -

    - Knowing the roots of a polynomial allows us to write down the formula of f(x) in factored form, - f(x) = A - with an unknown scaling multiple A. -

    -

    - When we evaluate f(x) at x=0 using this formula, we find - f(0) = A. - Since we also know f(0)=, we can write down the equation - A = - and find that A=. -

    -

    - Consequently, we can write our function in the form - f(x)=. -

    -     - - - - - - - - - - - - - - - x1+d1 - - - x2+d2 - - - (x-x1)*(x-x2)*(x-x3) - - - - - 0 - - - - y0/base_yint - - - A*(x-x1)*(x-x2)*(x-x3) - - - - - - - - - -     - - Decompose the Function - -

    - Consider the function h(x)=. - Find two nontrivial functions f(x) and g(x) so that h(x) = f(g(x)). -

    -

    - f(x) = - and g(x)= -

    -     - -

    - Noticing that the expression appears inside parentheses with a power, - it makes sense to think of that as the inner function, defining g(x) = . - The outer function describes what happens to that. - If we imagined replacing the formula with a box and then call that box our variable x, we find the outer function is given by f(x) = . -

    -

    - This is not the only non-trivial composition. Can you find others? -

    -     - - - - - - - - - - - - - - - - - - a*x^n+b - - - c*x+d - - - x - - - - - - - - - - - - -

    f(x)=x is not allowed for nontrivial compositions.

     -     - - - - - - - - - - - - - - - - - - - -

    You have composed in the wrong order.

     -     -     - - - -

    g(x)=x is not allowed for nontrivial compositions.

     -     -     - - - - - - - - - - - - - - - - - - - - - - - - - -     -     -     -
    - -
    - Interactive Coding - - -

    More interactive components, just for testing, no commentary.

    -     - - - ActiveCode - - -

    ActiveCode, Python program.

    -     - - - An interactive Python program, using <pubtitle>Runestone</pubtitle> - - - print("Hello, World!") - - - - - - An interactive Python program without codelens. - - - print("Hello, World!") - - - -     - - - CodeLens - - -

    A steppable Python program.

    -     - - - A Python program, stepable with CodeLens - - - print('Hello, World!') - - - -     - - - Activity with An ActiveCode - - -

    Something to do with ActiveCode program.

    -     - - - Activity Coding Exercise - - -

    Similar to above, but now as a complete Python program inside an activity. This demonstrates the possibility to use any project-like block (project, activity, exploration, investigation), but not in the case when structured with task.

    -     - - - for i in range(10): - print(i) - - -

    We're still not really sure.

     -     -     - - - YouTube - -

    Video, observable on a Runestone server.

    - -     -
    - -
    - Audio - -

    2019-05-24: this is preliminary, and mostly based on the code for video so read the next section and mimic the style from there. But use an audio element and have the source attribute point to an OGG, MP3, or WAV file. Plus, an aspect attribute will be ignored.

    - -

    We have not entirely decided how to handle the static version present in a PDF.

    - -

    First in a figure, so it can be cross-referenced.

    - -
    - MP3 Piano Trill (www.kozco.com/tech/soundtests.html) -
    - -

    Now, naked, between a couple of paragraphs, with specified asymmetric margins, and a computed width.

    - -
    - -
    - Video - - -

    First, a gratuitous reference to Exercise about the derivative of a cosine.

    - -

    You can specify a video by a filename if you host it as part of your document, or a URL giving a location on the Internet. There are a few extra features for YouTube and Vimeo videos, which are near the bottom of this page, so look there first if that meets your needs.

    -     - - - Video Files - -

    Embedded videos can make sense for a web version of your document. This is a video promoting the University of Puget Sound to potential new students, in WebM format. Support is limited to HTML5-capable browsers. The file format can be MP4, Ogg, or WebM, though this may vary depending upon the browser. Use a video element, within either a figure (numbered, captioned) or a sidebyside for more precise control. The source attribute in this first example does not include an extension, and so three possibilities above will be searched for preferentially (you need only provide the video in one format, but providing additional versions will increase the chances every browser will find a compatible format).

    - -
    - University of Puget Sound Promotional Video -
    - -

    You can replace the preview image of a video with one of your own making. HTML refers to this as the poster, presumably because it advertises the video. The image you make should be of the same quality as the video, and with the same aspect-ratio, and is presumably one of the frames of the video. So a screenshot is the likely avenue. (Maybe we will have advice on how to do this easily, or see Issue #853.) - linkexternal, url - referenceexternal, url - On the video tag, include a preview attribute which is the name of an image file, including a relative path. (JPEG or PNG formats are best. JPEG may be smaller for video screenshots, while PNG is lossless and so may work better for diagrams.) The next video has a preview/poster that is a fram part way into the introduction.

    - -
    - University of Puget Sound Promotional Video -
    - -

    If you find the posters provided automatically for a video to be distracting or objectionable, you can cover them up by requesting a generic poster with the attribute-value pair: preview = "generic".

    - -
    - University of Puget Sound Promotional Video -
    - -

    You can use a very similar construction to point to a video hosted somewhere on the Internet, just use a complete URL for the source attribute. Note that if the URL has a query string (parameters following a question-mark), then any ampersands (&) will need to be escaped, so as to not confuse the XML processor ( use &amp). Also, the question-mark character needs to not be URL-encoded (%3F), so presumably edit the URL to be the character. Here are several examples, the second one uses the start and stop attributes to limit the video to just the time between the 16-second and 30-second locations, and has asymmetric margins.

    - - - -
    - Big Buck Bunny from Video for Everybody Test Page -
    - -
    - Big Buck Bunny, Controlled Start/End, Asymmetric Margins -
    - -
    - Big Buck Bunny, Ogg container, *.ogv extension -
    - -
    - Big Buck Bunny, MP4 format -
    - -
    - Big Buck Bunny, WebM format -
    - -
    - Big Buck Bunny, Automatic best format (temporarily broken) -
    - - - -

    Videos are assumed to have a 16:9 aspect ratio (width:height). If this is not the case, then you must specify the aspect ratio with either a ratio (e.g. 4:3) or as a number expressing the fraction width/height (e.g. 1.3333). Four decimal places should suffice for the latter. Note that you cannot change the aspect ratio, and you must supply the aspect ratio for any video that does not have the default ratio. This is a technical requirement that allows us to smoothly scale the videos on small devices (try this page on your mobile phone!).

    -     - - - YouTube - -

    YouTubeYouTube videosvideosYouTube videos may be embedded with only knowledge of a video's ID or a playlist ID. A single video's YouTube ID is a string of eleven seemingly random characters that show up in the URL when you watch a video. For the Led Zeppelin performance below, the ID is hAzdgU_kpGo, which you might normally watch directly from the URL . As described just above, you need to specify a different aspect ratio if the video does not have a 16:9 aspect ratio.

    - -

    Note: some of these videos may not play if viewed locally, and maybe not even if you start up a local web server (such as can be easily done with Python). So if you are testing new features, be careful about assuming videos from cloud services are not working properly.

    - -

    If you have ever owned a drone, you sympathize with this guy. Way funnier than a cat video.

    - -
    - My first day with my drone - First Drone Flight (1:28) -
    - -

    If you are only interested in a piece of the action, you can limit the video with start and end attributes in seconds. You might make those times clear in the caption for readers getting the link out of a PDF. Some videos may not respect these parameters.

    - -
    - My first day with my drone (Splashdown) - First Drone Flight (Splashdown, 0:54 to 1:12) -
    - -

    This next video comes with a default poster from YouTube featuring Robert Plant. We've replaced it with a poster featuring Jimmy Page.

    - -
    - Kashmir (Live), Led Zeppelin - Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55) - Led Zeppelin video - -
    - -

    And if you don't want to be reminded of Plant, Page, Bonham, or Jones, you can cover them up entirely.

    - -
    - Kashmir (Live), Led Zeppelin - Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55) - Led Zeppelin video - -
    - -

    Videos were first designed mostly on the assumption that they are wrapped in a figure with a title (which is distinct from a caption). But you can just place a video naked inbetween a couple of paragraphs. This is nice if you don't want the clutter of numbers, and/or if you plan to exclude videos from some edition of your document.

    - -     - - - Vimeo - -

    We support videos from Vimeo in much the same way as YouTube videos. Now the identifier is a long integer. For example, the video up next would normally be found at https://vimeo.com/27246366. But instead, you can embed the video with as little as <video vimeo="27246366"/>. As of 2019-05-18, we intend to support as many of the options described above as possible. Widths and heights (via the aspect ratio) will perform as expected. We have not investigated start and end times.

    - -
    - MOVE, by Rick Mereki, vimeo.com/rickmereki -
    - -

    Now with an author-supplied poster.

    -
    - MOVE, by Rick Mereki, vimeo.com/rickmereki - - -
    -     - - - Captions and Subtitles - -

    Experimental support for captions and subtitles first. Look at the source, which mimics the actual HTML. The words of the titles and/or subcaptions (there is a difference!) come from a file in Web Video Text Tracks (WEBVVT) format.

    -
    - Big Buck Bunny with subtitles adapted from - -
    - -

    This video is identical to the previous one, except it tests the use of a default track. The default attribute on track can be set to the value yes to make one set of captions the default (and only one!). Test is a bit lame, the two track use the same file, but just have different labels for the player's menu. Track named US English Two will show as in-use at start-up.

    - - - -     -
    - -
    - <c>veil</c> Testing - -

    - The function f(t) = e^{-t} satisfies the differential equation - f'(t) = -f(t), - which is characteristic of exponential decay. -

    - -

    - This sentence contains a simple hidden phrase and continues normally. -

    - -

    - Here is a veil wrapping emphasized hidden text within an emphasized span. -

    - -

    - You can also hide inline math like f(t) = e^{-t} without breaking the flow. -

    - -

    - A slightly more complex example with a link: - - Learn more at PreTeXt or explore g(x) = x^2 + 1. - -

    - -

    - Testing long hidden text: - - This is a very long phrase that includes emphasis, an external link, - inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. - -

    - -

    - Multiple consecutive veils: \cos(t) - first hidden, then some regular text, and second hidden part. -

    - - - h(t) = \sin(t) tiger - - -

    - Final test: a veil at the end of the sentence. -

    - -
    - - - -
    - Cross-Referencing - -

    Cross-referencescross-reference are easy, since that is a key reason for having a highly structured document. Here is a useful feature if you elect to use it. Any xref will know what it points to, so you can let it provide the naming part of the cross-reference text. You can turn this on globally with the command-line parameter autonameautoname set to 'yes'. If you do that, you will see most of the names in this document doubled, since the names are written into the source already in most places outside of this section.

    - -

    Moreover, the names themselves will change with the use of the one language dependent file. And another bonus is that with an autoname, you automatically get a non-breaking space between the name and the reference. The autoname switch makes no sense for provisional cross-references, since there is no information about what they point to.

    - -

    Here is a reference that has no indication of its type in the source: . So by default you will just see a number that you can click on. If you use the text="type-global" switch then you should see Theorem prepended. Note that if you changed the theorem to a lemma, then that change would be reflected here automatically when autonaming is in effect.

    - -

    If you set the autonaming behavior globally, or accept the default behavior, there will still be instances where you want to override that choice. Simple: just say text="type-global" or text="global" as part of the xref. Each example below should look the same each time this article is processed, no matter how the global autoname is set.

      -

    • No name ever:

      • -

    • Always named:

      • -

    - -

    You might also wish to provide a prefix to a cross-reference and have it incorporated into the text of what you would click on in an electronic version. So if you make an xref with some content, then that content will prefix the cross-reference within the clickable/pokeable text and be attached with a non-breaking space. This xref content totally overrides any prefix that might happen otherwise. So the name of an item ( corollary) could be replaced, and if you make a cross-reference with custom text, that will be the clickable also. An example:

      -

    • A grand result: Major Corollary

      • -

    • A grand result: a nice corollary

      • -

    - -

    Suppose you want to reference two theorems, so you might want to say something like Theorems 4.6 and 5.2. With global autonaming on, you can override the first Theorem by providing the content Theorems on the first xref and text="global" on the second xref. (With global autonaming off, you will also get what you want/expect.) Here is the test, which should look correct no matter what the global switch is: Sections and . (But notice that it is up to you to be certain the types of these targets do not change without you changing the content of the first xref. The author-tools mode and careful choices of xml:id strings can help avoid this trap.)

    - -

    If you set the value of text to title, then the title you assigned to the theorem will be used as the link for a cross-reference. Here is a the final example, which refers to a fundamental theorem by name .

    - -

    Cross-references to exercises with hard-coded numbers should respect the supplied number. Exercise should reference problem 42a.

    - -

    Here we form a list to test pointing at various structures. Each of the following should open a knowl in the HTML version, otherwise it will be a traditional hyperlink (if possible). Note that if a knowl opens, there will always be an in-context link which will take you to the actual location, should you have wished instead to just go there.

      -

    • Footnotes: Fermat allusion at .

      • -

    • Citations: Judson's AATA with annotation at

      • -

    • Citations: Judson's AATA with autoname that should have zero effect

      • -

    • Citations: In a references division inside an appendix

      • -

    • Note: just the annotation of previous citation at

      • -

    • Examples: Mystery derivative at , or a question at .

      • -

    • Definition-like: A mathematical statement with no proof .

      • -

    • A numbered Note:

      • -

    • A link to a proposition element, while this document has globally renamed propositions as Conundrums, so this link should use the new name:

      • -

    • Theorems: Fundamental Theorem of Calculus, with proof at

      • -

    • Proof: of second version of FTC at

      • -

    • Figures: A plot with a derivative at .

      • -

    • A Figure within a side-by-side panel, with its own number:

      • -

    • A Table within a side-by-side panel, with a subnumber:

      • -

    • A Figure, containing a side-by-side with two sub-captioned images:

      • -

    • Display Mathematics: single, first with no name: . Then with an autoname: .

      • -

    • Display Mathematics: multi-row, first with no name: . Then with an autoname: . And two, with a plural form: Equations and .

      • -

    • You can cross-reference The Fundamental Theorem of Calculus via custom text of your choice.

      • -

    • Display mathematics: an equation with local tag, which should not be used so very far away: .

      • -

    • You can author a cross-reference to a displayed equation with no number, but it will not be very satisfying. You should get a warning if you try.

      • -

    • Exercises (divisional), a range, with plural form provided to override autonaming: Exercises.

      • -

    • Exercise (inline): with enclosed hint at

      • -

    • A group of two exercises, with introduction, conclusion:

      • -

    • Solution: An autonamed portion of an exercise:

      • -

    • Parts of a complicated exercise:

      • -

    • A subsidary part of an exercise:

      • -

    • - knowlnested - Three cross-references to individual exercises, but due to their location, they should have different type names in the cross-reference: in an exercises division, ; in the narrative, ; and in a worksheet, .

      • -

    • An item buried in nested ordered lists:

      • -

    • List item as knowls in HTML, including nested lists: ,

      • -

    • A titled list:

      • -

    • List item inside a named list, second color in rainbow list:

      • -

    • Second color in rainbow list, but now as a local reference:

      • -

    • An item in ordered list, but contained in an unordered list, hence without a number, so a cross-reference by number would be ambiguous. So we use a cross-reference which relies on custom text: No Number List Item

      • -

    • Several examples of hybrid cross-references to list items within a named list can be found in, and adjacent to, .

      • -

    • An assemblage, which never has a number. A cross-reference now requires content in the xref element, with text='custom': text to xref an assemblage

      • -

    • A cross-reference to a list item in a description list, which has a title, but never a number: . Note that you need to include the attribute text="title" even if that is obvious from the situation. This requirement may be relaxed in a future refactoring of the cross-reference system.

      • -

    • A very similar cross-reference to the previous one, but testing how final punctuation of titles is handled: .

      • -

    • A cross-reference to a paragraphs subdivision, which never has a number (so comments above about description list items and titles applies here too):

      • -

    • A case within the proof of :

      • -

    • A cross-reference to a description list item with a title containing math:

      • -

    • A cross-reference to an aside, by title necessarily, and with some formatting in the title:

      • -

    • A cross-reference to an objectives block, with an autoname. This demonstrates the number of the Objectives here, which is not shown in the original version since it is implicit:

      • -

    • A cross-reference to an individual objective. This is authored as a list item, but displayed as an objective (singular) via an autoname:

      • -

    • A cross-reference to the top-level element (book) will point to a summary page similar to a Table of Contents in HTML. For LaTeX output it will behave similarly, unless there is no Table of Contents, then it will go to the main title page: ToC or Title

      • -

    • Cross-references inside quotations previously lost track of their target, so this tests correcting that, not so much the cross-reference itself:

      • -

    • An activity with full details following:

      • -

    • A type-global cross-reference to a second-level task within a project: , the encompassing project: , and a local reference .

      • -

    • A subcaptioned named list:

      • -

    • This opens a knowl for an example. It has a solution, which is orginally presented as a hidden knowl. But since this version is a duplicate, the knowl for the solution is a file version, not an embedded version, and hence free from duplicating any unique identifaction like an HTML id. So we test its styling and function here:

      • -

    • A cross-reference to a poem, where we need to use a title for the link text, since a poem is not numbered:

      • -

    • A cross-reference to a references division in a subsection, which should not be numbered where born, but which has the number of its parent division in a cross-reference: . And a cross-reference to a references division, which is the main bibliography in the back matter, and so is not numbered where born, nor in a cross-reference (which we must accomplish via it's title): .

      • -

    • A cross-reference to a solutions division in a subsection, which should not be numbered where born, but which has the number of its parent division in a cross-reference: . And a cross-reference to a solutions division, which should appear as an appendix both where born and as a cross-reference: .

      • -

    • A cross-reference to an exercises division in a subsection, which is the only such division in that subsection and therefore should not be numbered where born, but which has the number of its parent division in a cross-reference: . In contrast we cross-reference an exercises division which is one of two inside a section, and therefore is numbered, when born and when cross-referenced, in continuity with the preceding subsections: . Also an exercise within an exercises which should have a cross-reference employing the number of the containing (unstructured) section: which is in which is in the (unstructured) .

      • -

    • A custom cross-reference: Custom

      • - -

    • Cross-reference to instructions of an interactive:

      • -

    • A hyperlink to a subexercises via its required title (no number is assigned):

      • -

    • You can request the text to be a type, then a number, then a title:

      • -

    • Asking for the text to be a type, then a number, then a title, when there is no title, is not a problem:

      • - - -

    - -

    Cross-references to structural elements of the document will always take you there directly, since even in the HTML version these parts never get realized as knowls. You will find such links sprinkled through this document, but here is an autonamed link to a subsubsection: .

    - -

    Cross-references can be built into display mathematics, but they can only point to one item ( a comma-delimited list of targets is not supported). Examples below should test the distinction in HTML output between a link that opens a knowl and a link that jumps to a larger chunk of content. Notice that display mathematics is entirely syntax, no matter which output format you create. So if you do not use the autoname facility, you need to wrap non-math text in \text{} and perhaps use a tilde (~) as a non-breaking space (examine the source of this article).

    - -

    - x^2 + y^2 &= z^2&& - a^2 + b^2 &= c^2&&\text{Section}~ - bugin-context broken

    - -

    Variations on the above include multiple xml:id as the value of a single ref attribute on an xref, in the form of a comma-separated list. In this case, only the numbers are links/knowls and the autonaming attribute is based on the type of the first ref. Wrapping with brackets (citations) or parentheses (equations) is also controlled by the type of the first ref. And the detail attribute for a bibliographic reference is silently ignored. So you can do silly things like have a reference to a theorem within a list of equation numbers and there will be no error message. Handle with care. Spaces after commas in the list will migrate to the output as spaces, so if you don't have any, you won't get any.

      - - -

    • Four theorems, with spaces, autonamed:

      • -

    • Two equations, no spaces, autonamed:

      • -

    • Two bibliographic items, no autoname:

      • - -

    - -

    If you have a long list of items (such as homework exercises, not in an exercisegroup, or perhaps several chapters), you can get a cross-reference that prints as a range by using xref with two attributes first and last, which may contain a single xml:id each. As with multiple references, first will control autonaming and other features.

      -

    • A range of exercises, autonamed (this range appears out-of-order since the two exercise are numbered under two different schemes):

      • -

    • A range of equations:

      • -

    • A system of equations, given as range from first to last:

      • -

    • A range of sections, hand-named to be plural: Sections

      • -

    • A range of bibliographic items:

      • - -

    - - - - -

    The urlurl element may be used to link to a data file, either externally, or internally, if you want to make such an object available to a reader.referenceexternal A good example use case is a spreadsheet that might be part of an exercise, or contain data relevant to some discussion. First let us suppose the data resides somewhere on the Internet, then just use the complete address. Here is one from Microsoft: Sample Excel Spreadsheet.

    - -

    For a link like the previous one, you might want to provide advice appropriate for your audience about using a context menu to download a file, or how to configure helper/viewer applications.

    - - - - -

    You can also provide a file yourself, but now it is your obligation to distribute the file with your document (HTML, PDF, ) and provide a relative link. This creates some complications, such as making sure an electronic PDF has the associated file in the same place relative to the PDF file. Of course, if you make a print PDF, this becomes impossible. Here is a test example anyway, which is highly likely to be broken in a PDF (including at the project site) unless you build this example on your own computer, locally. Here is a template from the Apache OpenOffice project, provided via the Public Documentation License (PDL): Running Statistics Template.

    -

    The next four paragraphs are each a single dataurl element. Explore the source and the output from different conversions. Strictly for testing as of 2022-11-04.

    -

    Foo Sample Excel Spreadsheet Bar

    -

    Foo Runners Template Bar

    -

    Foo Sample Excel Spreadsheet Bar

    -

    Foo Runners Template Bar

    -

    Testing of output positioning for xref's that are inside containers:

    - - Self-referential Xref In a table - - - A - B - C - D - - - - B - C - D - - -
    - -
    - Xref Inside MathJAX -

    - - {\mathbb Z}_2 \times {\mathbb Z}_2 - - {\mathbb Z}_2 \times {\mathbb Z}_2 - -

    -
    - -

    Now we have two xref's to that same target that has a runestone component. Only the first one clicked should try to render the runestone.

    -
    - -
    - Internationalization - internationalization - -

    Supporting a multitude of possible characters, across many languages and across many output formats can be a challenge. One of our goals is to make this much easier for authors. Fortunately, the Unicode standard has led to improvements from the 7-bit ASCII standard of old.

    - - - Unicode Characters for HTML Output - -

    First, we discuss HTML output. If you include UnicodeUnicode characters in your source, they should survive just fine en route to a web browser or e-reader. Here are the caveats for HTML output:

      -

    • So that you can continue to get the best results with print and PDF output, use available empty elements for obscure characters, even if targeting HTML output, before resorting to a Unicode character. For example, use copyright for the copyright symbol in text before resorting to the Unicode character U+00A9. It is a bit more work, but you will get better results with other conversions, even if you initially are only fascinated by HTML.

      • - -

    • How you actually enter Unicode characters into your source file is dependent on your editor and operating system, and is therefore outside the scope of our documentation. You can cut-and-paste characters and text from the source of our examples for initial testing and experimentation.

      • - -

    • Always, always identify your source as having Unicode characters by including the incantation - <?xml version="1.0" encoding="UTF-8" ?> - as the first line of your source file. (You may be able to accurately cut-and-paste this version here. But if the copy has non-standard characters in it, go back to the top of this source file for a copy.)

      • - -

    • Alan Wood’s Unicode Resources has a plethora of samples of various groups of Unicode characters. If you, or your readers, are missing characters in a web browser, this is a good place to start testing the local setup.

      • -

    -     - - - Characters in <latex/>, PDF, print - -

    The situation for is a bit more complicated, since pre-dates Unicode's widespread adoption.

    - -

    This sample article is intended to work well, out-of-the-box, for authors just starting with . So we only include here examples that we know are likely to convert to PDF without any errors. For more extensive examples and experiments, we provide the sample document examples/fonts/fonts-and-characters.xml, so be aware of that example as you look to see what is possible.

    - -

    Similarly, you should be able to process this sample article successfully with various engines. We test regularly with pdflatex and xelatex and provide online sample PDF output of this document processed by pdflatex. In principle, you should be able to use latex (to produce a DVI), and possibly other (unsupported) engines, such as lualatex.

    - -

    Once you get beyond the Latin alphabet, with accents common in Western Europe and the Western Hemisphere, you will almost assuredly need to restrict your attention to producing PDF output with the xelatex engine. This is discussed and tested in examples/fonts/fonts-and-characters.xml.

    -     - - - Basic Latin, <c>U+0000</c><ndash/><c>U+007F</c> - -

    Unicode uses multiple 8-bit bytes to represent characters, and these are typically expressed in hexadecimal (base 16) notation. Using just a single byte, we can get 256 values, and the first 128 (hex 00 to 7F) are the usual Latin characters with some values used as control codes. These 95 characters are the most basic, and will all render using pdflatex or xelatex with no special setup (and will render easily in HTML). U+0000 to U+001F are control codes and not used here. U+007F is also a control code and so is excluded, while U+0020 is a space, so appears invisible in the table. In the source we have authored each character by its escaped version using its Unicode number (in hexadecimal). So, for example, capital-B is authored as &#x0042;.

    - - - - - - - Basic Latin, Regular - - - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - C - D - E - F - 002_ !"#$%&' - ()*+,-./ - 003_01234567 - 89:;<=>? - 004_@ABCDEFG - HIJKLMNO - 005_PQRSTUVW - XYZ[\]^_ - 006_`abcdefg - hijklmno - 007_pqrstuvw - xyz{|}~ - -
    -     - - - Latin-1 Supplement, <c>U+0080</c><ndash/><c>U+00FF</c> - -

    Now we are interested in the next 128 possible bytes, (hex 80 to FF). The first 32 are again control codes and U+00A0 is a non-breaking space, so is invisible, while U+00AD is a soft hyphen (which we have not implemented and so is excluded). We have taken care to see that the remainder will render using pdflatex or xelatex with no special setup (and HTML). In the source we have authored each character by its escaped version using its Unicode number (in hexadecimal). So, for example, a copyright symbol is authored as &#x00A9;.

    - - - - - - Latin-1 Supplement, Regular - - - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - C - D - E - F - 00A_ ¡¢£¤¥¦§ - ¨©ª«¬ ®¯ - 00B_°±²³´µ· - ¸¹º»¼½¾¿ - 00C_ÀÁÂÃÄÅÆÇ - ÈÉÊËÌÍÎÏ - 00D_ÐÑÒÓÔÕÖ× - ØÙÚÛÜÝÞß - 00E_àáâãäåæç - èéêëìíîï - 00F_ðñòóôõö÷ - øùúûüýþÿ - -
    -     - - - Monospace, Basic Latin and Latin-1 Supplement, <c>U+0000</c><ndash/><c>U+00FF</c> - -

    A monospace font is critical for samples of keyboard input and to distinguish exact technical input from running commentary. We list here all of the reasonable characters from the first 256 Unicode code points. (We skip the same 65 control characters from above, and the soft hyphen.) These should all render fine in HTML and when processed with xelatex, however our focus with this sample article for PDF output is the capabilities when processed with pdflatex. First, characters from U+0000U+007F.

    - - - - - Basic Latin, Monospace - - - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - C - D - E - F - 002_ !"#$%&' - ()*+,-./ - 003_01234567 - 89:;<=>? - 004_@ABCDEFG - HIJKLMNO - 005_PQRSTUVW - XYZ[\]^_ - 006_`abcdefg - hijklmno - 007_pqrstuvw - xyz{|}~ - -
    - -

    Note that the single and double quotes are upright and dumb, not curly and smart: ' " ' " ' ". And a backtick is a backtick: ` ` `. The zero is distinguished from the capital oh: 0 O 0 O 0 O. And the numeral one is slightly different from the lower-case ell: 1 l 1 l 1 l. The hyphen should be short and not expanded into some other kind of dash: - - -. These characters should all cut/paste out of a PDF into a text editor with no conversion to other characters.

    - -

    Now the remaining characters from U+0080U+00FF. The program tag is implemented in via the listing package and these characters require ad-hoc replacements for processing by pdflatex. (You can see the replacements in the preamble of the source for this document.) The replacement mechanism provided by the listing package will cause the characters below to produce a compilation error if processed by pdflatex and in a table cell in certain situations (which we have avoided in the table below). The only workaround in this case is to switch to xelatex.

    - - - - - - Latin-1 Supplement, Monospace - - - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - C - D - E - F - 00A_ ¡¢£¤¥¦§ - ¨©ª«¬ ®¯ - 00B_°±²³´µ· - ¸¹º»¼½¾¿ - 00C_ÀÁÂÃÄÅÆÇ - ÈÉÊËÌÍÎÏ - 00D_ÐÑÒÓÔÕÖ× - ØÙÚÛÜÝÞß - 00E_àáâãäåæç - èéêëìíîï - 00F_ðñòóôõö÷ - øùúûüýþÿ - -
    - -

    The pre tag is implemented in with the fancyvrb package. You can compare results here with the table above, lines here are rows above.

    - - - - - 
    -                      ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬   ® ¯
-                    ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿
-                    À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
-                    Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß
-                    à á â ã ä å æ ç è é ê ë ì í î ï
-                    ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
-
    - -

    The console tag is also implemented with fancyvrb, with adjustments for the input lines. It will not look like it, but these are 8 such inputs, with similar results to above, but now bolded.

    - - - ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ - ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ - À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï - Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß - à á â ã ä å æ ç è é ê ë ì í î ï - ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ - - -

    We take care to render the U+0080U+00FF characters in Sage cells. This would allow some flexibility in comments and strings employed. The following is just a test of these characters in the input and output of a sage element. This is not functional code.

    - - - - ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ - ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ - À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï - Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß - à á â ã ä å æ ç è é ê ë ì í î ï - ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ - - - ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ - ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ - À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï - Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß - à á â ã ä å æ ç è é ê ë ì í î ï - ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ - - - -     - -

    The table below has a single column, and each cell of the table has a string of 10 characters inside a c element. It is meant to test if the font is monospace in this situation.

    - - - Alignment Test - - 0123456789 - 9876543210 - iiiiiiiiii - mmmmmmmmmm - -
    - -

    Again, more examples and more thorough explanations can be found in the sample: examples/fonts/fonts-and-characters.xml. Be aware that the nature of the more advanced sample is that it will likely produce many errors when processed with pdflatex. Adding -interaction batchmode or -interaction nonstopmode to the pdflatex command-line will sometimes be less painless than acknowledging each error. The more advanced sample will perform well when processed with xelatex.

    -
    - -
    - Pre-Formatted Text - -

    In Sage, if you wanted to build a matrixmatrix, then you would use the matrix() constructor. Here is the matrix of second partials of f(x,y)=x^3+8x^2y^3 + y^4, as you would enter it in Sage. Notice that SR is the ring of symbolic expressions, Symbolic Ring.

    - - 
    -            var('x', 'y')
-            J = matrix(SR, [
-                [6*x + 16*y^3, 48*x*y^2],
-                [48*x*y^2, 48*x^2*y + 12*y^2]
-                ])
-
    - -

    That accomplished, Sage will easily and naturally provide a representation of the matrix with the command latex(J).

    - - 
    -            \left(\begin{array}{rr}
-            16 \, y^{3} + 6 \, x & -48 \, x y^{2} \\
-            48 \, x y^{2} & 48 \, x^{2} y + 12 \, y^{2}
-            \end{array}\right)
-
    - -

    The pre element surrounds text that should be preserved verbatim. It is like a special kind of paragraph, and can be used almost everywhere that a paragraph can be used. The realization of preformatted text should be robust enough that it can be cut from documents and pasted without any substitutions of fancier Unicode characters for generic ASCII characters. Try the minus sign on the 48 above to see if it does not become a dash, or the single quotes on the Sage variables.

    - -

    For Sage input code, the first non-whitespace character sets the left margin, since legitimate Python code has no subsequent lines outdented. For pre-formatted code, the line with the least whitespace leading the line will determine the left margin. If preserving indentation is important, do not mix spaces and tabs. For syntax highlighting of text representing computer programs, or parts of them, see Section. Examine the source of the following example to help understand this paragraph.

    - - 
    -            A normal line
-                    An indented line
-    An outdented line
-
    - -

    Snippets should also be robust for cut/paste operations. For example, you should not get curly smart quote marks in verbatim text: this should have "dumb" quote marks. Here are a few characters that should migrate through to a PDF unmolested: '"----"'

    - -

    If you write a very long snippet of inline code (i.e. within a <c> element) it can impinge on the right margin, since very long words will not hypenate, unless you have a dash/hypen. Such as when you use words like pneumonoultramicroscopicsilicovolcanoconiosis, parastratiosphecomyia stratiosphecomyioides, floccinaucinihilipilification, or subdermatoglyphic. For output in LaTeX we get line-breaking, and perhaps word-spacing, but we do not get hyphenation and the font is fixed-width. So not always perfect. Consider other options like <cd> or <pre> below.

    - -

    An intermediate type of verbatim text can be accomplished with the cd tag, short for code display. It allows for larger chunks of verbatim text to show up in the middle of a paragraph, but with some vertical space above and below, and centered between the margins. It can beauthored as a single lineor if you wish to have multiple lines - there is the <cline> tag - meant to model the line tag - and short for "code line" - and you may even - use a single cline - if you like to have your source closely model the visual look of the output.

    - -

    With the showspaces attribute of cd set to all there will be a visual indication of every space character, which is nice if indentation is critical. For example, - there is the <cline> tag - meant to model the line tag - and short for "code line" - and as single line authored as a single line that is not structured with cline elements.

    - -

    The pre tag is meant for use outside of paragraphs, but is otherwise very similar. The source may also be structured as a sequence of cline as in the next example, recycling content from above.

    - - 
    -                If you write a very long snippet of inline code (i.e. within
-                a <c> element) it can impinge on the right margin, since
-                very long words will not hypenate, unless you have a dash/hypen.
-                Such as when you use words like
-                pneumonoultramicroscopicsilicovolcanoconiosis,
-                parastratiosphecomyia stratiosphecomyioides,
-                floccinaucinihilipilification, or subdermatoglyphic. For output
-                in LaTeX we get line-breaking, and perhaps word-spacing, but we
-                do not get hyphenation and the font is fixed-width. So not always
-                perfect. Consider other options like <cd> or <pre> below.
-
    - -

    We use a Unicode right arrow (Unicode Character 'RIGHTWARDS ARROW', U+2192) to sometimes indicate the truncation of long lines in a text file. It is available in our usual monospace font for /PDF, but we include a use here in order to make certain that is always the case. Here: →.

    -
    - -
    - Program Listings (with <c>code</c> in the title) - -

    Sage cells can be used for Python examples, but Sage uses a mild amount of pre-parsing, so that might not be a wise decision, especially in instructional settings. We might implement Skulpt or Brython (in-browser Python) or the Python language argument to the Sage Cell Server. To see examples of authoring Sage cells, have a look at Section.

    - -

    In the meantime, program listings,listingprogram listing especially with syntax highlighting, is useful all by itself. The R language might not be a bad stand-in for pseudo-code, as it supports assignment with a left arrow and has fairly generic procedural syntax for control structures and data structures. Or maybe Pascal would be a good choice? Here is an example of R. Note in the source that the entire block of code is wrapped in a CDATA section due to the four left angle brackets. We do not recommend this technique for isolated problem characters, but it is a life-saver for situations like the XSLT code just following.

    - - - - - - - - - - - - -

    And some self-referential XSL:

    - - - - - - . - - ]]> - - -

    Matlab is a commercial language for mathematics, while Octave in an open source version. The language values of matlab and octave are somewhat interchangeable. Following is a very slighlty edited version of an example from 50 Basic Examples for Matlab.

    - - - - - a = [0:0.5:5]; % A Matlab comment here - b = 2*a.^2 + 3*a -5; - c = 1.2*a.^2+4*a-3; - subplot(1,2,1) - plot(a,b,'-or','MarkerFaceColor','g','LineWidth',2) - xlabel('X'); ylabel('Y'); legend('Curve ','Location','NorthWest') - subplot(1,2,2) - plot(a,c,'--ok','MarkerFaceColor','c','LineWidth',2) - xlabel('X'); ylabel('Y'); legend('Curve 2','Location','NorthWest') - - - -

    You can write made-up pseudo-code, but you might explain to a reader what your symbols all mean. This routine takes the m\times n marix A to reduced row-echelon form. Note that with no language specified, there is no special formatting or use of color. Note in the source the use of escaped characters for the three less-than symbols.

    - - - - input m, n and A - r := 0 - for j := 1 to n - i := r+1 - while i <= m and A[i,j] == 0 - i := i+1 - if i < m+1 - r := r+1 - swap rows i and r of A (row op 1) - scale A[r,j] to a leading 1 (row op 2) - for k := 1 to m, k <> r - make A[k,j] zero (row op 3, employing row r) - output r and A - - - -

    Look in the pretext-common.xsl file to see the strings to use to identify languages. Always all-lowercase, no symbols, no punctuation.

    - -

    Note that the above examples all have slightly different widths (theser are very evident in print with the frames). As 2-D atomic objects, to place them in the narrative requires the layout features of a sidebyside element. Then width and/or margin attributes will influence the width of the panel.

    - -

    A program may also be nested inside a listing, which behaves similar to a figure. You can provide a title, and the listing will be numbered along with tables and figures. This then makes it possible to cross-reference the listing, such as . It also removes the requirement of wrapping the program in a sidebyside. For technical reasons, the three examples above will not split across a page break in PDF output, but the placement inside a listing will allow splits, as you should see in at least one example following.

    - - - C Version of <q>Hello, World!</q> - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - - -

    A program may include line numbers.

    - - - A static Java program with line numbers - - - import javax.swing.JFrame; //Importing class JFrame - import javax.swing.JLabel; //Importing class JLabel - public class HelloWorld { - public static void main(String[] args) { - JFrame frame = new JFrame(); //Creating frame - frame.setTitle("Hi!"); //Setting title frame - frame.add(new JLabel("Hello, world!"));//Adding text to frame - frame.pack(); //Setting size to smallest - frame.setLocationRelativeTo(null); //Centering frame - frame.setVisible(true); //Showing frame - } - } - - - - -

    A program may also include highlighted lines.

    - - - A static Java program with line numbers - - - import javax.swing.JFrame; //Importing class JFrame - import javax.swing.JLabel; //Importing class JLabel - public class HelloWorld { - public static void main(String[] args) { - JFrame frame = new JFrame(); //Creating frame - frame.setTitle("Hi!"); //Setting title frame - frame.add(new JLabel("Hello, world!"));//Adding text to frame - frame.pack(); //Setting size to smallest - frame.setLocationRelativeTo(null); //Centering frame - frame.setVisible(true); //Showing frame - } - } - - - - -

    Although a program should have a code element surrounding its code, we attempt to provide one when it is missing. This next sample tests that and intentionally has no leading or trailing newline inside the program.

    - - print("Hello world") - -

    Sometimes it is nice to author an inline fragment of a program and have the styling of its text match that of a program. To do this we can use the pf tag (program fragment). It is similar to a c element, but will be syntax highlighted according to either a language or the default language for programs. Here is an example in C: printf("The cost is $%f.2", money);. And another that is in Python and tests problematic characters: print("& % $ # _ { } ~ ^ \").

    - -

    If you are discussing algorithms in the abstract (or even concretely), you can set them off like a theorem, with a number, a title and a target for cross-references. Sometimes you claim an algorithm produces something in particular, or has certain properties, such as a theoretical run time, so a proof may be included. See the discussion just preceding about (limited) options for pseudo-code.

    - - - Sieve of Eratosthenes - -

    On input of a positive integer n this algorithm will compute all the prime numbers up to, and including, n. It was named for Eratosthenes of Cyrene ( 276 BC 195/194 BC) by Nicomachus ( 60 120 CE) in Introduction to Arithmetic. (Wikipedia, 2015)

      -
    1. Input: n
      2. -
    2. Form the list of all integers from 2 to n
      3. -
    3. Set p = 2
      4. -

    4. While p < sqrt(n)

        -
      1. If present, remove from the list multiples 2p, 3p, ...
        2. -
      2. If p is now the last element of the list, stop
        3. -
      3. Otherwise, set p to the element of the list immediately after current p
        4. -

      -
      5. -
    5. Output: the remaining elements of the list
      6. -

    -     - - -

    Any element removed is a non-trivial product of two integers and hence composite. So no prime is is ever removed from the list.

    - -

    Each composite number is a multiple of some prime, and since no prime is ever removed, each composite will be removed. Hence the removed elements are precisely the set of composite numbers in the list and thus the remainder are precisely the primes on the list.

    -     -     - -

    If you are writing about system-level software, you may need to write numbers in hexadecimal or binary. Here we use a numbered, displayed equation (mathematics) and macros such as \texttt for a monospace text font, and \; for spacing/grouping the bits of the binary number. \texttt{6C2A}_{16} = \texttt{0110}\;\texttt{1100}\;\texttt{0010}\;\texttt{1010}_{2} If you use these constructions repeatedly, then some macros might be useful. It might also be beneficial for us to add some markup for such numbers used in a paragraphsend us a feature request.

    - - - -

    This is a spurious theorem to break up the run of consecutive listing so we might test the effect.

    -     -     - -

    And this is a spurious paragraph to prove that the theorem beforehand, and the proof following, are distinct from one another.

    - - -

    This is a proof that is authored detached. It is not associated with the theorem above in a way other than simply following it.

    -     - -

    A specialized version of a program listing is an interactive command/response session at a command-line, where differing fonts are used to differentiate the system prompt, the user's commands, and the system's reaction. A console session may be used by itself inside a sidebyside, or it can be wrapped in a listing to get a number and a caption. As elsewhere, you will need to escape ampersands and angle brackets (such as if you have a command using redirection), using &amp;, &lt;, and &gt; in your source.

    - - - Console Session: <c>int</c> and <c>float</c> - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - -

    Here is the plain version, some layout control. We simply place a small margin on the left (at 4% width).

    - - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - -

    If your console input exceeds more than one line, you can author it across several lines and your choice of line breaks will be reflected in the rendering. You can decide to indent lines after the first one for clarity, if desired. You can also decide if your audience needs line-continuation characters or not.

    - - - Console Session: <c>int</c> and <c>float</c> (multi-line input) - - - gcc -Wall - -o intAndFloat intAndFloat.c - - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - -

    A console may specify a continuation symbol, as a prefix on every line but the first.

    - - - - for x in range(0:20): - print(x) - print("Excellent!") - - - for x in range(0:20): - print(x) - print("Excellent!") - - - - - - - - - - - -

    Notice in the HTML version of the above example that when you highlight all, or a portion, of the listing for a cut-and-paste that the prompts are not included.

    - -

    The next listing is just absurdity, to check various characters from that are otherwise employed by the code supporting consoles, and some Latin-1 characters. We test each in a prompt, input, and output. We use (* and *) as sequences used to escape embedded commands, so we test those also.

    - - - Console Session: problematic <latex /> characters - - A backslash \ here - A backslash \ here - - A begin group { here - A begin group { here - - An end group } here - An end group } here - - An open escape sequence (* here - An open escape sequence (* here - - An end escape sequence *) here - An end escape sequence *) here - - Some quotation marks ` ' " here - Some quotation marks ` ' " here - - The rest & % $ # _ ~ ^ of LaTeX - The rest & % $ # _ ~ ^ of LaTeX - - Latin-1: ÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß - Latin-1: ÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß - - - -

    We conclude this section with a longer example of a program listing, an assembly language program from Bob Plantz, included to test a listing breaking across pages in PDF output.

    - - - A longer program listing - - - @ structPass2.s - @ Allocates two structs and assigns a value to each field - @ in each struct, then displays the values. - @ Bob Plantz - 6 July 2016 - - @ Constants for assembler - .include "theTag_struct.s" @ theTag struct defs. - .equ y,-28 @ y struct - .equ x,-16 @ x struct - .equ locals,28 @ space for the structs - - @ Constant program data - .section .rodata - .align 2 - displayX: - .asciz "x fields:\n" - displayY: - .asciz "y fields:\n" - dispAChar: - .asciz " aChar = " - dispAnInt: - .asciz " anInt = " - dispOtherChar: - .asciz " anotherChar = " - - @ The program - .text - .align 2 - .global main - .type main, %function - main: - stmfd sp!, {r4, fp, lr} @ save caller's info - add fp, sp, #8 @ our frame pointer - sub sp, sp, #locals @ for the structs - - @ fill the x struct - add r0, fp, #x @ address of x struct - mov r1, #'1 - mov r2, #456 - mov r3, #'2 - bl loadStruct - - @ fill the y struct - add r0, fp, #y @ address of y struct - mov r1, #'a - mov r2, #123 - mov r3, #'b - bl loadStruct - - @ display x struct - add r4, fp, #x @ address of x struct - ldr r0, displayXaddr - bl writeStr - ldr r0, dispACharAddr @ display aChar - bl writeStr - ldrb r0, [r4, #aChar] - bl putChar - bl newLine - ldr r0, dispAnIntAddr @ display anInt - bl writeStr - ldr r0, [r4, #anInt] - bl putDecInt - bl newLine - ldr r0, dispOtherCharAddr @ display anotherChar - bl writeStr - ldrb r0, [r4, #anotherChar] - bl putChar - bl newLine - - @ display y struct - add r4, fp, #y @ address of y struct - ldr r0, displayXaddr - bl writeStr - ldr r0, dispACharAddr @ display aChar - bl writeStr - ldrb r0, [r4, #aChar] - bl putChar - bl newLine - ldr r0, dispAnIntAddr @ display anInt - bl writeStr - ldr r0, [r4, #anInt] - bl putDecInt - bl newLine - ldr r0, dispOtherCharAddr @ display anotherChar - bl writeStr - ldrb r0, [r4, #anotherChar] - bl putChar - bl newLine - - mov r0, #0 @ return 0; - sub sp, fp, #8 @ restore sp - ldmfd sp!, {r4, fp, pc} @ restore and return - - .align 2 - @ addresses of messages - displayXaddr: - .word displayX - displayYaddr: - .word displayY - dispACharAddr: - .word dispAChar - dispAnIntAddr: - .word dispAnInt - dispOtherCharAddr: - .word dispOtherChar - - - -
    - -
    - Units of Measure - -

    Units of measure can be given xml treatment too with the quantity element. In , the siunitxsiunitx packagepackagesiunitxunits package is loaded to achive unit handling. Since that package only offers SI units, some other common units will be added by in the preamble. In HTML, the capabilities of siunitx are simulated, weakly. Note that at present, you should not attempt to use the quantity element within a math environment.

    -

    The value of gravitational constant g is 9.8. Force is measured in , also known as one . A quantity with rather ridiculous units is 23. One is the same as . You can have a unitless quantity, like 42, which may help with consistency between such numbers and units in the output. Some non-SI units are available, such as the absurd . The command \pi is recognized within mag in conversions to HTML, which is consistent with the behavior with a conversion to , for example there are - - 2\pi - - - in a full circle. This is a similar quantity with multiple occurences of \pi to test a particular template used for HTML output. It is not meant to make any sense: - - 21\pi45\pi234\pi890 - - .

    - -

    For a full list of the allowed units and prefixes, see pretext-units.xsl. If you have a need for more units, they need to be added to pretext-units.xsl in the section that deals with units which are not part of siunitx by default. Note that the mag element should come first, followed by the unit element, followed by the per element.

    - -
    - -
    - Side-By-Side Panels - - - Introduction - -

    The flow of a page is almost universally top-to-bottom. But at times you would like to go across a page, perhaps to compare items (identical content in two different languages), or to make good use of a page real estate by grouping several small items together ( images). So the sidebyside tag is strictly a layout device, though it does convey some meaning by grouping certain objects together. A variety of different objects can be put side-by-side using the sidebyside element. Specifically, figure, image, tabular, p, ol, ul, dl, pre, poem, and more. The individual components of a sidebyside are generically called panelspanels.

    - -

    As a layout device, the sidebyside does not allow a caption, is never numbered, and therefore cannot be cross-referenced. You may cross-reference whatever element holds the sidebyside, and many of the panels may be cross-referenced individually.

    - -

    As a first example, we have two single paragraphs, laid out with different widths, and slight margins on each side. The widths have been chosen experimentally to get roughly identical heights for the two paragraphs of varying length.

    - - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lorem diam, convallis in nulla sed, accumsan fermentum urna. Pellentesque aliquet leo elit, ut consequat nunc dapibus ac. Sed lobortis leo tincidunt, vulputate nunc at, ultricies leo. Vivamus purus diam, tristique laoreet purus eget, mollis gravida sapien. Nunc vulputate nisl ac mauris hendrerit cursus. Sed vel molestie velit. Suspendisse sem sem, elementum at vehicula id, volutpat ac mi. Nullam ullamcorper fringilla purus in accumsan. Mauris at nunc accumsan orci dictum vulputate id id augue. Suspendisse at dignissim elit, non euismod nunc. Aliquam faucibus magna ac molestie semper. Aliquam hendrerit sem sit amet metus congue tempor. Donec laoreet laoreet metus, id interdum purus mattis vulputate. Proin condimentum vitae erat varius mollis. Donec venenatis libero sed turpis pretium tempor.

    - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra. Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    -     -     - - - Figures with Numbers Side-By-Side - -

    Figures, or other captioned items such as tables or listings, can be placed side-by-side using the sidebyside element. The figures will be captioned and numbered as if they were part of the vertical flow of the document. For example, see and

    - -

    However, if the sidebyside is placed inside another figure, then the outer figure gets an overall caption and a regular number, while the captions of the interior items will be labelled as (a), (b), (c), etc; for example, see the subfigures in . You can also cross-reference the subfigures individually, for example: .

    - -

    The sidebyside tag can have an attribute widths that specifies a percentage width of the page for each panel of the layout. There are automatic margins by default, and any remaining width is divided evenly to space out the panels. When the margins attribute is given as auto, or in the default case, the margins provided each equal half of the inter-panel space.

    - -

    With no attributes on the sidebyside, each panel is the same width and there is no inter-panel space and no margin. For a sidebyside with a single panel, with its width specified, the panel will be centered.

    - -
    - Side-by-Side, with figures as children, automatic margin - -
    - - - a white square outlined in blue covered by a black X - -
    -
    - - -
    -     -
    - -
    - Side-by-Side, with figures as children, margin set to zero - -
    - width=50% - -
    -
    - width=25% - - -
    -     -
    - -
    - Widths calculated automatically, all defaults - -
    - - -
    -
    - - -
    -
    - - -
    -     -
    - - -
    - Interior figure - -
    -
    - Regular numbering - -
    -
    - Regular numbering - -
    -     -     - - - Images - -

    We can use the sidebyside element to put imagesimage next to each other. These will illustrate a text, but with no captions or numbers, cannot be cross-referenced. This next example has 10% margins, and the panels have widths 25% and 40%, leaving 15% computed as the one inter-panel space.

    - - - - - - -

    Now we fine-tune with different widths (which add up to 100%). The five images have been given different vertical alignments, top middle bottom top middle via the valigns attribute.

    - - - - - - - - - -

    If you want an overall caption to a group of images, but no sub-captions on your images, that is also straightforward. This example has no attributes specified. The overall figure may be cross-referenced, as

    - -
    - Two equally-spaced (identical) images - - - - -
    -     - - - Common Side-By-Side Constructions - -

    We have now seen at least one example of each of the four most common constructions involving sidebyside. Working from the exterior inward, we can go figure, sidebyside, figure, X, where X is some atomic (unnumbered) item we might use elsewhere in a document, the inner figure may be repeated with different objects X, and the figures have captions. Each figure is independently optional, leading to the four combinations in this table. Note this applies to any captioned item used inside the sidebyside, but a figure is the most flexible.

    - - - <c>sidebyside</c> and <c>figure</c> interactions - - - Outer FigureInner FigureEffect - - - AbsentAbsentLayout only, no numbers nor captions - - - AbsentPresentNumbers and captions on figure(s) - - - PresentAbsentNumber and overall caption - - - PresentPresentNumber and overall caption,sub-numbers and captions on figure(s) - - -
    -     - - - Vertical Alignment -

    Vertical alignment can be specified using the valign attribute which admits a space-separated list of top, middle, and bottom; the default is top.

    - - - - - - - - - - -
    - Middle - -
    -
    - Top - -
    -
    - Middle - -
    -     - -

    The singular version of the attribute, valign, can provide the same alignment to each panel, here we use five different widths, but all with vertical alignment of middle.

    - - - - - - - - -     - - - Text Next to Text and Images - -

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

    - - - -

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

    -     - -

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

    -

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

    -

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

    -     -

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

    -

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

    -     - -

    Similarly, text can be put next to images.

    - - -

    here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text cross reference: and math: x^2

    - -     - -

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

    - - -

    here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text; cross reference: and math: x^2

    -
    - Text next to a figure - -
    -     -     - - - Image Formats, Side-by-Sides - -

    Most of our demonstrations here use our square blue cross test image, which is provided as a PNG image. You may specify images by any of the methods described in the section on graphics, . The complete graph below is specified with no file extension, on the assumption that an SVG version exists for HTML output, and a PDF version exists for output. The second is a JPEG image that we use elsewhere for a YouTube video, but recycle here as an image provided in that format. By default, they are aligned at their tops.

    - - - - - - -

    Here are two TikZ images, authored side-by-side. The first has had its geometric portions of the original scaled down to 75%, with the effect of increasing the text, relatively, so the application in a side-by-side panel with 25% width has legible text. We caption only the second panel, which has no text adjustments. From TeXample.net.

    - - - - - - - - - - - \begin{tikzpicture}[scale=0.75] - \begin{scope}[blend group = soft light] - \fill[red!30!white] ( 90:1.2) circle (2); - \fill[green!30!white] (210:1.2) circle (2); - \fill[blue!30!white] (330:1.2) circle (2); - \end{scope} - \node at ( 90:2) {Typography}; - \node at ( 210:2) {Design}; - \node at ( 330:2) {Coding}; - \node [font=\Large] {\LaTeX}; - \end{tikzpicture} - - - -
    - Work Flow - - - - - - - - - - \smartdiagram[circular diagram:clockwise]{Edit, - pdf\LaTeX, Bib\TeX/ biber, make\-index, pdf\LaTeX} - - -
    - -

    Images by Stefan Kottwitz

      -
    • Venn Diagram
      • -
    • Work Flow
      • -

    -     -     - - - Tables Side-By-Side - -

    Tablestable can also be put side-by-side, as demonstrated below in ; naturally, subtables can be referenced as in .

    - -
    - Side-by-Side, with tables as children - - - width=50% - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    - - width=25% - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    -     -
    - -
    - Widths can be calculated automatically - - - Table with automatic widths - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    - - Table with automatic widths - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    -     -
    - - -

    If you put two table elements side-by-side without an enclosing figure, then they will use regular numbering; see Tables.

    - - - - - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    - - - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    - - - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    -     -     - - - - Tables Next to Figures - -

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

    - - - - Table next to a Figure - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    - -
    - Figure next to a Table - -
    -     - -
    - Figure and Table, with overall caption, hence sub-captioned - - - Table next to a Figure - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    - -
    - Figure next to a Table - -
    -     -
    -     - - - Tables Next to Text - -

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

    - - - - Table next to text - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -
    - -

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

    -

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

    -

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

    -     - -

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

    -

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

    -     -     -     - - - Tabular Next to Each Other - -

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

    - - - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - - CCCC - DDDD - - - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - - -     - - - Lists in Side-by-Sides - -

    A regular list normally belongs in a p but it can be placed unadorned into a panel of a side-by-side, as demonstrated below in . You can also put named lists into a panel, and then the title, introduction, conclusion, and caption will behave as expected, along with a number that might be used in a cross-reference (), or perhaps we might cross-reference by title, .

    - -
    - Two named lists - - - Sea Life - -

    Dr. Seuss again.

    -     -
      -
    • One fish
      • -
    • Two fishNot fishes
      • -
    • Red fish
      • -
    • Blue fish
      • -
    -     - - Color Shades - colorsshades -
      -

    1. Bluein many shades

        -
      1. Light
        2. -
      2. Navy
        3. -
      3. Royal
        4. -

      2. -

    2. Red

        -
      1. Maroon
        2. -
      2. Pink
        3. -
      3. Shocking
        4. -

      3. -
    - -

    This ends our example.

    -     -     -     -
    - -

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

    - - - - Sea Life - -

    Dr. Seuss again.

    -     -
      -
    • One fishNo more fishes
      • -
    • Two fish
      • -
    • Red fish
      • -
    • Blue fish
      • -
    -     - - Color Shades - colorsshades -
      -

    1. Blue

        -
      1. Light
        2. -
      2. Navy
        3. -
      3. Royal
        4. -

      2. -

    2. Reda really nice color

        -
      1. Maroon
        2. -
      2. Pink
        3. -
      3. Shocking
        4. -

      3. -
    - -

    This ends our example.

    -     -     -     - -

    We also need to test a sidebyside in a list. The widths are now relative to the space given over to an indented item. Here we nest and nest and nest and nest to get a big, obvious indentation, and then include an image at 100% width and no margin. In your mind's eye, or with a ruler, check that the image spans all the way over to the right margin.

      -

    1. This is

        -

      1. a very

          -

        1. wide

            -
          1. -

            rectangle

            - -
            2. -

          2. -

        2. -

      2. -

    -     - - - Stacking: Back to Vertical Flow - -

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

    - -

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

    - - - -

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

    - -     - - -

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

    -     -     - -

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

    - - - - -
      -
    • Blue
      • -
    • Square
      • -
    • Geometric
      • -
    -

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

    -     -     - -

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

    - - - -

    Paragraph one.

    - -

    Paragraph two.

    - - - - - - - 1111 - 2222 - - - aaaa - bbbb - - - AAAA - BBBB - - -     - -     - -

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

    - -

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

    - -
    - Experimental results collected in a figure - - - - i - t_i - x_i - y_i - - 00.000.00000.5000 - 10.200.10000.4800 - 20.400.19600.4560 - 30.600.28720.4295 - 40.800.37310.4027 - 51.000.45360.3783 - 61.200.52930.3591 - 71.400.60110.3480 - 81.600.67070.3474 - 91.800.74020.3603 - - 102.000.81230.3900 - - - -

    This set of values and this plot have nothing to do with each other. You'll recognize that they've been liberated from earlier in this work.

    -

    Step back and simply examine how the pieces all fit together within a figure.

    -     -     -
    - - - Bully Pulpit - -

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

    - -

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

    -     -     - - - Other Panels - -

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

    - - -
      -

    1. Footnotes: Fermat allusion at .

      2. -

    2. Examples: Mystery derivative at .

      3. -

    3. Definition-like: A mathematical statement with no proof .

      4. -

    4. Figures: An early plot, Figure.

      5. -
    -
      -

    • Footnotes: Fermat allusion at .

      • -

    • Examples: Mystery derivative at .

      • -

    • Definition-like: A mathematical statement with no proof .

      • -

    • Figures: An early plot, Figure.

      • -
    -     - -

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

    - - -

    here is some text, and here is an equation that contains alignment. - f(x)&= x^2+3x+2 - &=(x+2)(x+1) -

    - -

    here is some text, and here is an equation that contains alignment. - f(x)&= x^2+3x+2 - &=(x+2)(x+1) -

    -

    here is some text, and here is an equation that contains alignment. - f(x)&= x^2+3x+2 - &=(x+2)(x+1) -

    -     -     - -

    Pre-formatted text may be included by using the pre element. This content is horizontally-rigid, so as the author, you need to be sure to provide enough width for the panel to contain the content. It is easy to see the boundary of the panels when rendered in HTML since there is a background that fills the panel.

    - - -
    - Hello, World! in Pascal and C++ - - 
    -                            program HelloWorld;
-                            begin
-                              WriteLn('Hello, world!');
-                            end.
-
    - 
    -                        #include
-
-                        int main()
-                        {
-                            std::cout << "Hello, world!";
-                            return 0;
-                        }
-
    -     -
    - -
    - A graph defined by data (from Keller and Trotter's Applied Combinatorics) - - 
    -                            graph1.txt
-                            9
-                            6 2
-                            1 5
-                            1 7
-                            6 8
-                            9 1
-                            4 3
-                            5 7
-                            1 3
-                            5 9
-                            7 9
-
    - -     -
    -     - - - Poems as Side-By-Side Panels - - -

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

    - - - - Fire and Ice - Fire and Ice, Frost - Robert Frost - - Some say the world will end in fire, - Some say in ice. - From what I've tasted of desire - I hold with those who favor fire. - But if it had to perish twice, - I think I know enough of hate - To say that for destruction ice - Is also great - And would suffice. - - - -

    You might have several things to say about a poem and you could use a sequence of paragraphs immediately adjacent.

    -

    This is a second paragraph of commentary.

    -     -     - -

    Poems are not horizontally-rigid, but they are not perfectly horizontally-flexible either. The left copy of this next poem is in a panel roughly 2/3 the width of the page and fits there. The right copy has the first five lines and is in space about half the previous width, and you can see the lines being wrapped with obvious indentation. So you can constrain the width of a poem if you do not mind the additional indentation. (Recognize that this example is a bit extreme.)

    - - - - Sonnet to Liberty - Sonnet to Liberty, Wilde - Oscar Wilde - - Not that I love thy children, whose dull eyes - See nothing save their own unlovely woe, - Whose minds know nothing, nothing care to know, - But that the roar of thy Democracies, - Thy reigns of Terror, thy great Anarchies, - Mirror my wildest passions like the sea, - And give my rage a brother! Liberty! - For this sake only do thy dissonant cries - Delight my discreet soul, else might all kings - By bloody knout or treacherous cannonades - Rob nations of their rights inviolate - And I remain unmoved-and yet, and yet, - These Christs that die upon the barricades, - God knows it I am with them, in some things. - - - - Sonnet to Liberty - Oscar Wilde - - Not that I love thy children, whose dull eyes - See nothing save their own unlovely woe, - Whose minds know nothing, nothing care to know, - But that the roar of thy Democracies, - Thy reigns of Terror, thy great Anarchies, - - - - -     - - - Side-By-Side Groups - -

    A side-by-side group, sbsgroup, is still in development. (Notably, subcaptions do not behave as expected.) It is a sequence of sidebyside, which may conceivably use the same margins, widths and vertical alignments for each horizontal run of panels. Attributes on the sbsgroup are global to the group's enclosed sidebyside, and will be used by each contained sidebyside. If attributes are present on an individual sidebyside, they override the global values. The next two examples demonstrate some of this behavior, in a limited way.

    - -
    - Overall SBS Group - - -

    One.

    -

    Two.

    -

    Three.

    -     - -

    Four.

    -

    Five.

    -

    Six.

    -     -     -
    - -

    A long poem, when placed into a sidebyside will not fit onto a physical page and will not break across pages. With a sbsgroup you can put each stanza (say) into its own sidebyside and place something (commentary) next to it. We include the title with the first stanza and the author with the last stanza. This device can also be useful to attach commentary to specific stanzas.

    - - - - - The Stolen Child - Stolen Child, The, Yeats - - Where dips the rocky highland - Of Sleuth Wood in the lake, - There lies a leafy island - Where flapping herons wake - The drowsy water-rats; - There we've hid our faery vats, - Full of berries - And of reddest stolen cherries. - Come away, O human child! - To the waters and the wild - With a faery, hand in hand, - For the world's more full of weeping than you - can understand. - - - -

    Some commentary on Stanza One.

    -     -     - - - - - Where the wave of moonlight glosses - The dim grey sands with light, - Far off by furthest Rosses - We foot it all the night, - Weaving olden dances, - Mingling hands and mingling glances - Till the moon has taken flight; - To and fro we leap - And chase the frothy bubbles, - While the world is full of troubles - And is anxious in its sleep. - Come away, O human child! - To the waters and the wild - With a faery, hand in hand, - For the world's more full of weeping than you - can understand. - - - -

    Some commentary on Stanza Two.

    -     -     - - - - - Where the wandering water gushes - From the hills above Glen-Car, - In pools among the rushes - That scarce could bathe a star, - We seek for slumbering trout - And whispering in their ears - Give them unquiet dreams; - Leaning softly out - From ferns that drop their tears - Over the young streams. - Come away, O human child! - To the waters and the wild - With a faery, hand in hand, - For the world's more full of weeping than you - can understand. - - - -

    Some commentary on Stanza Three.

    -     -     - - - - William Butler Yeats - - Away with us he's going, - The solemn-eyed: - He'll hear no more the lowing - Of the calves on the warm hillside - Or the kettle on the hob - Sing peace into his breast, - Or see the brown mice bob - Round and round the oatmeal-chest. - For he comes, the human child, - To the waters and the wild - With a faery, hand in hand, - From a world more full of weeping than he - can understand. - - - -

    Some commentary on Stanza Four.

    -     -     - -     - -

    The main rationale for sbsgroup is to layout a grid of items, and by placing the layout parameters on the sbsgroup element, the items can line up across sidebyside and subcaptioning can run across the whole group. So, for example, if you have images to compare by placing in a grid, then making them all the same size, or of the same aspect ratio, can help with the overall consistency.

    - -

    This example has three sidebyside, each with four figure containing an identical image. Since the images are identical and the width is set to 20% they should all line up nicely with little effort. Since the default for margins is automatic, the remaining 20% of the overall width will be used for three inter-panel spaces of 5% and two margins of 2.5% each. Note the numbering of these as independent figures. We have left the captions empty for reasons of space, but you could add more information. Note that in print, a page break is allowed between any two of the sidebyside and cannot be suppressed.

    - - - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     -     - -

    We recycle the prior sbsgroup but now put it in its own overall figure. That will allow a caption for the whole group, and will cause the twelve figures to be subcaptioned. Except the subcaptioning is not implemented. Soon.

    - -
    - Twelve images, arranged in a grid - - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     -     -
    - -

    One more test. We override the spacing and vertical alignments of the middle sidebyside. Note that it is easy to make a panel so skinny that even the smallest possible caption does not fit in the width.

    - - - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     - -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     -     - -

    The following is a sbsgroup full of operation tables. Once upon a time it was rather cramped vertically in HTML output, but Andrew Scholer improved the spacing at GitHub #2387. The example is from Valerio Monti.

    - -
    - Tabelle delle operazioni per 1\le n\le 4 - - -

    - - \begin{array}{c|c} - + \amp \class[1]{0} \\ - \hline - \class[1]{0} \amp \class[1]{0} - \end{array} - -

    -

    - - \begin{array}{c|c} - \cdot \amp \class[1]{0} \\ - \hline - \class[1]{0} \amp \class[1]{0} - \end{array} - -

    -     - - -

    - - \begin{array}{c|cc} - + \amp \class[2]{0} \amp \class[2]{1} \\ - \hline - \class[2]{0} \amp \class[2]{0} \amp \class[2]{1}\\ - \class[2]{1} \amp \class[2]{1} \amp \class[2]{0} - \end{array} - -

    -

    - - \begin{array}{c|cc} - \cdot \amp \class[2]{0} \amp \class[2]{1} \\ - \hline - \class[2]{0} \amp \class[2]{0} \amp \class[2]{0}\\ - \class[2]{1} \amp \class[2]{0} \amp \class[2]{1} - \end{array} - -

    -     - - -

    - - \begin{array}{c|ccc} - + \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ - \hline - \class[3]{0} \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ - \class[3]{1} \amp \class[3]{1} \amp \class[3]{2} \amp \class[3]{0} \\ - \class[3]{2} \amp \class[3]{2} \amp \class[3]{0} \amp \class[3]{1} \\ - \end{array} - -

    -

    - - \begin{array}{c|ccc} - \cdot \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ - \hline - \class[3]{0} \amp \class[3]{0} \amp \class[3]{0} \amp \class[3]{0} \\ - \class[3]{1} \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ - \class[3]{2} \amp \class[3]{0} \amp \class[3]{2} \amp \class[3]{1} \\ - \end{array} - -

    -     - - -

    - - \begin{array}{c|cccc} - + \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ - \hline - \class[4]{0} \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ - \class[4]{1} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \amp \class[4]{0} \\ - \class[4]{2} \amp \class[4]{2} \amp \class[4]{3} \amp \class[4]{0} \amp \class[4]{1} \\ - \class[4]{3} \amp \class[4]{3} \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \\ - \end{array} - -

    -

    - - \begin{array}{c|cccc} - \cdot \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ - \hline - \class[4]{0} \amp \class[4]{0} \amp \class[4]{0} \amp \class[4]{0} \amp \class[4]{0} \\ - \class[4]{1} \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ - \class[4]{2} \amp \class[4]{0} \amp \class[4]{2} \amp \class[4]{0} \amp \class[4]{2} \\ - \class[4]{3} \amp \class[4]{0} \amp \class[4]{3} \amp \class[4]{2} \amp \class[4]{1} \\ - \end{array} - -

    -     -     -
    -     - - - Testing a Side-By-Side First - -

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

    - - - - -

    Here is text block 1

    -

    Here is text block 2

    -     -     - -     - - - - -

    Here is text block 1

    -

    Here is text block 2

    -     -     -     - -

    And a sbsgroup in similar circumstances.

    - - - - - -

    Here is text block 1

    -

    Here is text block 2

    -     - -

    Here is text block 3

    -

    Here is text block 4

    -     -     -     -     - - - First Child of a Paragraphs - - - - A - B - - - C - D - - - - - \alpha - \beta - - - \gamma - \delta - - - - - -     - - - Testing Styling of Related Elements - -

    This subsection has non-side-by-side structures, to aid with the effects of styling decisions across the range of possibilities. First a figure with a caption holding a scaled image and a cross-reference for knowl testing: .

    - -
    - A traditional figure - - -
    -     -
    - -
    - Side-by-Side Gallery - -

    This subsection attempts to survey all the possible items that can be placed into a sidebyside element, in various combinations. While intended to be exhaustive across contents, it does not test all possibilities, and is not meant to be instructive (see for that). The layout is identical for each sidebyside, 5% margins, panel widths of 40% and 45%, leaving 5% for the space between the panels. The vertical alignment is left at the default, top.

    - -

    We begin with simpler atomic items. If necessary, comments follow each.

    - -
    - Single p (left), stack (right) - -

    Vestibulum sit amet est non lacus accumsan iaculis aliquam nec leo. Maecenas placerat consequat quam, a lobortis odio convallis vitae. Curabitur sagittis, risus non suscipit pulvinar, enim tortor posuere purus, id dignissim sapien sapien non dui. Vestibulum ultrices, enim a ornare consectetur, nisl est iaculis arcu, eget scelerisque nunc magna a nisl. Vestibulum vestibulum ante sit amet ex vulputate, eu facilisis sapien tempor.

    - -

    Aliquam dui nisi, pharetra id enim vel, imperdiet laoreet risus. Nunc convallis elit eu erat imperdiet tincidunt. Sed eget augue et nunc mollis tempor. Suspendisse luctus elit non lorem scelerisque, nec lacinia lectus dictum.

    -

    Vivamus ut orci nisl. Donec eleifend ultricies tortor, a pellentesque neque dignissim in. Praesent maximus, augue eu pretium auctor, dolor quam feugiat augue, ut vulputate nunc eros vitae massa. Phasellus quis ante quis est venenatis dapibus eget luctus ipsum.

    -     -     -
    - -
    - An ol with simple items, a ul with items with paragraphs - -
      -
    1. Blue
      2. -
    2. Red
      3. -
    3. Green
      4. -
    4. Purple
      5. -
    5. Violet
      6. -
    6. Brown
      7. -
    -
      -

    • Vestibulum sit amet est non lacus accumsan iaculis aliquam nec leo. Maecenas placerat consequat quam, a lobortis odio convallis vitae.

      -

      Curabitur sagittis, risus non suscipit pulvinar, enim tortor posuere purus, id dignissim sapien sapien non dui.

      • -

    • Vestibulum ultrices, enim a ornare consectetur, nisl est iaculis arcu, eget scelerisque nunc magna a nisl.

      -

      Vestibulum vestibulum ante sit amet ex vulputate, eu facilisis sapien tempor.

      • -
    -     -
    - -
    - A program and a console - - - - n_loops <- 10 - x.means <- numeric(n_loops) - for (i in 1:n_loops){ - x <- as.integer(runif(100, 1, 7)) - x.means[i] <- mean(x) - } - x.means - - - - gcc -o intAndFloat intAndFloat.c - ./intAndFloat - - 19088743 (integer) and 19088.742188 (float) - - - - -
    - -

    Note that these two chunks of verbatim text will very likely exceed the right side of a too-skinny panel. We have severly edited these two examples from previous appearances just to fit here.

    - -
    - An poem and a tabular - - - To A Friend Whose Work Has Come To Nothing - William Butler Yeats - - Now all the truth is out, - Be secret and take defeat - From any brazen throat, - For how can you compete, - Being honour bred, with one - Who, were it proved he lies, - Were neither shamed in his own - Nor in his neighbours' eyes? - Bred to a harder thing - Than Triumph, turn away - And like a laughing string - Whereon mad fingers play - Amid a place of stone, - Be secret and exult, - Because of all things known - That is most difficult. - - - - - OrganismClassification - - TroutFish - MonkeyMammal - CrowBird - CriminiFungus - BeeInsect - - -
    - -

    A tabular can exceed the width of its panel in print, while in HTML it may reflow individual cells to stay within a panel, depending on their contents.

    - -
    - A pre, and a pre employing cline - - 
    -                    Vestibulum sit amet est non
-                        lacus accumsan iaculis
-                    aliquam nec leo. Maecenas
-                    placerat consequat quam, a
-                    lobortis odio convallis
-                    vitae.
-
    - 
    -                        Vestibulum sit amet est non
-                            lacus accumsan iaculis
-                        aliquam nec leo. Maecenas
-                            placerat consequat quam,
-                        a lobortis odio convallis
-                                vitae.
-
    -     -
    - -

    Be aware that the lines of pre can spill outside of its panel without any word-wrapping. So you may need to vary panel widths or rearrange line breaks manually. Page width is a scarce resource.

    - -
    - An identical image, twice - - - - -
    - -

    Images will scale to fill their panel's width. We provide no services to change the aspect ratio of your images, that is your responsibility to accomplish elsewhere. This rectangular image will have slightly different widths, and so will be slightly deeper in the right panel (at a 45:40 ratio). Remember, vertical alignment is at the top.

    - -

    Now we turn to captioned items: figure, table, listing, and the anomalous named list, list, whose future is uncertain. We test subcaptions here. Note that many different atomic items can go in a figure, and largely they will behave in a sidebyside much as they do when placed in a panel all by themselves ( captionless).

    - -
    - A figure and a table - -
    - A Rectangular Test Image - -
    - - Classifying Organisms - - - OrganismClassification - - TroutFish - MonkeyMammal - CrowBird - CriminiFungus - BeeInsect - -
    -     -
    - -
    - A listing and a list - - - A statistical computation - - - n_loops <- 10 - x.means <- numeric(n_loops) - for (i in 1:n_loops){ - x <- as.integer(runif(100, 1, 7)) - x.means[i] <- mean(x) - } - x.means - - - - - Colors Again - -

    We have named list of colors.

    -     -
      -
    1. Blue
      2. -
    2. Red
      3. -
    3. Green
      4. -
    4. Purple
      5. -
    5. Violet
      6. -
    6. Brown
      7. -
    - -

    That was nice.

    -     -     -     -
    - -

    Now we have some more interactive elements.

    - - - - - -

    Videos can be placed quite compactly for HTML output, but we display a fair amount of information for a YouTube video in print, and therefore two videos side-by-side gets pretty crowded. The examples above have the bare minimum amount of information attached (not in an overarching figure), and the bare amount which which is displayed in print. We could relax our common spacing to make it a bit better. Read about side-by-side groups (sbsgroup) and experiment with stacking several sub-captioned videos into an overall captioned figure (). For other examples see and .

    -
    - -
    - Open Problems - -

    Like for mathematical research. Experimental as of 2023-07-06.

    - - - -

    Solve the Riemann HypothesisFootnotes were once incomplete on open problems. and provide a short proof of Fermat's Last Theorem.

    -     -     - -
    - -
    - Poetry - -

    There is support for poems via the poempoem tag, which can contain a title, author and multiple stanza, each containing multiple line. See the source of the following poem for an example of the exact arrangement. Note how the first quote crosses two line elements and how this is handled in the source. There are many very flexible options for horizontal alignment and indentation. Further extensive examples, constructed by Jahrme Risner, are available in the example Humanities document.

    - - - The Charge of the Light Brigade - Charge of the Light Brigade, The, Tennyson - Alfred Lord Tennyson - - - Half a league, half a league, - Half a league onward, - All in the valley of Death - Rode the six hundred. - Forward, the Light Brigade! - Charge for the guns! he said: - Into the valley of Death - Rode the six hundred. - - - - Charge of the Light Brigadesecond stanza - Forward, the Light Brigade! - Was there a man dismay'd? - Not tho' the soldier knew - Someone had blunder'd: - Theirs not to make reply, - Theirs not to reason why, - Theirs but to do and die: - Into the valley of Death - Rode the six hundred. - - - -

    Ken Levasseur, who teaches at UMass-Lowell, has limericks in his Applied Discrete Structures textbook. When he reported that they were unable to be the target of a cross-reference, Karl-Dieter Crisman penned the following limerick.

    - - - Karl-Dieter Crisman - - - CS students studying in Lowell - Required their books to have soul. - Along came their teacher - Who asked for this feature: - A poem that lives in a knowl. - - - -

    And when yours truly tried to joke about poetry on GitHub CLI #182, back came:

    - - - Steven Clontz - - - There once was a maintainer named Rob - Who told bad jokes while on the job - While they were lame - You could say the same - Of Steven's limericks that cause you to sob - - - -
    - -
    - Atomic Objects - - -

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

    -     - - - - - <tag>image</tag> - -

    An image can be placed in five different ways:

      -
    1. all by itself, as a peer of p typically, with layout control,
      2. -
    2. inside a figure, earning a number and caption,
      3. -
    3. inside a sidebyside, with size and layout configured,
      4. -
    4. inside a figure inside a sidebyside, with size and layout configured, with a number and caption, and
      5. -
    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),).
      6. -
    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.

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

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

    - - -
    - NZ Landscape - -
    -
    - 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: .

    - -
    - Amalgamation of Scapes - -
    - NZ Landscape - -
    -
    - New Zealand Terrascape - -
    -     -
    - -

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

      -
    1. - -
      2. -
    2. - -
      3. -
    -

    - -

    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.

    -
    - Rotated Images - - -
    - rotate="180" - -
    -
    - rotate="15" -
    -     -
    - -

    For pdf output destined for print, 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.

    - -
    - This landscape figure will be rotated so the long edge is vertical, and will appear on its own page in print PDF output. - -
    -
    - Wide figure containing a sidebyside containing a rotated image. This will be rotated and appear on its own page in print PDF output. - -
    - Quack - -
    -
    - Propulsion System - -
    -     -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -     - - - <tag>video</tag> - -

    An video can be placed in five different ways:

      -
    1. all by itself, as a peer of p typically, with layout control,
      2. -
    2. inside a figure, earning a number and caption,
      3. -
    3. inside a sidebyside, with size and layout configured,
      4. -
    4. inside a figure inside a sidebyside, with size and layout configured, with a number and caption, and
      5. -
    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),).
      6. -
    Examples of each, and more.

    - -

    Videos can be realized in many forms, and can come from a variety of sources. See 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.

    - -     - - - <tag>program</tag>, <tag>console</tag> - -

    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. -
    2. inside a listing, earning a number and caption, with layout control
      3. -
    3. inside a sidebyside, with size and layout configured
      4. -
    4. inside a sidebyside, with size and layout configured, and inside a figure
      5. -
    5. inside a sidebyside, with size and layout configured, with each inside a listing, earning different numbers
      6. - -
    6. inside a figure inside a sidebyside inside a listing, with size and layout configured, with a number and title, but now sub-numbered ((a), (b), (c),).
      7. -
    Examples of each, and more.

    - -

    Programs can be realized in many forms, and can come from a variety of sources. See 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.

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

    - - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - -

    And a console element, also with no layout control.

    - - - gcc -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - -

    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.

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

    - - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - -

    A longer console, with margins so significant the appearance is ill-advised.

    - - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - -

    Two listing, with title, and no layout control.

    - - - Hello, World! in C - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - - - - A console session on a Raspberry Pi - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - -

    Same two listing, but now with layout control on the program and console.

    - - - Hello, World! in C - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - - - - A console session on a Raspberry Pi - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - -

    This sidebyside gives each panel a 30% width. The remaining 10% is apportioned for margins and separation.

    - - - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - - 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.

    - -
    - Some Code Samples - - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - - 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 - - - -
    - - - -

    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.

    - - - - Hello! - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - - - Raspberry Pi - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - - -

    And again, the two-panel sidebyside of listing, but now inside a figure that has a number and a title. And then the listing are sub-numbered as (a) and (b).

    - - -
    - Two Code Listings - - - Hello! - - - /* Hello World program */ - - #include<stdio.h> - - main() - { - printf("Hello, World!"); - } - - - - - Raspberry Pi - - gcc -Wall -o intAndFloat intAndFloat.c - ./intAndFloat - - The integer is 19088743 and the float is 19088.742188 - - - - - -
    -     - - - <tag>tabular</tag> - -

    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. -
    2. all by itself, as a peer of p typically, with explicit layout control,
      3. -
    3. inside a table, earning a number and title,
      4. -
    4. inside a sidebyside, with size and layout configured,
      5. -
    5. inside a table inside a sidebyside, with size and layout configured, with a number and title, and
      6. -
    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),).
      7. -
    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 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: , , . 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.

    - - - - StateOnly 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,223Wow! 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.

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

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

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

    - - - 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 we make no attempt to control the width, and so it will extend into the margins. In 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 we have set the width explicity to 100% and so it should be identical to the automatic width case just prior.

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

    - - - - West Coast - - - 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 - - -
    - - Function Values - - - x - f(x) - - - 3 - 9.734 - - - 5 - 2.175 - - -
    -     - -

    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.

    - -
    - Geography and Mathematics - - - West Coast - - - 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 - - -
    - - Function Values - - - x - f(x) - - - 3 - 9.734 - - - 5 - 2.175 - - -
    -     -
    -     -
    - -
    - Advanced Numbering - - -

    This section demonstrates the numberingnumbering patterns used throughout . There are five subsections. Two intermediate subsections each have two subsubsections. This creates a total of seven divisions that are leaves of the document tree. In each leaf we have placed two numbered theorems, for a total of fourteen. There is no real content, this is just a demonstration.

    - -

    Use values of 0 through 3 for the numbering.theorems.level parameter to see how these numbers change accordingly. It is easiest to compare if you use chunk.level < 2 so the theorems all land on the same page if you are previewing in HTML.

    -     - - - One - -

    A document leaf.

    - - - First Theorem - Cauchy -

    No statement.

     -     - - - - - Second Theorem - Bunyakovsky -

    No statement.

     -     - -     - - - Two - -

    Further subdivided.

     - - - Uno - -

    A document leaf.

    - - - First Theorem! - Schwarz -

    No statement.

     -     - - - Second Theorem? - Inequality -

    No statement.

     -     - -     - - - Dos - -

    A document leaf.

    - - - First Theorem? -

    No statement.

     -     - - - Second Theorem! -

    No statement.

     -     - -     - -     - - - Three - -

    A document leaf.

    - - - First Theorem -

    No statement.

     -     - - - Second Theorem -

    No statement.

     -     - -     - - - Four - - -

    Further subdivided. We include two theorems as numbered items in the introduction to test their numbers, which should always be logical.

    - - - Good Numbered Theorem One -

    No statement.

     -     - - - Good Numbered Theorem Two -

    No statement.

     -     - -     - - - Uno - -

    A document leaf.

    - - - First Theorem -

    No statement.

     -     - - - Second Theorem -

    No statement.

     -     - -     - - - Dos - -

    A document leaf.

    - - - First Theorem -

    No statement.

     -     - - - Second Theorem -

    No statement.

     -     - -     - - -

    Conclusion now. We include two theorems as numbered items in the conclusion to test their numbers, which are sometimes totally illogical and are inconsistent across output formats. To see the effect, set the level for numbering theorems to 3. See this GitHub Issue #139 for details.

    - - - Bad Numbered Theorem One -

    No statement.

     -     - - - Bad Numbered Theorem Two -

    No statement.

     -     - -     -     - - - Five - -

    A document leaf.

    - - - First Theorem -

    No statement.

     -     - - - Second Theorem -

    No statement.

     -     - -     - - - Theorems in This Section - -

    We have a lot of theorems in this section, so we illustrate including an automatic list of these here. We use the elements attribute to limit the list to theorem elements, and we use the scope attribute to limit the list to this section. You can use an introductory p like this one, or not. The list gets no title or visual separation, so use the usual subdivision elements to make that happen. The elements attribute can be a space-delimited list of many different elements. This list should not include the Fundamental Theorem of Calculus, Theorem. See a slightly different example in .

    - - -     - - - A Title with ] a Right Bracket - -

    has trouble with brackets that end up inside optional arguments, so this subsection title is only a check on the defense against that. And now an exercise with a title that could really be a problem.

    - - - A Right Brace } and a Right Bracket] - - -

    The right brace is is used as a grouping character in so this is just a test of its behavior in titles.

    -     - -

    A faux hint to get this exercise to migrate into a solutions.

    -     -     - -     - - - A Title with } a Right Brace - -

    And now a right brace in a division title.

    - -     - - - A Title with <m>a]b</m> a Math Right Bracket - -

    And now a right bracket within math in a division title.

    -

    We do not test a right brace within math, since it should be escaped, as is normal practice.

    -     - - - Just an Exercise - - - An Extraneous Exercise - - -

    This exercise is here just as a test of the solutions division coming next. So it is serving a purpose, even if it is not apparent.

    -     - -

    A hint, so this exercise looks identical in structure to the one in the previous subsection.

    -     -     -     - - - -

    This is a solutions division, which will be a peer of the other subsection in this section. The default behavior is to look to the parent division (a section here) and collect all the hints, answers, and solutions from every exercise (and friends) inside this containing division. (There are just two, similar inline exercise.)

    - -

    But instead of the default, we employ a scope attribute to define the parent division of the exercises whose solutions will be shown. In this example we specify the subsection that is two back, the one which tests brackets in titles.

    -     -     -
    - -
    - Customizations - - - Renaming Document Parts, Plus This Is A Really Long Title So That We Can Test How Well It Reacts To The Right Margin And Wraps Around To Form A Couple Of Lines, Plus How It Sits Relative To The Number Of The Subsection - -

    Namesname for various parts of a document are determined exactly once for each language, ensuring consistency and saving you the bother of always typing them in.

    - -

    However, you may want to have Conundrumsconundrumrepurposed from proposition in your document and you have no use for any Propositions. - conundrumrepurposed from proposition - rename an environmentconundrum - So you can repurpose the proposition tag to render a different name. Or you might have a Lab Manual and want to rename subsection as Activity. See the docinfo portion of this sample article to see how this is done, in concert with the example below. Note that you may provide versions for different languages by specifying a xml:lang attribute.

    - - - Smith - -

    Aah, this is confusing!

    -     -     - - - Important Notes - -

    If you are renaming many parts of your document, then you may not understand the design philosophy of . In particular, you should not be doing a wholesale shuffle of part, chapter, section, This feature is intended for very limited use and is not considered best practice.

    - -

    This feature could also be abused to provide a comprehensive suite of translations into a language not yet supported. If so, please contact us about moving your translations into for the benefit of all. Thanks.

    -     - -     - - - Customizing Phrases - -

    There is a facility for providing alternate text for small or short phrases, or other components of a paragraph. Here we just provide some tests. Each is inside of a block quote to identify it clearly.

    - -

    We have two auxiliary files of custom elements, so you need to adjust the publisher file to specify the second one during testing. First, a very simple string as the variation.

    - -
    -

    This is an article about .

    -
    - -

    Now a string which is partially text and partially simple markup.

    - -
    -

    We like to write with .

    -
    - -

    And a mildly more complicated structure (a list) as the variable text.

    - - -
    -

    Some of our favorite colors are

    -
    - -

    A cross-reference to test, since context is critical.

    - -
    -

    See also .

    -
    - -

    The URLs used as a replacement have the visual attribute which is also managed by the assembly pre-processor to provide a footnote. So this is a good test of the organization of the multiple passes employed by the pre-processor.

    - -
    -

    A URL that should have a footnote: .

    -
    -     - -
    - -
    - MyOpenMath Interactive Problems - -

    This is a test with two inline exercises containing MyOpenMath (MOM) problems. None of this is in the schema, and all of it is subject to change.

    - - - Negative Numbers and Exponents - -

    This is an introduction, providing articulation between the MOM problem and the contents of the text. For example, you might cross-reference a result or example given previously.

    -     - -     - - - A Statistical Test - -

    This is an introduction, providing articulation between the MOM problem and the contents of the text. For example, you might cross-reference a result or example given previously.

    -     - -     - - - With an image - -

    This is an introduction, providing articulation between the MOM problem and the contents of the text. For example, you might cross-reference a result or example given previously.

    -     - -     - - - Geometry of a Cone - -

    This problem has two figures. They come from the MOM server as SVG files. These image files are then converted to PDF for static formats like PDF, and into PNG for formats like Kindle.

    -     - -     -
    - - -
    - Ancillaries - -

    Once your content is in place, you can begin thinking about various useful derivative works. A natural example for a textbook is an Instructor's Version. Various switches for hints, answers, and solutions to exercises would allow you to include more of these for the use of just an instructor. Here we also demonstrate the commentary element. It is similar in many ways to a paragraphs in that it can be placed within any division and must be titled. The main difference is that it is not displayed by default, so you must set the string parameter commentary to the value yes. Other distinctions are:

      -
    • Since it is elective, you need to be careful about cross-references to and from a commentary. It is highly likely that you will want to make cross-references within a commentary pointing to other portions of your text, and this is always a good idea. You will want to avoid making cross-references to a commentary from other parts of the text, with the exception of a cross-reference that originates within some commentary.
      • -
    • Numbered items are prohibited within a commentary, such as a figure or a theorem. Doing so would disrupt consecutive numbering in different versions, with or without, commentary included. Numbered equations are not prohibited in the schema, but should definitely be avoided anyway.
      • -

    - -

    After some nonsense text in a paragraph, there is a commentary with two paragraphs. For the online version of this sample article, we have enabled commentaries. But if you are experimenting yourself, you will want to be aware if you are enabling these or not.

    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio orci, ullamcorper eget quam et, viverra tristique magna. Integer auctor arcu a sapien pulvinar elementum. Mauris porta, nulla id molestie dignissim, urna dolor rutrum ligula, eu elementum odio nisl sed libero. Nulla nec libero sem.

    - -

    Sed justo ex, efficitur dictum risus nec, eleifend consequat nibh. Proin rutrum mi id metus viverra blandit. In vel ligula a nibh aliquam pellentesque. Duis placerat purus et ligula sollicitudin, sodales consectetur ante viverra.

    - -

    Mauris fringilla nulla arcu, sagittis ultrices quam malesuada eleifend. Proin tristique elit eu bibendum tincidunt. Donec commodo lorem in magna egestas, vitae malesuada velit ornare. Pellentesque finibus neque in venenatis tristique. In id blandit est, in euismod urna. Donec commodo sagittis ligula, in venenatis nulla porttitor in. Donec nec tortor sit amet felis posuere ultricies. Suspendisse euismod quis ex eu placerat.

    -
    - -
    - Worksheets - - - About Worksheets - -

    This is a section full of worksheets. Each is a division of its own, via the worksheet element. This is an optional introduction to the current section. In practice you might want to rip out all the worksheets of an entire book and bundle them up as an activity book.

    - -

    If you make PDF output you will notice an increased amount of control over layout. Also, if the publication file elects draft mode, then there will be visual indicators of prescribed whitespace.

    -     - - - A Geometric Prelude (without authored pages) - - -
      -
    • Practice visualizing vector addition
      • -
    • Use vectors without explicit coordinates
      • -
    -     - -

    This two-page worksheet was generously donated to the sample article by Dave Rosoff at a CuratedCourses workshop in August2018. It has the default (skinny) margins.

    - -

    It was known to Euclid, and probably earlier, that the midpoints of the sides of any quadrilateral all lie in the same plane (even if the vertices of the quadrilateral do not). In fact, these midpoints are the vertices of a parallelogram, as pictured in .

    - -
    - The midpoints of the sides of a quadrilateral are the vertices of a parallelogram. - - - \begin{tikzpicture}[xscale=0.8, yscale=0.8] - \draw[style={black, ultra thick}] (0,0) -- (5,0) -- (4,4) -- (2,5) -- (0,0); - \draw[style={black, dashed, very thick}] (2.5, 0) -- (4.5, 2) -- (3, 4.5) -- (1, 2.5) -- (2.5, 0); - \end{tikzpicture} - - -
    -
    - The sides of a triangle presented as vectors. - - - \begin{tikzpicture}[xscale=1.5, yscale=1.5] - \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); - \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); - \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); - % \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node - % {} -- (1.5,0) node[below right=0mm and 3mm] {$\vec{A}$}; - %\draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node - % {} -- (2,1) node[above left=5mm and 1mm] {$\vec{B}$}; - %\draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node - % {} -- (0.5,1) node[below left=1mm and 3mm] {$\vec{C}$}; - %\node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; - %\node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; - % \node {$P$} (1.3333,0.6667); - \end{tikzpicture} - - -
    -
    - The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. - - - \begin{tikzpicture}[xscale=1.5, yscale=1.5] - \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); - \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); - \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); - \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node - {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node - {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node - {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; - \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; - \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; - % \node {$P$} (1.3333,0.6667); - \end{tikzpicture} - - -
    -     -

    In this exercise, we'll use vectors to show that the medians of any triangle () intersect at a point. Recall that medians are the lines connecting the vertices of the triangle to the midpoints of their opposite edges, as in the figure. We'll do this in a few steps.

    -     - - - -

    What is the value of \vec{A} + \vec{B} + \vec{C}?

    -     -     - -

    from the previous page is reproduced for your convenience.

    -
    - The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. - - - \begin{tikzpicture}[xscale=1.5, yscale=1.5] - \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); - \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); - \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); - \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node - {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node - {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node - {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; - \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; - \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; - % \node {$P$} (1.3333,0.6667); - \end{tikzpicture} - - -
    - - - -

    Show that \vec{M}_{1} + \vec{M}_{2} + \vec{M}_{3} = 0.

    -     - -

    Use .

    -     -     - - -

    To show that the point P exists (as the common intersection of the \vec{M}_{i}), show that - \vec{A} + \frac{2}{3} \vec{M}_{3} = \frac{2}{3} \vec{M}_{2} = - .

    -     -     -     - -

    If you have time, try to devise a vector proof of Euclid's result presented at the beginning of the workshop. Recall that a parallelogram is a four-sided polygon whose opposite sides are parallel.

    -     - - - Wrap-up -

    It's possible to do interesting things with vector arithmetic in a coordinate-free way: we didn't specify an origin, or any entries of any vectors in the examples.

    -     -     - - - A Geometric Prelude (with authored pages) - - -
      -
    • Practice visualizing vector addition
      • -
    • Use vectors without explicit coordinates
      • -
    -     - -

    This two-page worksheet was generously donated to the sample article by Dave Rosoff at a CuratedCourses workshop in August2018. It has the default (skinny) margins.

    - -

    It was known to Euclid, and probably earlier, that the midpoints of the sides of any quadrilateral all lie in the same plane (even if the vertices of the quadrilateral do not). In fact, these midpoints are the vertices of a parallelogram, as pictured in .

    - -
    - The midpoints of the sides of a quadrilateral are the vertices of a parallelogram. - - - \begin{tikzpicture}[xscale=0.8, yscale=0.8] - \draw[style={black, ultra thick}] (0,0) -- (5,0) -- (4,4) -- (2,5) -- (0,0); - \draw[style={black, dashed, very thick}] (2.5, 0) -- (4.5, 2) -- (3, 4.5) -- (1, 2.5) -- (2.5, 0); - \end{tikzpicture} - - -
    -
    - The sides of a triangle presented as vectors. - - - \begin{tikzpicture}[xscale=1.5, yscale=1.5] - \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); - \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); - \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); - % \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node - % {} -- (1.5,0) node[below right=0mm and 3mm] {$\vec{A}$}; - %\draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node - % {} -- (2,1) node[above left=5mm and 1mm] {$\vec{B}$}; - %\draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node - % {} -- (0.5,1) node[below left=1mm and 3mm] {$\vec{C}$}; - %\node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; - %\node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; - % \node {$P$} (1.3333,0.6667); - \end{tikzpicture} - - -
    -
    - The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. - - - \begin{tikzpicture}[xscale=1.5, yscale=1.5] - \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); - \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); - \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); - \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node - {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node - {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node - {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; - \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; - \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; - % \node {$P$} (1.3333,0.6667); - \end{tikzpicture} - - -
    -     -

    In this exercise, we'll use vectors to show that the medians of any triangle () intersect at a point. Recall that medians are the lines connecting the vertices of the triangle to the midpoints of their opposite edges, as in the figure. We'll do this in a few steps.

    -     - - - - -

    What is the value of \vec{A} + \vec{B} + \vec{C}?

    -     -     -     - - -

    from the previous page is reproduced for your convenience.

    -
    - The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. - - - \begin{tikzpicture}[xscale=1.5, yscale=1.5] - \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); - \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); - \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); - \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node - {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node - {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; - \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node - {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; - \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; - \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; - % \node {$P$} (1.3333,0.6667); - \end{tikzpicture} - - -
    - - - -

    Show that \vec{M}_{1} + \vec{M}_{2} + \vec{M}_{3} = 0.

    -     - -

    Use .

    -     -     - - -

    To show that the point P exists (as the common intersection of the \vec{M}_{i}), show that - \vec{A} + \frac{2}{3} \vec{M}_{3} = \frac{2}{3} \vec{M}_{2} = - .

    -     -     -     - -

    If you have time, try to devise a vector proof of Euclid's result presented at the beginning of the workshop. Recall that a parallelogram is a four-sided polygon whose opposite sides are parallel.

    -     -     - - - Wrap-up -

    It's possible to do interesting things with vector arithmetic in a coordinate-free way: we didn't specify an origin, or any entries of any vectors in the examples.

    -     -     - - - - Networks Worksheet (no authored pages) - - - - Basic laws for electrical circuits - -

    This two-page worksheet was generously donated to the sample article by Virgil Pierce at a CuratedCourses workshop in August2018. It has default (skinny) left and right margins, but we have specified longer top and bottom margins, with the top being the larger of the two.

    - - - Ohms Law -

    The current through a resistor is proportional to the ratio of the Voltage to the Resistance - I = \frac{V}{R} - Or for our purposes - I R = V -

    -     - - - Kirchoffs Current Law -

    The sum of the currents in a network meeting at a point is zero. - \sum_{k=1}^n I_k = 0 -

    -     - - - Kirchoff's Current Law -

    For the circuit below I_1 + I_2 = I_3 .

    - - - \begin{circuitikz} - \draw (0,0) - to[R, i=$I_1$, *-o](2,2); - \draw (0,0) - to[R, i=$I_2$, *-o](2,-2); - \draw (-3, 0) - to[R, i=$I_3$, o-*](0,0); - \end{circuitikz} - - -     - - - Kirchoffs Voltage Law -

    The sum of the voltages around any closed circuit (or subcircuit) is zero. - \sum_{k=1}^n V_k = 0 -

    -     - -

    Kirchoffs Current Law and Kirkoffs Voltage Law combined with Ohms Law gives for any circuit of resistors and sources a linear system that may (or may not) determine the currents. -

    -     - - - - - -

    For the simple network pictured, calculuate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    - - - \begin{circuitikz} - \draw (0,0) - to[V, v=$11\quad \mbox{volt}$](0, 3) - to[short](2,3) - to[R, R=$4\quad \mbox{ohm}$] (3, 3) - to[short](4,3) - to[R, R=$3\quad \mbox{ohm}$](4,0) - to[short](3,0) - to[R, R=$3\quad \mbox{ohm}$](2,0) - to[short](0,0); - \end{circuitikz} - - -     -     - - - -

    Compare it with a parallel circuit network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    - - - \begin{circuitikz} - \draw(0,0) - to[V, v=$11\quad \mbox{volt}$](0, 3) - to[short](5,3) - to[R, R=$4\quad \mbox{ohm}$](6,3) - to[short](7,3) - to[R, R=$3\quad \mbox{ohm}$](7,0) - to[short](6,0) - to[R, R=$3\quad \mbox{ohm}$](5,0) - to[short](0,0); - \draw(4,0) - to[R, R=$3\quad \mbox{ohm}$](4,3); - \end{circuitikz} - - -     -     -     - - - -

    Now for a more complicated network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    - - - \begin{circuitikz} - \draw(0,0) - to[V, v=$11 \quad \mbox{volt}$](0, 3) - to[short](5,3) - to[R, R=$4 \quad \mbox{ohm}$](6,3) - to[short](9,3) - to[R, R=$4 \quad \mbox{ohm}$](10,3) - to[short](11,3) - to[R, R=$3 \quad \mbox{ohm}$](11, 0) - to[short](10,0) - to[R, R=$2\quad \mbox{ohm}$](9,0) - to[short](6,0) - to[R, R=$2\quad \mbox{ohm}$](5,0) - to[short](0,0); - \draw(4,0) - to[R, R=$3\quad \mbox{ohm}$](4,3); - \draw(8,0) - to[R, R=$1\quad \mbox{ohm}$](8,3); - \end{circuitikz} - - -     -     - - - -

    Now generalize these ideas to a context outside of electrical circuits. Consider the network of streets given in the diagram (with one-way directions as indicated).

    - - - - =stealth] - \draw[->, very thick] (0,0) -- (10, 0) node[midway, below]{East Bound Winooski Ave}; - \draw[<-, very thick] (0, 1) -- (10, 1) node[midway, above]{West Bound Winooski Ave}; - \draw[<-, very thick] (0, 4) -- (10, 4) node[midway, above]{Shelburne St}; - \draw[<-, very thick] (1, -1) -- (1, 5) node[midway, above, sloped]{Willow}; - \draw[->, very thick] (9, -1) -- (9, 5) node[midway, above, sloped]{Jay}; - \end{tikzpicture} - ]]> - - - -

    A traffic engineer counts the hourly flow of cars into and out of this network at the entrances. They get (EB = East Bound; WB = West Bound):

    - - - Estimated hourly traffic flow for the road network - - - - - - EB Winooski - - - WB Winooski - - - Shelburne St - - - Willow - - - Jay - - - - - into - - - 50 - - - 400 - - - 0 - - - 10 - - - 50 - - - - - out of - - - 55 - - - 390 - - - 20 - - - 15 - - - 30 - - - -
    - -

    Use a variable for each segment inside of the network and set up a system of linear equations restricting the flow. Solve the system. Note that you should not get a unique solution as traffic should be able to flow through the network in various ways.

    -     -     -     - - - Networks Worksheet (with authored pages) - - - - Basic laws for electrical circuits - -

    This two-page worksheet was generously donated to the sample article by Virgil Pierce at a CuratedCourses workshop in August2018. It has default (skinny) left and right margins, but we have specified longer top and bottom margins, with the top being the larger of the two.

    - - - Ohms Law -

    The current through a resistor is proportional to the ratio of the Voltage to the Resistance - I = \frac{V}{R} - Or for our purposes - I R = V -

    -     - - - Kirchoffs Current Law -

    The sum of the currents in a network meeting at a point is zero. - \sum_{k=1}^n I_k = 0 -

    -     - - - Kirchoff's Current Law -

    For the circuit below I_1 + I_2 = I_3 .

    - - - \begin{circuitikz} - \draw (0,0) - to[R, i=$I_1$, *-o](2,2); - \draw (0,0) - to[R, i=$I_2$, *-o](2,-2); - \draw (-3, 0) - to[R, i=$I_3$, o-*](0,0); - \end{circuitikz} - - -     - - - Kirchoffs Voltage Law -

    The sum of the voltages around any closed circuit (or subcircuit) is zero. - \sum_{k=1}^n V_k = 0 -

    -     - -

    Kirchoffs Current Law and Kirkoffs Voltage Law combined with Ohms Law gives for any circuit of resistors and sources a linear system that may (or may not) determine the currents. -

    -     - - - - - - - - - -

    For the simple network pictured, calculuate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    - - - \begin{circuitikz} - \draw (0,0) - to[V, v=$11\quad \mbox{volt}$](0, 3) - to[short](2,3) - to[R, R=$4\quad \mbox{ohm}$] (3, 3) - to[short](4,3) - to[R, R=$3\quad \mbox{ohm}$](4,0) - to[short](3,0) - to[R, R=$3\quad \mbox{ohm}$](2,0) - to[short](0,0); - \end{circuitikz} - - -     -     - - - -

    Compare it with a parallel circuit network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    - - - \begin{circuitikz} - \draw(0,0) - to[V, v=$11\quad \mbox{volt}$](0, 3) - to[short](5,3) - to[R, R=$4\quad \mbox{ohm}$](6,3) - to[short](7,3) - to[R, R=$3\quad \mbox{ohm}$](7,0) - to[short](6,0) - to[R, R=$3\quad \mbox{ohm}$](5,0) - to[short](0,0); - \draw(4,0) - to[R, R=$3\quad \mbox{ohm}$](4,3); - \end{circuitikz} - - -     -     -     - - - -

    Now for a more complicated network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    - - - \begin{circuitikz} - \draw(0,0) - to[V, v=$11 \quad \mbox{volt}$](0, 3) - to[short](5,3) - to[R, R=$4 \quad \mbox{ohm}$](6,3) - to[short](9,3) - to[R, R=$4 \quad \mbox{ohm}$](10,3) - to[short](11,3) - to[R, R=$3 \quad \mbox{ohm}$](11, 0) - to[short](10,0) - to[R, R=$2\quad \mbox{ohm}$](9,0) - to[short](6,0) - to[R, R=$2\quad \mbox{ohm}$](5,0) - to[short](0,0); - \draw(4,0) - to[R, R=$3\quad \mbox{ohm}$](4,3); - \draw(8,0) - to[R, R=$1\quad \mbox{ohm}$](8,3); - \end{circuitikz} - - -     -     -     - - - - -

    Now generalize these ideas to a context outside of electrical circuits. Consider the network of streets given in the diagram (with one-way directions as indicated).

    - - - - =stealth] - \draw[->, very thick] (0,0) -- (10, 0) node[midway, below]{East Bound Winooski Ave}; - \draw[<-, very thick] (0, 1) -- (10, 1) node[midway, above]{West Bound Winooski Ave}; - \draw[<-, very thick] (0, 4) -- (10, 4) node[midway, above]{Shelburne St}; - \draw[<-, very thick] (1, -1) -- (1, 5) node[midway, above, sloped]{Willow}; - \draw[->, very thick] (9, -1) -- (9, 5) node[midway, above, sloped]{Jay}; - \end{tikzpicture} - ]]> - - - -

    A traffic engineer counts the hourly flow of cars into and out of this network at the entrances. They get (EB = East Bound; WB = West Bound):

    - - - Estimated hourly traffic flow for the road network - - - - - - EB Winooski - - - WB Winooski - - - Shelburne St - - - Willow - - - Jay - - - - - into - - - 50 - - - 400 - - - 0 - - - 10 - - - 50 - - - - - out of - - - 55 - - - 390 - - - 20 - - - 15 - - - 30 - - - -
    - -

    Use a variable for each segment inside of the network and set up a system of linear equations restricting the flow. Solve the system. Note that you should not get a unique solution as traffic should be able to flow through the network in various ways.

    -     -     -     -     - - - -

    This is a mock one-page worksheet for testing purposes. We have specified an overall margin just slightly less than the default.

    -     - - - - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    -     -     - - - -

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    -     -     -     - -

    A two-line paragraph interspersed to check on spacing, breaks and all that.

    - - - A full-width exercise - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    -

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    -     -     - -

    Another two-line paragraph interspersed to check on spacing, breaks and all that.

    - - - - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    -     -     - - - - -

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    -     -     - - - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    -     -     -     - - - A Mock Activity - - -

    The problem, as we see it.

    -     - -

    A worksheet could have hints, no? But no spacing. Note row below has widths set to balance the heights.

    -     -     - - - - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    -     -     - - - - -

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    -     -     + Displayed rows of equations format with + alignment or not. The employment of the + amsmath align or gather environments depends + on the presence of ampersands, or not, respectively. + --> - - -

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    -     -     -     -     + + - - Dot products and projection - - - -

    Let - {\vec v}_1 = (-4,1), - {\vec v}_2 = (2,2), - {\vec v}_3 = (1,2,3), - {\vec v}_4 = (-2,1,0). - Find the values of the following expressions:

    -     - -

    {\vec v}_1 \cdot {\vec v}_2 =

    -     - -

    {\vec v}_3 \cdot {\vec v}_4 =

    -     - -

    \lVert{\vec v}_1\rVert =

    -     - -

    \lVert{\vec v}_4\rVert =

    -     - -

    Are any of these vectors perpendicular to each other?

    -     -     - - -

    The vectors \vec a = (3,9) and \vec u = (4,2) are pictured below. Derive the formula for projection on a line and use it to find the projection of \vec a on the line spanned by \vec u. Also compute the length of the residual vector.

    - - two vectors in a Cartesian plane - -     -     -     +
    + <c>veil</c> Testing + +

    + The function f(t) = e^{-t} satisfies the differential equation + f'(t) = -f(t), + which is characteristic of exponential decay. +

    - - - -

    Consider the vector equation - - m \begin{bmatrix}2 \\ 5\end{bmatrix} = \begin{bmatrix}3 \\ 7\end{bmatrix} - .

    -     - -

    Check that there is no solution m that makes the equation true.

    -     +

    + This sentence contains a simple hidden phrase and continues normally. +

    - -

    Use projection to find the best approximation \hat m.

    -     +

    + Here is a veil wrapping emphasized hidden text within an emphasized span. +

    - -

    Compute \hat m \begin{bmatrix}2 \\ 5\end{bmatrix} .

    -     +

    + You can also hide inline math like f(t) = e^{-t} without breaking the flow. +

    - -

    Compute the residual vector.

    -     +

    + A slightly more complex example with a link: + Learn more at PreTeXt or explore g(x) = x^2 + 1. + + Learn more at PreTeXt. + +

    - -

    Compute the length of the residual vector and explain what it means.

    -     -     +

    + Testing long hidden text: + + This is a very long phrase that includes emphasis, + inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. + +

    - - -

    Consider the system of equations - - 3t \amp =5 - 2t \amp = 9 - .

    -     - -

    Write the system in vector form.

    -     - -

    Find the best estimate, \hat t, of t using projection.

    -     - -

    Compute the length of the residual vector.

    -     -     -     - - - - -

    - Just a simple activity here. -

    -     -     - - -

    - Here is a second activity. -

    -     -     -     - - - -

    - This is going to be an activity with tasks. -

    -     - - -

    - Here is the first task. -

    -     -     - - -

    - Here is the second task. -

    -     -     - - -

    - Here is the third task. -

    -     -     - +

    + Testing long hidden text with p tag: +

    - This is a conclusion that comes after the last task. + This is a very long phrase that includes emphasis, + inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly.

    -     -     -     - - - - -

    - This is a mock worksheet for testing the use of workspace for exercise within an exercisegroup. -

    -     - - - -

    - Do things to the following. -

    -     - - -

    - Apple -

    -     -     - - -

    - Banana -

    -     -     - - -

    - Cherry -

    -     -     - - -

    - Durian -

    -     -     - - -

    - Elderberry (with workspace override) -

    -     -     - - -

    - Fig -

    -     -     - - -

    - Guava -

    -     -     - - -

    - Habanero -

    -     -     - - -

    - I can't think of an I fruit. -

    -     -     - - -

    - Jackfruit -

    -     -     -     - - - -

    - Now with one column, do things to the following. -

    -     - - -

    - Apple -

    -     -     - - -

    - Banana -

    -     -     - - -

    - Cherry -

    -     -     - - -

    - Durian -

    -     -     - - -

    - Elderberry (with workspace override) -

    -     -     - - -

    - Fig -

    -     -     - - -

    - Guava -

    -     -     - - -

    - Habanero -

    -     -     - - -

    - I can't think of an I fruit. -

    -     -     - - -

    - Jackfruit -

    -     -     -     -     -
    - -
    - Exercises, One Subsection - -

    This section of the sample article demonstrates an unstructured division. There are no subsection, you are just reading the first two paragraphs, followed by some nonsense text. Then there is a single exercises division. Note that this division is not numbered (since it is unique within the section). And a cross-reference to one of the contained exercise will be numbered as a member of the section, .

    - -

    If you use the unstructured form of a division, and have both inline and divisional exercises, there is a potential to form ambiguous cross-references. To wit, check that and are really different exercises (which you are unable to do if you are reading this in print!). The solution is to include the type of exercise in the reference, which will assist everybody, but especially your print readers: and .

    - -

    Compare this section with the similar , next. The following text is mostly nonsense, just for testing purposes.

    - - - Inline One - -

    Aliquam vitae risus placerat, pellentesque leo vitae, iaculis ante. Praesent ac odio eget mi bibendum eleifend ac eget metus. Morbi in dolor et diam accumsan mattis. Aenean elementum pulvinar efficitur. Etiam viverra ut tellus quis consequat. Phasellus sit amet nisl a ligula pharetra tempus id in elit. Maecenas congue quam eu purus fermentum pretium. Fusce pellentesque ultricies arcu, egestas sollicitudin erat condimentum non. Integer non velit at dolor dictum aliquam et rhoncus mauris. Sed nec nibh id nunc convallis tincidunt ut at ligula. Etiam elementum nisl eu erat dapibus rhoncus.

    -     -     - -

    Pellentesque nec condimentum ligula, quis interdum mauris. Ut sed urna lacinia, aliquam arcu id, faucibus nisi. Suspendisse potenti. Curabitur in erat ultricies, condimentum mi nec, vehicula mauris. Duis faucibus risus fermentum velit hendrerit, non laoreet massa maximus. Donec bibendum elit ac lectus lobortis luctus. Ut finibus, dolor ut euismod tristique, ligula tortor tempus arcu, finibus semper purus erat ut ligula. Aenean accumsan ut ante vel euismod.

    - - - Inline Two -

    Ut porttitor neque a pharetra euismod. Vivamus ut metus pretium, placerat massa tempor, condimentum metus. Phasellus vestibulum iaculis turpis non posuere. Vestibulum quis aliquet neque. Donec nec metus iaculis, laoreet massa vitae, suscipit tellus. Etiam et ultrices quam, quis pretium ligula. In ut cursus metus. Aenean volutpat quam odio, quis tempus dolor egestas eget. Nunc fringilla lobortis nunc, ut interdum lorem posuere sed. Sed sodales risus a laoreet venenatis. Nunc sodales tempor mollis. Nam sollicitudin velit sed ex viverra feugiat. Nunc consectetur mi vitae urna sollicitudin malesuada. Fusce eget risus lectus. Mauris augue velit, vestibulum vitae tempus sit amet, porttitor eget turpis.

    -     - - - Major Result -

    Vivamus tortor tortor, lobortis et sem vel, accumsan placerat libero. Sed eget metus non magna accumsan efficitur a non turpis. Curabitur maximus arcu ipsum, eget vestibulum nulla mollis ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel eleifend risus. Morbi hendrerit tellus eget nibh imperdiet, ac mollis nisl sagittis. Ut commodo pharetra leo. Suspendisse consequat velit eget velit condimentum feugiat.

    -     - - - Inline Three - -

    Suspendisse lacinia mattis risus, eget viverra urna dictum eu. Maecenas ut sem in turpis egestas varius nec at ipsum. Praesent bibendum nisi et turpis congue, a pellentesque felis tempor. Vivamus non dolor in risus interdum mattis. In tempus iaculis velit, sit amet rhoncus tellus aliquam convallis. Sed ut tellus id ipsum blandit convallis sed eget tortor. Nunc leo felis, scelerisque vel ante porta, volutpat rhoncus neque. Mauris convallis, felis at aliquam aliquet, felis ipsum semper mi, vitae auctor purus ante non erat. Ut nec felis mi.

    -     -     - - - Exercise Collection - - - Drill One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    - -
    - A figure in an exercise in an unstructured division to test that it is numbered as if the containing exercises is not present - -
    -
    - A side-by-side in a figure in an exercise in an unstructured division to test that it is numbered as if the containing exercises is not present and to test the numbering of the panels in a solutions manual - -
    - First Panel, subcaptioned - -
    -
    - Second Panel, subcaptioned - -
    -     -
    - -
    - First Panel, not subcaptioned - -
    -
    - Second Panel, not subcaptioned - -
    -     -     -     - - - Drill Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    - -
    - Testing numbering, figure in a exercise in an un-numbered exercises - -
    - -     -     - - - Drill Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     - - - Challenging One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    -     -     - - - -

    An introduction to an exercisegroup. This is here to attempt to interrupt the flow of the counting from this division to the next.

    -     - - - Challenging Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh.

    -

    Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    -     -     - - - Challenging Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     -     - - - Impossible One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    -     -     - - - Impossible Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    -     -     - - - Impossible Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     -     - - - More Reading - - -

    Left intentionally blank, just checking sectioning.

    -     - - David C. Lay, Subspaces and Echelon Forms. The College Mathematics Journal, January 1993, 24 1, 5762. - -     -
    - - - Exercise Section, Structured - - -

    A collection of exercises, in a top-level exercises division, structured with subexercises.

    -     - - - Easy Exercises - - - Arithmetic - -

    Compute 3+4.

    -     - -

    7

    -     -     - - - Trigonometry - -

    Compute \sin(\pi/4).

    -     -     -     - - - Hard Problems - - - Number Theory - -

    Prove Fermat's Last Theorem.

    -     -     - - - Millenial - -

    Find general solutions to the Navier-Stokes equation.

    -     -     -     - - - With an Exercise Group - - - -

    This is an exercise group, and this is its introduction.

    -     - - One - -

    6-5

    -     - -

    Subtract.

    -     -     - - Two - -

    1+1

    -     -     -     - - - Outside exercisegroup, inside subexercises - -

    6+5

    -     -     -     -     - -
    - Exercises, Multiple Subsections - - -

    This section of the sample article demonstrates a structured division. You are reading the introduction to the division, then there is a faux subsection, followed by three exercises divisions. Note that the three are numbered as if they are also fellowsubsection. And a cross-reference to one of the contained exercise will be numbered use the number of the subsection, .

    - -

    Compare this section with the similar , previous. The following text is mostly nonsense, just for testing purposes.

    -     - - - Faux Subsection - - - Inline One - -

    Aliquam vitae risus placerat, pellentesque leo vitae, iaculis ante. Praesent ac odio eget mi bibendum eleifend ac eget metus. Morbi in dolor et diam accumsan mattis. Aenean elementum pulvinar efficitur. Etiam viverra ut tellus quis consequat. Phasellus sit amet nisl a ligula pharetra tempus id in elit. Maecenas congue quam eu purus fermentum pretium. Fusce pellentesque ultricies arcu, egestas sollicitudin erat condimentum non. Integer non velit at dolor dictum aliquam et rhoncus mauris. Sed nec nibh id nunc convallis tincidunt ut at ligula. Etiam elementum nisl eu erat dapibus rhoncus.

    -     -     - -

    Pellentesque nec condimentum ligula, quis interdum mauris. Ut sed urna lacinia, aliquam arcu id, faucibus nisi. Suspendisse potenti. Curabitur in erat ultricies, condimentum mi nec, vehicula mauris. Duis faucibus risus fermentum velit hendrerit, non laoreet massa maximus. Donec bibendum elit ac lectus lobortis luctus. Ut finibus, dolor ut euismod tristique, ligula tortor tempus arcu, finibus semper purus erat ut ligula. Aenean accumsan ut ante vel euismod.

    - - - Inline Two - -

    Ut porttitor neque a pharetra euismod. Vivamus ut metus pretium, placerat massa tempor, condimentum metus. Phasellus vestibulum iaculis turpis non posuere. Vestibulum quis aliquet neque. Donec nec metus iaculis, laoreet massa vitae, suscipit tellus. Etiam et ultrices quam, quis pretium ligula. In ut cursus metus. Aenean volutpat quam odio, quis tempus dolor egestas eget. Nunc fringilla lobortis nunc, ut interdum lorem posuere sed. Sed sodales risus a laoreet venenatis. Nunc sodales tempor mollis. Nam sollicitudin velit sed ex viverra feugiat. Nunc consectetur mi vitae urna sollicitudin malesuada. Fusce eget risus lectus. Mauris augue velit, vestibulum vitae tempus sit amet, porttitor eget turpis.

    -     -     - - - Major Result -

    Vivamus tortor tortor, lobortis et sem vel, accumsan placerat libero. Sed eget metus non magna accumsan efficitur a non turpis. Curabitur maximus arcu ipsum, eget vestibulum nulla mollis ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel eleifend risus. Morbi hendrerit tellus eget nibh imperdiet, ac mollis nisl sagittis. Ut commodo pharetra leo. Suspendisse consequat velit eget velit condimentum feugiat.

    -     - - - Inline Three - -

    Suspendisse lacinia mattis risus, eget viverra urna dictum eu. Maecenas ut sem in turpis egestas varius nec at ipsum. Praesent bibendum nisi et turpis congue, a pellentesque felis tempor. Vivamus non dolor in risus interdum mattis. In tempus iaculis velit, sit amet rhoncus tellus aliquam convallis. Sed ut tellus id ipsum blandit convallis sed eget tortor. Nunc leo felis, scelerisque vel ante porta, volutpat rhoncus neque. Mauris convallis, felis at aliquam aliquet, felis ipsum semper mi, vitae auctor purus ante non erat. Ut nec felis mi.

    -     -     -     - - - Drill Exercises - - - Drill One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    - -
    - A figure in an exercise in a structured division to test that it is numbered with consideration of the containing exercises - -
    -     -     - - - Drill Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    -     -     - - - Drill Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     -     - - - - Challenging Exercises - - - Challenging One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    -     -     - - - -

    An introduction to an exercisegroup. This is here to attempt to interrupt the flow of the counting from this division to the next.

    -     - - - Challenging Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh.

    -

    Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    -     -     - - - Challenging Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     -     -     - - - - Impossible Exercises - - - Impossible One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    -     -     - - - Impossible Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    -     -     - - - Impossible Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     -     + +

    - - Layout challenge - - -

    A multicolumn exercisegroup with layout challenges. The first two should be on one row. The next two should be on one row until the hint is opened. Then one that takes up an entire row. The final row should always have two exercises.

    -     - - - - 2x \amp {}+{} \amp y \amp {}={} \amp 10 - x \amp \amp \amp {}={} \amp 6 - x \amp {}+{} \amp 3y \amp {}={} \amp 13 - - - - - - - 2x \amp {}+{} \amp y \amp {}={} \amp 10 - x \amp \amp \amp {}={} \amp 6 - x \amp {}+{} \amp 3y \amp {}={} \amp 13 - - - - - - - 2x \amp {}+{} \amp y \amp {}={} \amp 10 - x \amp \amp \amp {}={} \amp 6 - x \amp {}+{} \amp 3y \amp {}={} \amp 13 - - - - - - - 2x \amp {}+{} \amp y \amp {}={} \amp 10 - x \amp \amp \amp {}={} \amp 6 - x \amp {}+{} \amp 3y \amp {}={} \amp 13 - - - - OPEN ME! - - 3u \amp {}+{} 1v \amp {}+{} 3w \amp {}+{} 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 - 2u \amp {}+{} 2v \amp {}-{} 2w \amp {}+{} x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 - 1u \amp {}-{} 3v \amp {}+{} 1w \amp {}+{} x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13 - - - - - - - 200t \amp {}+{} 3u \amp {}+{} 1v \amp {}+{} 3w \amp {}+{} 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 - \amp {}+{} 2u \amp {}+{} 2v \amp {}-{} 2w \amp {}+{} x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 - 100t \amp {}+{} 1u \amp {}-{} 3v \amp {}+{} 1w \amp {}+{} x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13 - - - - - - - 2x \amp {}+{} \amp y \amp {}={} \amp 10 - x \amp \amp \amp {}={} \amp 6 - x \amp {}+{} \amp 3y \amp {}={} \amp 13 - - - - - - - 2x \amp {}+{} \amp y \amp {}={} \amp 10 - x \amp \amp \amp {}={} \amp 6 - x \amp {}+{} \amp 3y \amp {}={} \amp 13 - - - -     -     +

    + Multiple consecutive veils: \cos(t) + first hidden, then some regular text, and second hidden part. +

    - - More Reading + + h(t) = \sin(t) tiger + - -

    Left intentionally blank, just checking sectioning.

    -     + + + h(t) = \int \sin(t)\ dt + + - David C. Lay, Subspaces and Echelon Forms. The College Mathematics Journal, January 1993, 24 1, 5762. +

    + Final test: a veil at the end of the sentence. +

    -
    - - Exercises, Top-Level - - -

    -

    This exercises of the sample article is a peer of all the preceding section and is the only such exercises. As such, it is not numbered, and contains only exercise, but for this introduction you are reading. The exercises contained within will be numbered in cross-references according to the enclosing division, in this case the entire article and so without any qualification, to wit, .

    -     - - - Drill One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    -     -     - - - Drill Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    - -
    - Testing numbering in a exercises without a number - -
    -     -     - - - Drill Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     - - - Challenging One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    -     -     - - - -

    An introduction to an exercisegroup. This is here to attempt to interrupt the flow of the counting from this division to the next.

    -     - - - Challenging Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh.

    -

    Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    -     -     - - - Challenging Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     -     - - - Impossible One - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    -     -     - - - Impossible Two - -

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    -     -     - - - Impossible Three - -

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    -     -     - - - An Exercise in a Section - -

    Exercises can appear in a section of their own. You need to give the section a title, even if it seems obvious what to call it. Individual exercises may have titles, as you choose. Problem: How should we hide solutions?

    -     - -

    Maybe a global switch should be used to suppress solutions, while a separate processing regime could use them as part of a solutions manual.

    -     -     - - - An Exercise with a Hard-Coded Problem Number - -

    Compute the definite integral \definiteintegral{2}{4}{x^2}{x}, not as an approximate value from a Riemann sum, but as an exact value based of the limit by using the Fundamental Theorem.

    -     - -

    An antiderivative of x^2 is F(x)=x^3/3, so by the FTC,\definiteintegral{2}{4}{x^2}{x}=F(4)-F(2)=\frac{1}{3}\left(4^3-2^3\right)=\frac{56}{3}!?! This is indeed an exciting result, but we are mostly interested in seeing that the sentence-ending punctuation is absorbed properly into the displayed equation.

    -     -     - - - -

    Can you prove Corollary directly? If not consider that a problem could have several parts, which should be formatted as a second-level list, since the problems normally get numbered at the top level.

      -

    1. Why is this result a Corollary?

      2. -

    2. Could you interchange the Theorem and Corollary?

      3. -

    -     - - - MVT -

    Consider the definite integral as an area function and employ the Mean Value Theorem.

    -     - - - Motivator -

    Think harder!

    -     - - - Helpful -

      -

    1. It follows easily.

      2. -

    2. Yes.

      3. -

    -     - - -

    We could prove either result first, then obtain the other as an easy consequence.

    -     -     -     + @@ -16311,17 +423,6 @@ along with MathBook XML. If not, see . - - Solutions to a Single Exercises Division - solutionsfor one group of exercises - - -

    Sometimes you may want the solutions to exercises within a single exercises division (or similar, like a worksheet). Default behavior in this situation can produce two titles, when just one would be sufficient. Here we have used the scope attribute to point to a specific exercises, and provided a (single) very specific title.

    -     - - -     - All Solutions that are Answers solutionsall answers @@ -16347,7 +448,7 @@ along with MathBook XML. If not, see . List of Results -

    We had an automatic list of theorems for just one section, back in . Here we expand to include corollary in our space-delimited list of elements and we request divisions (headings) at each subsection and section. The default scope is the entire document, which is appropriate here in the backmatter. There are many subsections with no results, so we set the empty attribute to no to suppress them, though this is the default behavior (yes being the other option to see divisions with no list items). These lists are most valuable if you are in the practice of giving items titles.

    +

    We had an automatic list of theorems for just one section, back in . Here we expand to include corollary in our space-delimited list of elements and we request divisions (headings) at each subsection and section. The default scope is the entire document, which is appropriate here in the backmatter. There are many subsections with no results, so we set the empty attribute to no to suppress them, though this is the default behavior (yes being the other option to see divisions with no list items). These lists are most valuable if you are in the practice of giving items titles.

     @@ -16407,7 +508,7 @@ along with MathBook XML. If not, see . glossary -

    A glossary may have a headnote, perhaps with some explanation. This glossary is placed in the back matter. Placement as a specialized division is another option, see .

    +

    A glossary may have a headnote, perhaps with some explanation. This glossary is placed in the back matter. Placement as a specialized division is another option, see.

     diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index e4369b0191..3d934ad1ed 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -8615,7 +8615,7 @@ along with MathBook XML. If not, see . - veil + reveal diff --git a/xsl/pretext-latex-common.xsl b/xsl/pretext-latex-common.xsl index 8f4eb13e68..cf20f44605 100644 --- a/xsl/pretext-latex-common.xsl +++ b/xsl/pretext-latex-common.xsl @@ -63,7 +63,7 @@ along with MathBook XML. If not, see . - + @@ -1155,6 +1155,28 @@ along with MathBook XML. If not, see . + + + + %% Veil support: line-wrapping underline with optional visibility + \usepackage[normalem]{ulem} + \usepackage{xcolor} + + + \newcommand{\veiltext}[1]{\uline{#1}} + + + \newcommand{\veiltext}[1]{\uline{{\color{white} #1}}} + + + %% A character like a tilde, but different @@ -2633,8 +2655,28 @@ along with MathBook XML. If not, see . } + + + + + \textcolor{white}{ + + } + + + \veiltext{ + + } + + + - + + + \underline{ + + } + From c199d5c9e5262ce5aa050e09ff8f36638c237fcb Mon Sep 17 00:00:00 2001 From: "Cox Geoffrey W." <63681414+geoff-cox@users.noreply.github.com> Date: Mon, 14 Jul 2025 15:15:10 -0400 Subject: [PATCH 03/12] Update sample-article.xml --- examples/sample-article/sample-article.xml | 16046 ++++++++++++++++++- 1 file changed, 15975 insertions(+), 71 deletions(-) diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index 91bac03c2f..b6441c0b2c 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -302,94 +302,15987 @@ along with MathBook XML. If not, see .
    + +
    + The Fundamental Theorem + +

    There is a remarkable theorem:And fortunately we do not need to try to write it in the margin!

    + + + The Fundamental Theorem of Calculus + Fundamental Theorem of Calculus + + +

    If f(x) is continuous, and the derivative of F(x) is f(x), then \definiteintegral{a}{b}{f(x)}{x}=F(b)-F(a)test: buried in theorem/statement/p

    +     + +

    Left to the reader.

    +     +     + + + +

    You will find almost nothing about all this in the article , nor in the book , since they belong in some other article, but we can cite them out-of-order for practice anyway.

    + + + +

    When we are writing we do not always know what we want to cite, or just where subsequent material will end up. For example, we might want a citation to or we might want to reference a later.

    + +

    We can also embed todos in the source by making an XML comment that begins with the four characters todo, and selectively display them, so you may not see the one here in the output you are looking at now. Or maybe you do see it?

    + + + +

    Because a definite integral can be computed using an antiderivative, we have the following definition.

    + + + + + indefinite integralintegralindefinite integral + + \int\,f(x)\,dx + indefinite integral of f(x) + + +

    Suppose that \frac{d}{dx}F(x)=f(x). Then the indefinite integral of f(x) is F(x) and is written as \int\,f(x)\,dx=F(x).

    +     +     +
    + + + +
    + Computing Integrals with Sage (<m>\int</m>) + + + Computing Integrals with Sage (∫) + + Sageintegration + Sageintegrationcell + Sageintegrationnumerical + numericalSage integration + numericalSage + + numerics + numericsSage + numerical integrationSagecellSage + + AF + AG + AH + AB + ABC + ABCD + ABCA + + + X + XF + XG + XH + XY + XYZD + XYZA + + + mixed-content emphasized + structured-content emphasized + sorted as if Cat + sorted as if Quorum + unitsZ (sort as A) + unitsA (sort as Z) + verbatim text, use sortby + + \rhofibers + + + + + Cayley graphcayley graphCAYLEY GRAPH + + + + x as a variable + +

    Sage can compute definite integrals. The output contains the approximate numerical value of the definite integral, followed by an upper bound of the error in the approximation.

    + + + numerical_integral(sin(x)^2, (0, 2)) + + (1.189200623826982, 1.320277913471315e-14) + + +

    Given the Fundamental Theorem, we would find the antiderivative useful.Cayley graphx as a variable

    + + + integral(sin(x)^2, x) + 1/2*x - 1/4*sin(2*x) + + +

    The same command can be used to employ the antiderivative in the application of the Fundamental Theorem. Notice that the answer is exact and any further manipulation is likely to be simply producing a numerical approximation.cayley graph

    + + + + integral(sin(x)^2, (x, 0, 2)) + -1/4*sin(4) + 1 + + +

    There are integrals you really do not want to evaluate, or you do not want your reader to evaluate. A Sage cell can be configured for display purposes onlyyou can look but you cannot touch.CAYLEY GRAPH

    + + + integral(e^(x^2), x) + -1/2*I*sqrt(pi)*erf(I*x) + + +

    You can give a Sage element a doctestdoctestattributesdoctest attribute, whose value mirrors the optional hash tags used in Sage doctests. Possible values are random, long time, not implemented, not tested, known bug, absolute, relative, and optional. The values absolute and relative refer to floating-point tolerances for equality and require a second attribute tolerance to specify a floating point value. The value optional refers to the test requiring that an optional Sage package be present. The name of that package should be provided in the package attribute.

    + + +

    The next cell is marked in the source as doctest="random", and so is specified as unpredictable and not tested. But there is some sample output which will appear in the version (and always be the same). + c + A bug test, sorted as cbc one + A bug test, sorted as cxc two + A bug test, sorted as cbc three +

    + + + random() + 0.11736021338650582 + + +

    While the next cell is random, the returned value will never be more than 0.01 away from 12, since the random() function stays between 0 and 1. So we provide 12.005 as the expected answer, but test with an absolute tolerance of \epsilon=0.006.

    + + + 12 + 0.01*random() + 12.005 + + +

    Sage has some functions which affect output, generally making mathematics look more like mathematics via syntax. This is a simple test, and you should see the variable and superscript in italics, properly formatted as output when viewed within HTML output. We have provided expected output for doctesting, but it is sort of silly to have this as part of output, even if it is instructive.

    + + + pretty_print(html("$a^2$")) + <script type="math/tex">a^2</script> + + + +

    Sage, and by extension, the Sage Cell Server, can interpret several languages. The next example has code in the R language,R a popular open source language for statistics. As an author, you add the attribute language="r" to your sage element. (The default language is Sage, so you do not need to indicate that repeatedly.) Note that a language like R likes to use a less than character, <, special character in XML. You need to escape it by writing &lt; as we have done in the source for this example. (See the discussion in .)

    + +

    As a reader you learn that the Evaluate button for a pre-loaded Sage cell will indicate the language in use.

    + + + + ruth <- c(22, 25, 34, 35, 41, 41, 46, 46, 46, 47, 49, 54, 54, 59, 60) + bonds <- c(16, 25, 24, 19, 33, 25, 34, 46, 37, 33, 42, 40, 37, 34, 49, 73, 46, 45, 45, 5, 26, 28) + dimaggio <- c(12, 14, 20, 21, 25, 29, 30, 30, 31, 32, 32, 39, 46) + summary(ruth) + summary(bonds) + summary(dimaggio) + boxplot(ruth, bonds, dimaggio) + + + +

    The Sage Cell Server supports the following languages: sage, gap, gp, html, maxima, octave, python, r, and singular.

    + +

    Here is another R cell. Unfortunately, it seems Sage's doctest facility cannot be used easily with code from other languages. In the source for this example, we have employed the XML escape sequence, &lt; several times (see ).

    + + + + age <- c(25, 30, 56) + gender <- c("male", "female", "male") + weight <- c(160, 110, 220) + mydata <- data.frame(age,gender,weight) + summary(mydata) + cor(mydata$age,mydata$weight) + mean(mydata$age) + sd(mydata$age) + plot(mydata$age,mydata$weight) + + + + +

    The Sage Cell server imports a few important R packages. As of 2022-06-04 these are deSolve, ggplot2, pracma, survey, swirl, and tidyverse. This next example uses the ggplot library for both a data set and the plotting capabilities. Note the initial use of the library() function. This is a modified version of the Bubble plot example at Top 50 ggplot2 Visualizations The Master List.

    + + + + # load package and data + library(ggplot2) + data(mpg, package="ggplot2") + + mpg_select <- mpg[mpg$manufacturer %in% c("audi", "ford", "honda", "hyundai"), ] + + # Scatterplot + g <- ggplot(mpg_select, aes(displ, cty)) + + labs(subtitle="mpg: Displacement vs City Mileage", + title="Bubble chart") + + g + geom_jitter(aes(col=manufacturer, size=hwy)) + + geom_smooth(aes(col=manufacturer), method="lm", se=F) + + + +

    Here is a blank Sage cell that you may use for practice and experimentation with the commands above. Note that this cell allows a choice of languages, and is not linked with any of the previous cells, so a reader would need to start fresh, or cut/paste definitions from other cells.

    + + + +

    On the other hand a sage element with no content will also create an empty Sage cell for the reader's use, but now it will be specific to a particular language and linked to others of the same language. Run the R cell above that defines the variable ruth and then try typing summary(ruth) in the cell below.

    + + + +

    You can make Sage blocks which are of type="invisible", which will never be shown to a reader, but which get doctested. Why do this? If some code produces an error, and you hope it is fixed someday, use an invisible block to raise the error. Once fixed, the doctest will fail, and you can adjust your commentary to suit. There is such a block right now, but you will need to go to the source to see it.

    + + + + graphs(augment='vertices').next() + + Traceback (most recent call last): + ... + NotImplementedError + + + +

    Our maximum width for text, designed for readability, suggests you should format your Sage code with a maximum of about 54 characters. On a mobile device, the number of displayed characters might be as low as 28 in portrait orientation, and again around 50 in landscape. You can use a variety of techniques to shorten long lines, such as using intermediate variables. Since Sage is just a huge Python library, you can use any of Python's facilities for handling long lines. These include a continuation character (which I try to avoid using) or natural places where you can break long lines, such as between entries of a list. Also, if writing loops or functions, you may wish to have your indentation be only two characters wide (rather than, say, four).

    + +

    Sage output can sometimes be quite long, though this has improved with some changes in Sage's output routines. Output code should be included primarily for doctesting purposes, and in this use, you may break at almost whitespace character and the doctesting framework will adjust accordingly. You may wish to show sample output in a static format, like a PDF, so you can consider formatting your output to fit the width constraints of that medium. Or you may even adjust exactly what is output, to keep it from being too verbose. Sage doctesting also allows for a wild-card style syntax which allows you to skip over huge chunks of meaningless or unpredictable output, such as tracebacks on error messages.

    + +

    This paragraph is just a placeholder. It has handful of index entries, all starting with the letters gas, taken from Indexing for Editors and Authors: A Practical Guide to Understanding Indexes by Leise, Mertes, and Badgett. The intent is to test letter-by-letter versus word-by-word sorting of index entries. We use a word-by-word order, resulting in:

      +
    1. gas
      2. +
    2. gas masks
      3. +
    3. gas production
      4. +
    4. gas works
      5. +
    5. gasoline
      6. +
    6. gastritis
      7. +
    + gasoline + gas works + gas + gas masks + gas production + gastritis +

    + + + Titled Sage Cells + Sage cellwith a title + + + integral(sin(x)^2, x) + 1/2*x - 1/4*sin(2*x) + + +

    You can place Sage cells inside of a paragraphs if you want to give them a title, but no numbers, .

    +     +
    + + - - +
    + An Interesting Corollary + + + Fundamental Structures + + +

    This is an objectives element you are reading, and this is its introduction. This early section has really grown and tries to accomplish many things. Not all of them are listed here.

    +     + +
      +
    1. Display various blocks, fundamental units of the flow.
      2. +
    2. More.
      3. +
    3. Evermore.
      4. +
    + + +

    This concludes the (incomplete) objectives for this section, so now we can carry-on as before.

    +     +     + + +

    This is a cross-reference to one of the objectives above, forced to use the phrase-global form of the text. It should describe the objective as belonging to the section (rather than the objectives), since objectives are one-per-subdivision and are numbered based upon the containing division: . For comparison this is the (forced) type-global cross-reference: .

    + +

    The Fundamental Theorem comes in two flavors, where usually one is a corollary of the other.

    +     + + + Second Version of <acro>FTC</acro> + + + + + Leibniz, Newton + Fundamental Theorem of CalculusCorollary + +

    Suppose f(x) is a continuous function. Then \frac{d}{dx}\definiteintegral{a}{x}{f(t)}{t}=f(x).

    +     + +

    We simply take the indicated derivative, applying Theorem at + \frac{d}{dx}\definiteintegral{a}{x}{f(t)}{t}&=\frac{d}{dx}\left(F(x)-F(a)\right) + &=\frac{d}{dx}F(x)-\frac{d}{dx}F(a) + &=f(x)-0 = f(x) + .

    +     + +

    A justification, which is one of the variants of a proof.

    +     + + + + + + + Alternate Proof +

    You can have multiple proofs, and they can have titles which replace the word Proof as a heading. Here we just exercise displayed math with no automatic numbering, and an elective number on the middle equation. + \frac{d}{dx}\definiteintegral{a}{x}{f(t)}{t}&=\frac{d}{dx}\left(F(x)-F(a)\right) + &=\frac{d}{dx}F(x)-\frac{d}{dx}F(a) + &=f(x)-0 = f(x) +

    +     +     + +

    The alternative version of the Fundamental Theorem (FTC) in is a compact way to express the result.

    + +

    For testing purposes, there is a simple bare Sage Cell here.

    + + + c = 832 + c + + + + + A Mysterious Derivative! +

    So if we define a function with its variable employed as a limit of integration, like so K(z)=\definiteintegral{345}{z}{x^4\sin(x^2)}{x} then we get the derivative of that function so easily it seems like a mystery, \frac{d}{dz}K(z)=z^4\sin(z^2). That's it.

    + +

    For testing purposes, there is a simple Sage Cell here, buried inside an example that should be a knowl (embedded in the page).

    + + + 2+2 + + +

    We test a Sage cell inside a knowl, which should set the value of a variable that will be available to subsequent cells within the knowl.

    + + + + a = 6 + a + + + + + + b = a + 10 + b + + + +

    Even if you ran the cell at the top of this page, within this knowl the value of the variable c is not known, so the next cell will cause an error.

    + + + + c + 400 + + +     + +

    The Sage cells on a page will remember results computed elsewhere on the page. If you rely on this feature, remind your readers to evaluate all the necessary cells and that they perhaps need to be evaluated in a certain order.

    + + + + c/2 + + + +

    There are some Sage cells in the previous (knowled) example. The results there are restricted to the knowl. In other words, the scope of those cells is the knowl. So if you opened the example and executed the Sage cells there, or if you skipped the example entirely, the next cell should not know the values of those variables and will raise an error.

    + + + + a + b + + + +

    We cross-reference the example just prior, , to test the simple Sage cells that will now be part of a cross-reference knowl (an external file).

    + + + An Equivalent Claim + +

    This claim is an equivalence: it is true if and only if it is correct.

    +     + +

    Our purpose here is to show how you can structure a proof with cases, such as an equivalence structured with the arrows typically used to demonstrate the two directions involved in the proof, by using the direction attribute on a case element.

    + + +

    Nulla non lectus suscipit, bibendum leo quis, dignissim justo. In urna turpis, tincidunt id elementum id, faucibus ac tellus.

    +     + + +

    Quisque auctor ligula turpis, ut aliquam urna consectetur hendrerit. Aenean porta dolor et justo facilisis feugiat in sed sapien. Nullam porta ex et commodo semper.

    +     + + + Case 3b: The inductive step + +

    A case may also have a title, whose formatting and structure is entirely up to the author. This then becomes the text of a cross-reference, as well.

    +     + + + Why Not Try This? + +

    A case (or any other element with a default title) did not always handle title-ending punctuation correctly. So we try an example title with a question mark.

    +     + + + Necessity + +

    If you like, you can have both indications.

    +     + + +

    No direction, no title, then just a generic title.

    +     +     + + Exciting Proof! +

    We test here that punctuation at the end of the title of a proof is handled correctly.

    +     + + Exact Proof +

    This proof should fill exactly three lines (as of defaults in place 2018-12-31) and so the tombstone/Halmos should be on a fourth line, and then flush right. xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx.

    +     +     + + + A List of Equivalent Statements + +

    + The following are equivalent. +

      +
    1. This statement is equivalent to all those below.
      2. +
    2. This statement is equivalent to the statement above and to all those below.
      3. +
    3. This statement is equivalent to the two statements above and to the statement below.
      4. +
    4. This statement is equivalent to all those above.
      5. +
    +

    +     + +

    Our purpose here is to show how you can structure a proof with cases to address the circular logic required to prove the equivalence of a list of statements, by using the direction attribute on a case element. You should order the list of statements in the order that you would like to prove ``this statement implies the next.''

    + + +

    Here we would prove that the first statement implies the second.

    +     + + +

    Here we would prove that the second statement implies the third.

    +     + + + The trickiest case + +

    This time we include a title to describe the nature of this case. But we would still need to prove that the third statement implies the last.

    +     + + + Wrap-around + +

    Finally, we would complete the cycle of logic by proving that the last statement implies the first.

    +     + +     +     + +

    We can also use direction set to cycle in a stand-alone proof of our TFAE claim. If we include a ref on the proof that points to the original claim, then the formatting of the markers on the statement list will be honored in our cases.

    + + +

    Once again we will prove that the four statements in are equivalent.

    + + +

    Another argument that the first statement implies the second.

    +     + + +

    And another argument that the second statement implies the third.

    +     + + + Not so tricky this time + +

    Why did we find it so difficult before to prove that the third statement implies the last?

    +     + + + Wrap-around + +

    And once more we complete the cycle of logic.

    +     + +     + +

    A couple more times to check that the default list markers get applied to the directional cases properly.

    + + + Another List of Equivalent Statements + +

    + The ol that creates the list below does not have marker. +

      +
    1. This statement is equivalent to the two below.
      2. +
    2. This statement is equivalent to both the statement above and to the statement below.
      3. +
    3. This statement is equivalent to the two above.
      4. +
    +

    +     + +

    You know the drill by now.

    + + +

    Does the first statement imply the second?

    +     + + + The <q>middle</q> case +

    Does the second statement imply the third?

    +     + + +

    And finally, does the third imply the first?

    +     + +     +     + +

    This proof includes a ref to the preceding claim.

    + + + + +

    Does the first statement imply the second?

    +     + + + The <q>middle</q> case +

    Does the second statement imply the third?

    +     + + +

    And finally, does the third imply the first?

    +     + +     + +

    This proof does not include a ref, and so the direction indicators get default markers.

    + + + + +

    Does the first statement imply the second?

    +     + + +

    And finally, does the second imply the first?

    +     + +     + +     + + + + + A Pedagogical Note about <xref ref="subsection-second-FTC" text="type-global"/> + + + Symbolic and Numerical Integrals + +

    The Fundamental Theorem explains why we use the same notation for a definite integral, which is a numerical calculation,Which I think sometimes students lose sight of. and an antiderivative, which is a symbolic expression.

    + + + Essay Question: Compare and Contrast + +

    Write a short paragraph which compares, and contrasts, the definite and indefinite integral. This is an exercise which sits in the midst of the narrative, so is formatted more like an example or a remark. It can have a hint and a solution, but this one does not. It can have a title, which this one does.

    +     + +

    Start writing!

    +     + + +     +     + + + Advice + +

    Using an integral sign for an antiderivative (aka indefinite integral) would seem to make the Fundamental Theorem a fait accompli. So I would suggest not conflating the notation for two very different things until the Fundamental Theorem exposes them as being highly related.

    + + + An Example of Structure + +

    This is an example of an example with a bit more structure. Specifically, the example has a title, as usual, but then has a statement, which is separate from the solution. Why did we implement an example in two ways?

    +     + +

    Authors asked for it and it seemed a very natural thing to do, even if we only had an unstructured version for a long time.

    +     +     + + + An Example of a Question + +

    Any kind of question can be marked as such with question. Or similarly, as a problem. They behave identically to examples, such as the one preceding and are numbered along with theorems, examples. etc.

    +     + +

    You can have a solution. Or several, even if you don't ask a question.

    +     + +

    See?

    +     +     + + + An Inline Exercise + + +

    There are lots of exercises in this sample article, but mostly they are in special exercise sections. Sometimes you just want to sprinkle some exercises through the narrative. We call these inline exercises, in contrast to divisional exercises. The inline exercises look a bit more like a theorem or definition, with titles and fully-qualified numbers.

    + +

    These may also have hints, answers and solutions.

    +     + +

    A good hint.

    +     + +

    42.

    +     + +

    If your exercise feels like proving a theorem, then you might want to make some comments, but also clearly delineate which part of the solution is a the complete proof.

    + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lorem diam, convallis in nulla sed, accumsan fermentum urna. Pellentesque aliquet leo elit, ut consequat nunc dapibus ac. Sed lobortis leo tincidunt, vulputate nunc at, ultricies leo. Vivamus purus diam, tristique laoreet purus eget, mollis gravida sapien. Nunc vulputate nisl ac mauris hendrerit cursus. Sed vel molestie velit. Suspendisse sem sem, elementum at vehicula id, volutpat ac mi. Nullam ullamcorper fringilla purus in accumsan. Mauris at nunc accumsan orci dictum vulputate id id augue. Suspendisse at dignissim elit, non euismod nunc. Aliquam faucibus magna ac molestie semper. Aliquam hendrerit sem sit amet metus congue tempor. Donec laoreet laoreet metus, id interdum purus mattis vulputate. Proin condimentum vitae erat varius mollis. Donec venenatis libero sed turpis pretium tempor.

    + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra. Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    +     +     + + + +     + + + An Example of with <m>\frac12</m> math formula <m>\displaystyle{\int e^x \, dx}</m> in the title + +

    + Just for testing math in knowls, + and also extra whitespace in a p. +

    +     +     + +

    There are many different blocks you can employ, and they mostly behave the same way. A projectproject is very similar to a questionquestion or problemproblem

    + + + Start Exploring <pretext/> + +

    You could grab the minimal.xml file from the examples/minimal directory and experiment with that.

    + +

    Projects get their own independent numbering scheme, since they may be central to your textbook, workbook, or lab manual. If you process this sample article with level for project numbering set to 0 then you will get consecutive numbers from the beginning of your book, starting with 1.

    +     + + + + Exploring Explorations + + +

    This is an exploration.exploration Other similar possibilities are projectproject, activityactivity, tasktask, and investigationinvestigation.

    + +

    Note that projects, activities, explorations, tasks and investigations share the independent numbering scheme, so it is really only intended you use one of these. If you want a variant of the name ( Directed Activity) you can use the renamerename an environment facility ().

    +     + + +

    This is a solution to the exploration. In practice, you might choose to not make this visible for students, but instead include it as part of some guidance you might provide to instructors ( an Instructor's Manual).

    +     +     + + + Hints, Answers, Solutions + + +

    This is quite the activity upcoming. This is a prelude authored within the activity element, but visually just prior.

    +     + + +

    Another variant of these project-like items is to possibly include a hint and an answer before the solution.

    +     + + +

    Just a little help.

    +     + + +

    The result, but no help in getting there.

    +     + + +

    Everything to get it all done, in detail.

    +     + + +

    This was quite the activity just now. This is a postlude authored within the activity element, but visually just after.

    +     +     + + + A Note on Remarks + +

    remark, convention, note, observation and warning are designed to hold very simple contents, with no additional structure (no proofs, no solutions, ).

    + +

    But they do carry a title and a number, can be the target of a cross-reference, and may be optionally knowlized in HTML with the html.knowl.remark processing switch.

    + +

    And distinctly different from a note in a biblioA gratuitous footnote to test prior bug confusing this with a note in a biblio..

    +     + + + +

    An exercise can be structured with task.

    + + + A very structured exercise + + +

    This is an over-arching introduction to the whole exercise. We follow with some tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + + A super-simple task +

    This first task is very simple, just a paragraph. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + +

    Now three paragraphs. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + + A title of a task that has a subtask with an <tag>answer</tag> for the Solutions + +

    This second task is further divided by more tasks. This is its introduction. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + A task with a title and an <tag>answer</tag> for the Solutions + +

    A really simple subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    A short paragraph, before an answer.

    +     + +

    With a proof.

    + +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +

    And a bit more to say.

    +     +     + + +

    A subtask with an answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    Right! In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + + +

    Three simple sub-sub-tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    First subsubtask. Short paragraph.

    +     + + A second three-deep subsubtask! +

    Second subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    Third subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    The conclusion of the structured subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + +

    A simple task as the last subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    This concludes our structured second task. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + + + +

    This third top-level task is intermediate in complexity, you are reading the statement, which is followed by more items. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    One hint. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    First answer. In interdum suscipit ullamcorper.

    +     + +

    Second answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    At last, the solution. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + + +

    This is a conclusion where you could summarize the exercise. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + +

    The following project is nearly identical to the preceding exercise.

    + + + A very structured project + + +

    The next block is a project, demonstrating the use of the task element to structure its parts. You are reading the prelude now. The project has lots of nonsense words, so we can test spacing the nested items. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + +

    This is an over-arching introduction to the whole project. We follow with some tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + +

    This first task is very simple, just a paragraph. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + +

    Now three paragraphs. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + + +

    This second task is further divided by more tasks. This is its introduction. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + +

    A really simple subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    A short paragraph, before an answer.

    +     + +

    With a proof.

    + +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +

    And a bit more to say.

    +     +     + + +

    A subtask with an answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    Right! In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + + +

    Two simple sub-sub-tasks. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    First subsubtask. Short paragraph.

    +     + +

    Second subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + + + + +

    Third subsubtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + +

    The conclusion of the structured subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + +

    A simple task as the last subtask. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    This concludes our structured second task. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + + + +

    This third top-level task is intermediate in complexity, you are reading the statement, which is followed by more items. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    One hint. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    First answer. In interdum suscipit ullamcorper.

    +     + +

    Second answer. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +

    In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + +

    At last, the solution. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + + +

    This is a conclusion where you could summarize the project. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     + + +

    This postlude appears visually outside the project, but is authored within, to make clear its attachment to the project. In interdum suscipit ullamcorper. Morbi sit amet malesuada augue, id vestibulum magna. Nulla blandit dui metus, malesuada mollis sapien ullamcorper sit amet. Nulla at neque nisi. Integer vel porta felis.

    +     +     + + + Notation mathématique 2 + +

    The following example, from Elise Desgreniers, is structured with task.

    +     + +

    Écrivez chacun des exemples suivants avec les conditions pertinentes.

    +     + + +

    Soit l'ensemble A=\lbrace 1,2,3,4,5\rbrace.

    +

    On constate que cet ensemble contient uniquement des entiers positifs allant de 1 à 5.

    +

    Donc, on peut écrire A=\lbrace x\mid x\in\mathbb{N}\text{ et } 1\leq x\leq 5\rbrace.

    +     +     + + +

    \{3,6,9,12,15,\ldots,27,30\}

    +     + +

    Ce sont des multiples de 3.

    +     + +

    \{x\mid x=3y \text{ et } 1\leq y\leq 10 \text{ et } y\in\mathbb{N}\}

    +     +     + + +

    \{1,3,5,7,9,11,\ldots\}

    +     + +

    Ce sont des nombres impairs.

    +     + +

    \{x\mid x\mod 2=1 \text{ et } x\in\mathbb{N}\}

    +     +     + + +

    \{2,3,5,7,11,13,17,19,23,\ldots\}

    +     + +

    Ce sont des nombres premiers.

    +     + +

    \{x\mid x\text{ est un nombre premier positif}\}

    +     +     + + +

    \{1,4,9,16,25,36,\ldots,961\}

    +     + +

    Ce sont des carrés parfaits.

    +     + +

    \{x\mid x=y^2 \text{ et } 1\leq y\leq 31\text{ et } y\in\mathbb{N}\}

    +     +     + + +

    \{1,8,27,64,125,\ldots\}

    +     + +

    Ce sont des cubes parfaits.

    +     + +

    \{x\mid x=y^3 \text{ et } y\in\mathbb{N^*}\}

    +     +     +     + +

    Notes or examples related to computation or technology can go in blocks of the same name.

    + + + Sample Use of Sage + +

    This would be a good place to talk about Sage, including a cell or two.

    + + + diff(x^4, x) + 4*x^3 + + +

    But you might want to describe how to use some other calculator, or maybe some numerical method.

    +     + + + A <tag>paragraphs</tag> with a <tag>project</tag> with an <tag>answer</tag> + +

    The solutions to a project (and similar) once did not migrate to the automatically-generated solutions.

    + + + +

    A simple project, no tasks, just an answer.

    +     + +

    Here's the answer we are looking for.

    +     +     +     +     + + + + +

    This is an exercise in an Exercises subdivision at the level of a subsubsection. There is no question other than if the numbering is appropriate. Here is a self-referential link: Exercise.

    + +

    The subsubsection has no title in the source, so one is provided automatically, and will adjust according to the language of the document.

    +     + +

    This solution will migrate to a list of solutions in the backmatter. We include a sidebyside as a test.

    + +

    This is a skinny paragraph which should be just 30% of the width.

    +

    And another skinny paragraph which should also be just 30% of the width.

    +     +     +     + + + +

    An exercise can be structured with parts, called task. This is the introduction.

    +     + +

    Do this.

    +     + +

    And the other thing.

    +     +     +     + + + + reading questions +

    A set of reading questions may have an introduction, perhaps for preparatory explanation.

    +

    If a student has logged in to the HTML version, + then they can answer the reading questions directly in the book. + Inline math LaTeX can be entered using + $...$ or \(...\) delimiters, + and inline AsciiMath using backticks `...` as delimiters. + Here are some `gratuitous backticks` to check that AsciiMath is only + active in the answers to reading questions. +

    +     + + +

    + This is a reading question that you might have a student answer prior to a class session, + based on reading part of the book. + A quick glance before class can help you tailor class time to the specific needs of your students. + The perfect reading question will reveal whether the student has read and understood the material, + and will be difficult to answer if they have not. + What do you think of that? +

    +     + + +

    + And a second one, with a cross-reference to the first, + as a check on numbering: + . + Reading questions are allowed to have answers, + but providing answers misses the point of a reading question, + and the answer knowl interacts poorly with the mechanism used to + allow students to answer directly in the book. + Do you think the schema should ban answers to reading questions? +

    +     + + +

    And for symmetry, a conclusion.

    +     +     + + + glossary + +

    A glossary may have a headnote, perhaps with some explanation. This glossary is a specialized division within a section. Placement in the back matter is another option, see the .

    +     + + + bar +

    A part of foobar. See .

    +     + + + foobar +

    A synonym for the acronym FUBAR.

    +     +     + + + Solutions for This Subsection + solutionsfor a division + + +

    This is an introduction, where you might explain that this division of this subsection contains various hints, answers, solutions of inline exercises, divisional exercises, and/or project-like blocks. See the source to see just how this solutions division was built.

    +     + + + + +

    And a conclusion to this solutions division, which may not be readily apparent as distinct from the final division's worth of solutions, but since it is not prefixed with a number, it may be different enough.

    +     +     + +     + + + Theorem-Like Environments + +

    There are a variety of pre-defined environments in . All take a title, and must have a statement. Some have proofs (theorems, corollaries, ), while some do not have proofs (conjectures, axioms, principles).

    + + + The Title Principle + + +

    It is a fundamental principle that many elements can have a title. Try it and see. If you get better formatting, then it is being recognized. If it looks very plain, check the documentation and perhaps make a feature request.

    +     +     + +

    More precisely, theorem, corollary, lemma, algorithm, proposition, claim, fact, and identity, all behave exactly the same, requiring a statement (as a sequence of paragraphs) followed by an optional proof, and may have an optional title. The elements axiom, conjecture, principle, heuristic, hypothesis, and assumption are functionally the same, barring a proof (since they would never have one!). Definitions are an exception, as it is natural to place notation withinsee the source for Definition for an example.

    +     + + + Linking Sage Cells + Sage cellslinking + +

    Sage cells share their results on a per-webpage basis, or a per-knowl basis, so if you move to a new chapter, section, or subsection that happens to be on another webpage, your Sage computations are gone and you start fresh. But maybe you need some results from elsewhere. As an author, you can make an exact copy of a cell in another location by placing the code in an external file, which is pure text, freed from any need to format for XML processing. So, in particular, there is no need to escape ampersands and angle brackets, nor is there employment of the CDATA mechanism. But the real value is that there is just one version to edit, and any changes will be reflected in both copies. We demonstrate this in the sample book, since it has the xinclude mechanism in place. In the chapter on groups, find the section on Sage and then find the discussion of subgroups, and you will find an example of two identical Sage cells produced from one source file.

    + +

    You can also specify certain cells to be auto-evaluated, by setting the auto-evaluate attribute to yes. The resulting cell will not have a button for evaluation (so editing it would be pointless). See the source of this sample article for the two examples below.

    + +

    2023-08-17: support just now is for the use case of a small portion of code, not a huge library of helper routines.

    + +

    Two cells with the default language sage.

    + + + k = 404 + + + + 2*k + + +

    Two cells with language python.

    + + + + k = 4112 + print("Assigned an initial value to the variable k") + + + + + + k = 2*k + print(k) + + + +     + + + Hierarchy + + + Structure + +

    This section of this article has subsections and subsubsections. In a book you can have chapters enclosing multiple sections. There is one finer subdivision, it is achieved with the paragraphs element.

    + +

    It is basically a sequence of paragraphs, where the first one gets an inline title. You are reading the second, and final, paragraph of one right now. It is useful for organizing very short documents, where numbered subdivisions might be overkill.

    +     + + + A Second Paragraphs +

    This is a second consecutive paragraphs element, so should seem related to its title, but distinct from the two paragraphs in the grouping with the title Structure immediately prior.

    +     + + + + Assemblages: Collections and Summaries + +

    An assemblage is a collection, or summary, that does not have much structure to it. So you are limited to paragraphs and friends (p, blockquote, pre) and side-by-sides that do not contain captioned items (sidebyside, sbsgroup). The intent is that contents are not numbered, so cannot be cross-referenced individually, and so also do not become knowls. You may place image, tabular, and program inside a sidebyside, in addition to other objects that do not have captions. Note that p may by extension contain lists (ol, ul, dl). Despite limited structure, the presentation should draw attention to it, because the contents should be seen as more important in some way. It should be highlighted in some manner. If you need to connect the entire assemblage with material elsewhere, you can do that with the usual xref/xml:id mechanism.assemblage

    + +

    What have we seen so far in this (disorganized) sample?

      +

    • Theorems, definitions and corollaries. ()

      • +

    • Sage cells, including with R. ()

      • +

    • Lots of document structure, like introductions and conclusions (next). ()

      • +

    + +

    A sample table, as a tabular inside a sidebyside with no caption, follows.

    + + + ABC + UnoDosTres + +     + + +

    This is a small assemblage with no title, simply to make sure the surrounding box behaves properly, especially for output.

    +     + + + Assemblages containing <m>\mu \forall \tau \mathbb{H} = \emptyset \kappa</m> + +

    It is acceptable for an assemblage to contain mathematical content, even in its title.

    +     +     + + + Introductions and Conclusions + + + An Introductory Introduction + +

    Any subdivision may have a sequence of paragraphs within an introduction that precedes subsequent further subdivisions. You are reading one now. They are always leaves of the document structure, so are rendered on some pages that reference the following subdivisions.

    + +

    An introduction or conclusion is an extremely restrictive container with simple presentation. A title is optional (and probably not advisable). Content is meant to be short and unstructured, in particular, nothing that can be numbered is allowed. If this feels too restrictive, then place your content in an initial numbered subdivision and perhaps title it Introduction. Or make your entire subdivion unstructured and place whatever you want into it.

    + +

    This ends this introduction to introductions.

    +     + + + Test One + +

    An intervening subsubsection just after an introduction.

    +     + + + Test Two + +

    An intervening subsection section which contains an exercises division which must be at the level of a Subsubsubsection.

    + + +

    An inline exercise to examine any clash with divisional exercises below.

    +     + +

    An answer so there is something to appear in a solutions.

    +     +     + + + What Did You Learn? + + +

    A mock exercise to appease validation.

    +     + +

    An answer so there is something to appear in a solutions.

    +     +     + + +

    And a second to help with formatting the division heading.

    +     +     +     + + + + +

    A mock exercise to appease validation.

    +     + +

    An answer so there is something to appear in a solutions.

    +     +     + + +

    And a second to help with formatting the division heading.

    +     +     +     +     + + + Test Three + +

    An intervening subsubsection just before a conclusion.

    +     + + +

    Entirely analogous to introductions are conclusions. Any subdivision may have a sequence of paragraphs within a conclusion that follows previous further subdivisions. You are reading one now. They are always leaves of the document structure, so are rendered on some pages that reference the preceding subdivisions.

    + +

    This concludes this conclusion (and this subsection and this section).

    +     +     + + + Some Paragraph-Level Markup + +

    Text within a paragraph may be emphasizedememphasisstyling wordsemstyling wordsemphasis with em or if you want to take it to the next level you can identify the text as an alertalertstyling wordsalert with alert.

    + +

    Similarly, within a paragraph, you can identify edits between versions as inserted text that has been addedstyling wordsinsert with insert or as deleted text that has been removedstyling wordsdelete with delete. Note that these identified edits are slightly different than stale text that you want to retain, but which is no longer relevantstyling wordsstale, which is accomplished with stale. The original request for stale text came from an instructor with an online list of student topics for presentations, and as students claimed topics they were marked as no longer available for other students.

    + +

    If you need a fill-in blank, like this , it can be obtained with an empty fillin element that defaults to roughly a 10-character width. You can use the characters attribute to make the rule longer or shorter, such as a 40-character blank: . The character count is approximate, based on typical character widths within a proportional font carrying English language text. Adjust to suit, or request a language-specific adjustment if it is critical.

    + +

    This paragraph is intended to make a fillin appear right at the start of the second line in print and then the next paragraph has nothing but a fillin. Both are for testing purposes.

    + +

    + +

    The following are fillin with rows and/or cols attributes (at least one of which is greater than 1): , , .

    + +

    Long after we started this mess, we added tags to mark up tags and attributes. The elements are: tag, tage, attr. Examples of how these render are (respectively): section, hash, width. Perhaps this document will make greater use of these tags.

    + +

    We supply two provisional cross-references for testing purposes only: , .

    + +     + + +

    A conclusion here, which we fill with some numbering tests.

    + +

    This is a cross-reference to one of the outcomes, forced to use the type-global form of the text. It should describe the outcome as belonging to the section (rather than the outcomes), since outcomes are one-per-subdivision and are numbered based upon the containing division: . For comparison this is the (forced) type-global cross-reference: .

    +     + + + Fundamental Structures, Revisited + + +

    This is a outcomes element you are reading, and this is its introduction. This early section has really grown and we have tried to accomplish many things. Not all of them are listed here.

    +     + +
      +
    1. Display various blocks, fundamental units of the flow.
      2. +
    2. More, and this is what the cross-references above are pointing to.
      3. +
    3. Evermore.
      4. +
    + + +

    This concludes the (incomplete) outcomes for this section, so now we can carry-on to the next section.

    +     +     +
    + + + +
    + Some Facts and Figures + footnotes + + + +

    Because of the Fundamental TheoremFirst test footnote, for every derivative we know, there is an antiderivative we might find useful. Because of the Fundamental Theorem of CalculusSecond test footnote, we recycle the \int symbol as notation for an antiderivative.

      +
    • +

      Derivatives

        +
      1. \frac{d}{dx}x^n = nx^{n-1}
        2. +
      2. \frac{d}{dx}e^x = e^x
        3. +
      3. \frac{d}{dx}\cos(x) = -\sin(x)
        4. +

      +
      • +

    • Antiderivatives

        +
      1. \indefiniteintegral{x^n}{x} = \displaystyle\frac{x^{n-1}}{n+1}\text{ if }n\neq -1
        2. +
      2. \indefiniteintegral{e^x}{x} = e^x
        3. +
      3. \indefiniteintegral{\sin(x)}{x} = -\cos(x)
        4. +

      +
      • +

    + + +

    You canThird test footnote gain a greater understanding of derivatives by studying the graphs of functions with their derivatives. CanFourth test footnote you discern the derivativeantiderivativeFifth test footnote relationship in Figure?

    +     + + + +
    + A function and its derivative + + + a third degree polynomial with a local max and a local min; + its derivative is plotted on the same axes + + +
    + +

    ListsSixth test footnote can have multiple columns. With HTML items displayed in row-major order (horizontally first) andSeventh test footnote with items are displayed in column-major order (vertically first). When one order, or the other, becomes workable in both variants, maybe we will be consistent in presentation. (Note that with just one row, it makes no difference.) We used it above for the two itemsderivatives and integralswhere each item was a list of its own. Here are two more examples, one with short snippets and lots of columns, the other with lots of text in paragraphs.listmulticolumn

      +

    1. Red

      2. +

    2. Blue

      3. +

    3. Green

      4. +

    4. Purple

      5. +

    5. Yellow

      6. +

    6. Black

      7. +

    7. Orange

      8. +

    8. Pink

      9. +

    9. Salmonstrange colors

      10. +

    10. Aqua

      11. +

    11. Cyan

      12. +

    12. Pucestrange colors

      13. +
      +
    • +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lorem diam, convallis in nulla sed, accumsan fermentum urna. Pellentesque aliquet leo elit, ut consequat nunc dapibus ac. Sed lobortis leo tincidunt, vulputate nunc at, ultricies leo. Vivamus purus diam, tristique laoreet purus eget, mollis gravida sapien. Nunc vulputate nisl ac mauris hendrerit cursus. Sed vel molestie velit. Suspendisse sem sem, elementum at vehicula id, volutpat ac mi. Nullam ullamcorper fringilla purus in accumsan. Mauris at nunc accumsan orci dictum vulputate id id augue. Suspendisse at dignissim elit, non euismod nunc. Aliquam faucibus magna ac molestie semper. Aliquam hendrerit sem sit amet metus congue tempor. Donec laoreet laoreet metus, id interdum purus mattis vulputate. Proin condimentum vitae erat varius mollis. Donec venenatis libero sed turpis pretium tempor.

      + +

      Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra. Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

      +
      • + +
    • +

      Donec vestibulum auctor nisl. Nullam placerat interdum dui. Quisque lobortis scelerisque augue imperdiet placerat. Maecenas ultricies massa tempor, laoreet urna a, eleifend enim. Integer sed suscipit odio. Pellentesque non dapibus diam, eget tempus dui. Maecenas sollicitudin magna viverra, egestas velit nec, tristique sem. Cras iaculis mattis dui ac cursus. Integer volutpat, urna vel tempus convallis, erat nisi consectetur turpis, id varius dolor lorem vitae mauris. Phasellus erat orci, laoreet commodo gravida quis, congue in lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent at bibendum turpis. Pellentesque est nisl, dapibus at sagittis non, ultricies in nunc. Etiam ipsum arcu, porta sed feugiat eget, facilisis nec libero. Mauris tempor convallis felis.

      + +

      Cras iaculis sapien elit, at convallis ligula convallis nec. Duis ante tortor, euismod a libero vitae, ornare viverra purus. Pellentesque facilisis urna a velit volutpat, in malesuada tortor porttitor. Sed vehicula mauris id lectus dignissim, eget consectetur dui pellentesque. Sed vel quam molestie, euismod ligula ac, venenatis arcu. Fusce sit amet sapien non urna dignissim tempus in vitae metus. Aliquam arcu turpis, mattis non libero eu, lacinia feugiat turpis. Phasellus rhoncus lacinia lacus facilisis ullamcorper. Praesent hendrerit accumsan neque, eu dignissim est consequat sed. Nulla facilisi. Proin at mi scelerisque, scelerisque felis ut, tristique diam. Proin in leo in lorem porttitor varius. Praesent condimentum in dui sit amet blandit. In imperdiet blandit congue.

      +
      • + +
    • +

      Ut nec sem vitae ipsum interdum vestibulum sit amet sed velit. Aliquam tempor nibh vitae augue pulvinar, at ultricies urna commodo. Donec in porta lectus, ac sagittis felis. Vestibulum tincidunt quis metus facilisis luctus. In lobortis lacus vel ornare vehicula. Duis aliquet, ligula semper sodales adipiscing, augue nibh ornare ante, quis pulvinar justo mi eget mi. Mauris varius imperdiet vehicula. Duis dignissim magna quis velit mattis, in cursus lectus vehicula. Morbi quis tempus felis, ut gravida nisi.

      + +

      Vivamus eu commodo est, pretium fringilla dolor. Curabitur vel sollicitudin libero. Integer sit amet auctor felis. Maecenas sagittis erat at ante feugiat, in tincidunt ligula pretium. Integer eget auctor ipsum, quis volutpat felis. Morbi id dignissim eros. Suspendisse aliquet pulvinar lorem gravida egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nec massa dui. Suspendisse convallis lacus sit amet adipiscing varius. Suspendisse tempus diam vitae justo ornare, in condimentum metus pharetra. Curabitur sem dolor, auctor vitae sagittis vestibulum, posuere imperdiet metus. Etiam pretium lacus urna, vel auctor diam tincidunt non. Etiam viverra sodales iaculis.

      +
      • + +
    • +

      Sed varius leo urna. Phasellus tempus mollis ultricies. Curabitur non neque aliquet, facilisis tortor in, sodales dui. Donec hendrerit ultricies nulla mollis rhoncus. In vel lobortis est. Vestibulum consectetur lacus vel sem dignissim vestibulum. Etiam sed elementum ligula, vel congue turpis. Morbi nec diam mattis, venenatis eros et, elementum tellus. Integer sed orci ornare, elementum elit id, lacinia augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et libero id turpis pharetra faucibus. Integer consequat dignissim semper. Donec pretium magna at ullamcorper ultricies. Nam quis suscipit elit. Donec cursus tellus et venenatis feugiat. Mauris dictum molestie leo, vitae aliquet metus luctus vitae.

      + +

      Ut id iaculis leo. Sed nec vestibulum mi. Mauris est mauris, porta in nulla eget, bibendum luctus nisl. Praesent et posuere felis, molestie vehicula velit. Nulla a nunc venenatis, aliquam orci nec, congue felis. Vestibulum a dolor nisi. Morbi sed nisi nulla. Nam iaculis felis a enim blandit, at venenatis diam congue. Nulla augue diam, egestas eget fermentum nec, posuere eget risus. Praesent egestas nulla eros, eget accumsan augue euismod vel. Pellentesque pellentesque non erat vitae posuere. Curabitur lacus arcu, varius sed risus ut, ullamcorper tincidunt lorem. Sed et lacus dignissim, tincidunt nisl ac, porttitor sapien.

      +
      • +

    + + + +
    + + + + + +
    + Some Advanced Ideas + + + +

    The multi-row displayed mathematics in the proof of the Fundamental Theorem had equations aligned on the equals signs via the & character. Sometimes you don't want that. Here is an example with some differential equations, with each equation centered and unnumbered, + {\mathcal L}(y')(s) = s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) + {\mathcal L}(y'')(s) = s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0) + . + + \rho + this symbol could be used for lots of things, but we are just trying to make a super-long description to get it to wrap within the column where it belongs, which is sometimes set to a fixed width to accomodate really complicated explanations + + rho, a test + Just prior to this sentence, in the middle of this paragraph, is an idx and a notation, adjacent, but separated by some whitespace in the authored source. That insignificant whitespace will be removed akways, which will be a (slightly) noticeable improvement in the output. We test referencing notation here, placed before the sentence-ending period and right after some inline mathematicsfor \mathbb{Z}_n\mathbb{Z}_n(ring of) integers modulo n.

    + +

    has a device where you can interrupt a sequence of equations with a small amout of text and preserve the equation alignment on either side. Here are two tests of that device, with aligned equations and non-aligned equations. Study the source to see use and differences. (The math does not make sense.)

    + +

    Aligned and numbered first. + {\mathcal L}(y')(s) &= s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) + {\mathcal L}(y'')(s) &= s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0). + And so it follows that, + {\mathcal L}(y')(s)^{++} &= s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) + {\mathcal L}(y'')(s)^{5} &= s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0). +

    + +

    Now with no numbers and no alignment. We include two cross-references in the intertext portion for testing. + {\mathcal L}(y')(s) = s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) + {\mathcal L}(y'')(s) = s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0). + First an external reference to and internal cross-reference to . And so it follows that, + {\mathcal L}(y')(s)^{++} = s {\mathcal L}(y)(s) - y(0) = s Y(s) - y(0) + {\mathcal L}(y'')(s)^{5} = s^2 {\mathcal L}(y)(s) - sy(0) - y'(0)= s^2 Y(s) - sy(0) - y'(0) + .

    + +

    Tables can get quite complex. Simple ones are simpler, such as this example of numerical computations for Euler's method in just a bit.

    + +

    But first we make a figure with two very simple tables next to each other. This causes the very first instance of table to actually be a subtable, which exposes a bug provoked by Emiliano Vega and fixed around 2020-08-06. (So we have to place this early to create the same behavior that exposed the bug.)

    + +
    + Buggy sub-tables + + + + First + + One + +
    + + Second + + Two + +
    +     +
    + + + Euler's approximation for Duffing's Equation with <m>h = 0.2</m> + + + i + t_i + x_i + y_i + + 00.000.00000.5000 + 10.200.10000.4800 + 20.400.19600.4560 + 30.600.28720.4295 + 40.800.37310.4027 + 51.000.45360.3783 + 61.200.52930.3591 + 71.400.60110.3480 + 81.600.67070.3474 + 91.800.74020.3603 + + 102.000.81230.3900 + +
    + +
    + +
    + Mathematics + + +

    To be able to create both and HTML output (plus variations), we rely on MathJax, which in turn supports an extensive subset of the mathematical symbols normally available. The AMSMath symbol set is a good approximation. The Guide has a link to the complete list of macros supported by MathJax. We load the AMSsymbols library.

    +     + + + + Basic Mathematics + +

    The following is from the MathJax demonstration page, an identity due to Ramanujan:\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }

    + +

    And again, from the MathJax demonstration page, Maxwell's equations:Maxwell's equations + \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} + \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho + \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} + \nabla \cdot \vec{\mathbf{B}} & = 0 + \nablagradient operator

    + +

    Historically, we provided internal support for the package extpfeil. As of 2023-10-19 this has become an author election (see the docinfo section in the source of this document). We preeserve a small test that this extensible arrows library is being included properly:A\xmapsto[\text{bijection}]{\Phi+\Psi+\Theta}B

    + +

    Look back at the top of the source file of this document to see how to include your macros just once. For best results keep your macros simple and semantic.

    + +

    once provided modest built-in support for slanted, or beveled, or nice fractions. To wit, we mean fractions such as: \sfrac{3}{8}. Use the pre-defined \sfrac{}{} macro in your mathematics to achieve this presentation. The presentation in HTML is subpar, but could improve as MathJax provides support. It is now an author's responsibility to add support for superior typesetting for PDF output by loading the xfrac package with the following in docinfo: + <math-package latex-name="xfrac" mathjax-name=""/> + which is what we have done here as a test. See the Guide for more details.

    + +

    We consider a system of equations. We number the first and last equation (there are just two) and include an xml:id on each. We reference the whole system later as the range of equations from the first to the last. + \frac{dx}{dt} \amp = x^2 - 4x - y + 4 + \frac{dy}{dt} \amp = x^3 - y. +

    + +     + + + Displayed Mathematics + +

    Multi-line displays of mathematics are achieved with the md tag (math display), and the variant that produces numbers on each line, mdn (math display numbered), used within a paragraph (p). As a good example of how XML syntax is superior, you author n lines of equations by enclosing each line inside of a mrow tag, rather than using n-1 separators (such as \\).

    + +

    If you use no ampersands to express alignment (read ahead), then each equation is centered independently on the width of the text. This is implemented according to the AMSmath package's gather environment. Example: + \frac{dx}{dt} = x^2 - 4x - y + 4 + \frac{dy}{dt} = x^3 - y. +

    + +

    An ampersand is used, in two ways, to describe positioning several equations per line, organized in columns. We have created the pre-defined macro \amp as one way specify these, but the escape sequence &amp; may be used also. The second, fourth, sixth, ampersands separate columns, and the spacing between columns will be provided automatically. The first, third, fifth, ampersands are alignment points for the equations in each column. Typically this is placed just prior to a binary operator, such as an equal sign (\amp = ), or for a column of explanations or commentary, just prior to the \text{} macro. Note that this scenario suggests always having an odd number of ampersands in each mrow. In the example below, alignment is on the equals sign in the first two columns, and provides left-justification to the explanations in the third column. N.B.: the use below of the \text{} macro does not include mathematics within its argument. Doing so may yield unpredictable results depending on your choice of delimiters for the mathematics (and using an m tag will be ineffective). + \frac{dx}{dt} \amp = x^2 - 4x - y + 4 \amp \frac{dy}{dt} \amp = x^3 - y \amp\amp x, y\text{ version} + \frac{dw}{dt} \amp = z^3 - w \amp \frac{dz}{dt} \amp = z^2 - 4z - w + 4 \amp\amp z, w\text{ version} +

    + +

    will automatically detect the presence or absence of ampersands, but by defining macros for entire aligned equations, you can effectively hide the ampersands. So the @alignment attribute can override automatic detection. We use a simple macro to demonstrate setting alignment='align' to override the use of a gather environment and use a align environment instead. Example: + \myequation{\frac{dx}{dt}}{x^2 - 4x - y + 4} + \myequation{\frac{dy}{dt}}{x^3 - y}. +

    + +

    The AMSmath package's alignat environment is a third variant of alignment. It never happens automatically, you need to ask for it with alignment="alignat". It is very similar to align but adds no space between the equation columns. So you can leave it that way, or you can add your own extra space to suit. Here is a previous example with no inter-column space: + \frac{dx}{dt} \amp = x^2 - 4x - y + 4 \amp \frac{dy}{dt} \amp = x^3 - y \amp\amp x, y\text{ version} + \frac{dw}{dt} \amp = z^3 - w \amp \frac{dz}{dt} \amp = z^2 - 4z - w + 4 \amp\amp z, w\text{ version} + . This modified example has a middle row with three columns, while the other rows have just one column, as a test of our routines for determining the mrow with the greatest number of ampersands (and how many there are), + \frac{dw}{dt} &= z^3 - w + \frac{dx}{dt} &= x^2 - 4x - y + 4 & \frac{dy}{dt} &= x^3 - y&& x, y\text{ third column} + \frac{dw}{dt} & = z^3 - w + . Final example demonstrates that ampersands in other objects (matrices here) can wreak havoc with computing the number of columns. So we provide yet another attribute to override automatic detection, alignat-columns. This is the number of columns not the number of ampersands. Generally, for c columns, there will be 2c-1 ampersands. + A &= \begin{bmatrix}1 & 2 \\ 3 & 4\end{bmatrix} + & + I &= \begin{bmatrix}1 & 0 \\ 0 & 1\end{bmatrix} + . One caveat: if your number of ampersands is even (see advice above about using an odd number) behavior should still be correct, as in next example.

    + +

    If you want super-precise control over alignment of the terms of a system of equations (linear or not) you can use the alignat option to advantage by not including any extra space. This example is modified slightly from a post by Alex Jordan: + 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 + x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 + x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13. + Beautiful.

    + +

    A long equation, to check layout on various screen sizes. This is Weil's explicit formula for the + Riemann \zeta-function: + + \sum_\gamma S_-(\gamma) = \frac{\log Q}{\pi} \hat S_-(0) + + \frac{1}{2\pi} \sum_{j=1}^d \Re\left\{ \int_{-\infty}^\infty \frac{\Gamma'}{\Gamma}\left(\frac{1}{4} + \frac{it}{2} + \mu_j\right)S_-(t) dt\right\} + - \frac{d}{2\pi}\hat S_-(0)\log \pi + . +

    + + Excessive Display Mathematics + +

    In print versions, a long run of displayed equations often needs to be broken across pages. If you are reading some other version of this, then there is nothing to see here. But for output it could be interesting. First, with no extra effort, this page-long display should break naturally, no matter how the preceding material changes. + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + .

    +

    In this version we have turned off page breaking for the entire display, but then allowed a break at every fourth equation, so you should see a reasonably attractive page break right after one of the m^2+n^2=p^2 equations. + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + x^2+y^2=z^2 + a^2+b^2=c^2 + \alpha^2+\beta^2=\gamma^2 + m^2+n^2=p^2 + + .

    +

    So. Do not take any extra steps and let figure out the breaks. If you do not like a break, modify the md or mdn to go back to the AMSmath default behavior and not break at all. Ever. Or rather, go further and modify an individual mrow to suggest that it is a good place for a break.

    +     + +

    This is a poorly-authored paragaph to test the conversion to HTML. There are two displayed equations, separated by a period ending the first one's sentence, which should migrate into the display, and not leave behind an empty paragraph: z+y = z. a + b = c. This final sentence should remain, inside another HTML paragraph, without the second equation's period.

    +     + + + <latex/> Packages and MathJax Extensions + +

    If you would like to enhance your mathematics by using a macro from a package and there is a MathJax extension which implements the same macro, then you may use this with your mathematics as we demonstrate here.

    + +

    This example is from Jason Underdown.Underdown, Jason The package is named cancel and is included in the TeXLive distribution, so is fairly standard. The particular macro being demonstrated is \cancelto{}{}. \lim_{b \rightarrow \infty}\left[\cancelto{0}{-\frac{1}{s}e^{-sb}} + \frac{1}{s}\right]. Look at the source of this article to see the package name being supplied in a math-package element within the docinfo section. That is the only setup required to make the macro usable in and HTML output.canceling a termcancelto macro

    + +

    See the Guide subsection about MathJax Extensions for more detail.

    +     + + + Advanced Mathematics + +

    MathJax is extremely capable in rendering a subset of in web browsers, and improving all the time. You can get fairly fancy with some of its supported commands. In particular, if you need to mix in a few words with your mathematics, the \text{} macro is supported. For example, you might use an if or an otherwise in the definition of a piecewise function.

    + +

    Consider that the first line below is text sandwiched in-between two Greek letters, wrapped in a \text{} macro. In HTML output we have taken care that the font for text material within display mathematics should match the font of the surrounding paragraph, as also happens with output. The second line is nearly identical in the source, but is just naked text being rendered like a slew of variables. + \alpha\text{ is not equal to }\beta + \alpha is not equal to \beta + \alpha\neq\beta + . We are not suggesting here that using words in place of symbols, as in the first line, is a good practice. (It is not.)

    + +

    The following example is a good stress-test of using the \text{} macro to achieve certain effects. Note the Unicode left and right smart quotes. This a contribution from Alex Jordan as part of his work on APEX Calculus. + y \rightarrow \frac{\sin(0) }{0} \rightarrow {{\text{“}}\atop{}}\frac{0}{0}{{\text{”}}\atop{}}\text{.} + And another one from Alex. Note the use of the \mathord{} and \mathrel{} macros to control spacing around the mathematical symbols. Examine the source to see how the quotation marks have been authored with XML syntax for Unicode characters, since we do not allow most markup inside mathematics. + \zeta(1)=\sum_{n=1}^{\infty}\frac{1}{n}\mathrel{\text{ “}\mathord{=}{\text{” }}}\prod_{p}\left(\frac{1}{1-1/p}\right)=\prod_{p}\left(\frac{1}{1-p^{-1}}\right) +

    + +

    Generally, you cannot use any XML elements inside of the mathematics elements. An exception is the xref element which you might want to use to provide justifications for the steps of a derivation. Here is a visual example that is mathematically meaningless, + A&=B+C&& + &=D+E&& + &=F+G&&A nice result + .

    + +

    Scott Beaver likes to write short chains of equalities all in one line, with the cross-references sitting on each equals sign. Here we test the \overset and \underset macros wrapping a xref, with and without content, inside an me element. Note that \stackrel is obsolete, and \overunderset is not yet supported by MathJax (but see GitHub #2704). The mathematics is Scott's, the reasons are totally unrelated to the math. + AC-AD + \overset{}{=} + A(C-D) + \underset{}{=} + A0_{n\times p} + \overset{Thm.}{=} + 0_{m\times p} + + We suggest using cross-references that only display numbers (xref with text set to global) since if you stick to elements like theorem, lemma, definition, or axiom, then the numbers will be unambiguous and the target of the cross-reference will contain full information. But note that if you mix in divisions, or perhaps figures, as reasons then there is a possibility that numbers will need to be qualified by their type. We have provided an abbreviation for one cross-reference to (which will not benefit from automatic translation to other languages). +

    +     + + + Local Tags on Equations + +

    If you are not writing a research monograph, maybe (a) you will not use many numbered equations, or do not like the looks of them, or feel they scare your readers, and (b) maybe your cross-references are always local-ish, like strictly within an example or a proof. For this situation you can create, and employ, a local tag on a displayed equation. Nothing enforces the idea of what constitutes local, and there is nothing to stop you from using the same symbols more than once. With freedom comes responsibility.

    + +

    Use the @tag attribute on an mrow, only. (Remember, you can have just one mrow.) The behavior is identical within an md or mdn. The value of the @tag attribute is a symbol name. The prefix d means double, and the prefix t means triple. So allowed values are + star, dstar, tstar + dagger, ddagger, tdagger + daggerdbl, ddaggerdbl, tdaggerdbl + hash, dhash, thash + maltese, dmaltese, tmaltese + Cross-references to these tagged equations happens in the usual way and should behave as expected. We test the double versions to make sure the symbols render properly in various output formats. + c^2 \amp = a^2+b^2 + c^2 \amp = a^2+b^2 + c^2 \amp = a^2+b^2 + c^2 \amp = a^2+b^2 + c^2 \amp = a^2+b^2 + z^2 \amp = x^2+y^2 + Here are the local cross-references: , , , , . We test another farther away in , contrary to our advice above.

    +     + + + Commutative Diagrams + +

    This diagram is authored by Tom Judson using the syntax of the AMS CD package. Inside of a me element start with \begin{CD}. Remember to escape the less-than character. + \begin{CD} + E[x]/\langle p(x) \rangle @>\psi>> F[x]/\langle q(x) \rangle\\ + @VV{\sigma}V @VV{\tau}V\\ + E(\alpha) @>\overline{\phi}>> F(\beta)\\ + @VVV @VVV\\ + E @>\phi>> F + \end{CD} + While this package is not as flexible as some generic drawing packages, it has the advantage of full support by MathJax, and thus the HTML version will be more accessible.

    +     + + + Line-Breaking after Mathematics + +

    As of 2021-05-14, in HTML output the next sentence should just fill a full line across the page. We take active measures to bind the concluding period to the final bit of mathematics, the variable x. The prevents a bad line break which could see the period begin a new line, all by itself. In the event that the line-breaking siutation improves, we could relax these measures. This testing is only relevant to HTML output, not output.

    + +

    xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx x.

    +     + + + Fonts and Mathematics + +

    This section is about testing types and sizes of fonts, not so much about using different typefaces. First, one long displayed equation, which is designed to be full-width for output when using defaults as of 2020-01-29 (commit defd4bffd462e7ea).

    + +

    Start paragraph.a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2 + a^2 + b^2End paragraph.

    + +

    The next paragraph has five ways to write the sine of x, bracketed by plain text versions. This tests font size and the fonts employed. The raw source of this paragraph is (spread over two lines) + sin x | <m>\sin x</m> | <m>\text{sin}\ x</m> | <m>\mathrm{sin}\ x</m> | + <m>\text{sin}x</m> | <m>sin x</m> | sin x + The five ways, from good to bad,

      +
    1. The best way, using \sin. Note the distance to the x.
      2. +
    2. With a \text{} macro.
      3. +
    3. With a \mathrm{} macro. Not recommended for .
      4. +
    4. Without a space. Note that the previous two require explicit spacing.
      5. +
    5. No extra effort, so renders as a product of four variables.
      6. +

    + +

    sin x | \sin x | \text{sin}\ x | \mathrm{sin}\ x | \text{sin}x | sin x | sin x

    + +

    Finally a simple paragraph that places a text x next to a variable x.

    + +

    wordxxx+xxxword

    + +     + + + Miscellaneous + +

    In HTML output, a MathJax workaround for a Safari rendering bug was inserting extra spaces after textual subscripts and superscripts (MathJax thread). CSS now applies a correction. The following tests if the CSS fix is sufficient, and could be used to test the necessity of our fix in the future. Following is the original report, though NOT has been moved to a superscript: + + T_\text{clk}-t_\text{su} \gt t_\text{clk-Q} + \max\left( t_\text{XOR}, t^\text{NOT} \right) + . There should not be anything to see in /PDF output. (2021-10-21)

    + +     +
    + +
    + Grouping Samples + + +

    While building or testing a rendering of PreTeXt, especially in HTML, it can be useful to see all the various elements that potentially create visual blocks in one place. So they are collected here.

    + +

    We will omit content specific blocks like figures, images, tables, as those elements have significant stress testing of their own elsewhere.

    + +

    Please add any similar elements that are created or that you discover are missing from this page.

    + + +     + + + Our goals +

    A minimal objective.

    +
      +
    • Stress test HTML themes
      • +
    • Locally, test objectives
      • +
    +     + + + Remark-like Blocks + + A title +

    A minimal remark.

    +     + + A title +

    A minimal convention.

    +     + + A title +

    A minimal note.

    +     + + A title +

    A minimal observation.

    +     + + A title +

    A minimal warning.

    +     + + A title +

    A minimal insight.

    +     +     + + + Example-like Blocks + + A title +

    A minimal example.

    +     + + A title +

    A structured example.

     + + +

    A structured example.

    +     +

    A hint

     +

    An answer

     +

    A solution

     +     +

    The conclusion.

     +     + + A title +

    A minimal question.

    +     + + A title +

    A minimal problem.

    +     + + A title +

    A minimal observation.

    +     + + A title +

    A minimal warning.

    +     + + A title +

    A minimal insight.

    +     +     + + + Theorem-like Blocks + + A title +

    A minimal theorem.

    +     + + A title +

    A theorem with a proof.

    + +

    The proof of the theorem.

    +     +     + + A title +

    A minimal corollary.

    +     + + A title +

    A minimal lemma.

    +     + + A title +

    A minimal algorithm.

    +     + + A title +

    A minimal proposition.

    +     + + A title +

    A minimal claim.

    +     + + A title +

    A minimal fact.

    +     + + A title +

    A minimal identity.

    +     + + A title +

    A stand-alone proof.

    +     +     + + + Axiom-like Blocks + + A title +

    A minimal axiom.

    +     + + A title +

    A minimal conjecture.

    +     + + A title +

    A minimal principle.

    +     + + A title +

    A minimal heuristic.

    +     + + A title +

    A minimal hypothesis.

    +     + + A title +

    A minimal assumption.

    +     +     + + + Definition-like Blocks + + A title +

    A minimal definition.

    +     +     + + + Aside-like Blocks +

    Three asides are below.

    + + + A title +

    A minimal biographical.

    +     + + A title +

    A minimal biographical.

    +     + + A title +

    A minimal historical.

    +     +     + + + Computation-like Blocks + + A title +

    A minimal computation.

    +     + + A title +

    A minimal technology.

    +     + + A title +

    A minimal data.

    +     +     + + + Project-like Blocks + + A title +

    A minimal project.

    +     + + A title +

    A minimal activity.

    +     + + A title +

    A minimal exploration.

    +     + + A title +

    A minimal investigation.

    +     +     + + +

    A minimal assemblage.

    +     + + + Wrap-up +

    A minimal conclusion.

    +     + + +
    + +
    + Entering Text in Paragraphs, Titles, Captions + Text in Paragraphs + + + Entering Text in Paragraphs + + +

    XML, and therefore , is a markup language. But by and large, what you type into your source will be what you see in your output. So there is not much to say. Except that eventually will be essential. However we do test various tricky situations here (which have technical explanations we avoid). See the Author's Guide for a superior treatment of the topics addressed here.

    +     + + + Special <init>XML</init> characters + +

    One of the goals of is to relieve an author of managing the numerous conflicts when mixing languages that use different characters for special purposes. But, of course, XML has its own special characters.

    + +

    If you type a less-than symbol in your source, the XML processor thinks you are starting an opening, or closing, tag. So how do you get a less-than sign into your source so that it survives into your output, like this: <? You use an escaped version. Type literally, the four characters &lt; in your source. Then the XML processor will know you want the character and will not mistake it for a tag. But now we want to get an ampersand into our source like: &. How? Another escaped version of a character, literally the five characters &amp;.

    + +

    Otherwise, keys on your keyboard, even international versions, should be fine in your source and behave as expected. WYTIWYG = What You Type Is What You Get. So the principal concession to using XML markup is the following very simple rule.

    + +
    +

    Rather than pressing the < and & keys on your keyboard, instead always enter the escape sequences &lt; and &amp; as replacements.

    +
    + +

    Simple. And it will work in running text, verbatim text (like when authoring the content of c or pre elements), and mixed into syntax to desribe mathematical expressions. XML has three other escape sequences &gt;, &apos;, and &quot;, for the characters >, ', and " (respectively). But they seem largely unnecessary for authoring in PreTeXt, as we now demonstrate by typing them directly from our keyboard into our source: >, ', and ".

    + + +

    How was &amp; authored? Work it out, and then check the source here for the answer.

    +     +     + + + Quotations + +

    The qquotations tag will provide beginning and ending double quotations, while the sq tag will behave similarly but provide single quotes. Given the complexity of quotations, the different symbols used in different languages, and the over-simplified versions provided on keyboards, it is necessary to use markup.

    + +

    The roots of education are bitter, but the fruit is sweet. (Aristotle)

    + +

    It is always wise to look ahead, but difficult to look further than you can see. (Winston Churchill)

    + +

    A large quote can be accomodated with the blockquote tag, which can carry within itself an attribution element.

    + +
    +

    The problem with writing a book in verse is, to be successful, it has to sound like you knocked it off on a rainy Friday afternoon. It has to sound easy. When you can do it, it helps tremendously because it's a thing that forces kids to read on. You have this unconsummated feeling if you stop.

    + Dr. Seuss +
    + +

    We say that again, to test a multiline attribution of a block quotation. Notice how the dash appears automatically, and that it is a quotation dash in HTML, distinct from other sorts of dashes.

    + +
    +

    The problem with writing a book in verse is, to be successful, it has to sound like you knocked it off on a rainy Friday afternoon. It has to sound easy. When you can do it, it helps tremendously because it's a thing that forces kids to read on. You have this unconsummated feeling if you stop.

    + + Dr. Seuss + Children's Author + +
    + +

    Sometimes a quote may extend across several paragraphs. Or a balanced pair of quotations marks crosses an XML boundary, so we need left, right, single and double versions. (For example, see Section on poetry.) Here are all four in a haphazard order: , , , . These should be a last resort, and not a replacement for the q and sq tags. The left/right versions are used for the following quote from Abraham Lincoln, which we have edited into two paragraphs.

    + +

    I am not bound to win, but I am bound to be true. I am not bound to succeed, but I am bound to live by the light that I have.

    + +

    I must stand with anybody that stands right, and stand with him while he is right, and part with him when he goes wrong.

    + +

    And as a tests, we try some crazy combinations of quotes, which would normally give some trouble where the quotation marks are adjacent.

      +

    • we use single quotes inside of double quotes

      • +

    • double quotes inside of single quotes with more

      • +

    • single quotes tight inside of double quotes

      • +

    • double quotes tight inside of single quotes

      • +

    • An absurd test of two adjacent single quotes inside a pair of double quotes

      • +

    • you would never do this, but a pair of single quotes

      • +

    + +

    N.B. We have taken no special care to protect against interactions of the actual quote characters (described above) in with themselves, or with the grouping tags.

    +     + + + Groupings + +

    It is possible to make some other groupings like quotations, such as {some emphasized text grouped within braces}, or [a Book Title inside brackets], an Article Title, some foreign words inside angle brackets, or just a bit of text within double brackets. Some of these are used extensively by scholars who study texts to note various restorations or deletions. Note that the foreign element may have a xml:lang attribute.

    + +

    Note that the angle brackets, and , are not the keyboard characters, < and >. Your best bet is to use the provided angles element when constructing a balanced pair. Similarly, dblbrackets is provided to make the double-bracket characters easily available, since they are likely not on your keyboard.

    +     + + + Characters, Symbols, and Constructions + +

    Verbatim, inline text, is accomplished with the c element. One special consideration: if your editor splits a line in the middle, we will fix it. This sentence has two + words that we purposely split with a newline character in the middle. In output you should see a space between the words.

    + +

    Some keyboard characters are ambiguous. Is the character ' an apostrophe or a right single quote? We presume the former, ', and provide markup as an alternative for the latter (described above). Is / used to separate words, or to form a fraction? We presume the former, /, and provide solidus, , for the latter. We test some other characters straight from our US keyboard (with two being escape sequences).

    + +

    ~ ` ! @ # $ % ^ & * ( ) _ - + = [ ] { } | \ ; : ' " , < . > ? /

    + +

    And again as verbatim text.

    + +

    ~ ` ! @ # $ % ^ & * ( ) _ - + = [ ] { } | \ ; : ' " , < . > ? /

    + +

    Note that for a long time had empty elements for many of these characters, as a consequence of naïveté. So you might see dollar, ampersand, or others in old source. They will be deprecated and will raise warnings.

    + +

    Now, when a character is nowhere to be found on your keyboard, we provide conveniences as markup. Or a keyboard character may have a different variant which we implement as an empty element. Here we test many of these. Read the Author's Guide for tags and more detail.

    + +

    + + + + + + + + + + + + + + + +

    + +

    There are a few common abbreviations of Latin phrases that can be achieved in HTML one way, and in with a slightly different mechanism. These are due to 's treatment of a period (full stop), depending on its surroundings. So not reserved characters, but just divergent treatment. Using these will lead to the best quality in all your outputs. See Will Robertson's informative and arcane blog post on the topic if you want the full story for the treatment of a full stop in .

    + + + TagRealizationMeaning + + ad anno Domini, in the year of the Lord + am ante meridiem, before midday + bc English, before Christ + ca circa, about + eg exempli gratia, for example + etal et alia, and others + etc et caetera, and the rest + ie id est, in other words + nb nota bene, note well + pm post meridiem, after midday + ps post scriptum, after what has been written + vs versus, against + viz videlicet, namely + + +

    We also distinguish between abbreviations (vs.), acronyms (SCUBA) and initialisms (XML). This is a test of the text version of a multiplication symbol: 24.

    + + +

    Simple coordinates with degrees, minutes, seconds, or temperature, or distance in feet and inches. We parked the car at 36160.83N, 1223547.27W, and since it was 93F, we walked 5053.6 so we could swim in the bay.

    + +

    An em dash is the long dash used much like parentheses (not an en dash used to denote a range, such as a range of page numbers). It should not have spaces around it, but some style guides allow for a thin space, whichwe test right now. A publication file entry can be set to none or thin to control this.

    +     + + + Currency + +

    For best results, be certain the right Unicode characters are in your source. If you only need a certain symbol rarely, you can enter it in your source via its Unicode number. For example, to obtain a peso, type &#x20B1;. This table has been tested with our default fonts, and should be fine for HTML output. Please report any difficulties with different fonts, as there are extra measures we can take to make these more robust. (We've already done this for the Paraguayan guaraní.)

    + + Supported Currency + + + Sign + Unicode + Name + + + $ + U+0024 + dollar + + + ¢ + U+00A2 + cent + + + £ + U+00A3 + sterling + + + ¤ + U+00A4 + currency + + + ¥ + U+00A5 + yen + + + ƒ + U+0192 + florin + + + ฿ + U+0E3F + baht + + + ₡ + U+20A1 + colon + + + ₤ + U+20A4 + lira + + + ₦ + U+20A6 + naira + + + ₩ + U+20A9 + won + + + ₫ + U+20AB + dong + + + € + U+20AC + euro + + + ₱ + U+20B1 + peso + + + ₲ + U+20B2 + guarani + + +
    +     + + + Icons in Text + +

    A limited supply of icons can be used when explaining how to use some computer application. The empty element is icon and the attribute is name.

    + +

    We sprinkle a few into a few sentences to check baselines and font sizing. We sprinkle a few into a few sentences to check baselines and font sizing. We sprinkle a few into a few sentences to check baselines and font sizing. We sprinkle a few into a few sentences to check baselines and font sizing.

    + + + User-Interface Icons + + + + + + + + + + NameIcon + NameIcon + NameIcon + + + arrow-down + arrow-left + arrow-right + + + arrow-up + file-save + gear + + + menu + wrench + + + + + + +
    + + + Creative Commons License Icons + + + + + + + + + + NameIcon + NameIcon + NameIcon + + + cc + cc-by + cc-sa + + + cc-nc + cc-pd + cc-zero + + + + +
    + +

    Nominations of new icons must

      +
    • Have a Unicode character representation.
      • +
    • Be in the HTML/CSS/JS Font Awesome 5 catalog.
      • +
    • Be in the fontawesome5 package.
      • +
    • Have a reasonably semantic name.
      • +
    Please supply all this information, including the official Unicode name, with your request. Better yet, form a pull request.

    + + + Icons, <c>xelatex</c>, and Fonts + +

    When processing a file with xelatex the Font Awesome 5 icons are expected to be in a system font whose name is Font Awesome 5 Free. This is not a filename, and installing the fontawesome5 package into your installation does not always guarantee that this font will automatically be available as a system font.

    + +

    The Publisher's Guide contains some discussion about installing fonts into a system, as part of the documentation of creating a style, and has particular warnings about only using the fontawesome5 package as a vehicle for installing and accessing these fonts.

    +     +     + + + Keyboard Keys + keyboard keys + +

    Your text can include specialized text meant to look like a key on the keyboard of a calculator or other device. So you can go b Enter < or F1. Or maybe a sequence as: Tab > Ctrl > T. Use the kbd element, with the label of the key as content.

    + +

    There is a growing supply of keys which are labeled with graphics rather than text, such as a left arrow , right arrow , up arrow , down arrow , and Enter . See The Guide for the definitive list. In the literal column means the symbol/character is the content of a kbd element, while the named column means the symbol/character has been chosen via the value of the name attribute of an empty kbd element.

    + + + Named keys + + + + Literal + Named + + + Ampersand + & + + + + Less than + < + + + + Greater than + > + + + + Dollar + $ + + + + Per cent + % + + + + Open brace + { + + + + Close brace + } + + + + Hash + # + + + + Backslash + \ + + + + Tilde + ~ + + + + Circumflex + ^ + + + + Underscore + _ + + + +
    + + + Upper Case + + + ~ + ! + @ + # + $ + % + ^ + & + * + ( + ) + _ + + + + + + Tab + Q + W + E + R + T + Y + U + I + O + P + { + } + | + + + CapsLock + A + S + D + F + G + H + J + K + L + : + ' + Enter + + + + Shift + Z + X + C + V + B + N + M + < + > + ? + Shift + + + +
    + + + Lower Case + + + ` + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 0 + - + = + + + + Tab + q + w + e + r + t + y + u + i + o + p + [ + ] + \ + + + CapsLock + a + s + d + f + g + h + j + k + l + ; + ' + Enter + + + + Shift + z + x + c + v + b + n + m + , + . + / + Shift + + + +
    +     + + + URLs, such as <url href="http://example.com"/> + linkexternal, url + referenceexternal, url + +

    The url element can be used to create an external reference. The mandatory href attribute is the actual URL complete with the protocol (e.g. https://). Content for the element is optional, and if provided will be the clickable text. In this case, a visual attribute can be provided, and this will become a footnote with a more friendly version of the URL. When no content is provided, the clickable will be the URL with a preference for an optional visual. This subsection has some (extreme) tests and we leave complete documentation and full details for the Guide.

    + +

    A long URL for testing: . Notice in the source that you do not put any tags inside the href or visual attributes, but you may need to provide XML escape sequences (see ).

    + +

    A url element with content will get a footnote, by containing the (simplified) URL in the highly-recommended visual attribute. If you do not provide the visual attribute in this case, then you will get the href value repeated, possibly with some editing. If you insist, you can make the visual attribute identical to the href attribute. Some tests:

      +
    • With a useful visual attribute
      • +
    • With a duplicate visual attribute
      • +
    • With no visual attribute, so an edited one is formulated (no protocol)
      • +

    + +

    Here is a totally bogus URL, which contains every possible legal character, so if this fails to convert there is some problematic character. In order to test the use of a percent sign (%) in a URL, we follow it by two hex digits, specifically, 58, which is a way to represent the character X in a URL. Normal text, monospace text, url with just href, url with href and visual, url with href, visual and content. Notice how the various versions do, or do not, line-break in /PDF output, including the (potentially confusing) use of a use of a hyphen in the normal text version

    + +
    + +

    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%-._~:/?#[]@!$&'()*+,;=

    + +

    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%-._~:/?#[]@!$&'()*+,;=

    + +

    + +

    + +

    Characters to a footnote

    + +
    + +

    Line-breaking in /PDF output is specialized, using path separators (slashes) as candidates for splitting across lines:

    + +

    We are not fans of footnotes, they are totally unstructured.Carleson's Theorem + A URL in a footnote migrates around, and so care must be taken. + This paragraph has two footnotes, one with a real URL from Jesse Oldroyd, another with a fake URL from the above suite. + For good measure, we repeat the URL found in the first footnote (which lacks its own footnote by designAnd if you do provide a link like Carleson's Theorem in a footnote, provide an easy-to-read reference, such as en.wikipedia.org/wiki/Carleson%27s_theorem since the extra footnote and any visual will be squelched.): + Carleson's Theorem. + And we include a no-content version of the same link, with a visual version provided and employed: + .

    +     + + + + Biological Names + biological names + biological namestaxon + scientific namesbiological names + +

    The taxontaxonbiological namestaxon element can be used all by itself to get an italicized scientific name, as in Escherichia coli. It can also be structured with the elements genusgenusbiological namesgenus and species,speciesbiological namesspecies as in using both together in Cyclopskolensis. Or the subelements can be used individually. Rules for capitalization are presently your responsibility as an author. Possible improvements include new subelements, attributes for database identifiers, and checks on capitalization. Also, we might automatically abbreviate the genus after first use.

    + +

    There is an attribute, @ncbincbi attributeattributesncbi attributebiological namesncbi attribute that you can use on the taxon element to precisely identify the organism you are discussing using an identification number from the National Center for Biotechnology Information. Their taxonomy is at www.ncbi.nlm.nih.gov/taxonomy. Right now, we do not do anything with this attribute, but things like links are certainly possible. See the source of this document to see it in use with Drosophilamiranda which could be used to construct a link to further information via id number or even further information via just the name.

    +     + + + Verbatim in titles, <c>\a&b#c%d~e{f}g$h_i^j</c>, OK + +

    You can test the migration of the special characters in this section title by requesting a 2-deep Table of Contents via the publication file.

    +     + + + Special Situations + +

    Sage defines a nice syntax for generators of algebraic structures, but we must remember to use an escape sequence for the < symbol (see ).

    + + + + P.<t> = ZZ[] + P + + Univariate Polynomial Ring in t over Integer Ring + + +

    There is an alternate Sage syntax, which avoids the less-than and greater symbols.

    + + + + R = ZZ['u'] + u = R.gen(0) + (u, R) + + (u, Univariate Polynomial Ring in u over Integer Ring) + + +

    Ampersands, less-than, and greater symbols are likely to be necessary in source code, such as Sage code (think generators of field extensions) or TikZ code (think arrowheads), and in matrices (think separating entries). If you have a big matrix, or a huge chunk of TikZ code, you can protect it all at once from the XML processor by wrapping it in <![CDATA[]]>. It should be possible to write without ever using the CDATA mechanism, but it might get tedious in places to use the supplied macros or XML escape sequences. This construction is often mis-understood as a solution better remedied by reading again.

    + +

    We test the three pre-defined macros for &, <, and > with a pair of aligned equations: + a^2 + b^2\amp\lt c^2 + c^2\amp\gt a^2 + b^2 +

    +     + + + Jupyter Notebook, Markdown, MathJax, Delimiters + +

    A Jupyter notebook allows a mix of HTML (our logistical preference for a conversion) and Markown (another set of special characters and their escaped versions). Certain pairs of delimiters, when appearing in consecutive HTML code elements require extraordinary care. But the one nut we cannot crack is pairs of dollar signs. So the next paragraph is known to render badly in a Jupyter notebook, but should otherwise be a bit boring.

    + +

    $ and $

    +     + + + <latex/> Characters, Ligatures, and More + +

    This section is just for testing, and the more you know about , the more we would encourage you to not to read this. Look to the Author's Guide for the right way to author your source.

    + +

    The ten reserved characters, directly in the source: # $ % ^ & _ { } ~ \. And again: X#X$X%X^X&X_X{X}X~X\X, but smashed up tight to intermediate characters.

    + +

    In a verbatim presentation: # $ % ^ & _ { } ~ \.

    + +

    And X#X$X%X^X&X_X{X}X~X\X. (These verbatim versions are authored in different paragraphs to work around the Jupyter notebook bug described above.)

    + +

    We also disrupt certain constructions from . Attempting to sneak-in any traditional macro for the purposes of -only output, such as, say a \newpage, will fail since the leading backslash will be caught and converted to \textbackslash. (See? It just happened twice.) For technical reasons we want to particularly test \textbackslash, \textbraceleft, and \textbraceright.

    + +

    Four ligatures, --, ---, ``, and '', authored in running text, --, ---, ``, ''. It may be hard to tell that the two consecutive apostrophes have not coalesced into a curly left smart quote, but see below, the spacing is subtly different.

    + +

    We want the double quote mark from your keyboard, ", to not morph into some other character: ".

    + +

    More testing: runs of hyphens. Such as: - (one), -- (two), --- (three), ---- (four), ----- (five), ------ (six), ------- (seven). Use the empty elements ndash and mdash for the longer dashes/hyphens.

    + +

    Runs of apostrophes should not become smart right double quotes: ' (one), '' (two), ''' (three), '''' (four), ''''' (five), '''''' (six), ''''''' (seven). You might want to cut-and-paste these into a text file to convince yourself there are the right number of characters. Here are two smart right double quotes, separated by a non-breaking space, for visual comparison: . Or 30 apostrophes on a line of their own (longer) followed by 15 smart right double quotes (shorter).

    +

    ''''''''''''''''''''''''''''''.

    +

    .

    + +

    Runs of backticks (accent grave) should not become smart left double quotes when the output is processed by : ` (one), `` (two), ``` (three), ```` (four), ````` (five), `````` (six), ``````` (seven). Furthermore, in a context where Markdown syntax is recognized as well ( a Jupyter notebook), paired backticks should not produce `inline verbatim text`.

    + +

    The next paragraph has a long run of words separated/joined by the keyboard forward-slash character. With this input, will not line-break at the slash, nor will it hypenate anywhere. automatically provides an improved slash, which will line-break, as you should see below in output. There is a bad right margin, but that is due to the absurdity of this test. This sort of problem should be no better or worse for the use of this character. Further refinements (zero-width space) and packages can be used to get hyphenation. HTML will line-break rationally with no extra help. Remember the solidus character for super-simple text fractions like 732 (which will not line-break), and math elements or SI unit markup for technical work.

    + +

    A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line/A/test/of/some/short/words/that/go/off/the/end/of/a/line.

    +     + + + <init>HTML</init> and accidental mathematics + +

    We render mathematics in web pages with the fantastic MathJax Javascript library. Simplifying just a bit, it recognizes syntax within a page, takes control of that text, and replaces it wth nice fonts and formatting. Now, if you write about you might well have some mathematics in your examples. Best practice would be to use verbatim text for that, and we mark off such text as being off-limits to MathJax.

    + +

    But if you are writing running text, then you can (accidentally) author some text which MathJax recognizes and converts to something (unintended). And if you are doing this intentionally, then you have ignored markup for mathematics, and are missing out on some features.

    + +

    A few tests that we can prevent any accidents.

    + +

    Inline mathematics: \(x^2\).

    + +

    Display mathematics: \begin{align}x^2+y^2=z^2\end{align}

    + +

    Double backticks is a common construction, which in /PDF output should not become an opening quote-mark. Also, a single backtick in HTML is a signal for MathJax to interpret ASCIIMath, and then a double backtick causes random pieces of mathematics on a page to not render at all. So we have a quotation authored -style: ``We have nothing to fear, but fear itself.''

    +     +
    + +
    + Graphics + + +

    In addition to including images created externally (e.g. photographs), supports several languages for describing diagrams and pictures with human-readable source code ( plain text), rather than using a paint program. This section describes the various methods for incorporationg, or generating, graphis, images or diagrams.

    +     + + + Images from External Sources + +

    If you have raster images (photographs, etc.) then they are specified with complete filenames, as above in Figure or just below.

    + +
    + New Zealand Landscape, commons.wikimedia.org, CC-BY-SA-2.0 + +
    + +

    If you have existing images that are vector graphics, then PDF format works best for output and SVG format works best for HTML. The utility pdf2svg works well for converting PDF to SVG. In this case, specify your source as a filename, but leave off the file extension, and the appropriate version will be used for the current output format.

    + +

    The image below is provided from a PDF file in output, and was converted to an SVG for use with the HTML output. It has been explicitly scaled to a width of 65% of the text width.

    + +
    + Complete graph on 16 vertices, from www.texample.net + +
    + + + Footnote Buried + +

    Nested tcolorbox (in conversion) need special care when footnotes are interior.

    + + +

    A paragraph interior to a sidebyside with a footnoteInterior footnote. buried inside the paragraph.

    +

    A second paragraph, just to avoid a one-panel warning.

    +     + +

    The final paragraph of this remark, randomly placed, to test footnotes in conversions.

    +     +     + + + <prefigure/> + image + image image + +

    is a standalone project for authoring mathematical diagrams (see ). Its philosophy and approach are much like that of , and is tightly integrated into . One key feature is excellent support for the creation of accessible output formats.

    + +

    As of 2024-11-06 development continues for itself, and fine-tuning of its integration within . But it is usable now for projects that want to use it.

      +
    • You can author diagrams, and then generate SVG, PDF, and PNG output versions with the pretext/pretext script (see the Guide), and expect them to render in HTML, PDF, and EPUB output formats.
      • +
    • Look for automatic generation to come to the -CLI sometime very soon.
      • +
    • has excellent support for annotations within an SVG diagram, supporting their use by screenreaders, for example. See an example below.
      • +
    • Production of tactile versions is now possible, though they are not incorporated explicitly into any of the output formats. Perhaps they will become available via archive links or as a zip archive.
      • +

    + +

    This is a basic diagram, in the sense that it does not use all the features of or .

    + +
    + Solution to a differential equation + + + + f(t,y) = (y[1], -pi*y[0]-0.3*y[1]) + + + + + + + x(t) + x'(t) + + + + + +
    + +

    This next diagram employs some macros that are defined in the usual way in docinfo and are employed to produce the names of some vectors in the labels. The blue line is colored blue by a global declaration, also in docinfo.

    + + + + + v=(2,1) + b=(2,4) + bhat=dot(v,b)/dot(v,v) * v + bperp = b - bhat + + + + + + + + + + + + + + + + + + + + + +

    The next diagram is authored with annotations, arranged in a hierarchy of increasing refinement and detail. Each identified graphical component will read its annotation and show it on the screen below the diagram. When a reader clicks on the image, a high-level summary will be read using the author-provided annotation. The down and up arrow keys enable a reader to explore the diagram in more or less detail while the right and left arrow keys reveal features at the same level of detail. When the focus is on the graph, pressing "O" will produce a sonification of the graph.

    + + + + + a=1 + f(x) = exp(x/3)*cos(x) + + + + + + (a,f(a)) + + + + + + + + + + + + + + + + + +

    Including annotations enables a new type of interactive diagram within a document offering potential benefits for all readers. In particular, annotations allow an author to call the reader's attention to specific details in a diagram and how they are related to one another so that the diagram and surrounding text are more tightly integrated. The annotated diagram below introduces Fibonacci tilings, which are one-dimensional analogs of Penrose tilings, and offers an explanation of their aperiodicity. Of course, surrounding text would usually provide a richer context for a diagram like this.

    + +
    + Fibonacci tilings are one-dimensional analogs of Penrose tilings. The diagram on the left introduces the process of deflation that is used to produce tilings while the diagram on the right explains why they are aperiodic. + + + + + + phi=(sqrt(5)+1)/2 + height=0.25 + top=1 + bottom=0 + left=0 + right=2 + colors={0:'blue', 1:'red'} + widths={0:phi, 1:1} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + phi=(sqrt(5)+1)/2 + height=0.25 + width=5+8*phi + colors={0:'blue', 1:'red'} + widths={0:phi, 1:1} + tiling2=[0,1,0,0,1] + tiling1=[0,1,0,0,1,0,1,0] + tiling0=[0,1,0,0,1,0,1,0,0,1,0,0,1] + tilings=[tiling0, tiling1, tiling2] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +

    For sighted readers, here is an example of a tactile version of one of the above diagrams. It is generated automatically from the same source as the other version. Imagine this being printed with an embosser so that the parts of the diagram, and the braille labels, are raised up from the paper and can be explored with one's fingertips. This image is a PNG produced specifically for this document. Typically, a tactile diagram produced by will be a PDF ready to be sent to an appropriate embosser. Notice that adds a caption indicating the diagram's location in the document along the top of the diagram.

    + + +     + + + <latex/> images + image + image image + +

    There are several graphics engine packages that a document can employ. Code from these packages renders diagrams automatically as part of normal processing of files. For HTML output the pretext script produces SVG versions of the pictures. The script can also produce standalone source files, PDFs, PNGs, and EPSs. The packages should be loaded in docinfo/latex-image-preamble, which is also where global package settings should be made. If any ampersands occur in your code you should use the \amp macro pre-defined by . These first examples are from the TeXample.net site. Note that any macros used in the rest of your document may be employed in the -standalone or Asymptote diagrams (with this feature coming to Sage graphics next?).

    + + +
    + TikZ Electronics Diagram + + + a pile of electronic components wired together + + + + =triangle 45] + \draw + % Drawing the blocks of first filter : + node at (0,0)[right=-3mm]{\Large \textbullet} + node [input, name=input1] {} + node [sum, right of=input1] (suma1) {\suma} + node [block, right of=suma1] (inte1) {\inte} + node at (6.8,0)[block] (Q1) {\Large $Q_1$} + node [block, below of=inte1] (ret1) {\Large$T_1$}; + % Joining blocks. + % Commands \draw with options like [->] must be written individually + \draw[->](input1) -- node {$X(Z)$}(suma1); + \draw[->](suma1) -- node {} (inte1); + \draw[->](inte1) -- node {} (Q1); + \draw[->](ret1) -| node[near end]{} (suma1); + % Adder + \draw + node at (5.4,-4) [sum, name=suma2] {\suma} + % Second stage of filter + node at (1,-6) [sum, name=suma3] {\suma} + node [block, right of=suma3] (inte2) {\inte} + node [sum, right of=inte2] (suma4) {\suma} + node [block, right of=suma4] (inte3) {\inte} + node [block, right of=inte3] (Q2) {\Large$Q_2$} + node at (9,-8) [block, name=ret2] {\Large$T_2$} + ; + % Joining the blocks of second filter + \draw[->] (suma3) -- node {} (inte2); + \draw[->] (inte2) -- node {} (suma4); + \draw[->] (suma4) -- node {} (inte3); + \draw[->] (inte3) -- node {} (Q2); + \draw[->] (ret2) -| (suma3); + \draw[->] (ret2) -| (suma4); + % Third stage of filter: + % Defining nodes: + \draw + node at (11.5, 0) [sum, name=suma5]{\suma} + node [output, right of=suma5]{} + node [block, below of=suma5] (deriv1){\derv} + node [output, right of=suma5] (sal2){} + ; + % Joining the blocks: + \draw[->] (suma2) -| node {}(suma3); + \draw[->] (Q1) -- (8,0) |- node {}(ret1); + \draw[->] (8,0) |- (suma2); + \draw[->] (5.4,0) -- (suma2); + \draw[->] (Q1) -- node {}(suma5); + \draw[->] (deriv1) -- node {}(suma5); + \draw[->] (Q2) -| node {}(deriv1); + \draw[<->] (ret2) -| node {}(deriv1); + \draw[->] (suma5) -- node {$Y(Z)$}(sal2); + % Drawing nodes with \textbullet + \draw + node at (8,0) {\textbullet} + node at (8,-2){\textbullet} + node at (5.4,0){\textbullet} + node at (5,-8){\textbullet} + node at (11.5,-6){\textbullet} + ; + % Boxing and labelling noise shapers + \draw [color=gray,thick](-0.5,-3) rectangle (9,1); + \node at (-0.5,1) [above=5mm, right=0mm] {\textsc{first-order noise shaper}}; + \draw [color=gray,thick](-0.5,-9) rectangle (12.5,-5); + \node at (-0.5,-9) [below=5mm, right=0mm] {\textsc{second-order noise shaper}}; + \end{tikzpicture}]]> + + +
    + +

    The next example began life in Sketch, which will output TikZ code (though the code has been edited by hand for readability).

    + + +
    + TikZ Cone Drawing + + + + ](1.643,1.853)--(1.643,.12); + \filldraw[conefill](.913,1.8)--(1.369,.1)--(1.162,-.283) + --(.775,1.545)--cycle; + \draw[arrows=->,line width=.4pt](.274,-.5)--(0,0)--(0,2.86); + \draw[arrows=-,line width=.4pt](0,0)--(-1.369,-.1); + \draw[arrows=->,line width=.4pt](-1.369,-.1)--(-2.1,-.153); + \filldraw[conefill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) + --(-.913,1.667)--cycle; + \draw(-1.369,.073)--(-1.369,2.76); + \draw(1.004,1.807)--(1.734,1.86); + \filldraw[conefill](.775,1.545)--(1.162,-.283)--(.274,-.5) + --(.183,1.4)--cycle; + \draw[arrows=<->](0,2.34)--(-.913,2.273); + \draw(-.913,1.84)--(-.913,2.447); + \draw[arrows=<->](0,2.687)--(-1.369,2.587); + \filldraw[conefill](.183,1.4)--(.274,-.5)--(-.775,-.424) + --(-.516,1.45)--cycle; + \draw[arrows=<-,line width=.4pt](.42,-.767)--(.274,-.5); + \node[ann] at (-.456,2.307) {$r_0$}; + \node[ann] at (-.685,2.637) {$r_1$}; + \node[ann] at (1.643,.987) {$h$}; + \path (.42,-.767) node[below] {$x$} + (0,2.86) node[above] {$y$} + (-2.1,-.153) node[left] {$z$}; + % Second version of the cone + \begin{scope}[xshift=3.5cm] + \filldraw[ghostdraw,ghostfill](-.775,1.922)--(-1.162,.283)--(-.274,.5) + --(-.183,2.067)--cycle; + \filldraw[ghostdraw,ghostfill](-.183,2.067)--(-.274,.5)--(.775,.424) + --(.516,2.016)--cycle; + \filldraw[ghostdraw,ghostfill](.516,2.016)--(.775,.424)--(1.369,.1) + --(.913,1.8)--cycle; + \filldraw[ghostdraw,ghostfill](-.913,1.667)--(-1.369,-.1)--(-1.162,.283) + --(-.775,1.922)--cycle; + \filldraw[ghostdraw,ghostfill](.913,1.8)--(1.369,.1)--(1.162,-.283) + --(.775,1.545)--cycle; + \filldraw[ghostdraw,ghostfill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) + --(-.913,1.667)--cycle; + \filldraw[ghostdraw,ghostfill](.775,1.545)--(1.162,-.283)--(.274,-.5) + --(.183,1.4)--cycle; + \filldraw[fill=red,fill opacity=0.5](-.516,1.45)--(-.775,-.424)--(.274,-.5) + --(.183,1.4)--cycle; + \fill(-.775,-.424) circle (2pt); + \fill(.274,-.5) circle (2pt); + \fill(-.516,1.45) circle (2pt); + \fill(.183,1.4) circle (2pt); + \path[font=\footnotesize] + (.913,1.8) node[right] {$i\hbox{$=$}0$} + (1.369,.1) node[right] {$i\hbox{$=$}1$}; + \path[font=\footnotesize] + (-.645,.513) node[left] {$j$} + (.228,.45) node[right] {$j\hbox{$+$}1$}; + \draw (-.209,.482)+(-60:.25) [yscale=1.3,->] arc(-60:240:.25); + \fill[black,font=\footnotesize] + (-.516,1.45) node [above] {$P_{00}$} + (-.775,-.424) node [below] {$P_{10}$} + (.183,1.4) node [above] {$P_{01}$} + (.274,-.5) node [below] {$P_{11}$}; + \end{scope} + \end{tikzpicture}]]> + + +
    + +

    The pgfplots package was included in docinfo/latex-image-preamble. Here, it is used. Also, here we demonstrate using \amp where you would normally use an ampersand in . There are known issues with xelatex processing any gradient shading in tikz. To (successfully) create the gradient shading in the 3D image here, you may need to use pdflatex until developers resolve this issue.

    + +
    + Sample pgfplots plot + + + a Cartesian plane with a function graph, a parametric curve, and some points + + + + , + smooth, + thin, + color = blue, + ]{4*ln(x)/ln(10)}; + \addplot[ + only marks, + ]coordinates{ + (0,2) + (4,3) + (2,4) + (3,4)}; + \addplot[ + variable = \t, + domain = 0:360, + samples = 200, + color = orange, + ]({3*sin(2*t)}, {2*cos(5*t)}); + \end{axis} + \amp + \begin{axis}[axis lines = box, width = 0.5\linewidth] + \addplot3[ + surf, + faceted color = blue, + samples = 15, + domain = 0:1, + y domain = -1:1 + ]{x^2 - y^2}; + \end{axis}\\ + }; + \end{tikzpicture}]]> + + +
    + +

    A plot might use a graphics language to draw the axes and grid, but the data might be from an experiment and live in an external file that you do not wish to place in your source. Place such a file in a subdirectory directly below the directory where your master source file resides. Then indicate this directory in a docinfo/directories/@data attribute of your source. But you must prefix the path with data/ as in the source below.

    + +
    + External data in a pgfplots plot + + + a Cartesian plot of electric potential over time; + + + + + + +
    + +

    The TikZ image in the next figure is made up from two PNG images (the shark and the swimmer), in addition to various TikZ commands. The images reside in a source directory, numerical/attack, so the image files (shark.png, swimmer.png) are prefixed in the TikZ code with data/attack so the creation of the image will be successful. This example is courtesy of Stephen Brown.

    + +
    + An illustration of the shark trying to catch you as you swim to shore. + + + \begin{tikzpicture} + \tikzset{ ragged border/.style={ decoration={random steps, segment length=1mm, amplitude=0.5mm}, decorate, } } + \fill[cyan!30] decorate[ragged border]{ (0,2) -- (8,2) } -- (8,0) -- (0,0) -- cycle; + \fill[yellow!30] decorate[ragged border]{ (8,2) -- (8,0) } -- (9,0) -- (9,2) -- cycle; + \draw (1.5,1) node {\scalebox{-0.2}[0.2]{\includegraphics{data/attack/shark.png}}}; + \draw (5,1) node {\includegraphics[scale=0.05]{data/attack/swimmer.png}}; + \draw[|-|] (1.5,3) node [above] {\(\SI{0}{m}\)} -- (5,3) node [above] {\(\SI{50}{m}\)}; + \draw[|-|] (5,3) -- (8,3) node [above] {\(\SI{70}{m}\)}; + \end{tikzpicture} + + +
    + +

    + A Cartesian plot might benefit from having a description with a + tabular that lays bare the data used to to plot points. +

    + +
    + Full description with tabular + + + a plot of some data points + + +

    + A Cartesian graph plotting the following data. +

    + + + + + + + x + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + + + y + 5 + 3 + 8 + 9 + 5 + 5 + 8 + 2 + 3 + + +     + + \begin{tikzpicture} + \begin{axis}[ + xmin=0, + xmax=10, + ymin=-0,ymax=10, + xlabel={\(x\)}, + ylabel={\(y\)}, + ] + \addplot[only marks] coordinates {(1,5) (2,3) (3,8) (4,9) (5,5) (6,5) (7,8) (8,2) (9,3)}; + \end{axis} + \end{tikzpicture} + + +
    + +

    The next image requires three passes with to get everything in place. It is placed here to test that the code in the Pythion script correctly recognizes this requirement.

    + +
    + A matrix with colored entries + + + + + + \begin{tikzpicture} + \node{ + $\begin{bNiceArray}{ccc|cc}[ + code-before={\cellcolor{green!72}{1-1,2-2,3-3}\cellcolor{teal!72}{1-2,2-3,3-4}\cellcolor{yellow!72}{1-3,2-4,3-5}} + ] + 3 \amp 4 \amp 0 \amp 1 \amp 4 \\ + -2 \amp 3 \amp 1 \amp -2 \amp 3 \\ + 0 \amp 2 \amp 1 \amp 0 \amp 2 + \end{bNiceArray}$ + }; + \end{tikzpicture} + + +
    + +

    PSTricks is a package for drawing diagrams and pictures, dating back to the days before PDF, when PostScript (PS) was king. Given its history, it does not seem to work easily with the pdflatex engine. But it will work easily with the xelatex engine. We try to keep this present sample document workable with both engines, so we have presented an example of the use of PSTricks in the xelatex-exclusive sample document where we test obscure fonts and characters. So your best bet is to look there.PSTricks

    + +

    There are suggestions online that \usepackage[pdf]{pstricks}along with pdflatex --shell-escape *.tex is workable. We could not make it happen, and a shell escape can be a dangerous security hole. That said, updates to this approach are welcome.

    +     + + + Asymptote, 2D + +

    The Asymptoteasymptote graphics language graphics language may be placed in your source to draw graphs, diagrams or pictures. Rules for formatting code are identical to those for Sage code. For more on Asymptote see .

    + + + +

    This is a simple physics diagram about levers, taken from the Asymptote documentation. In the HTML version of this article, the images are SVG's and so should scale nicely when you zoom in on the page.

    + + + + +
    + Asymptote Lever Demonstration + + moments on a lever + + size(200,0); + + pair z0=(0,0); + pair z1=(2,0); + pair z2=(5,0); + pair zf=z1+0.75*(z2-z1); + + draw(z1--z2); + dot(z1,red+0.15cm); + dot(z2,darkgreen+0.3cm); + label("$m$",z1,1.2N,red); + label("$M$",z2,1.5N,darkgreen); + label("$\hat{\ }$",zf,0.2*S,fontsize(24pt)+blue); + + pair s=-0.2*I; + draw("$x$",z0+s--z1+s,N,red,Arrows,Bars,PenMargins); + + s=-0.5*I; + draw("$\bar{x}$",z0+s--zf+s,blue,Arrows,Bars,PenMargins); + + s=-0.95*I; + draw("$X$",z0+s--z2+s,darkgreen,Arrows,Bars,PenMargins); + + +
    + +

    And a colorful contour plot with logarithmic scale. Again, from the Asymptote documentation. This SVG image employs two additional PNG images for the two parts where the color varies continuously.

    + + +
    + Asymptote Contour Plot + + + import graph; + import palette; + + size(10cm,10cm,IgnoreAspect); + + real f(real x, real y) { + return 0.9*pow10(2*sin(x/5+2*y^0.25)) + 0.1*(1+cos(10*log(y))); + } + + scale(Linear,Log,Log); + + pen[] Palette=BWRainbow(); + + bounds range=image(f,Automatic,(0,1),(100,100),nx=200,Palette); + + xaxis("$x$",BottomTop,LeftTicks,above=true); + yaxis("$y$",LeftRight,RightTicks,above=true); + + palette("$f(x,y)$",range,(0,200),(100,250),Top,Palette, + PaletteTicks(ptick=linewidth(0.5*linewidth()))); + + +
    + +

    Here is the lever diagram again, but now we have added an integral to one of the legends, using a macro of our own, which is idential to one we used in the early part of this article. The point is, we only needed to define the macro once for the entire document, and it is available as we make Asymptote diagrams. This device can be used to maintain flexibility and consistency in your choice of notation.

    + +
    + Aymptote Lever, plus Integral + + + size(200,0); + + pair z0=(0,0); + pair z1=(2,0); + pair z2=(5,0); + pair zf=z1+0.75*(z2-z1); + + draw(z1--z2); + dot(z1,red+0.15cm); + dot(z2,darkgreen+0.3cm); + label("$m$",z1,1.2N,red); + label("$M$",z2,1.5N,darkgreen); + label("$\hat{\ }$",zf,0.2*S,fontsize(24pt)+blue); + + pair s=-0.2*I; + draw("$x$",z0+s--z1+s,N,red,Arrows,Bars,PenMargins); + + s=-0.5*I; + draw("$\bar{x}=\definiteintegral{0}{1}{x\delta(x)}{x}$",z0+s--zf+s,blue,Arrows,Bars,PenMargins); + + s=-1.05*I; + draw("$X$",z0+s--z2+s,darkgreen,Arrows,Bars,PenMargins); + + +
    + +     + + + Asymptote, 3D via WebGL + +

    Asymptote can create an HTML file that is an interactive version of a 3D shape. At this writing (2020-05-18) support via the pretext script is evolving. Plus, you will need newer versions of Asymptote and the dvisvgm utility to duplicate all of the results being displayed here in this testing document. The other distinction is that the author needs to provide the aspect ratio of the figure, and this should be placed on the asymptote element (not on the image element). is from the Asymptote Gallery.

    + +
    + Work Cone (Asymptote Interactive 3D Image) + + + import solids; + size(0,150); + currentprojection=orthographic(0,-30,5); + + real r=4; + real h=10; + real s=8; + real x=r*s/h; + + real sr=5; + real xr=r*sr/h; + + real s1=sr-0.1; + real x1=r*s1/h; + + real s2=sr+0.2; + real x2=r*s2/h; + + render render=render(compression=0,merge=true); + + draw(scale(x1,x1,-s1)*shift(-Z)*unitcone,lightblue+opacity(0.5),render); + + path3 p=(x2,0,s2)--(x,0,s+0.005); + revolution a=revolution(p,Z); + draw(surface(a),lightblue+opacity(0.5),render); + + path3 q=(x,0,s)--(r,0,h); + revolution b=revolution(q,Z); + draw(surface(b),white+opacity(0.5),render); + + draw((-r-1,0,0)--(r+1,0,0)); + draw((0,0,0)--(0,0,h+1),dashed); + + path3 w=(x1,0,s1)--(x2,0,s2)--(0,0,s2); + revolution b=revolution(w,Z); + draw(surface(b),blue+opacity(0.5),render); + draw(circle((0,0,s2),x2)); + draw(circle((0,0,s1),x1)); + + draw("$x$",(xr,0,0)--(xr,0,sr),red,Arrow3,PenMargin3); + draw("$r$",(0,0,sr)--(xr,0,sr),N,red); + draw((string) r,(0,0,h)--(r,0,h),N,red); + draw((string) h,(r,0,0)--(r,0,h),red,Arrow3,PenMargin3); + draw((string) s,(-x,0,0)--(-x,0,s),W,red,Arrow3,Bar3,PenMargin3); + + +
    + +

    These 3D images in HTML output are rotable with a pointing device (mouse, trackpad) with a click-and-drag. A finger should suffice on touch-sensitive devices (phones, tablets). Zooming in and out can be accomplished with a mouse wheel, or by pinching. As a contribution to the accessibility of HTML output, keyboard controls will also allow for exploration of these images. (Make sure the image has focus when you attempt to use these.)

    + + + + + + + 3D Image Keyboard Controls + + KeyAction + xRotate around x-axis + yRotate around y-axis + zRotate around z-axis + +Enlarge image + -Shrink image + hReturn to home position + +
    + +

    And finally, an example of a 3-D graph (from the Asymptote documentation again). This WebGL image is a beautiful example of a Riemann surface. As you rotate the image, notice how the reflection of the light source varies, along with the brightness of various regions of the surface. This example is accomplished with just 10 lines of Asymptote code.

    + + + + +
    + Asymptote 3-D Surface + + + // Riemann surface of z^{1/n} + import graph3; + import palette; + + int n=3; + + size(200,300,keepAspect=false); + + currentprojection=orthographic(10,10,5); + currentlight=(10,10,5); + triple f(pair t) {return (t.x*cos(t.y),t.x*sin(t.y),t.x^(1/n)*sin(t.y/n));} + + surface s=surface(f,(0,0),(1,2pi*n),8,16,Spline); + s.colors(palette(s.map(zpart),Rainbow())); + + draw(s,meshpen=black,render(merge=true)); + + +
    +     + + + Mermaid Diagrams + Mermaid diagrams + +

    Mermaid is a Markdown-inspired tool for authoring various kinds of diagrams. Below, three of the available diagram types are demonstrated. For a full listing of diagram types, see the Mermaid Documentation. The Mermaid live editoris a great tool for testing the syntax of your mermaid diagrams.

    + +

    In PreTeXt, you can specify a Mermaid theme via common/mermaid/@theme

    + +
    + Mermaid Git Diagram + + + A git diagram in Mermaid + + + --- + title: Example Git diagram + --- + gitGraph + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit + + +
    + +
    + Mermaid Class Diagram + + + A class diagram in Mermaid + + + classDiagram + Animal <|-- Duck + Animal <-- Fish + Animal <|-- Zebra + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class Duck{ + +String beakColor + +swim() + +quack() + } + class Fish{ + -int sizeInFeet + -canEat() + } + class Zebra{ + +bool is_wild + +run() + } + + +
    + +
    + Mermaid Seuqnece Diagram + + + A sequence diagram in Mermaid + + + sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop HealthCheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts <br/>prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! + + +
    +     + + + Sage Plots + Sage plots + +

    Any of the numerous capabilities of Sage may be used to produce any graphics object, be it the simple graph of a single-variable function or some realization of a more complicated object. All of the usual rules about formatting Sage code (esp. indentation) apply, along with one more caveat. The last line of your Sage code must return a Sage Graphics object (or 3D plot). The pretext script will isolate this last line, use it as the RHS of an assignment statement, and the Sage .save() method will be called to generate the image, which is either a Portable Document Format (PDF) file amenable to output, or a Scalable Vector Graphics (SVG) file amenable to HTML output. For visualizations of 3D plots, Sage will only produce Portable Network Graphics (PNG) files, which can be included in HTML pages or output. For complete documentation, see the Guide as this subsection is not comprehensive.

    + +
    + A Sage standard parabola, on [-2,4] + + a standard parabola on the interval [-2,4] + + f(x) = x^2 + plot(f, (x, -2, 4), color='green', thickness=3) + + +
    + +

    Pay careful attention to the requirement that the last line of your code be a graphics object. In particular, while show() might appear to do the right thing, it evaluates to Python's None object and that is just what you will get. The code for Figure illustrates creating two graphics objects and combining them into an expression on the last line that evaluates to a graphics object.

    + +
    + Two Sage plots on one set of axes + + + f(x) = x^4 + g(x) = -x^4 + up = plot(f, (x, -1.5, 1.5), color='blue', thickness=2) + down = plot(g, (x, -1.5, 1.5), color='red', thickness=2) + up + down + + +
    + +

    Sage code comprised of just a single line was once mishandled, leading to no ouput. From Jean-Sébastien Turcotte we have the example that revealed the problem.

    + +
    + Les vecteurs \vec{u} et \vec{v} + + +

    + Les vecteurs \vec{u} et \vec{v}sont tracés tel que demandé, + respectivement en rouge et en bleu. +

    +     + + plot(vector([-1,2]),color='red')+plot(vector([2,1]),color='blue') + + +
    + +

    The following examples are from the Sage Tour. We package them into a sidebyside layout element, see .

    + + + + +
    + A Sage multigraph of a sentence + + + stnc = 'I am a cool multiedge graph with loops' + g = DiGraph({}, loops=True, multiedges=True) + for a,b in [(stnc[i], stnc[i+1]) for i in srange(len(stnc)-1)]: + g.add_edge(a, b, b) + g.plot(color_by_label=True, edge_style='solid', figsize=(8,8)) + + +
    + + + +
    + Sage polynomial approximations of f(x)=1/(1+25x^2) + + + + def f(x): + return RDF(1 / (1 + 25 * x^2)) + + def runge(): + R = PolynomialRing(RDF, 'x') + g = plot(f, -1, 1, rgbcolor='red', thickness=1) + polynom = [] + for i, n in enumerate([6, 8, 10, 12]): + data = [(x, f(x)) for x in xsrange(-1, 1, 2 / (n - 1), include_endpoint=True)] + polynom.append(R.lagrange_polynomial(data)) + g += list_plot(data, rgbcolor='black', pointsize=5) + g += plot(polynom, -1, 1, fill=f, fillalpha=0.2, thickness=0) + return g + + runge() + + +
    +     + +

    From the Sage documentation, with slight modifications, credited to Douglas Summers-Stay. A plot of the implicity defined surface 2 = \cos(x + ty) + \cos(x - ty) + \cos(y + tz) + \cos(y - tz) + \cos(z - tx) + \cos(z + tx) in rectangular xyz coordinates, with t equal to the golden ratio. If you set plot_points=100 in the Sage code, you will get a very smooth rendering, but also a quite large HTML file. We have used plot_points=50 to reduce the file size by a factor of four. Note the need for a value of 3d for the variant attribute, and an explicit aspect ratio with aspect. Arrow keys, a mouse scroll wheel, plus grabbing with a left or a right mouse button, can be used to manipulate the image.

    + +
    + A Sage implicitly defined 3D surface + + + var('x y z') + T = RDF(golden_ratio) + p = 2 - (cos(x + T*y) + cos(x - T*y) + cos(y + T*z) + cos(y - T*z) + cos(z - T*x) + cos(z + T*x)) + r = 4.77 + implicit_plot3d(p, (x, -r, r), (y, -r, r), (z, -r, r), plot_points=50, frame=False) + + +
    +     + + + Inkscape Images + +

    Inkscape is a great tool for creating images. It ticks all the boxes: open source, mature, cross-platform, standards-compliant. Read much more about it in The Guide. In HTML output the two images below are both in SVG format. The first is pure SVG, while the second has embedded information that makes it easier to edit in Inkscape. You could view the source for this page in the HTML version, deduce the filename of the second image, download it, and manipulate it profitably with Inkscape. Both files are quite small, but the first is half the size of the second. In PDF the two images come from files that are identical, so nothing is being tested. The PDF version is smaller still.

    + +
    + Inkscape Stars, Plain SVG (left), Inkscape SVG (right), from Bethany Llewellyn + + + + +
    + +     + + + Copies of Images + +

    Sometimes you want to use the same image more than once. Here we just point to a PNG file that we repeat often throughout this sample.

    + +
    + Copy of raster image, in a figure, so now numbered and captioned + +
    + +

    For images described by code, such as TikZ code in a latex-image element, this is a bit subtler. See the Guide for a complete description. We also demonstrate this with the sample book, since it is all set up with the xinclude mechanism. See the two plots of the 8-th roots of unity in the complex numbers section of the chapter on cyclic groups.

    +     + + + Caption Testing + +

    A caption could be as substantial as a paragraph, here we test out one such example.

    + +
    + A caption can be a whole paragraph with lots of technical details, and maybe a hyperlink to something external, such as or . There could be some inline mathematics, such as x^2 + y^2 = c^2. Would a knowl open here? Recursively? Let's see: . Display mathematics, side-by-sides, theorems, and lots of other things should be banned. Footnotes sound like a bad idea. Strange characters should be fine: . + + +
    +     + + + Captionless Images + +

    We strongly suggest placing images within a figure, as we have done above, so that you can reference them, and use the (required) caption to explain what they are. However there are places, such as a preface, where numbered items are not permitted. So you might want a solo image there. Or maybe graphics are an illustration of sorts, and a numbered figure feels like overkill. Or it is part of an exercise or proof of a theorem. But notice that you cannot then use this image as the target of a cross-reference, so you may need to refer to some enclosing container.

    + +

    The image can be scaled by specifying the width as a percentage, including the percent-sign (%). The height is scaled to preserve the aspect ratio. There is no facility to change the height, it is your responsibility to manage the aspect ratio independently. The margins can be given as a pair of percentages, separated by a space. The width defaults to 100%, while margins defaults to the value auto, which will center the image. Missing values are computed sensibly, and there is robust error-checking. The layout control here is a subset of what is available for the more elaborate sidebyside element, see .

    + +

    Two simple examples. The first has width 10% and so defaults to being centered, and the second has width 10% and left margin of 25%.

    + + + +

    A paragraph, just to show where the first stops and the second ends.

    + + + +

    You might wish to place a single image flush-left, or flush-right. You can specify the margins attribute as a pair of percentages for different left and right margins. The following are laid out with two margins, with a 0% left margin and right margin (respectively).

    + + + + + +

    We place two images right above one another, to test spacing of consecutive images (provided they stay on the same page!).

    + + + + + + + Testing (2019-06-02) + +

    All the images above are specified by filenames. We need to test how various options behave when incorporated into the (new) implementation for images, being introduced with solo images.

    + +

    A tikz image recycled from above, now 40% width, with 40% left margin, 20% right margin.

    + + + + + ](1.643,1.853)--(1.643,.12); + \filldraw[conefill](.913,1.8)--(1.369,.1)--(1.162,-.283) + --(.775,1.545)--cycle; + \draw[arrows=->,line width=.4pt](.274,-.5)--(0,0)--(0,2.86); + \draw[arrows=-,line width=.4pt](0,0)--(-1.369,-.1); + \draw[arrows=->,line width=.4pt](-1.369,-.1)--(-2.1,-.153); + \filldraw[conefill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) + --(-.913,1.667)--cycle; + \draw(-1.369,.073)--(-1.369,2.76); + \draw(1.004,1.807)--(1.734,1.86); + \filldraw[conefill](.775,1.545)--(1.162,-.283)--(.274,-.5) + --(.183,1.4)--cycle; + \draw[arrows=<->](0,2.34)--(-.913,2.273); + \draw(-.913,1.84)--(-.913,2.447); + \draw[arrows=<->](0,2.687)--(-1.369,2.587); + \filldraw[conefill](.183,1.4)--(.274,-.5)--(-.775,-.424) + --(-.516,1.45)--cycle; + \draw[arrows=<-,line width=.4pt](.42,-.767)--(.274,-.5); + \node[ann] at (-.456,2.307) {$r_0$}; + \node[ann] at (-.685,2.637) {$r_1$}; + \node[ann] at (1.643,.987) {$h$}; + \path (.42,-.767) node[below] {$x$} + (0,2.86) node[above] {$y$} + (-2.1,-.153) node[left] {$z$}; + % Second version of the cone + \begin{scope}[xshift=3.5cm] + \filldraw[ghostdraw,ghostfill](-.775,1.922)--(-1.162,.283)--(-.274,.5) + --(-.183,2.067)--cycle; + \filldraw[ghostdraw,ghostfill](-.183,2.067)--(-.274,.5)--(.775,.424) + --(.516,2.016)--cycle; + \filldraw[ghostdraw,ghostfill](.516,2.016)--(.775,.424)--(1.369,.1) + --(.913,1.8)--cycle; + \filldraw[ghostdraw,ghostfill](-.913,1.667)--(-1.369,-.1)--(-1.162,.283) + --(-.775,1.922)--cycle; + \filldraw[ghostdraw,ghostfill](.913,1.8)--(1.369,.1)--(1.162,-.283) + --(.775,1.545)--cycle; + \filldraw[ghostdraw,ghostfill](-.516,1.45)--(-.775,-.424)--(-1.369,-.1) + --(-.913,1.667)--cycle; + \filldraw[ghostdraw,ghostfill](.775,1.545)--(1.162,-.283)--(.274,-.5) + --(.183,1.4)--cycle; + \filldraw[fill=red,fill opacity=0.5](-.516,1.45)--(-.775,-.424)--(.274,-.5) + --(.183,1.4)--cycle; + \fill(-.775,-.424) circle (2pt); + \fill(.274,-.5) circle (2pt); + \fill(-.516,1.45) circle (2pt); + \fill(.183,1.4) circle (2pt); + \path[font=\footnotesize] + (.913,1.8) node[right] {$i\hbox{$=$}0$} + (1.369,.1) node[right] {$i\hbox{$=$}1$}; + \path[font=\footnotesize] + (-.645,.513) node[left] {$j$} + (.228,.45) node[right] {$j\hbox{$+$}1$}; + \draw (-.209,.482)+(-60:.25) [yscale=1.3,->] arc(-60:240:.25); + \fill[black,font=\footnotesize] + (-.516,1.45) node [above] {$P_{00}$} + (-.775,-.424) node [below] {$P_{10}$} + (.183,1.4) node [above] {$P_{01}$} + (.274,-.5) node [below] {$P_{11}$}; + \end{scope} + \end{tikzpicture}]]> + + + +

    A pgfplot image recycled from above, now 20% width, with 40% left margin, 40% right margin, and no longer legible.

    + + + + + + + + + +

    An Asymptote image, with zero layout control, so 100% width.

    + + + moments on a lever + + // The next comment was seen in the wild, and the angle brackets + // are non-ASCII Unicode characters, which was disrupting communication + // with the Asymptote server, so we include the comment here for testing. + // The actual comment is immaterial for the lever diagram. + // + // The path is an elliptical helix ⟨ cos t, 2sin t, t/pi ⟩. + // + size(200,0); + + pair z0=(0,0); + pair z1=(2,0); + pair z2=(5,0); + pair zf=z1+0.75*(z2-z1); + + draw(z1--z2); + dot(z1,red+0.15cm); + dot(z2,darkgreen+0.3cm); + label("$m$",z1,1.2N,red); + label("$M$",z2,1.5N,darkgreen); + label("$\hat{\ }$",zf,0.2*S,fontsize(24pt)+blue); + + pair s=-0.2*I; + draw("$x$",z0+s--z1+s,N,red,Arrows,Bars,PenMargins); + + s=-0.5*I; + draw("$\bar{x}$",z0+s--zf+s,blue,Arrows,Bars,PenMargins); + + s=-0.95*I; + draw("$X$",z0+s--z2+s,darkgreen,Arrows,Bars,PenMargins); + + + +

    A Sage example, pushed to the right margin.

    + + + a standard parabola on the interval [-2,4] + + f(x) = x^2 + plot(f, (x, -2, 4), color='green', thickness=3) + + +     +     + + + Technical Details + +

    The table below is a summary of how graphics and images are specified, constructed and manipulated. Additional processing is indicated by reference to the Python script pretext. Images need to be placed relative to the file that includes them during compilation, and placed relative to the HTML files which reference/include them. Author-provided image files may be placed in any subdirectory, and the @source attribute should include the complete relative path with the subdirectory. Files generated by the pretext script will be specified in the output using the relative directory images, which can be changed. There is no reason author-provided files cannot also be placed in this same directory (presuming no duplicate names). [This table is presently more readable in HTML, the PDF version will improve.]

    + + + + Element + Specification + /Print + HTML + Notes + + + + image/@source + full relative path, w/ extension + directly included + directly included + author-provided PNG, JPEG + + + + image/@source + full relative path, w/o extension + presumes PDF + presumes SVG + author-provided + + + + image/latex-image-code + -compatible source + directly included + SVG via pretext + tikz, pgfplots, xypic + + + + image/sageplot + Sage code + PDF via pretext + SVG via pretext + PNG for 3-D + + + + image/asymptote + Asymptote code + PDF via pretext + SVG via pretext + + + + +

    In the early stages of a writing project, it may be best not to track provisional image files built with pretext under version control, and just regenerate them periodically (see the -r option for pretext). As a project matures, then it makes sense to put stable files under version control for collaborators and others. In every case, managing graphics files (and other aspects of production), is much more pleasurable with a script (shell, Makefile, etc.)

    +     + + + Accessibility +

    + An image should either have a non-empty description, + a non-empty shortdescription, or set decorative to the + value yes. Some of the following images comply, and some do not. There's + not really anything to see here visually, this is testing notifications made + elsewhere. +

    + + + +

    No description, no shortdescription, no decorative set to yes

    + +

    No description, no shortdescription, decorative set to yes

    + +     + +

    No description, empty shortdescription, no decorative set to yes

    + + + +

    No description, empty shortdescription, decorative set to yes

    + + + +     + +

    No description, too long shortdescription, no decorative set to yes

    + + This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. + +

    No description, too long shortdescription, decorative set to yes

    + + This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. + +     + +

    No description, good shortdescription, no decorative set to yes

    + + a white square outlined in blue covered by a black X + +

    No description, good shortdescription, decorative set to yes

    + + a white square outlined in blue covered by a black X + +     + +

    Description, no shortdescription, no decorative set to yes

    + + +

    + A white square outlined in blue covered by a black X. +

    +     + +

    Description, no shortdescription, decorative set to yes

    + + +

    + A white square outlined in blue covered by a black X. +

    +     + +     + +

    Description, empty shortdescription, no decorative set to yes

    + + + +

    + A white square outlined in blue covered by a black X. +

    +     + +

    Description, empty shortdescription, decorative set to yes

    + + + +

    + A white square outlined in blue covered by a black X. +

    +     + +     + +

    Description, too long shortdescription, no decorative set to yes

    + + This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. + +

    + A white square outlined in blue covered by a black X. +

    +     + +

    Description, too long shortdescription, decorative set to yes

    + + This shortdescription is too long because when alt text is longer than 125 characters, some screen readers will cut off reading the alt text after the 125th character. + +

    + A white square outlined in blue covered by a black X. +

    +     + +     + +

    Description, good shortdescription, no decorative set to yes

    + + a white square outlined in blue covered by a black X + +

    + A white square outlined in blue covered by a black X. +

    +     + +

    Description, good shortdescription, decorative set to yes

    + + a white square outlined in blue covered by a black X + +

    + A white square outlined in blue covered by a black X. +

    +     + +     +     +     +
    + +
    + Further Reading + + + Specialized Subdivisions + +

    In a longer work you might wish to have some references on a per-chapter basis, or similar. You can make a references subdivision anywhere to hold bibliographic items, and you can reference the items like any other item. For example, we can cite the article below , included an indication that a specific chapter may be relevant.

    +     + + + Exercises + + + +

    No problem here, but the next two are in an exercise group with an introduction and a conclusion, along with an optional title. The two problems of the exercise group should be indented some to indicate the grouping.

    +

    N.B. An exercisegroup is meant to hold a collection of (short) exercises with common, shared, instructions. Do not use this structure to subdivide an exercises division, as you will eventually be disappointed. Instead, use the available, but under development as of 2019-11-02, subexercises, which requires a title.

    +     +     + + + Two Derivative Problems + exercise grouptwo derivatives + + +

    In the next two problems compute the indicated derivative.

    + +

    You could connect the image above with the exercises following as part of this introduction for the exercisegroup.

    +     + + + +

    f(x)=x^3, \frac{df}{dx}. This sentence is just a bunch of gibberish to check where the second line of the problem begins relative to the first line.

    +

    We cross-reference the next problem in this exercise group. For the phrase-global form, the common element of the cross-reference and the target should be the exercises division, and not the enclosing exercisegroup: .

    +     + + + derivativecosine + +

    y = \cos(x), y^\prime.

    +     +     + + +

    Note that the previous two problems used very different notation for the function and the resulting derivative.

    +     + +     + + +

    This isn't really an exercise, but an explanation that the next exercisegroup has a title and no introduction, which once resulted in some aberrant formatting in output.

    +     + + + Two More Derivative Problems + + +

    Some common instructions would go here in the introduction

    +     + + +

    f(x)=x^3, \frac{df}{dx}. This sentence is just a bunch of gibberish to check where the second line of the problem begins relative to the first line.

    +

    We cross-reference the next problem in this exercise group. For the phrase-global form, the common element of the cross-reference and the target should be the exercises division, and not the enclosing exercisegroup: .

    +     + + + +

    y = \cos(x), y^\prime.

    +     +     + +     + + +

    Compute \int 3x^2\,dx.

    +     + + + +

    One of the few things you can place inside of mathematics is a fill-in blank.fill-in blank We demonstrate a few scenarios here. See details on syntax in the use is identical within mathematics.

      +

    • Inside inline math (short, space for x): \sin()

      • + +

    • Inside inline math (default, space for XXX): \sin()

      • + +

    • Inside exponents and subscripts (each is space for the string 12). In this case, be sure to wrap your exponents and subscripts in braces, as would be good practice anyway: x^{5+}\,y_{}

      • + +

    • Inside inline math (too long for this line probably, 40 characters long): \tan()

      • + +

    • So use inside a displayed equation16\log\spacelike this one.

      • + +

    • Inside the second line of a multi-line display: + y &= x^7\,x^8 + &= x^{} +

      • +

    • + This fillin has the historical characters attribute for a fillin inside math: 1++4=10, which may be more convenient, but may not side properly in places like subscripts, superscripts, fractions, limits of integrals, and so on. +

      • +

    +     +     + +     + + + More Exercises + + + +

    This is not a real exercise, we just want to explain that this is another subsection of exercises, which has two consecutive exercise groups.

    +     +     + + +

    Introduction to first exercise group.

     + +

    Only exercise of first group.

     +     +

    Conclusion to first exercise group.

     +     + + +

    Introduction to second exercise group.

     + +

    First exercise of second group.

     +     + +

    Second exercise of second group.

     +     +

    Conclusion to second exercise group.

     +     + + +

    An exercisegroup can have a cols attribute taking a value from 26. Exercises will progress by row, in so many columns. On a small screen, the HTML exercises may reorganize into fewer columns.

     + +

    1+2

     +     + +

    3+4+5

     +

    Addition is associative.

     +

    12

     +

    First, add 3 and 4 to get 7, then add 5 to arrive at 12.

     +     + +

    5+6

     +     + +

    Add seven to eight.

     +

    15

     +     + +

    9+10

     +     + +

    1+2

     +     + +

    3+4+5

     +

    Addition is associative.

     +

    12

     + +

    First, add 3 and 4 to get 7, then add 5 to arrive at 12.

    + +

    A simple argument.

    +     +

    And a bit more.

    +     +     + +

    5+6

     +     + +

    Add seven to eight.

     +

    15

     +     + +

    9+10

     +     + +

    1+2

     +     + +

    3+4+5

     +

    Addition is associative.

     +

    12

     +

    First, add 3 and 4 to get 7, then add 5 to arrive at 12.

     +     + +

    5+6

     +     + +

    Add seven to eight.

     +

    15

     +     + +

    9+10

     +     + +

    1+2

     +     + +

    3+4+5

     +

    Addition is associative.

     +

    12

     +

    First, add 3 and 4 to get 7, then add 5 to arrive at 12.

     +     + +

    5+6

     +     + +

    Add seven to eight.

     +

    15

     +     + +

    9+10

     +     +

    This feature was designed with short drill exercises in mind. With long exercises, or exercises with long hints, answers, or solutions, there is a risk that the output will have bad page breaks in the vicinity (just before) such an exercise that occupies too much vertical space. Edit, rearrange, or use fewer columns to see if the situation improves.

     +     + + + +

    + Make a table and a graph for the function f(x)=x^2. +

    +     + + + + + x + f(x) + + + 0 + 0 + + + 1 + 1 + + + 2 + 4 + + + 3 + 9 + + + + + \begin{tikzpicture} + \begin{axis} + \addplot[domain=-1.5:4, blue, thick, {stealth}-{stealth}] {x^2}; + \end{axis} + \end{tikzpicture} + + + + +     +     + + + References + referenceswithin a section + + +

    These items are here to test basic formatting of references.

    +     + + Gilbert Strang, The Fundamental Theorem of Linear Algebra, The American Mathematical Monthly November 1993, 100 9, 848855. + + + J. B. Conrey and D. W. Farmer + Mean values of <m>L</m>-functions and symmetry + Internat. Math. Res. Notices + 17 + 2000 + + + + Robert A. Beezer, A First Course in Linear Algebra, 3rd Edition, Congruent Press, 2012. +

    An online, open-sourceA gratuitous footnote to test prior bug confusing this with a REMARK-LIKE note. offering.

     +     + + + H. Davenport + Multiplicative Number Theory + GTM + 74 + Springer-Verlag New York, NY + 2000 + xiv+177 + A note may accompany a bibliographic item, such as saying the manuscript is under review. But it cannot contain any formatting. + + + Alexander Rosswell, Diffeomorphisms of Penciled Fiber Bundles, Mathematicians of America 2020, 2 6, 884888. + + , Diffeomorphisms of Penciled Fiber Bundles, Part 2, Mathematicians of America 2021, 3 4, 102103. + + +

    This is a conclusion, which has not been used very much in this sample. Did you see that the entry for has a short annotation? So you can make annotated bibliographies easily.

    +     +     + +
    + +
    + List Calisthenics + + + Lists, Generally + ordered list + listordered + unordered list + listunordered + +

    + Use ol to make an ordered list,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. + unordered list + listordered + listunordered +

    + + +

    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. +
    2. SecondFootnote in an unstructured list item.
      3. +
    3. Third.
      4. +
      +

    • RedOne of our favorite colors

      • +

    • Green

      • +

    • Yellow

      • +

    • Purple

      • +

    + +

    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. 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. +
    2. +

      Level 1, second.

        +

      1. Level 2, first.

        2. +

      2. Level 2, second.

          +

        1. Level 3, first.

          2. +

        2. Level 3, second.

            +

          1. Level 4, first.

            2. +

          2. Level 4, second.

            3. +
          3. + Title on xref'ed list item +

            Level 4, third.

            4. +

          +
          3. +

        3. Level 3, third.

          4. +

        +
        3. +
      3. + A title on a nested item +

        Level 2, third.

        +
        4. +

      +
      3. +

    3. Level 1, third.

      4. +

    + +

    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: . Level 3, second: . Level 4, third: . 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 (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. +

    2. Level 1, second.

        +

      1. Level 2, first.

        2. +

      2. Level 2, second.

          +

        • Level 3, first.

          • +

        • Level 3, second.

            +

          1. Level 4, first.

            2. +

          2. Level 4, second.

              +

            1. Level 5, first.

              2. +

            2. Level 5, second.

                +

              • Level 6, first.

                • +

              • Level 6, second.

                • +

              • Level 6, third.

                • +

              +
              3. +

            3. Level 5, third.

              4. +

            +
            3. +

          3. Level 4, third.

            4. +

          +
          • +

        • Level 3, third.

          • +

        +
        3. +

      3. Level 2, third.

        4. +

      +
      3. +

    3. Level 1, third.

      4. +

    + +

    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 not currently be rendered by WebKit-based browsers (such as Safari) when viewing HTML output.

      +

    1. Level 1, first.

      2. +

    2. Level 1, second.

        +

      1. Level 2, first.

        2. +

      2. Level 2, second.

          +

        1. Level 3, first.

          2. +

        2. Level 3, second.

          3. +

        3. Level 3, third.

          4. +

        +
        3. +

      3. Level 2, third.

        4. +

      +
      3. +

    3. Level 1, third.

      4. +

    + +

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

    2. Level 1, second.

        +

      • Level 2, first.

        • +

      • Level 2, second.

        • +

      +
      3. +

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

      4. +

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

      5. +

    + +

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

      +
    1. First
      2. +
    2. +

      Second

        +
      1. Uno
        2. +
      2. Dos
        3. +
      3. Tres
        4. +

      +
      3. +
    3. Third
      4. +

    + + +

    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.

    + + + Group + Group + +

    groupdefinitionparagraphinitial list

      +
    1. There is a binary operation, denoted \cdot.
      2. +
    2. The operation is associative.
      3. +
    3. There is an identity element, e.
      4. +

    4. For every element b, there is an element c (the inverse), such that b\cdot c=c\cdot b = e.

      5. +

    +

    If these conditions are met for a set G, 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).

    +     + + + 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. +
    2. Two ducks.
      3. +
    3. Three items. Plus a few more words to check that long entries in a two column list look good.
      4. +
    4. Four items.
      5. +
    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.
      6. +

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

    +     + + + 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}. +

      +
      2. +
    2. A list item with text and math \int_a^b x^2\,dx, not in a paragraph.
      3. +
    3. + \frac{d}{dx}\tan(x) = \sec^2(x) = \frac{1}{\cos^2(x)} +
      4. + +
    4. \sum_{i=0}^n r^i = \frac{1-r^{n+1}}{1-r}
      5. +
    + \int f(x)\,dx + math in lists \frac{d}{dx}(\sin(x))=\cos(x) +

    + + +

    + 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 +

      +
      • + +
    • \frac{a}{b}\div \frac{c}{d} = \frac{ad}{bc}
      • + +
    • + + \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. +

    + + + 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. +
    2. A list item with text and math \int_a^b x^2\,dx, not in a paragraph.
      3. +
    3. \int_a^b f'(x)\, dx = f(b)-f(a)
      4. + +
    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. + +
    5. + \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}} +
      6. + +
    6. + \frac{d}{dx}\sec^{-1}(x) = \frac{1}{x\sqrt{x^2-1}} +
      7. + +

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

      8. + +
    8. +

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

      +
      9. +
    +     + +

    + 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. + +
      2. +

        + Math only, with a newline. +

        +
        3. + +
      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. + +
      4. \int_a^x \frac{d}{dt}f(t)\,dt = f(x)-f(a)
        5. +
      +

      +
      • + +
    • \frac{a}{b}\div \frac{c}{d} = \frac{ad}{bc}
      • + +
    • + + \tan\theta = \frac{\sin\theta}{\cos\theta} + +
      • + +
    • +

      + \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,
      • +
    • \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 <c>\displaystyle</c> added automatically +

      \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

      +
      • +

    +     + + + Difficult List Items + +

    In 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. +

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

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

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

    +     + + + Description Lists + +

    Use dl to make a description listdescription listlistdescription. 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 + description listlistdescription + 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.

    +

    This is a second paragraph that should appear indented in PDF output.

    +
    • + +
  • + 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 (, disks).

    +
    • + +
  • + Bus! +

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

    +
    • + +
  • + <m>\displaystyle \sum_{n=0}^\infty x^n = \frac{1}{1-x}</m> +

    A geometric series. The formula is valid if |x| < 1.

    +
    • +

    + +

    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.On a sunny day! (Testing footnotes in description lists for output.)

    +
    • +
  • + Math <m>x^2</m> + + +

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

    +
    • +
  • + <q>i</q> before <q>e</q> except after <q>c,</q> unless it sounds like <q>a</q> as in <q>neighbor</q> and <q>weigh</q> +

    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: respects the good design practices which have been developed over the past centuries.

    +
    • +
  • + <m>\displaystyle \zeta(s) = \sum_{n=1}^\infty n^{-s} </m> +

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

    +
    • +
  • + <c>main()</c> is a void function +

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

    +
    • +

    + +

    You can nest description lists, though items might get crowded horizontally. We expand our computer list a bit. +

    +
  • + Expanded CPU +

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

    +
  • + Arithmetic +

    The kind of computations that give a computer the name computer.

    +
    • +
  • + Logic +

    Operations that make decisions, if this, then that, plus: and, or, and not.

    +
    • +
  • + Memory +

    Space to store information and results, permanently or temporarily.

    +
    • +

    +

    This is a second paragraph that should appear indented in PDF output.

    +
    • + +
  • + 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 (, disks).

    +
    • + +
  • + Bus! +

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

    +
    • + +
  • + <m>\displaystyle \sum_{n=0}^\infty x^n = \frac{1}{1-x}</m> +

    A geometric series. The formula is valid if |x| < 1.

    +
    • +

    +     + + + Named Lists + named listlistnamed + +

    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.

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

    2. Orange

      3. +

    3. Yellow

      4. +

    4. Green

      5. +

    5. Blue

      6. +

    6. Indigo

      7. +

    7. Violet

      8. +
    + + +

    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 .

    + + + A named list of targets + +

    This is the introduction to this named list, which references an item within, via the hybrid text attribute: . At one time this paragraph was inadvertently centeredthat bug has been fixed.

    +     +
      +
    1. +

      +

        +
      1. A and i
        2. +
      2. A and ii
        3. +
      3. A and iii
        4. +
      +

      +
      2. +
    2. +

      +

        +
      1. B and a
        2. +
      2. B and b
        3. +
      3. B and c (target of some cross-references)
        4. +
      +

      +
      3. +
    3. +

      +

        +
      • 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):
        • +
      • Cross-reference within named list (hybrid):
        • +
      • Cross-reference within named list (local):
        • +
      • +

        +

          +
        1. C and bullet and 1
          2. +
        2. C and bullet and 2
          3. +
        3. C and bullet and 3
          4. +
        +

        +
        • +
      • C and bullet
        • +
      • C and bullet
        • +
      +

      +
      4. +
    +     + +

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

    + +

    listThis 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.
      2. +
    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.
        2. +
      Intermediate text.
        +
      1. First item, second list.
        2. +
      Concluding text.

      • +

    + +     + + + 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.paragraphnormal

    + +

      +
    1. This paragraph opens with an ordered list.
      2. +
    2. Testing the id, and other info that should be at the top of the paragraph.
      3. +
    Now the paragraph continues, and we have an index item here, so we can test cross-references back here.paragraphopens with list

    + +     + + + List Column Testing + +

    This is a list arranged into two columns with some intentional layout challenges. The math is too long to fit in one column and can't be wrapped - it reduces the number of columns in its row. The long text items can be wrapped and stay within their column. +

      +
    1. One item.
      2. +
    2. Two ducks.
      3. +
    3. + + 3u \amp {}+{} 1v \amp {}+{} 3w \amp {}+{} 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 + 2u \amp {}+{} 2v \amp {}-{} 2w \amp {}+{} x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 + 1u \amp {}-{} 3v \amp {}+{} 1w \amp {}+{} x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13 + +
      4. +
    4. Short item.
      5. +
    5. A long item that can be wrapped over multiple lines.
      6. +
    6. Four items.
      7. +
      8. +
    8. 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.
      9. +

    +     + + + + Exercises (with lists) + + + +

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

    2. Exercise 1, second part.

        +

      1. Exercise 1, second part, first refinement.

        2. +

      +
      3. +

    3. Exercise 1, third part.

      4. +

    +     +     + + + + + 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: . Exercise 1, second part, first refinement: .

    +     + +     + + + References (with lists in Annotations) + + + Some book would be listed here. + +

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

      +
    1. Book 1, first part.
      2. +
    2. Book 1, second part.
      3. +
    3. Book 1, third part.
      4. +

    +     +     +     +
    + +
    + Table Calisthenics + + + + c = 832 + c + + + +

    That was a Sage cell just now, which has nothing to do with tables. But we needed someplace to test placement right after a division heading. Carry on.

    + +

    A very minimal table, hence with left-justified cells, no borders. We do wrap the tabular element in a table element to get centering, numbering and a caption. Footnotes inside cells are tested here.

    + + + Some Colors + + + Red + GreenGreen can be a very sick looking color. + Yellow + + + Blue + White + Pink + + +
    + +

    Note that tables may be constructed using the Complex Table Editor tool online at latex-tables.comand then exported in syntax.

    + +

    Tables can be used and abused many ways. We describe long division of polynomials by using vertical and horizontal borders on individual entries of a tabular. The division lines are slightly thicker than the subtraction lines. This is a good example of the typical abuse of tables for horizontal and vertical layout. At least we have called it a Figure, not a Table.

    + +
    + Polynomial Long Division + + + + + + + + x + - + 5 + + + x + + + 2 + x^2 + - + 3x + - + 8 + + + + + + x^2 + + + 2x + + + + + + + + + + -5x + - + 8 + + + + + + + + -5x + - + 10 + + + + + + + + + + 2 + + +
    + +

    An example of aligning table cells' contents horizontally. See the source for comments.

    + + + + + + Horizontal Alignment Example + + + + + + + + + 1234567890 + 1234567890 + 1234567890 + 1234567890 + + + + + + [First + Second + Third + Fourth + + + + A + B + C + D + + + + 1 + 2 + 3 + 4 + + + +
    + +

    Example from above, but now with horizontal rules, plus an extra row to test the bottom border. See the source for comments.

    + + + + Horizontal Rules Example + + + + + + + + + 1234567890 + 1234567890 + 1234567890 + 1234567890 + + + + First + Second + Third + Fourth + + + + A + B + C + D + + + + 1 + 2 + 3 + 4 + + + + 1 + 2 + 3 + 4 + + + +
    + + +

    For a table without a caption, create a tabular and place it directly within the current division. This will allow control over the horizontal placment, but without a caption, there is no number, and the tabular cannot be cross-referenced.

    + + One + +

    Same example as before, but now with vertical rules. See the source for comments.

    + + + Vertical Rules Example + + + + + + + + + 1234567890 + 1234567890 + 1234567890 + 1234567890 + + + + First + Second + Third + Fourth + + + + A + B + C + D + + + + 1 + 2 + 3 + 4 + + + + 1 + 2 + 3 + 4 + + + +
    + + + Progressively Thicker Rules Example + + + + + + + 1111 + 2222 + 3333 + + + aaaa + bbbb + cccc + + + AAAA + BBBB + CCCC + + +
    + + + Column Span Example + + + + + + + 1111, 2222 + 3333 + + + aaaa + bbbb,cccc + + + AAAA + BBBB + CCCC + + +
    + +

    A list whose first item is a table. In output a \leavevmode is necessary to keep this organized (item number, then table as content).

    + +

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

    + + + Example Environment with Leading Table + + + + Column Spans, No <c>col</c> Elements, Nine Columns + + + + 1 + 2+3 + 4 + 5+6+7 + 8+9 + + + 1 + 2 + 3 + 4 + 5 + 6 + 7+8 + 9 + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + + +
    + +

    This example tests several things. In output, figures, tables, listings and side-by-sides are floats whose placement can migrate, but we have tries to supress this behavior. However, a float that is the first item of an environment (like a theorem or an example) can still float to a position before its title. If that does not happen here, then our additional defenses are working.

    + +

    This example also checks that the total number of columns is correctly computed from the first row, which features several colspan attributes.

    +     + +

    A bare minimum table (one row with one cell) to test edge cases:

    + + + One entry table + + + One + + +
    + +

    Table cells with a fixed width where text wraps are known as paragraph cells. A cell will be created as a paragraph cell if and only if it has p children. And such cells should only have p children. The width of a paragraph cell is determined by a width attribute on the corresponding col (as a percentage). If the column has a non-paragraph cell with contents that are wider than the paragraph cells, results will be undesirable. There is presently no implementation for a paragraph cell that has a colspan greater than 1, although cells with colspan greater than 1 that are above or below a paragraph cell will behave. Setting width on a col that has no paragraph cells may produce unexpected results. A valign for the parent row (or the ambient tabular) can control vertical alignment (top, middle, or bottom). A paragraph cell's halign attribute (left, center, right, or justify) controls how the text is justfied. Cells inherit halign from row, col, and tabular in that order of preference. In a non-paragraph cell where halign='justify', the horizontal alignment will match the behavior of halign='left'.

    + + + Time Units + + + + + + + Unit + Stands For + Definition + Roughly + + + + second +

    the duration of 9192631770 periods of the radiation corresponding to the transition between the two hyperfine levels of the ground state of the cesium-133 atom

    +

    an extraneous paragraph just to demonstrate the inter-paragraph formatting.

     +

    the time it takes you to say the phrase differential calculus

     +     + + + minute +

    exactly 60 seconds

     +

    how long it takes to microwave a full dinner plate from the refrigerator

     +     + + + hour +

    exactly 3600 seconds; exaclty 60 minutes

     +

    the length of one episode of a premium cable television show

     +     + +
    + +

    Table cells can have multiline content using line elements. This is not the same thing as a paragraph cellline breaking will happen precisely where the author tells it to. A line will not break, even on a narrow screen. If a cell uses a line, it must only use a sequence of lines and no other content. As with paragraph cells, you can use a valign attribute for the row.

    + + + <abbr>Dr.</abbr> Seuss lines + + + + One Fish + Two Fish + Red Fish + Blue Fish + + + I am the Lorax. + I speak for the trees. + Self-referential: + + + Look at me! + Look at me! + Look at me NOW! + It is fun to have fun. + But you have + to know how. + + + +
    + +

    This is a table torture test with many combinations of halign, valign, colspan, p children, and line children.

    + + + Table Torture Test + + + + + + + + + + + + + + + + + + + Cell too wide + + + + Lf md +

    Lef mid par cel

     + Rt md +

    Rig mid par cel

     + Cn md +

    Cen mid par cel

     + Js md +

    Jus mid par cel jus mid par cel

     + +     + + Colspan=2lef midwith lines + Colspan=3 rig mid + LinesBetweenPar + LinesBetweenNo Par +

    Par in row with lines

     + +     + + L t +

    Lef top par cel

     + R t +

    Rig top par cel

     + C t +

    Cen top par cel

     + J t +

    Jus top par cel jus top par cel

     + +     + + L b +

    Lef bot par cel

     + R b +

    Rig bot par cel

     + C b +

    Cen bot par cel

     + J b +

    Jus bot par cel jus bot par cel

     + +     + + Colspan=3 lef bot + Colspan=2rig botwith lines + LinesUnderPar + LinesUnderNo Par +

    Par in row with lines

     + +     + +
    + +

    And now a sidebyside with a table and a tabular to check that width is scaled appropriately. See Section to learn about sidebysides.

    + +
    + Some text from the US Constitution + + + + + + A1.S1 +

    All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.

    +

    Should be 50% of 45% except perhaps on small screens.

     +     +     + + + + + + A1.S2.C1 +

    The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.

    +

    Should be 50% of 55% except perhaps on small screens.

     +     +     +     +
    + +

    Tables are formed in output with copious use of the \multicolumn macro to override more global alignment settings, and to spread the content of one cell across several columns. However, sometimes 's special characters have behaved badly in this situation. So the table below, two items per row, is just designed for testing. But of course, it should still render fine in other formats. The three test cases are from , but without 50 alphabetic characters and 8 digits, which should not be problems in this context. In order to test the use of a percent sign (%) in a URL, we follow it by two hex digits, specifically, 58, which is a way to represent the character X in a URL. The first column's entries are forced to be wrapped in a \multicolumn by specifying their horizontal alignment. The second column's entries will not be wrapped in a \multicolumn. So the two columns will look identical, other than the first having a left alignment, and the second has the default center alignment. (This table is known to render poorly in a Jupyter notebook. The cause is four dollar signs present in rows 1 and 3, and is explained in .)

    + + + Problematic Table Cells for <latex/> + + + 1 + 09az%-._~:/?#[]@!$&'()*+,;= + 09az%-._~:/?#[]@!$&'()*+,;= + + + + 2 + e.com/09az%58-._~:/?#[]@!$&'()*+,;= + e.com/09az%58-._~:/?#[]@!$&'()*+,;= + + + + 3 + + + + +
    + +

    Now, the same table repeatedly, but with different headers. No care has been taken with alignment or rules, which could improve how these look.

    + + + No Headers + + + 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 + + +
    + + + One Row Header + + + 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 + + +
    + + + One Row Header, Multiline + + + 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 + + +
    + + + Two Row Headers + + + State + Population + Area + Statehood + + + + + (sq. mi.) + (Year) + + + Washington + 7,614,893 + 71,362 + 1889 + + + Oregon + 4,217,737 + 98,381 + 1859 + + + California + 39,512,223 + 163,696 + 1850 + + +
    + + + One Vertical Row Header + + + 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 + + +
    + + + One Vertical Row Header, Multiline + + + 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 + + +
    + + + Two Vertical Row Headers + + + State + Population + Area + Statehood + + + + + (sq. mi.) + (Year) + + + Washington + 7,614,893 + 71,362 + 1889 + + + Oregon + 4,217,737 + 98,381 + 1859 + + + California + 39,512,223 + 163,696 + 1850 + + +
    + + + One Row Header, with Rules + + + 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 + + +
    + + + One Row Header, Multiline, with Rules + + + 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 has a progression of thicker rules in the header, plus a progression of thicker rules across the columns. For testing, not for aesthetics.

    + + + Two Row Header, Many Rules + + + + + + + State + Population + Area + Statehood + + + + + (sq. mi.) + (Year) + + + Washington + 7,614,893 + 71,362 + 1889 + + + Oregon + 4,217,737 + 98,381 + 1859 + + + California + 39,512,223 + 163,696 + 1850 + + +
    + +

    We now finish this section with some long tables. Ones that will not fit on a single printed page. So this is only of interest when producing this sample article as a PDF. First a naked tabular, which should force a new page to start, and then still overrun the end of the page.

    + + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + +

    Now the same tabular, but within a table. Behavior should be similar, a new page and then it overruns the bottom of the page.

    + + + + A Lot of Colors + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + +
    + +

    When you wish to allow a tabular to split itself at a page break, you can add the attribute break with the value yes. Certainly this will control a table or tabular which is longer than a page, but will also allow a shorter one to break. This might useful in a draft stage before undertaking page-fitting.

    + +

    Here is the long tabular again, but with the break attribute set to yes.

    + + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + +

    Here is the long table again, but with the break attribute set to yes on the tabular.

    + + + A Lot of Colors, Breaking + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + + Red + Green + Yellow + + + Blue + White + Pink + + +
    + +

    This device is not ideal, as some features of tables are not behaving as expected. More precisely, we switch from the standard tabular environment to the longtable environment from the package of the same name when table-breaking is requested. So there may be some undesirable interaction with other packages. For one, full-width horizontal rules seem to become as wide as the page (rather than as wide as the tabular). The following table is repeated but as a breakable tabular. The longtable package documentation suggests it accomodates the array package, but it also seems to make a variety of redefinitions. Furthermore, a panel of a side-by-side cannot be a breakable tabular, or a compilation error occurs.

    + + + Horizontal Rules Example + + + + + + + + + 1234567890 + 1234567890 + 1234567890 + 1234567890 + + + + First + Second + Third + Fourth + + + + A + B + C + D + + + + 1 + 2 + 3 + 4 + + + + 1 + 2 + 3 + 4 + + + +
    + +

    Here is a consecutive pair of bare tabular to test vertical space between them.

    + + + + + t + 2/3 + 2/303 + 2/30003 + 2/3000003 + + + g(t) + -1 + -1 + -1 + -1 + + + + + + + t + 2/5 + 2/505 + 2/50005 + 2/5000005 + + + g(t) + 1 + 1 + 1 + 1 + + + +

    The longtable package allows for headers and footers indicating continued tables. A possible enhancement is to support this feature in the case of a long table.

    +
    + +
    + Interactive Elements, Authored in Javascript + + Interactive Elements, Authored + + Interactive Elements, Authored + interactive elementsauthored + embedded interactive elementsauthored + + + +

    When outputting Web page versions, it is possible to embed a variety of dynamic interactive elements. In a /PDF version, these will necessarily need to be replaced by some static substitute, such as a screenshot. See for the specifics of embedding instances of the Sage Cell Server, which is more elaborate, and not entirely similar.

    + +

    Interactives in this section are those for which you provide code you have authored. Generally, the libraries involved to support this have open licenses, though the player for GeoGebra may be an exception. Creating these assumes some familiarity with HTML and Javascript. See for more interactives that are perhaps simpler to create or use.

    + +

    (2018-06-22) Almost everything in this section is under active development and not stable yet. Feel free to experiment and make suggestions and requests. This page takes a while to completely load, so be patient.

    +     + + + HTML5 Canvas + +

    HTML5 introduced the canvas element, which can be thought of a blank slate, a place to draw or write on. So has the slate element for a similar purpose. Generally, but not exclusively, HTML5 writes on a canvas using the Javascript language. We demonstrate this approach to interactive diagrams in this subsection.

    + +

    The following examples are from David Austin's excellent Understanding Linear Algebra textbook, which can be found at + merganser.math.gvsu.edu/david/linear.algebra/ula/index.html + David's contribution of examples, and assistance designing the elements is greatly appreciated. Alright, let's learn some linear algebra. Yes, there are some learning opportunities in this subsection.

    + +
    + A simple eigenvector demonstration + + + + +

    Let \vec{x} be represented by the red arrow, and A\vec{x} by the grey arrow, for some particular 2\times 2 matrix A. Drag the tip of the red arrow to see the grey arrow change.

    +     +     +
    + + +

    The interactive in shows a vector \vec{x} in red, and the matrix-vector product A\vec{x} in grey, for a particular 2\times 2 matrix A. The four entries of the matrix A are coded into the interactive. Can you deduce A simply by using the interactive? Which theorem is the key?

    +     + +
    + Eigenvector demonstration + + + + + +

    Let \vec{x} be represented by the red arrow, and A\vec{x} by the grey arrow, for a 2\times 2 matrix A. Drag the tip of the red arrow to see the grey arrow change. Or drag the blue sliders to change the numerical values of the four entries of the 2\times 2 matrix A. You will not see the grey vector until you change the matrix using one of the two sliders on the left. Why is that? What are the eigenvectors of the initial matrix?

    +     +     +
    + +

    The next example has ten slate elements communicating with each other, and arranged with the layout features of a sidebyside (see ).

    + +
    + Affine Transformations + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Flipping Woody +

    Parameters a, b, d, and e, form a 2\times 2 matrix A, while c and f form a vector \vec{b}. The two views of Woody shows the effect of the mapping \vec{x}\mapsto A\vec{x} + \vec{b}.

    +     +     +
    + + +

    If your interactive employs a slate with a surface attribute whose value is html, then you are advised to augment each top-level (HTML) element within the slate with the attribute: + xmlns="http://www.w3.org/1999/xhtml" + This will identify all of the elements within the slate as HTML elements and not as elements. The danger is that elements with the same name in both languages, such as li and table, will be mis-identified. This could be harmless, but could also create chaos, such as disrupting numbering of elements.

    + +

    See the source code of this document for examples: , .

    + +

    Note that the HTML that is output can vary slightly from your source in small, harmless ways, such as empty (self-closing) elements being output with both an opening and a closing tag. Please report any significant discrepancies. Soon this requirement will be enforced in the code.

    +     + +

    It is also possible to add script elements within an interactive that contain properly escaped JS code. These elements will be placed at the end of the document created to hold the interactive content and can interactive with the other elements within the interactive but can not directly interact with the surrounding page.

    + +

    Authors are strongly discouraged from trying to incorporate complex code in the form of a script, but it can be a useful tool to call more complex code that is linked via source on the interactive.

    + +

    This example uses a script to draw Hello World to a slate

    + +
    + A simple embedded script example + + + + + +
    + +     + + + D3.js + D3.js + +

    D3 is a Javascript library for Data-Driven Documents, which might greatly enhance some data you wish to display. In short, it uses the animation capabilities of SVG. Available examples seem sensitive to the version of the library, so we have examples using different versions. Use the version attribute on interactive to specify the version number. The default is 5.

    + +

    The first example uses the force layout and collision detection from Version 3. (The necessary commands are very different in Version 4.) Pretend you are a working shepherding dog. Can you separate, and catch, one of the herd?

    + +

    This is adapted from a block by Mike Bostock with a GPL license. A similar demonstration, only using an HTML5 canvas is at .

    + +
    + Force layout and collision detection + + + +

    Place your mouse/pointer at the center of the interactive to repel the 200 circles.

    +     +     +
    + +

    Similar, but different, this demonstration of a graph layout uses Version 4 of the library. Technical notes:

      +
    • We have changed the size of the nodes, and their number, to fit in a smaller space.
      • +
    • The Javascript script uses introspection to size itself, which would be a good general practice.
      • +

    + +

    This is adapted from a block by shimizu with a GPL license.

    + +
    + Graph Layout + + + +

    Drag a vertex to a new location to see the graph adjust its layout.

    +     +     +
    + + + Graph Planarity + +

    Can you move the vertices to new locations such that the resulting graph is planar? (In other words, no edges cross?)

    +     +     + +

    Finally an example that actually uses some data. Here is the description from the original block by Martin Chorley with an MIT License.

    + +
    +

    This visualisation uses a D3 force simulation to show the Twitter relationships between the Assembly Members in the Welsh Assembly in terms of the number of times each assembly member has mentioned another assembly member in a tweet.

    + +

    Twitter relationships were mined on 22/03/2017, and are representative of the conversational relationships on that date. Links between AMs represent a conversational relationship: one AM has mentioned the other. Party colour indicates the direction of the mention.

    + +

    Hover over the nodes to fade out non-connected nodes.

    + +

    Rather than using intermediate nodes to create curved links (as in Mike Bostock's block), this adds curves by adding a calculated control point for each edge.

    +
    + +

    Technical notes:

      +
    • Once the nodes organize themselves (automatically in the beginning), they cannot be moved.
      • +
    • We have adjusted the margins in an attempt to keep names visible on the right side, but without giving up too much space.
      • +
    • We have adjust the repelling force, and the collision buffer, to better fit the available space.
      • +
    • This example required its own CSS, which we have included as part of the interactive.
      • +
    • The data collected from the Twitter analysis is contained in a JSON file, mention_network.json, and where the script loads that file, it has a hardcoded path. So this example is a bit brittle, should that file move.
      • +

    + +
    + Tweet mentions within the Welsh Assembly + + + +

    Hover on the name of an Assembly Member to concentrate on their tweet mentions.

    +     +     +
    +     + + + SVG + +

    Entirely similar to using an HTML5 canvas element (), it is possible to control an SVG element with Javascript. This example is from Mark McClure.

    + +

    Look carefully at the source and rendering of this example as HTML. The functions to choose from via radio buttons, and the change in x, denoted later as h, are being rendered as mathematics by the Javascript MathJax library. However, this cannot be accomplished with simply $...$ nor by simply \(...\), but instead by using the \(...\) and then also wrapping that in a span element with a class attribute set to process-math. (The latter is how we instruct MathJax as to which parts of a page to process, or not). So to have MathJax render a nice x^2 in this context (math inside HTML inside a slate inside an interactive) would be accomplished with + <span class="process-math">x^2</span> +

    + +
    + Tangent and secant slopes + + + +
    + Calculus consists of those problems in mathematics that can be solved with the + following basic approach: +
    +
    + Approximate and take a limit! +
    +
    + The simplest, standard, geometric example of this process is the approximation + of the slope of a tangent line with a secant line. + Here's an illustration of this basic idea. +
    +
    + Choose \(f\): + + + \(f(x)=x^2\) + + + + \(f(x)=\frac{1}{3}e^x\) + + + + \(f(x)=\sin(2x^2)+x/4\) + +
    +     + + + + +
    + + + + + +
    + + +
    Show secant line
    		 + + + +
    \(h\) =
    secant slope =
    tangent slope =
    +
    +     + +

    Select a function with the radio buttons, then use the checkbox to add the secant line. The denominator of the difference quotient, h, can be adjusted with the slider and the red point will react to the different values. The green point is the point of tangency, and can be dragged with the mouse.

    +     +     +
    + + + Changing Secant Lines + +

    When discussing the derivative as a limit, we think of the point of tangency as being fixed (the green point in ) and the other point defining the secant line as changing (the red point in ). Switch it up! Fix a large value of h (positive or negative) and then change the point of tangency (the green point). Discuss what you observe.

    +     +     +     + + + JSXGraph + JSXGraph + +

    JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser. Now a slate will be what JSXGraph calls a board. Again, you use Javascript to write onto a slate, but have some powerful shortcuts available from the JSXGraph library. For this reason, calls JSXGraph a language, similar in may respects to how Sage is a language, but is really a Python library. So realize that the syntax for using JSXGraph is that of Javascript.

    + +

    Place Javascript inside a file that is specified with the source attribute of the interactive element. Then just be certain that xml:id of the interactive element is passed as the HTML id in an (early) call to JSXGraph's initBoard() method.

    + +

    The following example was contributed by Rick Roesler. The figure is comprised of four stack elements within a sidebyside. By varying the time in the top box, the reader can observe the displacement, velocity, and acceleration of a ball thrown upward with an initial velocity of 30 m/s.

    + +
    + 1-Dimensional Kinematics + + + + + + + + + + +

    Use the time slider in the top panel to vary the time from 0 sec to 6 sec. Observe how the displacement, velocity, and acceleration vary with time.

    +     + + + +     +
    + +

    The plot below is the curve r=a+b\theta in polar coordinates, for 0\leq\theta\leq 8\pi. It may be manipulated with the sliders to control the shape of the curve. Point A is contrained to the curve, but may be dragged to a new location. At A the tangent line and normal line are plotted as dashed red lines. Use the controls in the lower left to adjust the viewing window. This Archimedean Spiral is taken from the JSXGraph example wiki. The code could be written in 7 lines. Width is 80% and aspect ratio is 4:3.

    + +
    + The Archimedian Spiral r = a + b\theta, 0\leq\theta\leq 8\pi + Archimedian Spiral + + + + +

    Drag the sliders to change the parameters a and b. Controls in the lower-right will adjust the viewing window.

    +     +     +
    + +

    Here is a more elaborate example, from the JSXGraph Showcase, titled Infinity.

    + +

    There are two active sliders to control the shape and shading of the graphic, and hovering the mouse near one of the edges will highlight the entirety of one of the 30 quadrangles. Finally, each of the four red corners may be dragged to a new location. Code is 47 lines. Width is 60% and aspect ratio is the default, 1:1, a square.

    + +
    + Infinity, from the JSXGraph Showcase + + + + +

    Drag the sliders to change the pattern, and drag any of the four red corners to change the overall shape.

    +     +     +
    + +

    Here are the two new examples. They have been included in a sidebyside layout element with equal widths (see ) so they can be placed horizontally across the page. They are not wrapped as figures, so cannot be cross-referenced. These are again from the JSXGraph example wiki, the left being Fermat's Spiral and the right being a demonstration of B-splines.

    + + + + + +

    Drag the slider to change the curve.

    +     +     + + + + +

    Any of the 8 red control points may be moved anywhere.

    +     +     +     + +

    Finally, a piecewise function you can control, with traces of the domain values and range values in two other JSXGraph boards. Boards and HTML buttons have been laid out using the sidebyside layout element.

    + +
    + Piecewise Function + + + + + + + + + + + + + + + + + + + + +

    The slider of the left panel will trace out the piecewise function. Simultaneously, the domain will be traced in the middle panel, and the range in the right panel.

    +     +     +
    + +

    Generally, we load an interactive into an HTML iframe to sandbox (isolate) it from other interactives. We does this for your own protection. So, for example, one interactive cannot talk to another. If two slate need to communicate, then they are related, and should be placed into a single interactive, allowed to layout themselves, or grouped within a sidebyside allowing finer control. Even if we have this under control, you might still enjoy reading Your JS is a Mess at mikecavaliere.com/your-js-is-a-mess-javascript-namespacing/.

    +     + + + JessieCode + JessieCode + +

    JessieCode is a scripting language for JSXGraph. It provides the core geometric and graphing features of JSXGraph without accessing the underlying JavaScript. In order to use JessieCode, you simply create the HTML div element as you would for any other JSXGraph interactive plot and then provide the JessieCode script, which focuses on the geometric elements.

    + +

    Because JessieCode is provided by JSXGraph, the interactive platform is jsxgraph. The slate, however, uses surface with value jessiecode. The script can be embedded directly in your code. As usual, you would need to remember to escape the special characters. JessieCode uses < and > for inequalities as well as for declaring objects used to style geometric elements, and && is the boolean AND operator. Alternatively, you can provide the file as a separate resource, providing the URL with a source attribute. Attributes defining the JSXBoard at the time it is created should be included as attributes of the slate, including boundingbox, axis, and grid.

    + +

    For this first example, the JessieCode was included directly in the XML source as the contents of the associated slate.

    + +
    + Finding the Tangent Line of a Quadratic Function + + + + + a = slider([-4.5,4], [-1.5,4], [-2,1,2]) + << + name:"a", + snapWidth:0.25, + point1: << frozen: true >>, + point2: << frozen: true >> + >>; + b = slider([-4.5,3.5], [-1.5,3.5], [-4,-1,4]) + << + name:"b", + snapWidth:0.5, + point1: << frozen: true >>, + point2: << frozen: true >> + >>; + c = slider([-4.5,3], [-1.5,3], [-4,0,4]) + << + name:"c", + snapWidth:0.5, + point1: << frozen: true >>, + point2: << frozen: true >> + >>; + fGraph = functiongraph(function(x) { + return a.Value()*x^2 + b.Value()*x + c.Value(); + }); + P = glider(1,0, fGraph); + Q = point(2,2) + << name:"P" >>; + secant = line(P,Q) + << color: (function() { + m = (Q.Y() - P.Y())/(Q.X() - P.X()); + dydx = 2*a.Value()*P.X() + b.Value(); + cVal = "red"; + if (abs(m-dydx) < 0.001) { + cVal = "blue"; + } + return cVal; + }) + >>; + dydxValue = text(-4, 1.5, function() { + m = 2*a.Value()*P.X() + b.Value(); + return ("dy/dx = " + trunc(m,3)); + }) + << frozen: true >>; + mValue = text(-4, 1, function() { + m = (Q.Y() - P.Y())/(Q.X() - P.X()); + return ("m = " + trunc(m,3)); + }) + << frozen: true >>; + + +

    Use the sliders to set the parameters of the quadratic f(x)=ax^2+bx+c. Drag the point A on the graph and the point P to define a line. Try to make the line tangent at the point at A and observe the resulting slope of the tangent line.

    +     +     +
    + +

    For this second example, the JessieCode was included through an associated script file, loaded by the browser.

    +
    + Graph of a function that is continuous but not differentiable at x=0 because the slope of the secant line has no limit. + + + +

    Drag the point B to move the point on the graph and change the secant line. Notice that there is no well-defined limiting tangent line as x \to 0.

    +     +     +
    +     + + + Sage Interacts + Sageinteracts + +

    Sage, and the Sage Cell Server, support interactive demonstrations, called interacts.

      +
    • The interactive elements are nearly trivial to construct.
      • +
    • An interact is simply a single Python function (acted on by a decorator).
      • +
    • You have the full mathematical power of Sage at your disposal, so can do some very powerful computations with high precision (or exactly).
      • +
    • The interface is not as polished as what you can achieve with Javascript libraries.
      • +
    • Graphics refresh with a round-trip to the server, so are not nearly as fluid as with other tools.
      • +
    Note that each interact is insulated from the others, unlike our other employment of the Sage Cell Server.

    + +

    This example is by Marshall Hampton, taken from the Sage interact wiki, specifically Numerical integrals with the midpoint rule.

    + +

    Also notice that when viewed in dark mode, this sample respects the rendering intent. That is due to dark-mode-enabled applied to it.

    + + + +
    + Numerical integrals using the midpoint rule + + + + + + + var('x') + @interact + def midpoint(n = slider(1,100,1,4), f = input_box(default = "x^2", type = str, width=40), start = input_box(default = "0", type = str, width=6), end = input_box(default = "1", type = str,width=6)): + a = N(start) + b = N(end) + func = sage_eval(f, locals={'x':x}) + dx = (b-a)/n + midxs = [q*dx+dx/2 + a for q in range(n)] + midys = [func(x=x_val) for x_val in midxs] + rects = Graphics() + for q in range(n): + xm = midxs[q] + ym = midys[q] + rects = rects + line([[xm-dx/2,0],[xm-dx/2,ym],[xm+dx/2,ym],[xm+dx/2,0]], rgbcolor = (1,0,0)) + point((xm,ym), rgbcolor = (1,0,0)) + min_y = min(0, find_local_minimum(func,a,b)[0]) + max_y = max(0, find_local_maximum(func,a,b)[0]) + pretty_print(html('<h3>Numerical integrals with the midpoint rule</h3>')) + pretty_print(html('$\\int_{a}^{b}{f(x) dx} {\\approx} \\sum_i{f(x_i) \\Delta x}$')) + print("\n\nSage numerical answer: " + str(integral_numerical(func,a,b,max_points = 200)[0])) + print("Midpoint estimated answer: " + str(RDF(dx*sum([midys[q] for q in range(n)])))) + show(plot(func,a,b) + rects, xmin = a, xmax = b, ymin = min_y, ymax = max_y,figsize=5) + + +
    + +     + + + Geogebra + +

    To embed a GeoGebra applet as-is from GeoGebra's Classroom Resources site (by material ID), see . To design your own applet (either from scratch, or modifying something that already exists in one of those three forms) you may use one of Geogebra's Apps to embed the material in your document. (But note, use of the App comes with licensing restrictions.) will handle most of the technical details for you.

    + +

    Do one of the following:

      +
    1. Identify a material ID from GeoGebra's Classroom Resources site. You might even make the material yourself on that site.
      2. +
    2. Obtain a .ggb file from GeoGebra. You might construct something on a desktop installation of GeoGebra and save it. If you have a base64-encoded string for a GeoGebra applet, but you don't have a .ggb file, you can decode the string and save the result. For example, at .
      3. +
    3. Obtain a base64 encoded string for a GeoGebra applet. You might first open a .ggb file in a desktop installation of GeoGebra, and push ctrl-shift-B (command-shift-B on a Mac) and then the string will be in your clipboard.
      4. +
    4. None of the above, with the intention to make an applet from scratch.
      5. +

    + +

    Then mimic the examples that follow, using GeoGebra API commands documented at Geogebra API Manual, but do not include the ggbApplet. or applet. used in examples to prefix the functionsthat part of the code will be provided automatically by .

    + +

    Jack Green created an applet on the Classroom Resources site with ID D4s2v4ft, which you may view at . Suppose you would like to use this in your project, but change something about it. We will change something trivial, making the y-axis ticks be separated 5 apart instead of 10 apart. We also decide we want a different aspect ratio and overall width. One gotcha: the original applet is loaded and then uses width and aspect attributes to resize the viewing window using the top left corner as an anchor. This does not rescale axes and that may leave you with important elements missing from the viewing window. So here we reset the viewing window to return to values that are in the original. Lastly, we disable zooming, which is not helpful for this applet. To do each of these things, we rely on the GeoGebra API manual at Geogebra API Manual. It is important to use one command per line.

    + +
    + GeoGebra: modified material ID + + + setAxisSteps(1, 1, 5, 1); + setCoordSystem(-0.7, 8, -6, 56); + enableShiftDragZoom(false); + + +
    + +

    The same can be done with a .ggb file. Here we use two provided by David Rosoff, and one provided by Tevian Dray. The path to the file needs to be relative. First, David's original.

    + +
    + GeoGebra: .ggb file + + + +
    + +

    Now we modify David's applet in a few ways.

    + +
    + GeoGebra: modified from .ggb file + + + setCoordSystem(-6, 10, -6, 6); + setLabelVisible("b", false); + setLabelVisible("c", false); + setLabelVisible("d", false); + setAxisLabels(1,"x","y","z"); + evalCommand("r = Slider(1,4,0.1)"); + showResetIcon(true); + + +
    + +
    + GeoGebra: modified from .ggb file + + + setCoordSystem(-15,5,-5,5); + setAnimating("θ", true); + + +
    + +

    In this one provided by Tevian Dray, we make no modifications (except for those imposed by the scaling). You will need to zoom out a bit, and then pan over some, to see all the pieces.

    + +
    + GeoGebra: a constructive proof that SAS congruence holds in Euclidean geometry (from Tevian Dray) + + + +

    Drag some of the points and some of the circles to change them, and watch the remainder react.

    +     +     +
    + +

    You could also use a base64-encoded string of the .ggb file. You might come across such a string somewhere, or you might generate one by opening a .ggb file in a desktop installation of GeoGebra, and pushing ctrl-shift-B (command-shift-B on a Mac) to get the string in your clipboard. If you do this, you could use a base64 attribute in place of the source attribute in the previous example. We don't do that here because such a string is generally over 5000 characters long and we are keeping the sample article source a bit cleaner.

    + +

    The next example shows how you can communicate between a GeoGebra applet and a slate contained in the interactive. The process is mediated by javascript code specified in the source attribute of the interactive. Event listeners in the code update the HTML when the diagram changes or vice-versa. MathJax is also notified when it needs to update math.

    + +

    Note that this example has a slate whose surface is pretext and a slate whose surface is html, the latter requiring a namespace declaration. The former produces HTML according to the templates, which is fairly predictable, but never guaranteed to always be identical over time. A slate uses familiar syntax, produces results styled consistently, but might break in the future. While an HTML slate is similar, the results will not be styled, but it does allow for a wider range of HTML elements (a button element here) and will not change over time.

    + +

    The indefinite integral in the last row of the table is a gratuitious test that aurhors' macros from docinfo are available to MathJax. Finally, a slate will only recognize p, tabular, sidebyside, and sbsgroup as children. Make a feature request if you have a good case for more.

    + +
    + Geogebra/ Communications + + + evalCommand("B2 = 3"); + evalCommand("C2 = -1"); + evalCommand("D2 = 2"); + evalCommand("B3 = -1"); + evalCommand("C3 = 4"); + evalCommand("D3 = 1"); + setValue("showAB",true); + setValue("showBA",false); + evalCommand("ZoomIn(-Z,-Z,-Z/2,Z,Z,Z/2)"); + evalCommand("SetViewDirection((1,1,1/2))"); + enableRightClick(false); + + + + + + + + + + + + \ + x + y + z + + + + \mathbf{A} + + + + + + + \mathbf{B} + + + + + + + \indefiniteintegral{x^4}{x} + + + + + + + + +

    + + +

    +     +     + + +

    + + +

    + This interactive shows \vec{r}_{AB}, the displacement vector from \vec{A} to \vec{B} and the corresponding unit displacement vector \lambda_{AB}. +

    + +

    + You may change \vec{A} and \vec{B} by moving the red and blue dots. + Click the dot to switch between x-y mode and z mode. + Coordinates of \vec{A} and \vec{B} can also be entered into the table directly. +

    + +     +
    + +

    Lastly, you may just wish to build something from scratch using GeoGebra API. Note that for accessibilty reasons, some objects are rendered unselectable with the setFixed command. Perhaps this should have been done with the previous examples, but that is more difficult when you do not know all of their names. Note that the GeoGebra scripting command setAttribute also changes the webpage's focus, so it is better to set the perspective using an attribute of the slate.

    + +
    + GeoGebra: from scratch + + + setRounding("3s"); + setCoordSystem(-1,1,-1,1); + setGridVisible(false); + setAxesVisible(false, false); + evalCommand("f(x)=If(x>0,sqrt(x),0)"); + setVisible("f", false); + evalCommand("T=20"); + evalCommand("t=Slider(0,T)"); + setAnimating("t", true); + evalCommand("v=Vector((cos(t),sin(t)))"); + evalCommand("r=Slider(0,1)"); + evalCommand("r=(sqrt(5)-1)/2"); + evalCommand("r=Slider(0,1,0.001)"); + evalCommand("N=Min(100,floor(T/r))"); + evalCommand("Seeds = Sequence(f(t - n r) / sqrt(T) (cos(n r 2 pi), sin(n r 2 pi)), n, 0, N)"); + setFixed("v", false, false); + setFixed("Seeds", false, false); + + +
    + +     + + + CircuitJS + +

    CircuitJS is an electronic circuit simulator. A circuit can be described by a language, which PreTeXt will interpret and submit for rendering. The next two examples are identical, but provided in slightly different ways, see the source for more. Preview images for PDF will be added later.

    + +
    + CircuitJS Example (source via an encoded attribute) + + +
    + +
    + CircuitJS Example (source authored directly) + + + + $ 1 0.000005 10.20027730826997 58 5 50 5e-11 + R 464 32 464 -16 0 0 40 3.3 0 0 0.5 + g 464 224 464 240 0 0 + s 464 32 464 128 0 0 false + s 464 128 464 224 0 1 false + x 274 181 431 184 4 12 bottom\sswitch\s(to\sground) + x 312 85 426 88 4 12 top\sswitch\s(to\sVdd) + O 464 128 544 128 1 0 + x 532 110 593 113 4 12 output\spin + + +
    +     + + + IFrames from Files + +

    An iframe is an HTML element that allows embedding of a complete web page within another one. Here we use this device to provide interactive 3D diagrams built with other tools.

    + +

    We begin with a Jupyter notebook hosted on . News of success on other hosts for Jupyter notebook servers will allow us to expand this description. We use a Sage kernel and create a 3D surface suggested by Juan Carlos Bustamante: + var('x,y') + plot3d(x^2 - y^2, (x,-1,1), (y,-1,1), color="orange", mesh=true) + + News of other computational engines that produce similar graphics will also allow us to further expand this description. Note that for the case of Sage 3D plots, support for the sageplot element makes this even easier. For example, see .

    + +

    A button in the lower right allows for several options, one is Save as HTML, which will produce a complete self-contained web page we can recycle. We save this file with our other externally-created images, in a directory that we choose to name iframeyou can use another name. Then we make an interactive with an iframe attribute that has the filename, starting from iframe/ (in other words, do not include the name of your managed directory of external images).

    + +
    + Sage+Jupyter iframe + +
    + + +

    Note that the downloaded file has links to specific versions of the three.js library, which are beyond our control, and beyond your control. So there is a future where these images may need updating. You could put your source code into a (large) comment with your project's source for safe-keeping in the future. See for the server version.

    +     + + + threejs + +

    Once upon a time there was an example here using the threejs 3D Javascript library. It was one of the project's examples, licensed with an MIT License, with minimal modifications.

    + +

    But it would seem to have become a bit more complicated to embed and our example was not rendering. As of 2022-08-08, we have removed it. Of course, you can find it in the git repository, perhaps searching on the date string just mentioned. It woulld be interesting to see if our interactive framework could still support the changes.

    + +

    The following two examples are meant to be instructive (only). The end result is accomplished in a much more straightforward way be the method in . We illustrate a way to get a three.js image out of an HTML page as a Javascript file and render it on a slate. We follow the second method in a blog post from the n-Category Cafe.

      +
    1. Open a Jupyter Notebook that utilizes a Sage kernel. This can be done easily at CoCalc (and for free initially).
      2. + +
    2. Sketch a surface using Sage code. We recycle the suggestion from Juan Carlos Bustamante in : + var('x,y') + plot3d(x^2 - y^2, (x,-1,1), (y,-1,1), color="orange", mesh=true) +
      3. + +
    3. Look for a button (in the lower-right) which will provide a menu option Save as HTML. Save the resulting HTML file, and open a copy in a text editor.
      4. + +
    4. +

      You are now looking for two HTML script elements. One will tell you just which version of three.js is being used, vis a @src attribute. For the second example below we located + https://cdn.jsdelivr.net/gh/sagemath/threejs-sage@r122/build/three.min.js + The @r122 will likely be a version number, which is a good thing for the longevity of your work. This will get used in the source attribute of your interactive, which will have platform set to javascript.

      + +

      The second script element is likely huge and has many generic functions defined it. There may be a huge variable full of data points computed by Sage. Copy the contents of this script element into a new Javascript file (so use a .js extension). Do not edit in any way until you read further. Once adjusted, this file too gets specified in the source attribute of your interactive.

      +
      5. + +
    5. Your interactive needs a slate element for the graphic to draw on, and you will need to give it a proper xml:id attribute, plus teh surface will be set to div. Then you need to edit the Javascript file to connect the graphic with the slate, via IDs in your source and on teh HTML div created by the slate. Look at the provided examples to see how. Do not make any other edits to this file, even if tempted.
      6. + +
    6. Study the two examples below, and mimic how they were constructed.
      7. +

    + +

    First, the example given in the blog post referenced above.

    + +
    + threejs catenoid surface, from n-Category Cafe + + + +
    + +

    Second, the example from JC Bustamante.

    + +
    + threejs saddle by Sage + + + +
    + +     + + + DoenetML + +

    + DoenetML is a markup language + inspired by for semantically describing interactive + mathematics applets for the web. Use + interactive[@platform="doenetml"] with a + slate[@surface="doenetml"] to include DoenetML content + within your document. +

    +

    + Since DoenetML is similar to, + but not completely compatible with, XML, it cannot be authored + directly within a PreTeXt document without painstakingly escaping + every < as &lt; and every & + as &amp;. However, a convenient workflow to avoid this + is to author your DoenetML in a separate file like + example.doenetml, then include this file + within your document using + <xi:include parse="text" href="path/to/example.doenetml"/>. + Altenatively, you can enclose your DoenetML in a CDATA, as we do below. +

    + +
    + DoenetML example + + + + + + Adjust the vectors \vec u, \vec v, and \vec w in the left + graph to visualize the areas calculated by + \det[\vec u\hspace{0.5em}\vec w], \det[\vec v\hspace{0.5em}\vec w], + and + \det[\vec u+\vec v\hspace{0.5em}\vec w]. +

    + + + $cv.x/$v.x + + + + + \det[\vec u\hspace{0.5em}\vec w], + \det[\vec v\hspace{0.5em}\vec w] + + + (6,2) + + + + (3,7) + + + + (9,5) + + + + + + + + + + \det[\vec u+\vec v\hspace{0.5em}\vec w] + + + + $w + + + + $uPlusV + + + + + + + + + ]]> +     +     +
    + +     +
    + +
    + Interactive Elements, Server + interactive elementsserver + embedded interactive elementsserver + + + +

    When outputting Web page versions, it is possible to embed a variety of dynamic interactive elements. In a /PDF version, these will necessarily need to be replaced by some static substitute, such as a screenshot. See for the specifics of embedding instances of the Sage Cell Server, which is more elaborate, and not entirely similar.

    + +

    Interactives in this section have code that lives on a server somewhere (in the cloud). So maybe you uploaded an interactive demonstration, or maybe somebody else did. In this sense, these are easier to create or use. But pay attention, the code may come with restrictive licenses, even if you are the author originally. See for more interactives that can be free as in freedom or liberté. CalcPlot3D is the notable exception here.

    + +

    (2018-06-22) Almost everything in this section is under active development and not stable yet. Feel free to experiment and make suggestions and requests. This page takes a while to completely load, so be patient.

    +     + + + GeoGebra + Geogebraserver + Geogebramaterial + +

    A Geogebra material is something you might use in a class. It could also be called an interactive demonstration. Go browsing at and find something appropriate for your project. Or make an account and create your own.

    + +

    Once you find a material that looks instructive, it will be at a URL such ashttps://www.geogebra.org/m/KGn2d4Qd and you want to pick off the identifier on the end, in this case KGn2d4Qd. Then author<interactive geogebra="KGn2d4Qd" /> At this writing (2018-02-04) you will want to place this inside a figure, with a caption, as we do right now with material KGn2d4Qd.

    + +

    The shape of the material will be fixed, so guess (or measure with an on-screen ruler), the aspect ratio and use that in the interactive element. If the width of the original material is anything other than 800 pixels, you should add material-width with the actual material width (units are pixels).

    + +
    + Right Triangle Paradox + +
    + +

    There are some optional control elements that Geogebra provides, such as the presence of the toolbar and the reset button. These can be controlled by adding the following additional attributes to the interactive. +

      +

    • toolbar="yes": add the Geogebra toolbar above the material

      • +

    • algebra-input="yes": add an entry box below the material to add graphical objects using algebra formulas or Geogebra graphical commands

      • +

    • reset-icon="yes": enable the reset icon

      • +

    • shift-drag-zoom="yes": enable ability to drag and zoom the viewing context

      • +
    +

    + +

    Note that materials hosted at geogebra.org have a non-standard, non-commercial license you must agree to before you can download them as source code. Perhaps you must forfeit your copyright when you upload a material? We have not investigated this thoroughly.

    +     + + + Desmos Graphs + Desmos graphs + +

    Desmos provides interactive graphing applications. The following example was created by Ann Cary and made available via the Share function of Desmos. You can make your own Desmos graph, choose the Share icon, and the Embed option, to get a URL such as https://www.desmos.com/calculator/ttox1bvxku You want to pick off the identifier on the end, in this case ttox1bvxku, then author<interactive desmos="ttox1bvxku" width="60%" aspect="2:3" /> as we have done here.

    + +

    The static image employed in the version of this article was obtained by viewing the graph at the Desmos site (, not the embedded version in the HTML version), and using the Share button to export a PNG image. In this case, we used a Medium Rectangle and Thick lines.

    + +
    + Graph of ln(x^2+5)-3 + +
    + +

    Note that Desmos has extensive Terms of Service which include restrictions on commercial uses.

    +     + + + CalcPlot3D + CalcPlot3D + +

    CalcPlot3D is a Javascript application for creating, visualizing, and understanding plots of 3D surfaces. So it would be an ideal companion to a book on multivariate calculus, but should be useful in other courses of study.

    + +

    To use it, start at the online app version. Create a plot and adjust the image to a viewpoint and scale if you like. Then, click the menu/hamburger icon in the upper-left and choose File. From here you can save a PNG image for the static version, but you also want to select Encode View in URL. Now your browser address bar is filled with a query string (all the stuff after the question-mark) that has all the information necessary to reproduce your plot (and view). Copy everything after the first question-mark to the interactive/code element. Be sure to replace any ampersands by &amp; (see the Author's Guide for more about certain characters in URLs). Examine the source for the examples below to see how they are authored. The Help Manual for CalcPlot3D is also available off the menu/hamburger icon in the upper-left.

    + +

    In grab the image with your mouse and rotate it in various directions. Then while the image has focus, press the 3 key (short for 3-D), to get a 3D view, which will require some red-blue 3D glasses to fully appreciate. Press the key again to return to a regular view.

    + +

    When using a version with controls (e.g. ), or the full application (e.g. ), specify an aspect ratio that is wider than it is tall. Start with aspect="3:2", and perhaps fine-tune from there.

    + +
    + Intersection of two planes (minimal embedding) + +
    + +
    + Probability wavefunction with contours (includes controls) + +
    + +
    + Plot of f(x,y)=\dfrac{1}{y-x^2} on [-2,2]\times[-2,2] (full application) + +
    +     + + + IFrames from Servers + +

    The iFrame versions of interactives can point to a network location, presuming the endpoint is reasonably well-behaved. If you are using this sytematically, let us know and perhpas it should become a more dedicated construction. See for the local file version.

    + +

    This example is from PhET Interactive Simulations.

    + +
    + Fourier: Making Waves iframe + +
    + +

    Anything that suggests you can embed an interactive widget via an iFrame is fair game for this feature. This is a Google Map of the state of California, for use in a French language document, from Julien Giol. The necessary URL is obtained by using the Share feature, and then the Embed a map option has HTML with the URL in a src attribute.

    + +
    + California. + +
    +     +
    + +
    + Interactive Exercises + + +

    Interactive components, just for testing, no commentary.

    +     + + + True/False + + +

    A True/False question.

    +     + + + True/False + vector space + +

    Every vector space has finite dimension.

    +     + +

    The vector space of all polynomials with finite degree has a basis, B = \{1,x,x^2,x^3,\dots\}, which is infinte.

    +     + +

    P_n, the vector space of polynomials with degree at most n, has dimension n+1 by . [Cross-reference is just a demo, content is not relevant.] What happens if we relax the defintion and remove the parameter n?

    +     +     +     + + + Multiple-Choice + + +

    Multiple-Choice problem

    +     + + + Multiple-Choice, Not Randomized, One Answer + stop signs + +

    What color is a stop sign?

    +     + + + +

    Green

    +     + +

    Green means go!.

    +     +     + + +

    Red

    +     + +

    Red is universally used for prohibited activities or serious warnings.

    +     +     + + +

    White

    +     + +

    White might be hard to see.

    +     +     +     + +

    What did you see last time you went driving?

    +     + +

    Maybe go out for a drive?

    +     +     +     + + + Parsons Problem, Math Proof + + +

    With some MathJax.

    +     + + + Parsons Problem, Mathematical Proof + even numbers + +

    Create a proof of the theorem: If n is an even number, then n\equiv 0\mod 2.

    +     + + +

    Suppose n is even.

    +     + +

    Then n is a prime number.

     +

    Then there exists an m so that n = 2m.

     +

    Then there exists an m so that n = 2m + 1.

     +     + +

    Click the heels of your ruby slippers together three times.

    +     + +

    So we have the displayed equation: n = 2m + 0.

    +

    This is a superfluous second paragraph in this block.

    +     + +

    Thus n\equiv 0\mod 2.

    +     +     + +

    Dorothy will not be much help with this proof.

    +     +     + +     + + + Parsons Problem, Code + + +

    Programming Parsons problem, requiring indentation.

    +     + + + Parsons Problem, Programming + prime numbers + Sieve of Eratosthenes + +

    The Sieve of Eratosthenes computes prime numbers by starting with a finite list of the integers bigger than 1. The first member of the list is a prime and is saved/recorded. Then all multiples of that prime (which not a prime, excepting the prime itself!) are removed from the list. Now the first number remaining in the list is the next prime number. And the process repeats.

    +

    The code blocks below can be rearranged to form one of the many possible programs to implement this algorithm to compute a list of all the primes less than 250. [Ed. this version of this problem requires the reader to provide the necessary indentation.]

    +     + + + n = 250 + + + + primes = [] + candidates = list(range(2,n)) + + + candidates = [] + primes = list(range(2,n)) + + + + primes = candidates + [p] + + + while candidates: + + + p = candidates[0] + primes.append(p) + + + for nonprime in range(p, n, p): + + + if nonprime in candidates: + candidates.remove(nonprime) + + + print(primes) + + +     +     + + + Matching + + +

    Events and dates.

    +     + + + + Matching Problem, Dates + matching US dates + +

    Match each event in United States history with the year it happened.

    +     + +

    Review Encyclopedia Brittania, 25 Decade-Defining Events in U.S. Historyurl.

    +     + + + Monroe Doctrine + 1823 + + + Haymarket Riot + 1886 + + + Louisiana Purchase + 1803 + + + Battle of Gettysburg + 1863 + + +     +     + + + Clickable Area + + +

    Words, not code.

    +     + + + Clickable Areas, <q>Regular</q> Text + + +

    Identify (by clicking, or by circling) all of the nouns in this quotation by Eleanor Roosevelt.

    +     + + +

    The future belongs to those who believe in the beauty of their dreams.

    +     + + +

    The incorrect words are pronouns.

    +     +     +     + + + Old-Style Fillin-In + + +

    Do not use this as a model for new exercises. Just for backwards-compatibility.

    +     + + + Fill-In, String and Number Answers + + +

    Complete the following line of a Python program so that it will declare an integer variable age with an initial value of 5.

    +

    age = ;

    +     + + + + +

    A variable of type int is appropriate for whole number ages.

    +     +     + + +

    Remember that Java uses just the first three letters of the word integer to define an integral type.

    +     +     +     + + + +

    An integer variable may be initialized to a value.

    +     +     + + +

    Use 5 as the initial value of the variable.

    +     +     +     +     +     +     + + + A Reading Question + + + Short Answer + + +

    This should be built with a text-box, only on a capable server (Runestone). So it can be answered

    +     + +     +     + + + Faux Subsection + +

    We used exercises divisions above, and need a subsection to feed the schema.

    +     +
    + +
    + Dynamic Exercises + + +

    This section demonstrates the use of dynamic randomized exercises built upon the framework of Runestone components. These demonstration problems incorporate a library supporting mathematical expressions both for varying the content of the statement of the exercises as well as the checking of submitted answers.

    +     + + + Dynamic Fill-In + + +

    The first problem illustrates revised markup for fill-in problems that don't involve randomization and use simple string and number comparison tests. Later exercises illustrate the use of dynamically generated mathematical expressions.

    +     + + + Fill-In, String and Number Answers + + +

    Complete the following line of a Python program so that it will declare an integer variable age with an initial value of 5.

    +

    age = ;

    +     + + + + + +

    A variable of type int is appropriate for whole number ages.

    +     +     + + .* + +

    Remember that Java uses just the first three letters of the word integer to define an integral type.

    +     +     +     + + + + +

    An integer variable may be initialized to a value.

    +     +     + + .* + +

    Use 5 as the initial value of the variable.

    +     +     +     +     +     + + + Fill-In, Multiple Strings, Custom Checker + + +

    + In order to apply the Integral Test to a sequence \{a_n\}, + the function a(n) = a_n must be + , and . +

    +     + + + + + + + + + + + + + You already gave that answer. + + + + + + + + + You already gave that answer. + + + +     + + + Fill-In Formula (Dynamic) + +

    Find a formula for a cubic function f(x) that has roots at x=, x=, and x= and so that f(0)=.

    +

    f(x)=

    +     + +

    + Knowing the roots of a polynomial allows us to write down the formula of f(x) in factored form, + f(x) = A + with an unknown scaling multiple A. +

    +

    + When we evaluate f(x) at x=0 using this formula, we find + f(0) = A. + Since we also know f(0)=, we can write down the equation + A = + and find that A=. +

    +

    + Consequently, we can write our function in the form + f(x)=. +

    +     + + + + + + + + + + + + + + + x1+d1 + + + x2+d2 + + + (x-x1)*(x-x2)*(x-x3) + + + + + 0 + + + + y0/base_yint + + + A*(x-x1)*(x-x2)*(x-x3) + + + + + + + + + +     + + Decompose the Function + +

    + Consider the function h(x)=. + Find two nontrivial functions f(x) and g(x) so that h(x) = f(g(x)). +

    +

    + f(x) = + and g(x)= +

    +     + +

    + Noticing that the expression appears inside parentheses with a power, + it makes sense to think of that as the inner function, defining g(x) = . + The outer function describes what happens to that. + If we imagined replacing the formula with a box and then call that box our variable x, we find the outer function is given by f(x) = . +

    +

    + This is not the only non-trivial composition. Can you find others? +

    +     + + + + + + + + + + + + + + + + + + a*x^n+b + + + c*x+d + + + x + + + + + + + + + + + + +

    f(x)=x is not allowed for nontrivial compositions.

     +     + + + + + + + + + + + + + + + + + + + +

    You have composed in the wrong order.

     +     +     + + + +

    g(x)=x is not allowed for nontrivial compositions.

     +     +     + + + + + + + + + + + + + + + + + + + + + + + + + +     +     +     +
    + +
    + Interactive Coding + + +

    More interactive components, just for testing, no commentary.

    +     + + + ActiveCode + + +

    ActiveCode, Python program.

    +     + + + An interactive Python program, using <pubtitle>Runestone</pubtitle> + + + print("Hello, World!") + + + + + + An interactive Python program without codelens. + + + print("Hello, World!") + + + +     + + + CodeLens + + +

    A steppable Python program.

    +     + + + A Python program, stepable with CodeLens + + + print('Hello, World!') + + + +     + + + Activity with An ActiveCode + + +

    Something to do with ActiveCode program.

    +     + + + Activity Coding Exercise + + +

    Similar to above, but now as a complete Python program inside an activity. This demonstrates the possibility to use any project-like block (project, activity, exploration, investigation), but not in the case when structured with task.

    +     + + + for i in range(10): + print(i) + + +

    We're still not really sure.

     +     +     + + + YouTube + +

    Video, observable on a Runestone server.

    + +     +
    + +
    + Audio + +

    2019-05-24: this is preliminary, and mostly based on the code for video so read the next section and mimic the style from there. But use an audio element and have the source attribute point to an OGG, MP3, or WAV file. Plus, an aspect attribute will be ignored.

    + +

    We have not entirely decided how to handle the static version present in a PDF.

    + +

    First in a figure, so it can be cross-referenced.

    + +
    + MP3 Piano Trill (www.kozco.com/tech/soundtests.html) +
    + +

    Now, naked, between a couple of paragraphs, with specified asymmetric margins, and a computed width.

    + +
    + +
    + Video + + +

    First, a gratuitous reference to Exercise about the derivative of a cosine.

    + +

    You can specify a video by a filename if you host it as part of your document, or a URL giving a location on the Internet. There are a few extra features for YouTube and Vimeo videos, which are near the bottom of this page, so look there first if that meets your needs.

    +     + + + Video Files + +

    Embedded videos can make sense for a web version of your document. This is a video promoting the University of Puget Sound to potential new students, in WebM format. Support is limited to HTML5-capable browsers. The file format can be MP4, Ogg, or WebM, though this may vary depending upon the browser. Use a video element, within either a figure (numbered, captioned) or a sidebyside for more precise control. The source attribute in this first example does not include an extension, and so three possibilities above will be searched for preferentially (you need only provide the video in one format, but providing additional versions will increase the chances every browser will find a compatible format).

    + +
    + University of Puget Sound Promotional Video +
    + +

    You can replace the preview image of a video with one of your own making. HTML refers to this as the poster, presumably because it advertises the video. The image you make should be of the same quality as the video, and with the same aspect-ratio, and is presumably one of the frames of the video. So a screenshot is the likely avenue. (Maybe we will have advice on how to do this easily, or see Issue #853.) + linkexternal, url + referenceexternal, url + On the video tag, include a preview attribute which is the name of an image file, including a relative path. (JPEG or PNG formats are best. JPEG may be smaller for video screenshots, while PNG is lossless and so may work better for diagrams.) The next video has a preview/poster that is a fram part way into the introduction.

    + +
    + University of Puget Sound Promotional Video +
    + +

    If you find the posters provided automatically for a video to be distracting or objectionable, you can cover them up by requesting a generic poster with the attribute-value pair: preview = "generic".

    + +
    + University of Puget Sound Promotional Video +
    + +

    You can use a very similar construction to point to a video hosted somewhere on the Internet, just use a complete URL for the source attribute. Note that if the URL has a query string (parameters following a question-mark), then any ampersands (&) will need to be escaped, so as to not confuse the XML processor ( use &amp). Also, the question-mark character needs to not be URL-encoded (%3F), so presumably edit the URL to be the character. Here are several examples, the second one uses the start and stop attributes to limit the video to just the time between the 16-second and 30-second locations, and has asymmetric margins.

    + + + +
    + Big Buck Bunny from Video for Everybody Test Page +
    + +
    + Big Buck Bunny, Controlled Start/End, Asymmetric Margins +
    + +
    + Big Buck Bunny, Ogg container, *.ogv extension +
    + +
    + Big Buck Bunny, MP4 format +
    + +
    + Big Buck Bunny, WebM format +
    + +
    + Big Buck Bunny, Automatic best format (temporarily broken) +
    + + + +

    Videos are assumed to have a 16:9 aspect ratio (width:height). If this is not the case, then you must specify the aspect ratio with either a ratio (e.g. 4:3) or as a number expressing the fraction width/height (e.g. 1.3333). Four decimal places should suffice for the latter. Note that you cannot change the aspect ratio, and you must supply the aspect ratio for any video that does not have the default ratio. This is a technical requirement that allows us to smoothly scale the videos on small devices (try this page on your mobile phone!).

    +     + + + YouTube + +

    YouTubeYouTube videosvideosYouTube videos may be embedded with only knowledge of a video's ID or a playlist ID. A single video's YouTube ID is a string of eleven seemingly random characters that show up in the URL when you watch a video. For the Led Zeppelin performance below, the ID is hAzdgU_kpGo, which you might normally watch directly from the URL . As described just above, you need to specify a different aspect ratio if the video does not have a 16:9 aspect ratio.

    + +

    Note: some of these videos may not play if viewed locally, and maybe not even if you start up a local web server (such as can be easily done with Python). So if you are testing new features, be careful about assuming videos from cloud services are not working properly.

    + +

    If you have ever owned a drone, you sympathize with this guy. Way funnier than a cat video.

    + +
    + My first day with my drone + First Drone Flight (1:28) +
    + +

    If you are only interested in a piece of the action, you can limit the video with start and end attributes in seconds. You might make those times clear in the caption for readers getting the link out of a PDF. Some videos may not respect these parameters.

    + +
    + My first day with my drone (Splashdown) + First Drone Flight (Splashdown, 0:54 to 1:12) +
    + +

    This next video comes with a default poster from YouTube featuring Robert Plant. We've replaced it with a poster featuring Jimmy Page.

    + +
    + Kashmir (Live), Led Zeppelin + Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55) + Led Zeppelin video + +
    + +

    And if you don't want to be reminded of Plant, Page, Bonham, or Jones, you can cover them up entirely.

    + +
    + Kashmir (Live), Led Zeppelin + Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55) + Led Zeppelin video + +
    + +

    Videos were first designed mostly on the assumption that they are wrapped in a figure with a title (which is distinct from a caption). But you can just place a video naked inbetween a couple of paragraphs. This is nice if you don't want the clutter of numbers, and/or if you plan to exclude videos from some edition of your document.

    + +     + + + Vimeo + +

    We support videos from Vimeo in much the same way as YouTube videos. Now the identifier is a long integer. For example, the video up next would normally be found at https://vimeo.com/27246366. But instead, you can embed the video with as little as <video vimeo="27246366"/>. As of 2019-05-18, we intend to support as many of the options described above as possible. Widths and heights (via the aspect ratio) will perform as expected. We have not investigated start and end times.

    + +
    + MOVE, by Rick Mereki, vimeo.com/rickmereki +
    + +

    Now with an author-supplied poster.

    +
    + MOVE, by Rick Mereki, vimeo.com/rickmereki + + +
    +     + + + Captions and Subtitles + +

    Experimental support for captions and subtitles first. Look at the source, which mimics the actual HTML. The words of the titles and/or subcaptions (there is a difference!) come from a file in Web Video Text Tracks (WEBVVT) format.

    +
    + Big Buck Bunny with subtitles adapted from + +
    + +

    This video is identical to the previous one, except it tests the use of a default track. The default attribute on track can be set to the value yes to make one set of captions the default (and only one!). Test is a bit lame, the two track use the same file, but just have different labels for the player's menu. Track named US English Two will show as in-use at start-up.

    + + + +     +
    + +
    + Veil Element Testing + +

    + The function f(t) = e^{-t} satisfies the differential equation + f'(t) = -f(t), + which is characteristic of exponential decay. +

    + +

    + This sentence contains a simple hidden phrase and continues normally. +

    + +

    + Here is a veil wrapping emphasized hidden text within an emphasized span. +

    + +

    + You can also hide inline math like f(t) = e^{-t} without breaking the flow. +

    + +

    + Testing long text. Looks bad in print, but should be fine in HTML: + + This is a very long phrase that includes emphasis, + inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. + +

    + +

    + Testing long text inside <p> tags: + +

    + This is a very long phrase that includes emphasis, + inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. +

    + +

    + +

    + Multiple consecutive veils: \cos(t) + first hidden, then some regular text, and second hidden part. +

    + + + + h(t) = \int \sin(t)\ dt + + + +

    + Final test: a veil at the end of the sentence. +

    + +
    + + + +
    + Cross-Referencing + +

    Cross-referencescross-reference are easy, since that is a key reason for having a highly structured document. Here is a useful feature if you elect to use it. Any xref will know what it points to, so you can let it provide the naming part of the cross-reference text. You can turn this on globally with the command-line parameter autonameautoname set to 'yes'. If you do that, you will see most of the names in this document doubled, since the names are written into the source already in most places outside of this section.

    + +

    Moreover, the names themselves will change with the use of the one language dependent file. And another bonus is that with an autoname, you automatically get a non-breaking space between the name and the reference. The autoname switch makes no sense for provisional cross-references, since there is no information about what they point to.

    + +

    Here is a reference that has no indication of its type in the source: . So by default you will just see a number that you can click on. If you use the text="type-global" switch then you should see Theorem prepended. Note that if you changed the theorem to a lemma, then that change would be reflected here automatically when autonaming is in effect.

    + +

    If you set the autonaming behavior globally, or accept the default behavior, there will still be instances where you want to override that choice. Simple: just say text="type-global" or text="global" as part of the xref. Each example below should look the same each time this article is processed, no matter how the global autoname is set.

      +

    • No name ever:

      • +

    • Always named:

      • +

    + +

    You might also wish to provide a prefix to a cross-reference and have it incorporated into the text of what you would click on in an electronic version. So if you make an xref with some content, then that content will prefix the cross-reference within the clickable/pokeable text and be attached with a non-breaking space. This xref content totally overrides any prefix that might happen otherwise. So the name of an item ( corollary) could be replaced, and if you make a cross-reference with custom text, that will be the clickable also. An example:

      +

    • A grand result: Major Corollary

      • +

    • A grand result: a nice corollary

      • +

    + +

    Suppose you want to reference two theorems, so you might want to say something like Theorems 4.6 and 5.2. With global autonaming on, you can override the first Theorem by providing the content Theorems on the first xref and text="global" on the second xref. (With global autonaming off, you will also get what you want/expect.) Here is the test, which should look correct no matter what the global switch is: Sections and . (But notice that it is up to you to be certain the types of these targets do not change without you changing the content of the first xref. The author-tools mode and careful choices of xml:id strings can help avoid this trap.)

    + +

    If you set the value of text to title, then the title you assigned to the theorem will be used as the link for a cross-reference. Here is a the final example, which refers to a fundamental theorem by name .

    + +

    Cross-references to exercises with hard-coded numbers should respect the supplied number. Exercise should reference problem 42a.

    + +

    Here we form a list to test pointing at various structures. Each of the following should open a knowl in the HTML version, otherwise it will be a traditional hyperlink (if possible). Note that if a knowl opens, there will always be an in-context link which will take you to the actual location, should you have wished instead to just go there.

      +

    • Footnotes: Fermat allusion at .

      • +

    • Citations: Judson's AATA with annotation at

      • +

    • Citations: Judson's AATA with autoname that should have zero effect

      • +

    • Citations: In a references division inside an appendix

      • +

    • Note: just the annotation of previous citation at

      • +

    • Examples: Mystery derivative at , or a question at .

      • +

    • Definition-like: A mathematical statement with no proof .

      • +

    • A numbered Note:

      • +

    • A link to a proposition element, while this document has globally renamed propositions as Conundrums, so this link should use the new name:

      • +

    • Theorems: Fundamental Theorem of Calculus, with proof at

      • +

    • Proof: of second version of FTC at

      • +

    • Figures: A plot with a derivative at .

      • +

    • A Figure within a side-by-side panel, with its own number:

      • +

    • A Table within a side-by-side panel, with a subnumber:

      • +

    • A Figure, containing a side-by-side with two sub-captioned images:

      • +

    • Display Mathematics: single, first with no name: . Then with an autoname: .

      • +

    • Display Mathematics: multi-row, first with no name: . Then with an autoname: . And two, with a plural form: Equations and .

      • +

    • You can cross-reference The Fundamental Theorem of Calculus via custom text of your choice.

      • +

    • Display mathematics: an equation with local tag, which should not be used so very far away: .

      • +

    • You can author a cross-reference to a displayed equation with no number, but it will not be very satisfying. You should get a warning if you try.

      • +

    • Exercises (divisional), a range, with plural form provided to override autonaming: Exercises.

      • +

    • Exercise (inline): with enclosed hint at

      • +

    • A group of two exercises, with introduction, conclusion:

      • +

    • Solution: An autonamed portion of an exercise:

      • +

    • Parts of a complicated exercise:

      • +

    • A subsidary part of an exercise:

      • +

    • + knowlnested + Three cross-references to individual exercises, but due to their location, they should have different type names in the cross-reference: in an exercises division, ; in the narrative, ; and in a worksheet, .

      • +

    • An item buried in nested ordered lists:

      • +

    • List item as knowls in HTML, including nested lists: ,

      • +

    • A titled list:

      • +

    • List item inside a named list, second color in rainbow list:

      • +

    • Second color in rainbow list, but now as a local reference:

      • +

    • An item in ordered list, but contained in an unordered list, hence without a number, so a cross-reference by number would be ambiguous. So we use a cross-reference which relies on custom text: No Number List Item

      • +

    • Several examples of hybrid cross-references to list items within a named list can be found in, and adjacent to, .

      • +

    • An assemblage, which never has a number. A cross-reference now requires content in the xref element, with text='custom': text to xref an assemblage

      • +

    • A cross-reference to a list item in a description list, which has a title, but never a number: . Note that you need to include the attribute text="title" even if that is obvious from the situation. This requirement may be relaxed in a future refactoring of the cross-reference system.

      • +

    • A very similar cross-reference to the previous one, but testing how final punctuation of titles is handled: .

      • +

    • A cross-reference to a paragraphs subdivision, which never has a number (so comments above about description list items and titles applies here too):

      • +

    • A case within the proof of :

      • +

    • A cross-reference to a description list item with a title containing math:

      • +

    • A cross-reference to an aside, by title necessarily, and with some formatting in the title:

      • +

    • A cross-reference to an objectives block, with an autoname. This demonstrates the number of the Objectives here, which is not shown in the original version since it is implicit:

      • +

    • A cross-reference to an individual objective. This is authored as a list item, but displayed as an objective (singular) via an autoname:

      • +

    • A cross-reference to the top-level element (book) will point to a summary page similar to a Table of Contents in HTML. For LaTeX output it will behave similarly, unless there is no Table of Contents, then it will go to the main title page: ToC or Title

      • +

    • Cross-references inside quotations previously lost track of their target, so this tests correcting that, not so much the cross-reference itself:

      • +

    • An activity with full details following:

      • +

    • A type-global cross-reference to a second-level task within a project: , the encompassing project: , and a local reference .

      • +

    • A subcaptioned named list:

      • +

    • This opens a knowl for an example. It has a solution, which is orginally presented as a hidden knowl. But since this version is a duplicate, the knowl for the solution is a file version, not an embedded version, and hence free from duplicating any unique identifaction like an HTML id. So we test its styling and function here:

      • +

    • A cross-reference to a poem, where we need to use a title for the link text, since a poem is not numbered:

      • +

    • A cross-reference to a references division in a subsection, which should not be numbered where born, but which has the number of its parent division in a cross-reference: . And a cross-reference to a references division, which is the main bibliography in the back matter, and so is not numbered where born, nor in a cross-reference (which we must accomplish via it's title): .

      • +

    • A cross-reference to a solutions division in a subsection, which should not be numbered where born, but which has the number of its parent division in a cross-reference: . And a cross-reference to a solutions division, which should appear as an appendix both where born and as a cross-reference: .

      • +

    • A cross-reference to an exercises division in a subsection, which is the only such division in that subsection and therefore should not be numbered where born, but which has the number of its parent division in a cross-reference: . In contrast we cross-reference an exercises division which is one of two inside a section, and therefore is numbered, when born and when cross-referenced, in continuity with the preceding subsections: . Also an exercise within an exercises which should have a cross-reference employing the number of the containing (unstructured) section: which is in which is in the (unstructured) .

      • +

    • A custom cross-reference: Custom

      • + +

    • Cross-reference to instructions of an interactive:

      • +

    • A hyperlink to a subexercises via its required title (no number is assigned):

      • +

    • You can request the text to be a type, then a number, then a title:

      • +

    • Asking for the text to be a type, then a number, then a title, when there is no title, is not a problem:

      • + + +

    + +

    Cross-references to structural elements of the document will always take you there directly, since even in the HTML version these parts never get realized as knowls. You will find such links sprinkled through this document, but here is an autonamed link to a subsubsection: .

    + +

    Cross-references can be built into display mathematics, but they can only point to one item ( a comma-delimited list of targets is not supported). Examples below should test the distinction in HTML output between a link that opens a knowl and a link that jumps to a larger chunk of content. Notice that display mathematics is entirely syntax, no matter which output format you create. So if you do not use the autoname facility, you need to wrap non-math text in \text{} and perhaps use a tilde (~) as a non-breaking space (examine the source of this article).

    + +

    + x^2 + y^2 &= z^2&& + a^2 + b^2 &= c^2&&\text{Section}~ + bugin-context broken

    + +

    Variations on the above include multiple xml:id as the value of a single ref attribute on an xref, in the form of a comma-separated list. In this case, only the numbers are links/knowls and the autonaming attribute is based on the type of the first ref. Wrapping with brackets (citations) or parentheses (equations) is also controlled by the type of the first ref. And the detail attribute for a bibliographic reference is silently ignored. So you can do silly things like have a reference to a theorem within a list of equation numbers and there will be no error message. Handle with care. Spaces after commas in the list will migrate to the output as spaces, so if you don't have any, you won't get any.

      + + +

    • Four theorems, with spaces, autonamed:

      • +

    • Two equations, no spaces, autonamed:

      • +

    • Two bibliographic items, no autoname:

      • + +

    + +

    If you have a long list of items (such as homework exercises, not in an exercisegroup, or perhaps several chapters), you can get a cross-reference that prints as a range by using xref with two attributes first and last, which may contain a single xml:id each. As with multiple references, first will control autonaming and other features.

      +

    • A range of exercises, autonamed (this range appears out-of-order since the two exercise are numbered under two different schemes):

      • +

    • A range of equations:

      • +

    • A system of equations, given as range from first to last:

      • +

    • A range of sections, hand-named to be plural: Sections

      • +

    • A range of bibliographic items:

      • + +

    + + + + +

    The urlurl element may be used to link to a data file, either externally, or internally, if you want to make such an object available to a reader.referenceexternal A good example use case is a spreadsheet that might be part of an exercise, or contain data relevant to some discussion. First let us suppose the data resides somewhere on the Internet, then just use the complete address. Here is one from Microsoft: Sample Excel Spreadsheet.

    + +

    For a link like the previous one, you might want to provide advice appropriate for your audience about using a context menu to download a file, or how to configure helper/viewer applications.

    + + + + +

    You can also provide a file yourself, but now it is your obligation to distribute the file with your document (HTML, PDF, ) and provide a relative link. This creates some complications, such as making sure an electronic PDF has the associated file in the same place relative to the PDF file. Of course, if you make a print PDF, this becomes impossible. Here is a test example anyway, which is highly likely to be broken in a PDF (including at the project site) unless you build this example on your own computer, locally. Here is a template from the Apache OpenOffice project, provided via the Public Documentation License (PDL): Running Statistics Template.

    +

    The next four paragraphs are each a single dataurl element. Explore the source and the output from different conversions. Strictly for testing as of 2022-11-04.

    +

    Foo Sample Excel Spreadsheet Bar

    +

    Foo Runners Template Bar

    +

    Foo Sample Excel Spreadsheet Bar

    +

    Foo Runners Template Bar

    +

    Testing of output positioning for xref's that are inside containers:

    + + Self-referential Xref In a table + + + A + B + C + D + + + + B + C + D + + +
    + +
    + Xref Inside MathJAX +

    + + {\mathbb Z}_2 \times {\mathbb Z}_2 + + {\mathbb Z}_2 \times {\mathbb Z}_2 + +

    +
    + +

    Now we have two xref's to that same target that has a runestone component. Only the first one clicked should try to render the runestone.

    +
    + +
    + Internationalization + internationalization + +

    Supporting a multitude of possible characters, across many languages and across many output formats can be a challenge. One of our goals is to make this much easier for authors. Fortunately, the Unicode standard has led to improvements from the 7-bit ASCII standard of old.

    + + + Unicode Characters for HTML Output + +

    First, we discuss HTML output. If you include UnicodeUnicode characters in your source, they should survive just fine en route to a web browser or e-reader. Here are the caveats for HTML output:

      +

    • So that you can continue to get the best results with print and PDF output, use available empty elements for obscure characters, even if targeting HTML output, before resorting to a Unicode character. For example, use copyright for the copyright symbol in text before resorting to the Unicode character U+00A9. It is a bit more work, but you will get better results with other conversions, even if you initially are only fascinated by HTML.

      • + +

    • How you actually enter Unicode characters into your source file is dependent on your editor and operating system, and is therefore outside the scope of our documentation. You can cut-and-paste characters and text from the source of our examples for initial testing and experimentation.

      • + +

    • Always, always identify your source as having Unicode characters by including the incantation + <?xml version="1.0" encoding="UTF-8" ?> + as the first line of your source file. (You may be able to accurately cut-and-paste this version here. But if the copy has non-standard characters in it, go back to the top of this source file for a copy.)

      • + +

    • Alan Wood’s Unicode Resources has a plethora of samples of various groups of Unicode characters. If you, or your readers, are missing characters in a web browser, this is a good place to start testing the local setup.

      • +

    +     + + + Characters in <latex/>, PDF, print + +

    The situation for is a bit more complicated, since pre-dates Unicode's widespread adoption.

    + +

    This sample article is intended to work well, out-of-the-box, for authors just starting with . So we only include here examples that we know are likely to convert to PDF without any errors. For more extensive examples and experiments, we provide the sample document examples/fonts/fonts-and-characters.xml, so be aware of that example as you look to see what is possible.

    + +

    Similarly, you should be able to process this sample article successfully with various engines. We test regularly with pdflatex and xelatex and provide online sample PDF output of this document processed by pdflatex. In principle, you should be able to use latex (to produce a DVI), and possibly other (unsupported) engines, such as lualatex.

    + +

    Once you get beyond the Latin alphabet, with accents common in Western Europe and the Western Hemisphere, you will almost assuredly need to restrict your attention to producing PDF output with the xelatex engine. This is discussed and tested in examples/fonts/fonts-and-characters.xml.

    +     + + + Basic Latin, <c>U+0000</c><ndash/><c>U+007F</c> + +

    Unicode uses multiple 8-bit bytes to represent characters, and these are typically expressed in hexadecimal (base 16) notation. Using just a single byte, we can get 256 values, and the first 128 (hex 00 to 7F) are the usual Latin characters with some values used as control codes. These 95 characters are the most basic, and will all render using pdflatex or xelatex with no special setup (and will render easily in HTML). U+0000 to U+001F are control codes and not used here. U+007F is also a control code and so is excluded, while U+0020 is a space, so appears invisible in the table. In the source we have authored each character by its escaped version using its Unicode number (in hexadecimal). So, for example, capital-B is authored as &#x0042;.

    + + + + + + + Basic Latin, Regular + + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + A + B + C + D + E + F + 002_ !"#$%&' + ()*+,-./ + 003_01234567 + 89:;<=>? + 004_@ABCDEFG + HIJKLMNO + 005_PQRSTUVW + XYZ[\]^_ + 006_`abcdefg + hijklmno + 007_pqrstuvw + xyz{|}~ + +
    +     + + + Latin-1 Supplement, <c>U+0080</c><ndash/><c>U+00FF</c> + +

    Now we are interested in the next 128 possible bytes, (hex 80 to FF). The first 32 are again control codes and U+00A0 is a non-breaking space, so is invisible, while U+00AD is a soft hyphen (which we have not implemented and so is excluded). We have taken care to see that the remainder will render using pdflatex or xelatex with no special setup (and HTML). In the source we have authored each character by its escaped version using its Unicode number (in hexadecimal). So, for example, a copyright symbol is authored as &#x00A9;.

    + + + + + + Latin-1 Supplement, Regular + + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + A + B + C + D + E + F + 00A_ ¡¢£¤¥¦§ + ¨©ª«¬ ®¯ + 00B_°±²³´µ· + ¸¹º»¼½¾¿ + 00C_ÀÁÂÃÄÅÆÇ + ÈÉÊËÌÍÎÏ + 00D_ÐÑÒÓÔÕÖ× + ØÙÚÛÜÝÞß + 00E_àáâãäåæç + èéêëìíîï + 00F_ðñòóôõö÷ + øùúûüýþÿ + +
    +     + + + Monospace, Basic Latin and Latin-1 Supplement, <c>U+0000</c><ndash/><c>U+00FF</c> + +

    A monospace font is critical for samples of keyboard input and to distinguish exact technical input from running commentary. We list here all of the reasonable characters from the first 256 Unicode code points. (We skip the same 65 control characters from above, and the soft hyphen.) These should all render fine in HTML and when processed with xelatex, however our focus with this sample article for PDF output is the capabilities when processed with pdflatex. First, characters from U+0000U+007F.

    + + + + + Basic Latin, Monospace + + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + A + B + C + D + E + F + 002_ !"#$%&' + ()*+,-./ + 003_01234567 + 89:;<=>? + 004_@ABCDEFG + HIJKLMNO + 005_PQRSTUVW + XYZ[\]^_ + 006_`abcdefg + hijklmno + 007_pqrstuvw + xyz{|}~ + +
    + +

    Note that the single and double quotes are upright and dumb, not curly and smart: ' " ' " ' ". And a backtick is a backtick: ` ` `. The zero is distinguished from the capital oh: 0 O 0 O 0 O. And the numeral one is slightly different from the lower-case ell: 1 l 1 l 1 l. The hyphen should be short and not expanded into some other kind of dash: - - -. These characters should all cut/paste out of a PDF into a text editor with no conversion to other characters.

    + +

    Now the remaining characters from U+0080U+00FF. The program tag is implemented in via the listing package and these characters require ad-hoc replacements for processing by pdflatex. (You can see the replacements in the preamble of the source for this document.) The replacement mechanism provided by the listing package will cause the characters below to produce a compilation error if processed by pdflatex and in a table cell in certain situations (which we have avoided in the table below). The only workaround in this case is to switch to xelatex.

    + + + + + + Latin-1 Supplement, Monospace + + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + A + B + C + D + E + F + 00A_ ¡¢£¤¥¦§ + ¨©ª«¬ ®¯ + 00B_°±²³´µ· + ¸¹º»¼½¾¿ + 00C_ÀÁÂÃÄÅÆÇ + ÈÉÊËÌÍÎÏ + 00D_ÐÑÒÓÔÕÖ× + ØÙÚÛÜÝÞß + 00E_àáâãäåæç + èéêëìíîï + 00F_ðñòóôõö÷ + øùúûüýþÿ + +
    + +

    The pre tag is implemented in with the fancyvrb package. You can compare results here with the table above, lines here are rows above.

    + + + + + 
    +                      ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬   ® ¯
+                    ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿
+                    À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
+                    Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß
+                    à á â ã ä å æ ç è é ê ë ì í î ï
+                    ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
+
    + +

    The console tag is also implemented with fancyvrb, with adjustments for the input lines. It will not look like it, but these are 8 such inputs, with similar results to above, but now bolded.

    + + + ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ + ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ + À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï + Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß + à á â ã ä å æ ç è é ê ë ì í î ï + ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ + + +

    We take care to render the U+0080U+00FF characters in Sage cells. This would allow some flexibility in comments and strings employed. The following is just a test of these characters in the input and output of a sage element. This is not functional code.

    + + + + ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ + ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ + À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï + Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß + à á â ã ä å æ ç è é ê ë ì í î ï + ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ + + + ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ + ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ + À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï + Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß + à á â ã ä å æ ç è é ê ë ì í î ï + ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ + + + +     + +

    The table below has a single column, and each cell of the table has a string of 10 characters inside a c element. It is meant to test if the font is monospace in this situation.

    + + + Alignment Test + + 0123456789 + 9876543210 + iiiiiiiiii + mmmmmmmmmm + +
    + +

    Again, more examples and more thorough explanations can be found in the sample: examples/fonts/fonts-and-characters.xml. Be aware that the nature of the more advanced sample is that it will likely produce many errors when processed with pdflatex. Adding -interaction batchmode or -interaction nonstopmode to the pdflatex command-line will sometimes be less painless than acknowledging each error. The more advanced sample will perform well when processed with xelatex.

    +
    + +
    + Pre-Formatted Text + +

    In Sage, if you wanted to build a matrixmatrix, then you would use the matrix() constructor. Here is the matrix of second partials of f(x,y)=x^3+8x^2y^3 + y^4, as you would enter it in Sage. Notice that SR is the ring of symbolic expressions, Symbolic Ring.

    + + 
    +            var('x', 'y')
+            J = matrix(SR, [
+                [6*x + 16*y^3, 48*x*y^2],
+                [48*x*y^2, 48*x^2*y + 12*y^2]
+                ])
+
    + +

    That accomplished, Sage will easily and naturally provide a representation of the matrix with the command latex(J).

    + + 
    +            \left(\begin{array}{rr}
+            16 \, y^{3} + 6 \, x & -48 \, x y^{2} \\
+            48 \, x y^{2} & 48 \, x^{2} y + 12 \, y^{2}
+            \end{array}\right)
+
    + +

    The pre element surrounds text that should be preserved verbatim. It is like a special kind of paragraph, and can be used almost everywhere that a paragraph can be used. The realization of preformatted text should be robust enough that it can be cut from documents and pasted without any substitutions of fancier Unicode characters for generic ASCII characters. Try the minus sign on the 48 above to see if it does not become a dash, or the single quotes on the Sage variables.

    + +

    For Sage input code, the first non-whitespace character sets the left margin, since legitimate Python code has no subsequent lines outdented. For pre-formatted code, the line with the least whitespace leading the line will determine the left margin. If preserving indentation is important, do not mix spaces and tabs. For syntax highlighting of text representing computer programs, or parts of them, see Section. Examine the source of the following example to help understand this paragraph.

    + + 
    +            A normal line
+                    An indented line
+    An outdented line
+
    + +

    Snippets should also be robust for cut/paste operations. For example, you should not get curly smart quote marks in verbatim text: this should have "dumb" quote marks. Here are a few characters that should migrate through to a PDF unmolested: '"----"'

    + +

    If you write a very long snippet of inline code (i.e. within a <c> element) it can impinge on the right margin, since very long words will not hypenate, unless you have a dash/hypen. Such as when you use words like pneumonoultramicroscopicsilicovolcanoconiosis, parastratiosphecomyia stratiosphecomyioides, floccinaucinihilipilification, or subdermatoglyphic. For output in LaTeX we get line-breaking, and perhaps word-spacing, but we do not get hyphenation and the font is fixed-width. So not always perfect. Consider other options like <cd> or <pre> below.

    + +

    An intermediate type of verbatim text can be accomplished with the cd tag, short for code display. It allows for larger chunks of verbatim text to show up in the middle of a paragraph, but with some vertical space above and below, and centered between the margins. It can beauthored as a single lineor if you wish to have multiple lines + there is the <cline> tag + meant to model the line tag + and short for "code line" + and you may even + use a single cline + if you like to have your source closely model the visual look of the output.

    + +

    With the showspaces attribute of cd set to all there will be a visual indication of every space character, which is nice if indentation is critical. For example, + there is the <cline> tag + meant to model the line tag + and short for "code line" + and as single line authored as a single line that is not structured with cline elements.

    + +

    The pre tag is meant for use outside of paragraphs, but is otherwise very similar. The source may also be structured as a sequence of cline as in the next example, recycling content from above.

    + + 
    +                If you write a very long snippet of inline code (i.e. within
+                a <c> element) it can impinge on the right margin, since
+                very long words will not hypenate, unless you have a dash/hypen.
+                Such as when you use words like
+                pneumonoultramicroscopicsilicovolcanoconiosis,
+                parastratiosphecomyia stratiosphecomyioides,
+                floccinaucinihilipilification, or subdermatoglyphic. For output
+                in LaTeX we get line-breaking, and perhaps word-spacing, but we
+                do not get hyphenation and the font is fixed-width. So not always
+                perfect. Consider other options like <cd> or <pre> below.
+
    + +

    We use a Unicode right arrow (Unicode Character 'RIGHTWARDS ARROW', U+2192) to sometimes indicate the truncation of long lines in a text file. It is available in our usual monospace font for /PDF, but we include a use here in order to make certain that is always the case. Here: →.

    +
    + +
    + Program Listings (with <c>code</c> in the title) + +

    Sage cells can be used for Python examples, but Sage uses a mild amount of pre-parsing, so that might not be a wise decision, especially in instructional settings. We might implement Skulpt or Brython (in-browser Python) or the Python language argument to the Sage Cell Server. To see examples of authoring Sage cells, have a look at Section.

    + +

    In the meantime, program listings,listingprogram listing especially with syntax highlighting, is useful all by itself. The R language might not be a bad stand-in for pseudo-code, as it supports assignment with a left arrow and has fairly generic procedural syntax for control structures and data structures. Or maybe Pascal would be a good choice? Here is an example of R. Note in the source that the entire block of code is wrapped in a CDATA section due to the four left angle brackets. We do not recommend this technique for isolated problem characters, but it is a life-saver for situations like the XSLT code just following.

    + + + + + + + + + + + + +

    And some self-referential XSL:

    + + + + + + . + + ]]> + + +

    Matlab is a commercial language for mathematics, while Octave in an open source version. The language values of matlab and octave are somewhat interchangeable. Following is a very slighlty edited version of an example from 50 Basic Examples for Matlab.

    + + + + + a = [0:0.5:5]; % A Matlab comment here + b = 2*a.^2 + 3*a -5; + c = 1.2*a.^2+4*a-3; + subplot(1,2,1) + plot(a,b,'-or','MarkerFaceColor','g','LineWidth',2) + xlabel('X'); ylabel('Y'); legend('Curve ','Location','NorthWest') + subplot(1,2,2) + plot(a,c,'--ok','MarkerFaceColor','c','LineWidth',2) + xlabel('X'); ylabel('Y'); legend('Curve 2','Location','NorthWest') + + + +

    You can write made-up pseudo-code, but you might explain to a reader what your symbols all mean. This routine takes the m\times n marix A to reduced row-echelon form. Note that with no language specified, there is no special formatting or use of color. Note in the source the use of escaped characters for the three less-than symbols.

    + + + + input m, n and A + r := 0 + for j := 1 to n + i := r+1 + while i <= m and A[i,j] == 0 + i := i+1 + if i < m+1 + r := r+1 + swap rows i and r of A (row op 1) + scale A[r,j] to a leading 1 (row op 2) + for k := 1 to m, k <> r + make A[k,j] zero (row op 3, employing row r) + output r and A + + + +

    Look in the pretext-common.xsl file to see the strings to use to identify languages. Always all-lowercase, no symbols, no punctuation.

    + +

    Note that the above examples all have slightly different widths (theser are very evident in print with the frames). As 2-D atomic objects, to place them in the narrative requires the layout features of a sidebyside element. Then width and/or margin attributes will influence the width of the panel.

    + +

    A program may also be nested inside a listing, which behaves similar to a figure. You can provide a title, and the listing will be numbered along with tables and figures. This then makes it possible to cross-reference the listing, such as . It also removes the requirement of wrapping the program in a sidebyside. For technical reasons, the three examples above will not split across a page break in PDF output, but the placement inside a listing will allow splits, as you should see in at least one example following.

    + + + C Version of <q>Hello, World!</q> + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + + +

    A program may include line numbers.

    + + + A static Java program with line numbers + + + import javax.swing.JFrame; //Importing class JFrame + import javax.swing.JLabel; //Importing class JLabel + public class HelloWorld { + public static void main(String[] args) { + JFrame frame = new JFrame(); //Creating frame + frame.setTitle("Hi!"); //Setting title frame + frame.add(new JLabel("Hello, world!"));//Adding text to frame + frame.pack(); //Setting size to smallest + frame.setLocationRelativeTo(null); //Centering frame + frame.setVisible(true); //Showing frame + } + } + + + + +

    A program may also include highlighted lines.

    + + + A static Java program with line numbers + + + import javax.swing.JFrame; //Importing class JFrame + import javax.swing.JLabel; //Importing class JLabel + public class HelloWorld { + public static void main(String[] args) { + JFrame frame = new JFrame(); //Creating frame + frame.setTitle("Hi!"); //Setting title frame + frame.add(new JLabel("Hello, world!"));//Adding text to frame + frame.pack(); //Setting size to smallest + frame.setLocationRelativeTo(null); //Centering frame + frame.setVisible(true); //Showing frame + } + } + + + + +

    Although a program should have a code element surrounding its code, we attempt to provide one when it is missing. This next sample tests that and intentionally has no leading or trailing newline inside the program.

    + + print("Hello world") + +

    Sometimes it is nice to author an inline fragment of a program and have the styling of its text match that of a program. To do this we can use the pf tag (program fragment). It is similar to a c element, but will be syntax highlighted according to either a language or the default language for programs. Here is an example in C: printf("The cost is $%f.2", money);. And another that is in Python and tests problematic characters: print("& % $ # _ { } ~ ^ \").

    + +

    If you are discussing algorithms in the abstract (or even concretely), you can set them off like a theorem, with a number, a title and a target for cross-references. Sometimes you claim an algorithm produces something in particular, or has certain properties, such as a theoretical run time, so a proof may be included. See the discussion just preceding about (limited) options for pseudo-code.

    + + + Sieve of Eratosthenes + +

    On input of a positive integer n this algorithm will compute all the prime numbers up to, and including, n. It was named for Eratosthenes of Cyrene ( 276 BC 195/194 BC) by Nicomachus ( 60 120 CE) in Introduction to Arithmetic. (Wikipedia, 2015)

      +
    1. Input: n
      2. +
    2. Form the list of all integers from 2 to n
      3. +
    3. Set p = 2
      4. +

    4. While p < sqrt(n)

        +
      1. If present, remove from the list multiples 2p, 3p, ...
        2. +
      2. If p is now the last element of the list, stop
        3. +
      3. Otherwise, set p to the element of the list immediately after current p
        4. +

      +
      5. +
    5. Output: the remaining elements of the list
      6. +

    +     + + +

    Any element removed is a non-trivial product of two integers and hence composite. So no prime is is ever removed from the list.

    + +

    Each composite number is a multiple of some prime, and since no prime is ever removed, each composite will be removed. Hence the removed elements are precisely the set of composite numbers in the list and thus the remainder are precisely the primes on the list.

    +     +     + +

    If you are writing about system-level software, you may need to write numbers in hexadecimal or binary. Here we use a numbered, displayed equation (mathematics) and macros such as \texttt for a monospace text font, and \; for spacing/grouping the bits of the binary number. \texttt{6C2A}_{16} = \texttt{0110}\;\texttt{1100}\;\texttt{0010}\;\texttt{1010}_{2} If you use these constructions repeatedly, then some macros might be useful. It might also be beneficial for us to add some markup for such numbers used in a paragraphsend us a feature request.

    + + + +

    This is a spurious theorem to break up the run of consecutive listing so we might test the effect.

    +     +     + +

    And this is a spurious paragraph to prove that the theorem beforehand, and the proof following, are distinct from one another.

    + + +

    This is a proof that is authored detached. It is not associated with the theorem above in a way other than simply following it.

    +     + +

    A specialized version of a program listing is an interactive command/response session at a command-line, where differing fonts are used to differentiate the system prompt, the user's commands, and the system's reaction. A console session may be used by itself inside a sidebyside, or it can be wrapped in a listing to get a number and a caption. As elsewhere, you will need to escape ampersands and angle brackets (such as if you have a command using redirection), using &amp;, &lt;, and &gt; in your source.

    + + + Console Session: <c>int</c> and <c>float</c> + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + +

    Here is the plain version, some layout control. We simply place a small margin on the left (at 4% width).

    + + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + +

    If your console input exceeds more than one line, you can author it across several lines and your choice of line breaks will be reflected in the rendering. You can decide to indent lines after the first one for clarity, if desired. You can also decide if your audience needs line-continuation characters or not.

    + + + Console Session: <c>int</c> and <c>float</c> (multi-line input) + + + gcc -Wall + -o intAndFloat intAndFloat.c + + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + +

    A console may specify a continuation symbol, as a prefix on every line but the first.

    + + + + for x in range(0:20): + print(x) + print("Excellent!") + + + for x in range(0:20): + print(x) + print("Excellent!") + + + + + + + + + + + +

    Notice in the HTML version of the above example that when you highlight all, or a portion, of the listing for a cut-and-paste that the prompts are not included.

    + +

    The next listing is just absurdity, to check various characters from that are otherwise employed by the code supporting consoles, and some Latin-1 characters. We test each in a prompt, input, and output. We use (* and *) as sequences used to escape embedded commands, so we test those also.

    + + + Console Session: problematic <latex /> characters + + A backslash \ here + A backslash \ here + + A begin group { here + A begin group { here + + An end group } here + An end group } here + + An open escape sequence (* here + An open escape sequence (* here + + An end escape sequence *) here + An end escape sequence *) here + + Some quotation marks ` ' " here + Some quotation marks ` ' " here + + The rest & % $ # _ ~ ^ of LaTeX + The rest & % $ # _ ~ ^ of LaTeX + + Latin-1: ÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß + Latin-1: ÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß + + + +

    We conclude this section with a longer example of a program listing, an assembly language program from Bob Plantz, included to test a listing breaking across pages in PDF output.

    + + + A longer program listing + + + @ structPass2.s + @ Allocates two structs and assigns a value to each field + @ in each struct, then displays the values. + @ Bob Plantz - 6 July 2016 + + @ Constants for assembler + .include "theTag_struct.s" @ theTag struct defs. + .equ y,-28 @ y struct + .equ x,-16 @ x struct + .equ locals,28 @ space for the structs + + @ Constant program data + .section .rodata + .align 2 + displayX: + .asciz "x fields:\n" + displayY: + .asciz "y fields:\n" + dispAChar: + .asciz " aChar = " + dispAnInt: + .asciz " anInt = " + dispOtherChar: + .asciz " anotherChar = " + + @ The program + .text + .align 2 + .global main + .type main, %function + main: + stmfd sp!, {r4, fp, lr} @ save caller's info + add fp, sp, #8 @ our frame pointer + sub sp, sp, #locals @ for the structs + + @ fill the x struct + add r0, fp, #x @ address of x struct + mov r1, #'1 + mov r2, #456 + mov r3, #'2 + bl loadStruct + + @ fill the y struct + add r0, fp, #y @ address of y struct + mov r1, #'a + mov r2, #123 + mov r3, #'b + bl loadStruct + + @ display x struct + add r4, fp, #x @ address of x struct + ldr r0, displayXaddr + bl writeStr + ldr r0, dispACharAddr @ display aChar + bl writeStr + ldrb r0, [r4, #aChar] + bl putChar + bl newLine + ldr r0, dispAnIntAddr @ display anInt + bl writeStr + ldr r0, [r4, #anInt] + bl putDecInt + bl newLine + ldr r0, dispOtherCharAddr @ display anotherChar + bl writeStr + ldrb r0, [r4, #anotherChar] + bl putChar + bl newLine + + @ display y struct + add r4, fp, #y @ address of y struct + ldr r0, displayXaddr + bl writeStr + ldr r0, dispACharAddr @ display aChar + bl writeStr + ldrb r0, [r4, #aChar] + bl putChar + bl newLine + ldr r0, dispAnIntAddr @ display anInt + bl writeStr + ldr r0, [r4, #anInt] + bl putDecInt + bl newLine + ldr r0, dispOtherCharAddr @ display anotherChar + bl writeStr + ldrb r0, [r4, #anotherChar] + bl putChar + bl newLine + + mov r0, #0 @ return 0; + sub sp, fp, #8 @ restore sp + ldmfd sp!, {r4, fp, pc} @ restore and return + + .align 2 + @ addresses of messages + displayXaddr: + .word displayX + displayYaddr: + .word displayY + dispACharAddr: + .word dispAChar + dispAnIntAddr: + .word dispAnInt + dispOtherCharAddr: + .word dispOtherChar + + + +
    + +
    + Units of Measure + +

    Units of measure can be given xml treatment too with the quantity element. In , the siunitxsiunitx packagepackagesiunitxunits package is loaded to achive unit handling. Since that package only offers SI units, some other common units will be added by in the preamble. In HTML, the capabilities of siunitx are simulated, weakly. Note that at present, you should not attempt to use the quantity element within a math environment.

    +

    The value of gravitational constant g is 9.8. Force is measured in , also known as one . A quantity with rather ridiculous units is 23. One is the same as . You can have a unitless quantity, like 42, which may help with consistency between such numbers and units in the output. Some non-SI units are available, such as the absurd . The command \pi is recognized within mag in conversions to HTML, which is consistent with the behavior with a conversion to , for example there are + + 2\pi + + + in a full circle. This is a similar quantity with multiple occurences of \pi to test a particular template used for HTML output. It is not meant to make any sense: + + 21\pi45\pi234\pi890 + + .

    + +

    For a full list of the allowed units and prefixes, see pretext-units.xsl. If you have a need for more units, they need to be added to pretext-units.xsl in the section that deals with units which are not part of siunitx by default. Note that the mag element should come first, followed by the unit element, followed by the per element.

    + +
    + +
    + Side-By-Side Panels + + + Introduction + +

    The flow of a page is almost universally top-to-bottom. But at times you would like to go across a page, perhaps to compare items (identical content in two different languages), or to make good use of a page real estate by grouping several small items together ( images). So the sidebyside tag is strictly a layout device, though it does convey some meaning by grouping certain objects together. A variety of different objects can be put side-by-side using the sidebyside element. Specifically, figure, image, tabular, p, ol, ul, dl, pre, poem, and more. The individual components of a sidebyside are generically called panelspanels.

    + +

    As a layout device, the sidebyside does not allow a caption, is never numbered, and therefore cannot be cross-referenced. You may cross-reference whatever element holds the sidebyside, and many of the panels may be cross-referenced individually.

    + +

    As a first example, we have two single paragraphs, laid out with different widths, and slight margins on each side. The widths have been chosen experimentally to get roughly identical heights for the two paragraphs of varying length.

    + + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lorem diam, convallis in nulla sed, accumsan fermentum urna. Pellentesque aliquet leo elit, ut consequat nunc dapibus ac. Sed lobortis leo tincidunt, vulputate nunc at, ultricies leo. Vivamus purus diam, tristique laoreet purus eget, mollis gravida sapien. Nunc vulputate nisl ac mauris hendrerit cursus. Sed vel molestie velit. Suspendisse sem sem, elementum at vehicula id, volutpat ac mi. Nullam ullamcorper fringilla purus in accumsan. Mauris at nunc accumsan orci dictum vulputate id id augue. Suspendisse at dignissim elit, non euismod nunc. Aliquam faucibus magna ac molestie semper. Aliquam hendrerit sem sit amet metus congue tempor. Donec laoreet laoreet metus, id interdum purus mattis vulputate. Proin condimentum vitae erat varius mollis. Donec venenatis libero sed turpis pretium tempor.

    + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra. Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    +     +     + + + Figures with Numbers Side-By-Side + +

    Figures, or other captioned items such as tables or listings, can be placed side-by-side using the sidebyside element. The figures will be captioned and numbered as if they were part of the vertical flow of the document. For example, see and

    + +

    However, if the sidebyside is placed inside another figure, then the outer figure gets an overall caption and a regular number, while the captions of the interior items will be labelled as (a), (b), (c), etc; for example, see the subfigures in . You can also cross-reference the subfigures individually, for example: .

    + +

    The sidebyside tag can have an attribute widths that specifies a percentage width of the page for each panel of the layout. There are automatic margins by default, and any remaining width is divided evenly to space out the panels. When the margins attribute is given as auto, or in the default case, the margins provided each equal half of the inter-panel space.

    + +

    With no attributes on the sidebyside, each panel is the same width and there is no inter-panel space and no margin. For a sidebyside with a single panel, with its width specified, the panel will be centered.

    + +
    + Side-by-Side, with figures as children, automatic margin + +
    + + + a white square outlined in blue covered by a black X + +
    +
    + + +
    +     +
    + +
    + Side-by-Side, with figures as children, margin set to zero + +
    + width=50% + +
    +
    + width=25% + + +
    +     +
    + +
    + Widths calculated automatically, all defaults + +
    + + +
    +
    + + +
    +
    + + +
    +     +
    + + +
    + Interior figure + +
    +
    + Regular numbering + +
    +
    + Regular numbering + +
    +     +     + + + Images + +

    We can use the sidebyside element to put imagesimage next to each other. These will illustrate a text, but with no captions or numbers, cannot be cross-referenced. This next example has 10% margins, and the panels have widths 25% and 40%, leaving 15% computed as the one inter-panel space.

    + + + + + + +

    Now we fine-tune with different widths (which add up to 100%). The five images have been given different vertical alignments, top middle bottom top middle via the valigns attribute.

    + + + + + + + + + +

    If you want an overall caption to a group of images, but no sub-captions on your images, that is also straightforward. This example has no attributes specified. The overall figure may be cross-referenced, as

    + +
    + Two equally-spaced (identical) images + + + + +
    +     + + + Common Side-By-Side Constructions + +

    We have now seen at least one example of each of the four most common constructions involving sidebyside. Working from the exterior inward, we can go figure, sidebyside, figure, X, where X is some atomic (unnumbered) item we might use elsewhere in a document, the inner figure may be repeated with different objects X, and the figures have captions. Each figure is independently optional, leading to the four combinations in this table. Note this applies to any captioned item used inside the sidebyside, but a figure is the most flexible.

    + + + <c>sidebyside</c> and <c>figure</c> interactions + + + Outer FigureInner FigureEffect + + + AbsentAbsentLayout only, no numbers nor captions + + + AbsentPresentNumbers and captions on figure(s) + + + PresentAbsentNumber and overall caption + + + PresentPresentNumber and overall caption,sub-numbers and captions on figure(s) + + +
    +     + + + Vertical Alignment +

    Vertical alignment can be specified using the valign attribute which admits a space-separated list of top, middle, and bottom; the default is top.

    + + + + + + + + + + +
    + Middle + +
    +
    + Top + +
    +
    + Middle + +
    +     + +

    The singular version of the attribute, valign, can provide the same alignment to each panel, here we use five different widths, but all with vertical alignment of middle.

    + + + + + + + + +     + + + Text Next to Text and Images + +

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

    + + + +

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

    +     + +

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

    +

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

    +

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

    +     +

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

    +

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

    +     + +

    Similarly, text can be put next to images.

    + + +

    here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text cross reference: and math: x^2

    + +     + +

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

    + + +

    here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text; cross reference: and math: x^2

    +
    + Text next to a figure + +
    +     +     + + + Image Formats, Side-by-Sides + +

    Most of our demonstrations here use our square blue cross test image, which is provided as a PNG image. You may specify images by any of the methods described in the section on graphics, . The complete graph below is specified with no file extension, on the assumption that an SVG version exists for HTML output, and a PDF version exists for output. The second is a JPEG image that we use elsewhere for a YouTube video, but recycle here as an image provided in that format. By default, they are aligned at their tops.

    + + + + + + +

    Here are two TikZ images, authored side-by-side. The first has had its geometric portions of the original scaled down to 75%, with the effect of increasing the text, relatively, so the application in a side-by-side panel with 25% width has legible text. We caption only the second panel, which has no text adjustments. From TeXample.net.

    + + + + + + + + + + + \begin{tikzpicture}[scale=0.75] + \begin{scope}[blend group = soft light] + \fill[red!30!white] ( 90:1.2) circle (2); + \fill[green!30!white] (210:1.2) circle (2); + \fill[blue!30!white] (330:1.2) circle (2); + \end{scope} + \node at ( 90:2) {Typography}; + \node at ( 210:2) {Design}; + \node at ( 330:2) {Coding}; + \node [font=\Large] {\LaTeX}; + \end{tikzpicture} + + + +
    + Work Flow + + + + + + + + + + \smartdiagram[circular diagram:clockwise]{Edit, + pdf\LaTeX, Bib\TeX/ biber, make\-index, pdf\LaTeX} + + +
    + +

    Images by Stefan Kottwitz

      +
    • Venn Diagram
      • +
    • Work Flow
      • +

    +     +     + + + Tables Side-By-Side + +

    Tablestable can also be put side-by-side, as demonstrated below in ; naturally, subtables can be referenced as in .

    + +
    + Side-by-Side, with tables as children + + + width=50% + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    + + width=25% + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    +     +
    + +
    + Widths can be calculated automatically + + + Table with automatic widths + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    + + Table with automatic widths + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    +     +
    + + +

    If you put two table elements side-by-side without an enclosing figure, then they will use regular numbering; see Tables.

    + + + + + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    + + + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    + + + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    +     +     + + + + Tables Next to Figures + +

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

    + + + + Table next to a Figure + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    + +
    + Figure next to a Table + +
    +     + +
    + Figure and Table, with overall caption, hence sub-captioned + + + Table next to a Figure + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    + +
    + Figure next to a Table + +
    +     +
    +     + + + Tables Next to Text + +

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

    + + + + Table next to text + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +
    + +

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

    +

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

    +

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

    +     + +

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

    +

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

    +     +     +     + + + Tabular Next to Each Other + +

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

    + + + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + + CCCC + DDDD + + + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + + +     + + + Lists in Side-by-Sides + +

    A regular list normally belongs in a p but it can be placed unadorned into a panel of a side-by-side, as demonstrated below in . You can also put named lists into a panel, and then the title, introduction, conclusion, and caption will behave as expected, along with a number that might be used in a cross-reference (), or perhaps we might cross-reference by title, .

    + +
    + Two named lists + + + Sea Life + +

    Dr. Seuss again.

    +     +
      +
    • One fish
      • +
    • Two fishNot fishes
      • +
    • Red fish
      • +
    • Blue fish
      • +
    +     + + Color Shades + colorsshades +
      +

    1. Bluein many shades

        +
      1. Light
        2. +
      2. Navy
        3. +
      3. Royal
        4. +

      2. +

    2. Red

        +
      1. Maroon
        2. +
      2. Pink
        3. +
      3. Shocking
        4. +

      3. +
    + +

    This ends our example.

    +     +     +     +
    + +

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

    + + + + Sea Life + +

    Dr. Seuss again.

    +     +
      +
    • One fishNo more fishes
      • +
    • Two fish
      • +
    • Red fish
      • +
    • Blue fish
      • +
    +     + + Color Shades + colorsshades +
      +

    1. Blue

        +
      1. Light
        2. +
      2. Navy
        3. +
      3. Royal
        4. +

      2. +

    2. Reda really nice color

        +
      1. Maroon
        2. +
      2. Pink
        3. +
      3. Shocking
        4. +

      3. +
    + +

    This ends our example.

    +     +     +     + +

    We also need to test a sidebyside in a list. The widths are now relative to the space given over to an indented item. Here we nest and nest and nest and nest to get a big, obvious indentation, and then include an image at 100% width and no margin. In your mind's eye, or with a ruler, check that the image spans all the way over to the right margin.

      +

    1. This is

        +

      1. a very

          +

        1. wide

            +
          1. +

            rectangle

            + +
            2. +

          2. +

        2. +

      2. +

    +     + + + Stacking: Back to Vertical Flow + +

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

    + +

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

    + + + +

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

    + +     + + +

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

    +     +     + +

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

    + + + + +
      +
    • Blue
      • +
    • Square
      • +
    • Geometric
      • +
    +

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

    +     +     + +

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

    + + + +

    Paragraph one.

    + +

    Paragraph two.

    + + + + + + + 1111 + 2222 + + + aaaa + bbbb + + + AAAA + BBBB + + +     + +     + +

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

    + +

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

    + +
    + Experimental results collected in a figure + + + + i + t_i + x_i + y_i + + 00.000.00000.5000 + 10.200.10000.4800 + 20.400.19600.4560 + 30.600.28720.4295 + 40.800.37310.4027 + 51.000.45360.3783 + 61.200.52930.3591 + 71.400.60110.3480 + 81.600.67070.3474 + 91.800.74020.3603 + + 102.000.81230.3900 + + + +

    This set of values and this plot have nothing to do with each other. You'll recognize that they've been liberated from earlier in this work.

    +

    Step back and simply examine how the pieces all fit together within a figure.

    +     +     +
    + + + Bully Pulpit + +

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

    + +

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

    +     +     + + + Other Panels + +

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

    + + +
      +

    1. Footnotes: Fermat allusion at .

      2. +

    2. Examples: Mystery derivative at .

      3. +

    3. Definition-like: A mathematical statement with no proof .

      4. +

    4. Figures: An early plot, Figure.

      5. +
    +
      +

    • Footnotes: Fermat allusion at .

      • +

    • Examples: Mystery derivative at .

      • +

    • Definition-like: A mathematical statement with no proof .

      • +

    • Figures: An early plot, Figure.

      • +
    +     + +

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

    + + +

    here is some text, and here is an equation that contains alignment. + f(x)&= x^2+3x+2 + &=(x+2)(x+1) +

    + +

    here is some text, and here is an equation that contains alignment. + f(x)&= x^2+3x+2 + &=(x+2)(x+1) +

    +

    here is some text, and here is an equation that contains alignment. + f(x)&= x^2+3x+2 + &=(x+2)(x+1) +

    +     +     + +

    Pre-formatted text may be included by using the pre element. This content is horizontally-rigid, so as the author, you need to be sure to provide enough width for the panel to contain the content. It is easy to see the boundary of the panels when rendered in HTML since there is a background that fills the panel.

    + + +
    + Hello, World! in Pascal and C++ + + 
    +                            program HelloWorld;
+                            begin
+                              WriteLn('Hello, world!');
+                            end.
+
    + 
    +                        #include
+
+                        int main()
+                        {
+                            std::cout << "Hello, world!";
+                            return 0;
+                        }
+
    +     +
    + +
    + A graph defined by data (from Keller and Trotter's Applied Combinatorics) + + 
    +                            graph1.txt
+                            9
+                            6 2
+                            1 5
+                            1 7
+                            6 8
+                            9 1
+                            4 3
+                            5 7
+                            1 3
+                            5 9
+                            7 9
+
    + +     +
    +     + + + Poems as Side-By-Side Panels + + +

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

    + + + + Fire and Ice + Fire and Ice, Frost + Robert Frost + + Some say the world will end in fire, + Some say in ice. + From what I've tasted of desire + I hold with those who favor fire. + But if it had to perish twice, + I think I know enough of hate + To say that for destruction ice + Is also great + And would suffice. + + + +

    You might have several things to say about a poem and you could use a sequence of paragraphs immediately adjacent.

    +

    This is a second paragraph of commentary.

    +     +     + +

    Poems are not horizontally-rigid, but they are not perfectly horizontally-flexible either. The left copy of this next poem is in a panel roughly 2/3 the width of the page and fits there. The right copy has the first five lines and is in space about half the previous width, and you can see the lines being wrapped with obvious indentation. So you can constrain the width of a poem if you do not mind the additional indentation. (Recognize that this example is a bit extreme.)

    + + + + Sonnet to Liberty + Sonnet to Liberty, Wilde + Oscar Wilde + + Not that I love thy children, whose dull eyes + See nothing save their own unlovely woe, + Whose minds know nothing, nothing care to know, + But that the roar of thy Democracies, + Thy reigns of Terror, thy great Anarchies, + Mirror my wildest passions like the sea, + And give my rage a brother! Liberty! + For this sake only do thy dissonant cries + Delight my discreet soul, else might all kings + By bloody knout or treacherous cannonades + Rob nations of their rights inviolate + And I remain unmoved-and yet, and yet, + These Christs that die upon the barricades, + God knows it I am with them, in some things. + + + + Sonnet to Liberty + Oscar Wilde + + Not that I love thy children, whose dull eyes + See nothing save their own unlovely woe, + Whose minds know nothing, nothing care to know, + But that the roar of thy Democracies, + Thy reigns of Terror, thy great Anarchies, + + + + +     + + + Side-By-Side Groups + +

    A side-by-side group, sbsgroup, is still in development. (Notably, subcaptions do not behave as expected.) It is a sequence of sidebyside, which may conceivably use the same margins, widths and vertical alignments for each horizontal run of panels. Attributes on the sbsgroup are global to the group's enclosed sidebyside, and will be used by each contained sidebyside. If attributes are present on an individual sidebyside, they override the global values. The next two examples demonstrate some of this behavior, in a limited way.

    + +
    + Overall SBS Group + + +

    One.

    +

    Two.

    +

    Three.

    +     + +

    Four.

    +

    Five.

    +

    Six.

    +     +     +
    + +

    A long poem, when placed into a sidebyside will not fit onto a physical page and will not break across pages. With a sbsgroup you can put each stanza (say) into its own sidebyside and place something (commentary) next to it. We include the title with the first stanza and the author with the last stanza. This device can also be useful to attach commentary to specific stanzas.

    + + + + + The Stolen Child + Stolen Child, The, Yeats + + Where dips the rocky highland + Of Sleuth Wood in the lake, + There lies a leafy island + Where flapping herons wake + The drowsy water-rats; + There we've hid our faery vats, + Full of berries + And of reddest stolen cherries. + Come away, O human child! + To the waters and the wild + With a faery, hand in hand, + For the world's more full of weeping than you + can understand. + + + +

    Some commentary on Stanza One.

    +     +     + + + + + Where the wave of moonlight glosses + The dim grey sands with light, + Far off by furthest Rosses + We foot it all the night, + Weaving olden dances, + Mingling hands and mingling glances + Till the moon has taken flight; + To and fro we leap + And chase the frothy bubbles, + While the world is full of troubles + And is anxious in its sleep. + Come away, O human child! + To the waters and the wild + With a faery, hand in hand, + For the world's more full of weeping than you + can understand. + + + +

    Some commentary on Stanza Two.

    +     +     + + + + + Where the wandering water gushes + From the hills above Glen-Car, + In pools among the rushes + That scarce could bathe a star, + We seek for slumbering trout + And whispering in their ears + Give them unquiet dreams; + Leaning softly out + From ferns that drop their tears + Over the young streams. + Come away, O human child! + To the waters and the wild + With a faery, hand in hand, + For the world's more full of weeping than you + can understand. + + + +

    Some commentary on Stanza Three.

    +     +     + + + + William Butler Yeats + + Away with us he's going, + The solemn-eyed: + He'll hear no more the lowing + Of the calves on the warm hillside + Or the kettle on the hob + Sing peace into his breast, + Or see the brown mice bob + Round and round the oatmeal-chest. + For he comes, the human child, + To the waters and the wild + With a faery, hand in hand, + From a world more full of weeping than he + can understand. + + + +

    Some commentary on Stanza Four.

    +     +     + +     + +

    The main rationale for sbsgroup is to layout a grid of items, and by placing the layout parameters on the sbsgroup element, the items can line up across sidebyside and subcaptioning can run across the whole group. So, for example, if you have images to compare by placing in a grid, then making them all the same size, or of the same aspect ratio, can help with the overall consistency.

    + +

    This example has three sidebyside, each with four figure containing an identical image. Since the images are identical and the width is set to 20% they should all line up nicely with little effort. Since the default for margins is automatic, the remaining 20% of the overall width will be used for three inter-panel spaces of 5% and two margins of 2.5% each. Note the numbering of these as independent figures. We have left the captions empty for reasons of space, but you could add more information. Note that in print, a page break is allowed between any two of the sidebyside and cannot be suppressed.

    + + + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     +     + +

    We recycle the prior sbsgroup but now put it in its own overall figure. That will allow a caption for the whole group, and will cause the twelve figures to be subcaptioned. Except the subcaptioning is not implemented. Soon.

    + +
    + Twelve images, arranged in a grid + + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     +     +
    + +

    One more test. We override the spacing and vertical alignments of the middle sidebyside. Note that it is easy to make a panel so skinny that even the smallest possible caption does not fit in the width.

    + + + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     +     + +

    The following is a sbsgroup full of operation tables. Once upon a time it was rather cramped vertically in HTML output, but Andrew Scholer improved the spacing at GitHub #2387. The example is from Valerio Monti.

    + +
    + Tabelle delle operazioni per 1\le n\le 4 + + +

    + + \begin{array}{c|c} + + \amp \class[1]{0} \\ + \hline + \class[1]{0} \amp \class[1]{0} + \end{array} + +

    +

    + + \begin{array}{c|c} + \cdot \amp \class[1]{0} \\ + \hline + \class[1]{0} \amp \class[1]{0} + \end{array} + +

    +     + + +

    + + \begin{array}{c|cc} + + \amp \class[2]{0} \amp \class[2]{1} \\ + \hline + \class[2]{0} \amp \class[2]{0} \amp \class[2]{1}\\ + \class[2]{1} \amp \class[2]{1} \amp \class[2]{0} + \end{array} + +

    +

    + + \begin{array}{c|cc} + \cdot \amp \class[2]{0} \amp \class[2]{1} \\ + \hline + \class[2]{0} \amp \class[2]{0} \amp \class[2]{0}\\ + \class[2]{1} \amp \class[2]{0} \amp \class[2]{1} + \end{array} + +

    +     + + +

    + + \begin{array}{c|ccc} + + \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ + \hline + \class[3]{0} \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ + \class[3]{1} \amp \class[3]{1} \amp \class[3]{2} \amp \class[3]{0} \\ + \class[3]{2} \amp \class[3]{2} \amp \class[3]{0} \amp \class[3]{1} \\ + \end{array} + +

    +

    + + \begin{array}{c|ccc} + \cdot \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ + \hline + \class[3]{0} \amp \class[3]{0} \amp \class[3]{0} \amp \class[3]{0} \\ + \class[3]{1} \amp \class[3]{0} \amp \class[3]{1} \amp \class[3]{2} \\ + \class[3]{2} \amp \class[3]{0} \amp \class[3]{2} \amp \class[3]{1} \\ + \end{array} + +

    +     + + +

    + + \begin{array}{c|cccc} + + \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ + \hline + \class[4]{0} \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ + \class[4]{1} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \amp \class[4]{0} \\ + \class[4]{2} \amp \class[4]{2} \amp \class[4]{3} \amp \class[4]{0} \amp \class[4]{1} \\ + \class[4]{3} \amp \class[4]{3} \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \\ + \end{array} + +

    +

    + + \begin{array}{c|cccc} + \cdot \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ + \hline + \class[4]{0} \amp \class[4]{0} \amp \class[4]{0} \amp \class[4]{0} \amp \class[4]{0} \\ + \class[4]{1} \amp \class[4]{0} \amp \class[4]{1} \amp \class[4]{2} \amp \class[4]{3} \\ + \class[4]{2} \amp \class[4]{0} \amp \class[4]{2} \amp \class[4]{0} \amp \class[4]{2} \\ + \class[4]{3} \amp \class[4]{0} \amp \class[4]{3} \amp \class[4]{2} \amp \class[4]{1} \\ + \end{array} + +

    +     +     +
    +     + + + Testing a Side-By-Side First + +

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

    + + + + +

    Here is text block 1

    +

    Here is text block 2

    +     +     + +     + + + + +

    Here is text block 1

    +

    Here is text block 2

    +     +     +     + +

    And a sbsgroup in similar circumstances.

    + + + + + +

    Here is text block 1

    +

    Here is text block 2

    +     + +

    Here is text block 3

    +

    Here is text block 4

    +     +     +     +     + + + First Child of a Paragraphs + + + + A + B + + + C + D + + + + + \alpha + \beta + + + \gamma + \delta + + + + + +     + + + Testing Styling of Related Elements + +

    This subsection has non-side-by-side structures, to aid with the effects of styling decisions across the range of possibilities. First a figure with a caption holding a scaled image and a cross-reference for knowl testing: .

    + +
    + A traditional figure + + +
    +     +
    + +
    + Side-by-Side Gallery + +

    This subsection attempts to survey all the possible items that can be placed into a sidebyside element, in various combinations. While intended to be exhaustive across contents, it does not test all possibilities, and is not meant to be instructive (see for that). The layout is identical for each sidebyside, 5% margins, panel widths of 40% and 45%, leaving 5% for the space between the panels. The vertical alignment is left at the default, top.

    + +

    We begin with simpler atomic items. If necessary, comments follow each.

    + +
    + Single p (left), stack (right) + +

    Vestibulum sit amet est non lacus accumsan iaculis aliquam nec leo. Maecenas placerat consequat quam, a lobortis odio convallis vitae. Curabitur sagittis, risus non suscipit pulvinar, enim tortor posuere purus, id dignissim sapien sapien non dui. Vestibulum ultrices, enim a ornare consectetur, nisl est iaculis arcu, eget scelerisque nunc magna a nisl. Vestibulum vestibulum ante sit amet ex vulputate, eu facilisis sapien tempor.

    + +

    Aliquam dui nisi, pharetra id enim vel, imperdiet laoreet risus. Nunc convallis elit eu erat imperdiet tincidunt. Sed eget augue et nunc mollis tempor. Suspendisse luctus elit non lorem scelerisque, nec lacinia lectus dictum.

    +

    Vivamus ut orci nisl. Donec eleifend ultricies tortor, a pellentesque neque dignissim in. Praesent maximus, augue eu pretium auctor, dolor quam feugiat augue, ut vulputate nunc eros vitae massa. Phasellus quis ante quis est venenatis dapibus eget luctus ipsum.

    +     +     +
    + +
    + An ol with simple items, a ul with items with paragraphs + +
      +
    1. Blue
      2. +
    2. Red
      3. +
    3. Green
      4. +
    4. Purple
      5. +
    5. Violet
      6. +
    6. Brown
      7. +
    +
      +

    • Vestibulum sit amet est non lacus accumsan iaculis aliquam nec leo. Maecenas placerat consequat quam, a lobortis odio convallis vitae.

      +

      Curabitur sagittis, risus non suscipit pulvinar, enim tortor posuere purus, id dignissim sapien sapien non dui.

      • +

    • Vestibulum ultrices, enim a ornare consectetur, nisl est iaculis arcu, eget scelerisque nunc magna a nisl.

      +

      Vestibulum vestibulum ante sit amet ex vulputate, eu facilisis sapien tempor.

      • +
    +     +
    + +
    + A program and a console + + + + n_loops <- 10 + x.means <- numeric(n_loops) + for (i in 1:n_loops){ + x <- as.integer(runif(100, 1, 7)) + x.means[i] <- mean(x) + } + x.means + + + + gcc -o intAndFloat intAndFloat.c + ./intAndFloat + + 19088743 (integer) and 19088.742188 (float) + + + + +
    + +

    Note that these two chunks of verbatim text will very likely exceed the right side of a too-skinny panel. We have severly edited these two examples from previous appearances just to fit here.

    + +
    + An poem and a tabular + + + To A Friend Whose Work Has Come To Nothing + William Butler Yeats + + Now all the truth is out, + Be secret and take defeat + From any brazen throat, + For how can you compete, + Being honour bred, with one + Who, were it proved he lies, + Were neither shamed in his own + Nor in his neighbours' eyes? + Bred to a harder thing + Than Triumph, turn away + And like a laughing string + Whereon mad fingers play + Amid a place of stone, + Be secret and exult, + Because of all things known + That is most difficult. + + + + + OrganismClassification + + TroutFish + MonkeyMammal + CrowBird + CriminiFungus + BeeInsect + + +
    + +

    A tabular can exceed the width of its panel in print, while in HTML it may reflow individual cells to stay within a panel, depending on their contents.

    + +
    + A pre, and a pre employing cline + + 
    +                    Vestibulum sit amet est non
+                        lacus accumsan iaculis
+                    aliquam nec leo. Maecenas
+                    placerat consequat quam, a
+                    lobortis odio convallis
+                    vitae.
+
    + 
    +                        Vestibulum sit amet est non
+                            lacus accumsan iaculis
+                        aliquam nec leo. Maecenas
+                            placerat consequat quam,
+                        a lobortis odio convallis
+                                vitae.
+
    +     +
    + +

    Be aware that the lines of pre can spill outside of its panel without any word-wrapping. So you may need to vary panel widths or rearrange line breaks manually. Page width is a scarce resource.

    + +
    + An identical image, twice + + + + +
    + +

    Images will scale to fill their panel's width. We provide no services to change the aspect ratio of your images, that is your responsibility to accomplish elsewhere. This rectangular image will have slightly different widths, and so will be slightly deeper in the right panel (at a 45:40 ratio). Remember, vertical alignment is at the top.

    + +

    Now we turn to captioned items: figure, table, listing, and the anomalous named list, list, whose future is uncertain. We test subcaptions here. Note that many different atomic items can go in a figure, and largely they will behave in a sidebyside much as they do when placed in a panel all by themselves ( captionless).

    + +
    + A figure and a table + +
    + A Rectangular Test Image + +
    + + Classifying Organisms + + + OrganismClassification + + TroutFish + MonkeyMammal + CrowBird + CriminiFungus + BeeInsect + +
    +     +
    + +
    + A listing and a list + + + A statistical computation + + + n_loops <- 10 + x.means <- numeric(n_loops) + for (i in 1:n_loops){ + x <- as.integer(runif(100, 1, 7)) + x.means[i] <- mean(x) + } + x.means + + + + + Colors Again + +

    We have named list of colors.

    +     +
      +
    1. Blue
      2. +
    2. Red
      3. +
    3. Green
      4. +
    4. Purple
      5. +
    5. Violet
      6. +
    6. Brown
      7. +
    + +

    That was nice.

    +     +     +     +
    + +

    Now we have some more interactive elements.

    + + + + + +

    Videos can be placed quite compactly for HTML output, but we display a fair amount of information for a YouTube video in print, and therefore two videos side-by-side gets pretty crowded. The examples above have the bare minimum amount of information attached (not in an overarching figure), and the bare amount which which is displayed in print. We could relax our common spacing to make it a bit better. Read about side-by-side groups (sbsgroup) and experiment with stacking several sub-captioned videos into an overall captioned figure (). For other examples see and .

    +
    + +
    + Open Problems + +

    Like for mathematical research. Experimental as of 2023-07-06.

    + + + +

    Solve the Riemann HypothesisFootnotes were once incomplete on open problems. and provide a short proof of Fermat's Last Theorem.

    +     +     + +
    + +
    + Poetry + +

    There is support for poems via the poempoem tag, which can contain a title, author and multiple stanza, each containing multiple line. See the source of the following poem for an example of the exact arrangement. Note how the first quote crosses two line elements and how this is handled in the source. There are many very flexible options for horizontal alignment and indentation. Further extensive examples, constructed by Jahrme Risner, are available in the example Humanities document.

    + + + The Charge of the Light Brigade + Charge of the Light Brigade, The, Tennyson + Alfred Lord Tennyson + + + Half a league, half a league, + Half a league onward, + All in the valley of Death + Rode the six hundred. + Forward, the Light Brigade! + Charge for the guns! he said: + Into the valley of Death + Rode the six hundred. + + + + Charge of the Light Brigadesecond stanza + Forward, the Light Brigade! + Was there a man dismay'd? + Not tho' the soldier knew + Someone had blunder'd: + Theirs not to make reply, + Theirs not to reason why, + Theirs but to do and die: + Into the valley of Death + Rode the six hundred. + + + +

    Ken Levasseur, who teaches at UMass-Lowell, has limericks in his Applied Discrete Structures textbook. When he reported that they were unable to be the target of a cross-reference, Karl-Dieter Crisman penned the following limerick.

    + + + Karl-Dieter Crisman + + + CS students studying in Lowell + Required their books to have soul. + Along came their teacher + Who asked for this feature: + A poem that lives in a knowl. + + + +

    And when yours truly tried to joke about poetry on GitHub CLI #182, back came:

    + + + Steven Clontz + + + There once was a maintainer named Rob + Who told bad jokes while on the job + While they were lame + You could say the same + Of Steven's limericks that cause you to sob + + + +
    + +
    + Atomic Objects + + +

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

    +     + + + + + <tag>image</tag> + +

    An image can be placed in five different ways:

      +
    1. all by itself, as a peer of p typically, with layout control,
      2. +
    2. inside a figure, earning a number and caption,
      3. +
    3. inside a sidebyside, with size and layout configured,
      4. +
    4. inside a figure inside a sidebyside, with size and layout configured, with a number and caption, and
      5. +
    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),).
      6. +
    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.

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

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

    + + +
    + NZ Landscape + +
    +
    + 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: .

    + +
    + Amalgamation of Scapes + +
    + NZ Landscape + +
    +
    + New Zealand Terrascape + +
    +     +
    + +

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

      +
    1. + +
      2. +
    2. + +
      3. +
    +

    + +

    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.

    +
    + Rotated Images + + +
    + rotate="180" + +
    +
    + rotate="15" +
    +     +
    + +

    For pdf output destined for print, 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.

    + +
    + This landscape figure will be rotated so the long edge is vertical, and will appear on its own page in print PDF output. + +
    +
    + Wide figure containing a sidebyside containing a rotated image. This will be rotated and appear on its own page in print PDF output. + +
    + Quack + +
    +
    + Propulsion System + +
    +     +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +     + + + <tag>video</tag> + +

    An video can be placed in five different ways:

      +
    1. all by itself, as a peer of p typically, with layout control,
      2. +
    2. inside a figure, earning a number and caption,
      3. +
    3. inside a sidebyside, with size and layout configured,
      4. +
    4. inside a figure inside a sidebyside, with size and layout configured, with a number and caption, and
      5. +
    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),).
      6. +
    Examples of each, and more.

    + +

    Videos can be realized in many forms, and can come from a variety of sources. See 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.

    + +     + + + <tag>program</tag>, <tag>console</tag> + +

    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. +
    2. inside a listing, earning a number and caption, with layout control
      3. +
    3. inside a sidebyside, with size and layout configured
      4. +
    4. inside a sidebyside, with size and layout configured, and inside a figure
      5. +
    5. inside a sidebyside, with size and layout configured, with each inside a listing, earning different numbers
      6. + +
    6. inside a figure inside a sidebyside inside a listing, with size and layout configured, with a number and title, but now sub-numbered ((a), (b), (c),).
      7. +
    Examples of each, and more.

    + +

    Programs can be realized in many forms, and can come from a variety of sources. See 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.

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

    + + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + +

    And a console element, also with no layout control.

    + + + gcc -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + +

    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.

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

    + + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + +

    A longer console, with margins so significant the appearance is ill-advised.

    + + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + +

    Two listing, with title, and no layout control.

    + + + Hello, World! in C + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + + + + A console session on a Raspberry Pi + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + +

    Same two listing, but now with layout control on the program and console.

    + + + Hello, World! in C + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + + + + A console session on a Raspberry Pi + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + +

    This sidebyside gives each panel a 30% width. The remaining 10% is apportioned for margins and separation.

    + + + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + + 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.

    + +
    + Some Code Samples + + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + + 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 + + + +
    + + + +

    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.

    + + + + Hello! + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + + + Raspberry Pi + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + + +

    And again, the two-panel sidebyside of listing, but now inside a figure that has a number and a title. And then the listing are sub-numbered as (a) and (b).

    + + +
    + Two Code Listings + + + Hello! + + + /* Hello World program */ + + #include<stdio.h> + + main() + { + printf("Hello, World!"); + } + + + + + Raspberry Pi + + gcc -Wall -o intAndFloat intAndFloat.c + ./intAndFloat + + The integer is 19088743 and the float is 19088.742188 + + + + + +
    +     + + + <tag>tabular</tag> + +

    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. +
    2. all by itself, as a peer of p typically, with explicit layout control,
      3. +
    3. inside a table, earning a number and title,
      4. +
    4. inside a sidebyside, with size and layout configured,
      5. +
    5. inside a table inside a sidebyside, with size and layout configured, with a number and title, and
      6. +
    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),).
      7. +
    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 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: , , . 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.

    + + + + StateOnly 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,223Wow! 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.

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

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

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

    + + + 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 we make no attempt to control the width, and so it will extend into the margins. In 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 we have set the width explicity to 100% and so it should be identical to the automatic width case just prior.

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

    + + + + West Coast + + + 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 + + +
    + + Function Values + + + x + f(x) + + + 3 + 9.734 + + + 5 + 2.175 + + +
    +     + +

    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.

    + +
    + Geography and Mathematics + + + West Coast + + + 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 + + +
    + + Function Values + + + x + f(x) + + + 3 + 9.734 + + + 5 + 2.175 + + +
    +     +
    +     +
    + +
    + Advanced Numbering + + +

    This section demonstrates the numberingnumbering patterns used throughout . There are five subsections. Two intermediate subsections each have two subsubsections. This creates a total of seven divisions that are leaves of the document tree. In each leaf we have placed two numbered theorems, for a total of fourteen. There is no real content, this is just a demonstration.

    + +

    Use values of 0 through 3 for the numbering.theorems.level parameter to see how these numbers change accordingly. It is easiest to compare if you use chunk.level < 2 so the theorems all land on the same page if you are previewing in HTML.

    +     + + + One + +

    A document leaf.

    + + + First Theorem + Cauchy +

    No statement.

     +     + + + + + Second Theorem + Bunyakovsky +

    No statement.

     +     + +     + + + Two + +

    Further subdivided.

     + + + Uno + +

    A document leaf.

    + + + First Theorem! + Schwarz +

    No statement.

     +     + + + Second Theorem? + Inequality +

    No statement.

     +     + +     + + + Dos + +

    A document leaf.

    + + + First Theorem? +

    No statement.

     +     + + + Second Theorem! +

    No statement.

     +     + +     + +     + + + Three + +

    A document leaf.

    + + + First Theorem +

    No statement.

     +     + + + Second Theorem +

    No statement.

     +     + +     + + + Four + + +

    Further subdivided. We include two theorems as numbered items in the introduction to test their numbers, which should always be logical.

    + + + Good Numbered Theorem One +

    No statement.

     +     + + + Good Numbered Theorem Two +

    No statement.

     +     + +     + + + Uno + +

    A document leaf.

    + + + First Theorem +

    No statement.

     +     + + + Second Theorem +

    No statement.

     +     + +     + + + Dos + +

    A document leaf.

    + + + First Theorem +

    No statement.

     +     + + + Second Theorem +

    No statement.

     +     + +     + + +

    Conclusion now. We include two theorems as numbered items in the conclusion to test their numbers, which are sometimes totally illogical and are inconsistent across output formats. To see the effect, set the level for numbering theorems to 3. See this GitHub Issue #139 for details.

    + + + Bad Numbered Theorem One +

    No statement.

     +     + + + Bad Numbered Theorem Two +

    No statement.

     +     + +     +     + + + Five + +

    A document leaf.

    + + + First Theorem +

    No statement.

     +     + + + Second Theorem +

    No statement.

     +     + +     + + + Theorems in This Section + +

    We have a lot of theorems in this section, so we illustrate including an automatic list of these here. We use the elements attribute to limit the list to theorem elements, and we use the scope attribute to limit the list to this section. You can use an introductory p like this one, or not. The list gets no title or visual separation, so use the usual subdivision elements to make that happen. The elements attribute can be a space-delimited list of many different elements. This list should not include the Fundamental Theorem of Calculus, Theorem. See a slightly different example in .

    + + +     + + + A Title with ] a Right Bracket + +

    has trouble with brackets that end up inside optional arguments, so this subsection title is only a check on the defense against that. And now an exercise with a title that could really be a problem.

    + + + A Right Brace } and a Right Bracket] + + +

    The right brace is is used as a grouping character in so this is just a test of its behavior in titles.

    +     + +

    A faux hint to get this exercise to migrate into a solutions.

    +     +     + +     + + + A Title with } a Right Brace + +

    And now a right brace in a division title.

    + +     + + + A Title with <m>a]b</m> a Math Right Bracket + +

    And now a right bracket within math in a division title.

    +

    We do not test a right brace within math, since it should be escaped, as is normal practice.

    +     + + + Just an Exercise + + + An Extraneous Exercise + + +

    This exercise is here just as a test of the solutions division coming next. So it is serving a purpose, even if it is not apparent.

    +     + +

    A hint, so this exercise looks identical in structure to the one in the previous subsection.

    +     +     +     + + + +

    This is a solutions division, which will be a peer of the other subsection in this section. The default behavior is to look to the parent division (a section here) and collect all the hints, answers, and solutions from every exercise (and friends) inside this containing division. (There are just two, similar inline exercise.)

    + +

    But instead of the default, we employ a scope attribute to define the parent division of the exercises whose solutions will be shown. In this example we specify the subsection that is two back, the one which tests brackets in titles.

    +     +     +
    + +
    + Customizations + + + Renaming Document Parts, Plus This Is A Really Long Title So That We Can Test How Well It Reacts To The Right Margin And Wraps Around To Form A Couple Of Lines, Plus How It Sits Relative To The Number Of The Subsection + +

    Namesname for various parts of a document are determined exactly once for each language, ensuring consistency and saving you the bother of always typing them in.

    + +

    However, you may want to have Conundrumsconundrumrepurposed from proposition in your document and you have no use for any Propositions. + conundrumrepurposed from proposition + rename an environmentconundrum + So you can repurpose the proposition tag to render a different name. Or you might have a Lab Manual and want to rename subsection as Activity. See the docinfo portion of this sample article to see how this is done, in concert with the example below. Note that you may provide versions for different languages by specifying a xml:lang attribute.

    + + + Smith + +

    Aah, this is confusing!

    +     +     + + + Important Notes + +

    If you are renaming many parts of your document, then you may not understand the design philosophy of . In particular, you should not be doing a wholesale shuffle of part, chapter, section, This feature is intended for very limited use and is not considered best practice.

    + +

    This feature could also be abused to provide a comprehensive suite of translations into a language not yet supported. If so, please contact us about moving your translations into for the benefit of all. Thanks.

    +     + +     + + + Customizing Phrases + +

    There is a facility for providing alternate text for small or short phrases, or other components of a paragraph. Here we just provide some tests. Each is inside of a block quote to identify it clearly.

    + +

    We have two auxiliary files of custom elements, so you need to adjust the publisher file to specify the second one during testing. First, a very simple string as the variation.

    + +
    +

    This is an article about .

    +
    + +

    Now a string which is partially text and partially simple markup.

    + +
    +

    We like to write with .

    +
    + +

    And a mildly more complicated structure (a list) as the variable text.

    + + +
    +

    Some of our favorite colors are

    +
    + +

    A cross-reference to test, since context is critical.

    + +
    +

    See also .

    +
    + +

    The URLs used as a replacement have the visual attribute which is also managed by the assembly pre-processor to provide a footnote. So this is a good test of the organization of the multiple passes employed by the pre-processor.

    + +
    +

    A URL that should have a footnote: .

    +
    +     +
    -
    - <c>veil</c> Testing - -

    - The function f(t) = e^{-t} satisfies the differential equation - f'(t) = -f(t), - which is characteristic of exponential decay. -

    +
    + MyOpenMath Interactive Problems -

    - This sentence contains a simple hidden phrase and continues normally. -

    +

    This is a test with two inline exercises containing MyOpenMath (MOM) problems. None of this is in the schema, and all of it is subject to change.

    -

    - Here is a veil wrapping emphasized hidden text within an emphasized span. -

    + + Negative Numbers and Exponents + +

    This is an introduction, providing articulation between the MOM problem and the contents of the text. For example, you might cross-reference a result or example given previously.

    +     + +     -

    - You can also hide inline math like f(t) = e^{-t} without breaking the flow. -

    + + A Statistical Test + +

    This is an introduction, providing articulation between the MOM problem and the contents of the text. For example, you might cross-reference a result or example given previously.

    +     + +     -

    - A slightly more complex example with a link: - Learn more at PreTeXt or explore g(x) = x^2 + 1. - - Learn more at PreTeXt. - -

    + + With an image + +

    This is an introduction, providing articulation between the MOM problem and the contents of the text. For example, you might cross-reference a result or example given previously.

    +     + +     -

    - Testing long hidden text: - - This is a very long phrase that includes emphasis, - inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. - -

    + + Geometry of a Cone + +

    This problem has two figures. They come from the MOM server as SVG files. These image files are then converted to PDF for static formats like PDF, and into PNG for formats like Kindle.

    +     + +     +
    -

    - Testing long hidden text with p tag: - + +

    + Ancillaries + +

    Once your content is in place, you can begin thinking about various useful derivative works. A natural example for a textbook is an Instructor's Version. Various switches for hints, answers, and solutions to exercises would allow you to include more of these for the use of just an instructor. Here we also demonstrate the commentary element. It is similar in many ways to a paragraphs in that it can be placed within any division and must be titled. The main difference is that it is not displayed by default, so you must set the string parameter commentary to the value yes. Other distinctions are:

      +
    • Since it is elective, you need to be careful about cross-references to and from a commentary. It is highly likely that you will want to make cross-references within a commentary pointing to other portions of your text, and this is always a good idea. You will want to avoid making cross-references to a commentary from other parts of the text, with the exception of a cross-reference that originates within some commentary.
      • +
    • Numbered items are prohibited within a commentary, such as a figure or a theorem. Doing so would disrupt consecutive numbering in different versions, with or without, commentary included. Numbered equations are not prohibited in the schema, but should definitely be avoided anyway.
      • +

    + +

    After some nonsense text in a paragraph, there is a commentary with two paragraphs. For the online version of this sample article, we have enabled commentaries. But if you are experimenting yourself, you will want to be aware if you are enabling these or not.

    + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio orci, ullamcorper eget quam et, viverra tristique magna. Integer auctor arcu a sapien pulvinar elementum. Mauris porta, nulla id molestie dignissim, urna dolor rutrum ligula, eu elementum odio nisl sed libero. Nulla nec libero sem.

    + +

    Sed justo ex, efficitur dictum risus nec, eleifend consequat nibh. Proin rutrum mi id metus viverra blandit. In vel ligula a nibh aliquam pellentesque. Duis placerat purus et ligula sollicitudin, sodales consectetur ante viverra.

    + +

    Mauris fringilla nulla arcu, sagittis ultrices quam malesuada eleifend. Proin tristique elit eu bibendum tincidunt. Donec commodo lorem in magna egestas, vitae malesuada velit ornare. Pellentesque finibus neque in venenatis tristique. In id blandit est, in euismod urna. Donec commodo sagittis ligula, in venenatis nulla porttitor in. Donec nec tortor sit amet felis posuere ultricies. Suspendisse euismod quis ex eu placerat.

    +
    + +
    + Worksheets + + + About Worksheets + +

    This is a section full of worksheets. Each is a division of its own, via the worksheet element. This is an optional introduction to the current section. In practice you might want to rip out all the worksheets of an entire book and bundle them up as an activity book.

    + +

    If you make PDF output you will notice an increased amount of control over layout. Also, if the publication file elects draft mode, then there will be visual indicators of prescribed whitespace.

    +     + + + A Geometric Prelude (without authored pages) + + +
      +
    • Practice visualizing vector addition
      • +
    • Use vectors without explicit coordinates
      • +
    +     + +

    This two-page worksheet was generously donated to the sample article by Dave Rosoff at a CuratedCourses workshop in August2018. It has the default (skinny) margins.

    + +

    It was known to Euclid, and probably earlier, that the midpoints of the sides of any quadrilateral all lie in the same plane (even if the vertices of the quadrilateral do not). In fact, these midpoints are the vertices of a parallelogram, as pictured in .

    + +
    + The midpoints of the sides of a quadrilateral are the vertices of a parallelogram. + + + \begin{tikzpicture}[xscale=0.8, yscale=0.8] + \draw[style={black, ultra thick}] (0,0) -- (5,0) -- (4,4) -- (2,5) -- (0,0); + \draw[style={black, dashed, very thick}] (2.5, 0) -- (4.5, 2) -- (3, 4.5) -- (1, 2.5) -- (2.5, 0); + \end{tikzpicture} + + +
    +
    + The sides of a triangle presented as vectors. + + + \begin{tikzpicture}[xscale=1.5, yscale=1.5] + \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); + \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); + \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); + % \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node + % {} -- (1.5,0) node[below right=0mm and 3mm] {$\vec{A}$}; + %\draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node + % {} -- (2,1) node[above left=5mm and 1mm] {$\vec{B}$}; + %\draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node + % {} -- (0.5,1) node[below left=1mm and 3mm] {$\vec{C}$}; + %\node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; + %\node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; + % \node {$P$} (1.3333,0.6667); + \end{tikzpicture} + + +
    +
    + The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. + + + \begin{tikzpicture}[xscale=1.5, yscale=1.5] + \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); + \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); + \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); + \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node + {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node + {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node + {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; + \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; + \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; + % \node {$P$} (1.3333,0.6667); + \end{tikzpicture} + + +
    +     +

    In this exercise, we'll use vectors to show that the medians of any triangle () intersect at a point. Recall that medians are the lines connecting the vertices of the triangle to the midpoints of their opposite edges, as in the figure. We'll do this in a few steps.

    +     + + + +

    What is the value of \vec{A} + \vec{B} + \vec{C}?

    +     +     + +

    from the previous page is reproduced for your convenience.

    +
    + The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. + + + \begin{tikzpicture}[xscale=1.5, yscale=1.5] + \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); + \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); + \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); + \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node + {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node + {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node + {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; + \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; + \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; + % \node {$P$} (1.3333,0.6667); + \end{tikzpicture} + + +
    + + + +

    Show that \vec{M}_{1} + \vec{M}_{2} + \vec{M}_{3} = 0.

    +     + +

    Use .

    +     +     + + +

    To show that the point P exists (as the common intersection of the \vec{M}_{i}), show that + \vec{A} + \frac{2}{3} \vec{M}_{3} = \frac{2}{3} \vec{M}_{2} = + .

    +     +     +     + +

    If you have time, try to devise a vector proof of Euclid's result presented at the beginning of the workshop. Recall that a parallelogram is a four-sided polygon whose opposite sides are parallel.

    +     + + + Wrap-up +

    It's possible to do interesting things with vector arithmetic in a coordinate-free way: we didn't specify an origin, or any entries of any vectors in the examples.

    +     +     + + + A Geometric Prelude (with authored pages) + + +
      +
    • Practice visualizing vector addition
      • +
    • Use vectors without explicit coordinates
      • +
    +     + +

    This two-page worksheet was generously donated to the sample article by Dave Rosoff at a CuratedCourses workshop in August2018. It has the default (skinny) margins.

    + +

    It was known to Euclid, and probably earlier, that the midpoints of the sides of any quadrilateral all lie in the same plane (even if the vertices of the quadrilateral do not). In fact, these midpoints are the vertices of a parallelogram, as pictured in .

    + +
    + The midpoints of the sides of a quadrilateral are the vertices of a parallelogram. + + + \begin{tikzpicture}[xscale=0.8, yscale=0.8] + \draw[style={black, ultra thick}] (0,0) -- (5,0) -- (4,4) -- (2,5) -- (0,0); + \draw[style={black, dashed, very thick}] (2.5, 0) -- (4.5, 2) -- (3, 4.5) -- (1, 2.5) -- (2.5, 0); + \end{tikzpicture} + + +
    +
    + The sides of a triangle presented as vectors. + + + \begin{tikzpicture}[xscale=1.5, yscale=1.5] + \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); + \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); + \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); + % \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node + % {} -- (1.5,0) node[below right=0mm and 3mm] {$\vec{A}$}; + %\draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node + % {} -- (2,1) node[above left=5mm and 1mm] {$\vec{B}$}; + %\draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node + % {} -- (0.5,1) node[below left=1mm and 3mm] {$\vec{C}$}; + %\node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; + %\node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; + % \node {$P$} (1.3333,0.6667); + \end{tikzpicture} + + +
    +
    + The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. + + + \begin{tikzpicture}[xscale=1.5, yscale=1.5] + \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); + \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); + \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); + \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node + {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node + {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node + {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; + \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; + \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; + % \node {$P$} (1.3333,0.6667); + \end{tikzpicture} + + +
    +     +

    In this exercise, we'll use vectors to show that the medians of any triangle () intersect at a point. Recall that medians are the lines connecting the vertices of the triangle to the midpoints of their opposite edges, as in the figure. We'll do this in a few steps.

    +     + + + + +

    What is the value of \vec{A} + \vec{B} + \vec{C}?

    +     +     +     + + +

    from the previous page is reproduced for your convenience.

    +
    + The medians of the triangle are \vec{M}_1, \vec{M}_2, and \vec{M}_3. + + + \begin{tikzpicture}[xscale=1.5, yscale=1.5] + \draw[->,>=latex, style={black, thick}] (0,0) -- (2.30 , 0) node [below] {$\vec{A}$} -- (3,0); + \draw[->,>=latex, style={black, thick}] (3,0) -- (1.47, 1.53) node [above right =1mm] {$\vec{B}$} -- (1,2); + \draw[->,>=latex, style={black, thick}] (1,2) -- (0.23 , 0.46) node [above left=1mm] {$\vec{C}$} -- (0,0); + \draw[->,>=latex, style={black,semithick,dashed}] (1,2) -- (7/6, 4/3) node + {$\vec{M}_{1}$} -- (1.5,0);% node[below right=0mm and 3mm] {$\vec{A}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (0,0) -- (2/3, 1/3) node + {$\vec{M}_{2}$} -- (2,1);% node[above left=5mm and 1mm] {$\vec{B}$}; + \draw[->,>=latex, style={black,semithick,dashed}] (3,0) -- (13/6,1/3) node + {$\vec{M}_{3}$} -- (0.5,1);% node[below left=1mm and 3mm] {$\vec{C}$}; + \node[draw,shape=circle,fill=black,name=P,scale=0.5] at (4/3,2/3) {}; + \node[above right=1.2mm and -0.5mm of P] at (4/3,2/3) {$P$}; + % \node {$P$} (1.3333,0.6667); + \end{tikzpicture} + + +
    + + + +

    Show that \vec{M}_{1} + \vec{M}_{2} + \vec{M}_{3} = 0.

    +     + +

    Use .

    +     +     + + +

    To show that the point P exists (as the common intersection of the \vec{M}_{i}), show that + \vec{A} + \frac{2}{3} \vec{M}_{3} = \frac{2}{3} \vec{M}_{2} = + .

    +     +     +     + +

    If you have time, try to devise a vector proof of Euclid's result presented at the beginning of the workshop. Recall that a parallelogram is a four-sided polygon whose opposite sides are parallel.

    +     +     + + + Wrap-up +

    It's possible to do interesting things with vector arithmetic in a coordinate-free way: we didn't specify an origin, or any entries of any vectors in the examples.

    +     +     + + + + Networks Worksheet (no authored pages) + + + + Basic laws for electrical circuits + +

    This two-page worksheet was generously donated to the sample article by Virgil Pierce at a CuratedCourses workshop in August2018. It has default (skinny) left and right margins, but we have specified longer top and bottom margins, with the top being the larger of the two.

    + + + Ohms Law +

    The current through a resistor is proportional to the ratio of the Voltage to the Resistance + I = \frac{V}{R} + Or for our purposes + I R = V +

    +     + + + Kirchoffs Current Law +

    The sum of the currents in a network meeting at a point is zero. + \sum_{k=1}^n I_k = 0 +

    +     + + + Kirchoff's Current Law +

    For the circuit below I_1 + I_2 = I_3 .

    + + + \begin{circuitikz} + \draw (0,0) + to[R, i=$I_1$, *-o](2,2); + \draw (0,0) + to[R, i=$I_2$, *-o](2,-2); + \draw (-3, 0) + to[R, i=$I_3$, o-*](0,0); + \end{circuitikz} + + +     + + + Kirchoffs Voltage Law +

    The sum of the voltages around any closed circuit (or subcircuit) is zero. + \sum_{k=1}^n V_k = 0 +

    +     + +

    Kirchoffs Current Law and Kirkoffs Voltage Law combined with Ohms Law gives for any circuit of resistors and sources a linear system that may (or may not) determine the currents. +

    +     + + + + + +

    For the simple network pictured, calculuate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    + + + \begin{circuitikz} + \draw (0,0) + to[V, v=$11\quad \mbox{volt}$](0, 3) + to[short](2,3) + to[R, R=$4\quad \mbox{ohm}$] (3, 3) + to[short](4,3) + to[R, R=$3\quad \mbox{ohm}$](4,0) + to[short](3,0) + to[R, R=$3\quad \mbox{ohm}$](2,0) + to[short](0,0); + \end{circuitikz} + + +     +     + + + +

    Compare it with a parallel circuit network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    + + + \begin{circuitikz} + \draw(0,0) + to[V, v=$11\quad \mbox{volt}$](0, 3) + to[short](5,3) + to[R, R=$4\quad \mbox{ohm}$](6,3) + to[short](7,3) + to[R, R=$3\quad \mbox{ohm}$](7,0) + to[short](6,0) + to[R, R=$3\quad \mbox{ohm}$](5,0) + to[short](0,0); + \draw(4,0) + to[R, R=$3\quad \mbox{ohm}$](4,3); + \end{circuitikz} + + +     +     +     + + + +

    Now for a more complicated network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    + + + \begin{circuitikz} + \draw(0,0) + to[V, v=$11 \quad \mbox{volt}$](0, 3) + to[short](5,3) + to[R, R=$4 \quad \mbox{ohm}$](6,3) + to[short](9,3) + to[R, R=$4 \quad \mbox{ohm}$](10,3) + to[short](11,3) + to[R, R=$3 \quad \mbox{ohm}$](11, 0) + to[short](10,0) + to[R, R=$2\quad \mbox{ohm}$](9,0) + to[short](6,0) + to[R, R=$2\quad \mbox{ohm}$](5,0) + to[short](0,0); + \draw(4,0) + to[R, R=$3\quad \mbox{ohm}$](4,3); + \draw(8,0) + to[R, R=$1\quad \mbox{ohm}$](8,3); + \end{circuitikz} + + +     +     + + + +

    Now generalize these ideas to a context outside of electrical circuits. Consider the network of streets given in the diagram (with one-way directions as indicated).

    + + + + =stealth] + \draw[->, very thick] (0,0) -- (10, 0) node[midway, below]{East Bound Winooski Ave}; + \draw[<-, very thick] (0, 1) -- (10, 1) node[midway, above]{West Bound Winooski Ave}; + \draw[<-, very thick] (0, 4) -- (10, 4) node[midway, above]{Shelburne St}; + \draw[<-, very thick] (1, -1) -- (1, 5) node[midway, above, sloped]{Willow}; + \draw[->, very thick] (9, -1) -- (9, 5) node[midway, above, sloped]{Jay}; + \end{tikzpicture} + ]]> + + + +

    A traffic engineer counts the hourly flow of cars into and out of this network at the entrances. They get (EB = East Bound; WB = West Bound):

    + + + Estimated hourly traffic flow for the road network + + + + + + EB Winooski + + + WB Winooski + + + Shelburne St + + + Willow + + + Jay + + + + + into + + + 50 + + + 400 + + + 0 + + + 10 + + + 50 + + + + + out of + + + 55 + + + 390 + + + 20 + + + 15 + + + 30 + + + +
    + +

    Use a variable for each segment inside of the network and set up a system of linear equations restricting the flow. Solve the system. Note that you should not get a unique solution as traffic should be able to flow through the network in various ways.

    +     +     +     + + + Networks Worksheet (with authored pages) + + + + Basic laws for electrical circuits + +

    This two-page worksheet was generously donated to the sample article by Virgil Pierce at a CuratedCourses workshop in August2018. It has default (skinny) left and right margins, but we have specified longer top and bottom margins, with the top being the larger of the two.

    + + + Ohms Law +

    The current through a resistor is proportional to the ratio of the Voltage to the Resistance + I = \frac{V}{R} + Or for our purposes + I R = V +

    +     + + + Kirchoffs Current Law +

    The sum of the currents in a network meeting at a point is zero. + \sum_{k=1}^n I_k = 0 +

    +     + + + Kirchoff's Current Law +

    For the circuit below I_1 + I_2 = I_3 .

    + + + \begin{circuitikz} + \draw (0,0) + to[R, i=$I_1$, *-o](2,2); + \draw (0,0) + to[R, i=$I_2$, *-o](2,-2); + \draw (-3, 0) + to[R, i=$I_3$, o-*](0,0); + \end{circuitikz} + + +     + + + Kirchoffs Voltage Law +

    The sum of the voltages around any closed circuit (or subcircuit) is zero. + \sum_{k=1}^n V_k = 0 +

    +     + +

    Kirchoffs Current Law and Kirkoffs Voltage Law combined with Ohms Law gives for any circuit of resistors and sources a linear system that may (or may not) determine the currents. +

    +     + + + + + + + + + +

    For the simple network pictured, calculuate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    + + + \begin{circuitikz} + \draw (0,0) + to[V, v=$11\quad \mbox{volt}$](0, 3) + to[short](2,3) + to[R, R=$4\quad \mbox{ohm}$] (3, 3) + to[short](4,3) + to[R, R=$3\quad \mbox{ohm}$](4,0) + to[short](3,0) + to[R, R=$3\quad \mbox{ohm}$](2,0) + to[short](0,0); + \end{circuitikz} + + +     +     + + + +

    Compare it with a parallel circuit network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    + + + \begin{circuitikz} + \draw(0,0) + to[V, v=$11\quad \mbox{volt}$](0, 3) + to[short](5,3) + to[R, R=$4\quad \mbox{ohm}$](6,3) + to[short](7,3) + to[R, R=$3\quad \mbox{ohm}$](7,0) + to[short](6,0) + to[R, R=$3\quad \mbox{ohm}$](5,0) + to[short](0,0); + \draw(4,0) + to[R, R=$3\quad \mbox{ohm}$](4,3); + \end{circuitikz} + + +     +     +     + + + +

    Now for a more complicated network. Calculate the amperage in each part of the network by setting up a system of linear equations for the amperages.

    + + + \begin{circuitikz} + \draw(0,0) + to[V, v=$11 \quad \mbox{volt}$](0, 3) + to[short](5,3) + to[R, R=$4 \quad \mbox{ohm}$](6,3) + to[short](9,3) + to[R, R=$4 \quad \mbox{ohm}$](10,3) + to[short](11,3) + to[R, R=$3 \quad \mbox{ohm}$](11, 0) + to[short](10,0) + to[R, R=$2\quad \mbox{ohm}$](9,0) + to[short](6,0) + to[R, R=$2\quad \mbox{ohm}$](5,0) + to[short](0,0); + \draw(4,0) + to[R, R=$3\quad \mbox{ohm}$](4,3); + \draw(8,0) + to[R, R=$1\quad \mbox{ohm}$](8,3); + \end{circuitikz} + + +     +     +     + + + + +

    Now generalize these ideas to a context outside of electrical circuits. Consider the network of streets given in the diagram (with one-way directions as indicated).

    + + + + =stealth] + \draw[->, very thick] (0,0) -- (10, 0) node[midway, below]{East Bound Winooski Ave}; + \draw[<-, very thick] (0, 1) -- (10, 1) node[midway, above]{West Bound Winooski Ave}; + \draw[<-, very thick] (0, 4) -- (10, 4) node[midway, above]{Shelburne St}; + \draw[<-, very thick] (1, -1) -- (1, 5) node[midway, above, sloped]{Willow}; + \draw[->, very thick] (9, -1) -- (9, 5) node[midway, above, sloped]{Jay}; + \end{tikzpicture} + ]]> + + + +

    A traffic engineer counts the hourly flow of cars into and out of this network at the entrances. They get (EB = East Bound; WB = West Bound):

    + + + Estimated hourly traffic flow for the road network + + + + + + EB Winooski + + + WB Winooski + + + Shelburne St + + + Willow + + + Jay + + + + + into + + + 50 + + + 400 + + + 0 + + + 10 + + + 50 + + + + + out of + + + 55 + + + 390 + + + 20 + + + 15 + + + 30 + + + +
    + +

    Use a variable for each segment inside of the network and set up a system of linear equations restricting the flow. Solve the system. Note that you should not get a unique solution as traffic should be able to flow through the network in various ways.

    +     +     +     +     + + + +

    This is a mock one-page worksheet for testing purposes. We have specified an overall margin just slightly less than the default.

    +     + + + + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    +     +     + + + +

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    +     +     +     + +

    A two-line paragraph interspersed to check on spacing, breaks and all that.

    + + + A full-width exercise + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    +

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    +     +     + +

    Another two-line paragraph interspersed to check on spacing, breaks and all that.

    + + + + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    +     +     + + + + +

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    +     +     + + + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    +     +     +     + + + A Mock Activity + + +

    The problem, as we see it.

    +     + +

    A worksheet could have hints, no? But no spacing. Note row below has widths set to balance the heights.

    +     +     + + + + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    +     +     + + + + +

    Integer sagittis dictum turpis vel aliquet. Fusce ut suscipit dolor, nec tristique nisl. Aenean luctus, leo et ornare fermentum, nibh dui vulputate leo, nec tincidunt augue ipsum sed odio. Nunc non erat sollicitudin, iaculis eros consequat, dapibus eros.

    +     +     + + + +

    Praesent rutrum scelerisque felis sit amet adipiscing. Phasellus in mollis velit. Nunc malesuada felis sit amet massa cursus, eget elementum neque viverra.

    +     +     +     +     + + + Dot products and projection + + + +

    Let + {\vec v}_1 = (-4,1), + {\vec v}_2 = (2,2), + {\vec v}_3 = (1,2,3), + {\vec v}_4 = (-2,1,0). + Find the values of the following expressions:

    +     + +

    {\vec v}_1 \cdot {\vec v}_2 =

    +     + +

    {\vec v}_3 \cdot {\vec v}_4 =

    +     + +

    \lVert{\vec v}_1\rVert =

    +     + +

    \lVert{\vec v}_4\rVert =

    +     + +

    Are any of these vectors perpendicular to each other?

    +     +     + + + +

    The vectors \vec a = (3,9) and \vec u = (4,2) are pictured below. Derive the formula for projection on a line and use it to find the projection of \vec a on the line spanned by \vec u. Also compute the length of the residual vector.

    + + two vectors in a Cartesian plane + +     +     +     + + + + +

    Consider the vector equation + + m \begin{bmatrix}2 \\ 5\end{bmatrix} = \begin{bmatrix}3 \\ 7\end{bmatrix} + .

    +     + +

    Check that there is no solution m that makes the equation true.

    +     + + +

    Use projection to find the best approximation \hat m.

    +     + + +

    Compute \hat m \begin{bmatrix}2 \\ 5\end{bmatrix} .

    +     + + +

    Compute the residual vector.

    +     + + +

    Compute the length of the residual vector and explain what it means.

    +     +     + + + +

    Consider the system of equations + + 3t \amp =5 + 2t \amp = 9 + .

    +     + +

    Write the system in vector form.

    +     + +

    Find the best estimate, \hat t, of t using projection.

    +     + +

    Compute the length of the residual vector.

    +     +     +     +     + + +

    - This is a very long phrase that includes emphasis, - inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. + Just a simple activity here.

    - -

    +     +     + + +

    + Here is a second activity. +

    +     +     +     + + + +

    + This is going to be an activity with tasks. +

    +     + + +

    + Here is the first task. +

    +     +     + + +

    + Here is the second task. +

    +     +     + + +

    + Here is the third task. +

    +     +     + +

    + This is a conclusion that comes after the last task. +

    +     +     +     -

    - Multiple consecutive veils: \cos(t) - first hidden, then some regular text, and second hidden part. -

    + + + +

    + This is a mock worksheet for testing the use of workspace for exercise within an exercisegroup. +

    +     - - h(t) = \sin(t) tiger - + + +

    + Do things to the following. +

    +     + + +

    + Apple +

    +     +     + + +

    + Banana +

    +     +     + + +

    + Cherry +

    +     +     + + +

    + Durian +

    +     +     + + +

    + Elderberry (with workspace override) +

    +     +     + + +

    + Fig +

    +     +     + + +

    + Guava +

    +     +     + + +

    + Habanero +

    +     +     + + +

    + I can't think of an I fruit. +

    +     +     + + +

    + Jackfruit +

    +     +     +     - - - h(t) = \int \sin(t)\ dt - - + + +

    + Now with one column, do things to the following. +

    +     + + +

    + Apple +

    +     +     + + +

    + Banana +

    +     +     + + +

    + Cherry +

    +     +     + + +

    + Durian +

    +     +     + + +

    + Elderberry (with workspace override) +

    +     +     + + +

    + Fig +

    +     +     + + +

    + Guava +

    +     +     + + +

    + Habanero +

    +     +     + + +

    + I can't think of an I fruit. +

    +     +     + + +

    + Jackfruit +

    +     +     +     +     +
    -

    - Final test: a veil at the end of the sentence. -

    +
    + Exercises, One Subsection + +

    This section of the sample article demonstrates an unstructured division. There are no subsection, you are just reading the first two paragraphs, followed by some nonsense text. Then there is a single exercises division. Note that this division is not numbered (since it is unique within the section). And a cross-reference to one of the contained exercise will be numbered as a member of the section, .

    + +

    If you use the unstructured form of a division, and have both inline and divisional exercises, there is a potential to form ambiguous cross-references. To wit, check that and are really different exercises (which you are unable to do if you are reading this in print!). The solution is to include the type of exercise in the reference, which will assist everybody, but especially your print readers: and .

    + +

    Compare this section with the similar , next. The following text is mostly nonsense, just for testing purposes.

    + + + Inline One + +

    Aliquam vitae risus placerat, pellentesque leo vitae, iaculis ante. Praesent ac odio eget mi bibendum eleifend ac eget metus. Morbi in dolor et diam accumsan mattis. Aenean elementum pulvinar efficitur. Etiam viverra ut tellus quis consequat. Phasellus sit amet nisl a ligula pharetra tempus id in elit. Maecenas congue quam eu purus fermentum pretium. Fusce pellentesque ultricies arcu, egestas sollicitudin erat condimentum non. Integer non velit at dolor dictum aliquam et rhoncus mauris. Sed nec nibh id nunc convallis tincidunt ut at ligula. Etiam elementum nisl eu erat dapibus rhoncus.

    +     +     + +

    Pellentesque nec condimentum ligula, quis interdum mauris. Ut sed urna lacinia, aliquam arcu id, faucibus nisi. Suspendisse potenti. Curabitur in erat ultricies, condimentum mi nec, vehicula mauris. Duis faucibus risus fermentum velit hendrerit, non laoreet massa maximus. Donec bibendum elit ac lectus lobortis luctus. Ut finibus, dolor ut euismod tristique, ligula tortor tempus arcu, finibus semper purus erat ut ligula. Aenean accumsan ut ante vel euismod.

    + + + Inline Two +

    Ut porttitor neque a pharetra euismod. Vivamus ut metus pretium, placerat massa tempor, condimentum metus. Phasellus vestibulum iaculis turpis non posuere. Vestibulum quis aliquet neque. Donec nec metus iaculis, laoreet massa vitae, suscipit tellus. Etiam et ultrices quam, quis pretium ligula. In ut cursus metus. Aenean volutpat quam odio, quis tempus dolor egestas eget. Nunc fringilla lobortis nunc, ut interdum lorem posuere sed. Sed sodales risus a laoreet venenatis. Nunc sodales tempor mollis. Nam sollicitudin velit sed ex viverra feugiat. Nunc consectetur mi vitae urna sollicitudin malesuada. Fusce eget risus lectus. Mauris augue velit, vestibulum vitae tempus sit amet, porttitor eget turpis.

    +     + + + Major Result +

    Vivamus tortor tortor, lobortis et sem vel, accumsan placerat libero. Sed eget metus non magna accumsan efficitur a non turpis. Curabitur maximus arcu ipsum, eget vestibulum nulla mollis ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel eleifend risus. Morbi hendrerit tellus eget nibh imperdiet, ac mollis nisl sagittis. Ut commodo pharetra leo. Suspendisse consequat velit eget velit condimentum feugiat.

    +     + + + Inline Three + +

    Suspendisse lacinia mattis risus, eget viverra urna dictum eu. Maecenas ut sem in turpis egestas varius nec at ipsum. Praesent bibendum nisi et turpis congue, a pellentesque felis tempor. Vivamus non dolor in risus interdum mattis. In tempus iaculis velit, sit amet rhoncus tellus aliquam convallis. Sed ut tellus id ipsum blandit convallis sed eget tortor. Nunc leo felis, scelerisque vel ante porta, volutpat rhoncus neque. Mauris convallis, felis at aliquam aliquet, felis ipsum semper mi, vitae auctor purus ante non erat. Ut nec felis mi.

    +     +     + + + Exercise Collection + + + Drill One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    + +
    + A figure in an exercise in an unstructured division to test that it is numbered as if the containing exercises is not present + +
    +
    + A side-by-side in a figure in an exercise in an unstructured division to test that it is numbered as if the containing exercises is not present and to test the numbering of the panels in a solutions manual + +
    + First Panel, subcaptioned + +
    +
    + Second Panel, subcaptioned + +
    +     +
    + +
    + First Panel, not subcaptioned + +
    +
    + Second Panel, not subcaptioned + +
    +     +     +     + + Drill Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    + +
    + Testing numbering, figure in a exercise in an un-numbered exercises + +
    + +     +     + + + Drill Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     + + + Challenging One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    +     +     + + + +

    An introduction to an exercisegroup. This is here to attempt to interrupt the flow of the counting from this division to the next.

    +     + + + Challenging Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh.

    +

    Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    +     +     + + + Challenging Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     +     + + + Impossible One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    +     +     + + + Impossible Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    +     +     + + + Impossible Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     +     + + + More Reading + + +

    Left intentionally blank, just checking sectioning.

    +     + + David C. Lay, Subspaces and Echelon Forms. The College Mathematics Journal, January 1993, 24 1, 5762. + +
    - + + Exercise Section, Structured + + +

    A collection of exercises, in a top-level exercises division, structured with subexercises.

    +     + + + Easy Exercises + + + Arithmetic + +

    Compute 3+4.

    +     + +

    7

    +     +     + + + Trigonometry + +

    Compute \sin(\pi/4).

    +     +     +     + + + Hard Problems + + + Number Theory + +

    Prove Fermat's Last Theorem.

    +     +     + + + Millenial + +

    Find general solutions to the Navier-Stokes equation.

    +     +     +     + + + With an Exercise Group + + + +

    This is an exercise group, and this is its introduction.

    +     + + One + +

    6-5

    +     + +

    Subtract.

    +     +     + + Two + +

    1+1

    +     +     +     + + + Outside exercisegroup, inside subexercises + +

    6+5

    +     +     +     +     + +
    + Exercises, Multiple Subsections + + +

    This section of the sample article demonstrates a structured division. You are reading the introduction to the division, then there is a faux subsection, followed by three exercises divisions. Note that the three are numbered as if they are also fellowsubsection. And a cross-reference to one of the contained exercise will be numbered use the number of the subsection, .

    + +

    Compare this section with the similar , previous. The following text is mostly nonsense, just for testing purposes.

    +     + + + Faux Subsection + + + Inline One + +

    Aliquam vitae risus placerat, pellentesque leo vitae, iaculis ante. Praesent ac odio eget mi bibendum eleifend ac eget metus. Morbi in dolor et diam accumsan mattis. Aenean elementum pulvinar efficitur. Etiam viverra ut tellus quis consequat. Phasellus sit amet nisl a ligula pharetra tempus id in elit. Maecenas congue quam eu purus fermentum pretium. Fusce pellentesque ultricies arcu, egestas sollicitudin erat condimentum non. Integer non velit at dolor dictum aliquam et rhoncus mauris. Sed nec nibh id nunc convallis tincidunt ut at ligula. Etiam elementum nisl eu erat dapibus rhoncus.

    +     +     + +

    Pellentesque nec condimentum ligula, quis interdum mauris. Ut sed urna lacinia, aliquam arcu id, faucibus nisi. Suspendisse potenti. Curabitur in erat ultricies, condimentum mi nec, vehicula mauris. Duis faucibus risus fermentum velit hendrerit, non laoreet massa maximus. Donec bibendum elit ac lectus lobortis luctus. Ut finibus, dolor ut euismod tristique, ligula tortor tempus arcu, finibus semper purus erat ut ligula. Aenean accumsan ut ante vel euismod.

    + + + Inline Two + +

    Ut porttitor neque a pharetra euismod. Vivamus ut metus pretium, placerat massa tempor, condimentum metus. Phasellus vestibulum iaculis turpis non posuere. Vestibulum quis aliquet neque. Donec nec metus iaculis, laoreet massa vitae, suscipit tellus. Etiam et ultrices quam, quis pretium ligula. In ut cursus metus. Aenean volutpat quam odio, quis tempus dolor egestas eget. Nunc fringilla lobortis nunc, ut interdum lorem posuere sed. Sed sodales risus a laoreet venenatis. Nunc sodales tempor mollis. Nam sollicitudin velit sed ex viverra feugiat. Nunc consectetur mi vitae urna sollicitudin malesuada. Fusce eget risus lectus. Mauris augue velit, vestibulum vitae tempus sit amet, porttitor eget turpis.

    +     +     + + + Major Result +

    Vivamus tortor tortor, lobortis et sem vel, accumsan placerat libero. Sed eget metus non magna accumsan efficitur a non turpis. Curabitur maximus arcu ipsum, eget vestibulum nulla mollis ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel eleifend risus. Morbi hendrerit tellus eget nibh imperdiet, ac mollis nisl sagittis. Ut commodo pharetra leo. Suspendisse consequat velit eget velit condimentum feugiat.

    +     + + + Inline Three + +

    Suspendisse lacinia mattis risus, eget viverra urna dictum eu. Maecenas ut sem in turpis egestas varius nec at ipsum. Praesent bibendum nisi et turpis congue, a pellentesque felis tempor. Vivamus non dolor in risus interdum mattis. In tempus iaculis velit, sit amet rhoncus tellus aliquam convallis. Sed ut tellus id ipsum blandit convallis sed eget tortor. Nunc leo felis, scelerisque vel ante porta, volutpat rhoncus neque. Mauris convallis, felis at aliquam aliquet, felis ipsum semper mi, vitae auctor purus ante non erat. Ut nec felis mi.

    +     +     +     + + + Drill Exercises + + + Drill One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    + +
    + A figure in an exercise in a structured division to test that it is numbered with consideration of the containing exercises + +
    +     +     + + + Drill Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    +     +     + + + Drill Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     +     + + + + Challenging Exercises + + + Challenging One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    +     +     + + + +

    An introduction to an exercisegroup. This is here to attempt to interrupt the flow of the counting from this division to the next.

    +     + + + Challenging Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh.

    +

    Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    +     +     + + + Challenging Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     +     +     + + + + Impossible Exercises + + + Impossible One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    +     +     + + + Impossible Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    +     +     + + + Impossible Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     +     + + + Layout challenge + + +

    A multicolumn exercisegroup with layout challenges. The first two should be on one row. The next two should be on one row until the hint is opened. Then one that takes up an entire row. The final row should always have two exercises.

    +     + + + + 2x \amp {}+{} \amp y \amp {}={} \amp 10 + x \amp \amp \amp {}={} \amp 6 + x \amp {}+{} \amp 3y \amp {}={} \amp 13 + + + + + + + 2x \amp {}+{} \amp y \amp {}={} \amp 10 + x \amp \amp \amp {}={} \amp 6 + x \amp {}+{} \amp 3y \amp {}={} \amp 13 + + + + + + + 2x \amp {}+{} \amp y \amp {}={} \amp 10 + x \amp \amp \amp {}={} \amp 6 + x \amp {}+{} \amp 3y \amp {}={} \amp 13 + + + + + + + 2x \amp {}+{} \amp y \amp {}={} \amp 10 + x \amp \amp \amp {}={} \amp 6 + x \amp {}+{} \amp 3y \amp {}={} \amp 13 + + + + OPEN ME! + + 3u \amp {}+{} 1v \amp {}+{} 3w \amp {}+{} 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 + 2u \amp {}+{} 2v \amp {}-{} 2w \amp {}+{} x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 + 1u \amp {}-{} 3v \amp {}+{} 1w \amp {}+{} x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13 + + + + + + + 200t \amp {}+{} 3u \amp {}+{} 1v \amp {}+{} 3w \amp {}+{} 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10 + \amp {}+{} 2u \amp {}+{} 2v \amp {}-{} 2w \amp {}+{} x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6 + 100t \amp {}+{} 1u \amp {}-{} 3v \amp {}+{} 1w \amp {}+{} x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13 + + + + + + + 2x \amp {}+{} \amp y \amp {}={} \amp 10 + x \amp \amp \amp {}={} \amp 6 + x \amp {}+{} \amp 3y \amp {}={} \amp 13 + + + + + + + 2x \amp {}+{} \amp y \amp {}={} \amp 10 + x \amp \amp \amp {}={} \amp 6 + x \amp {}+{} \amp 3y \amp {}={} \amp 13 + + + +     +     + + + More Reading + + +

    Left intentionally blank, just checking sectioning.

    +     + + David C. Lay, Subspaces and Echelon Forms. The College Mathematics Journal, January 1993, 24 1, 5762. + +     +
    + + + Exercises, Top-Level + + +

    +

    This exercises of the sample article is a peer of all the preceding section and is the only such exercises. As such, it is not numbered, and contains only exercise, but for this introduction you are reading. The exercises contained within will be numbered in cross-references according to the enclosing division, in this case the entire article and so without any qualification, to wit, .

    +     + + + Drill One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    +     +     + + + Drill Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    + +
    + Testing numbering in a exercises without a number + +
    +     +     + + + Drill Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     + + + Challenging One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    +     +     + + + +

    An introduction to an exercisegroup. This is here to attempt to interrupt the flow of the counting from this division to the next.

    +     + + + Challenging Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh.

    +

    Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    +     +     + + + Challenging Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     +     + + + Impossible One + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue urna nulla. Aliquam eget euismod tellus. Maecenas nibh libero, venenatis a laoreet in, tempor sit amet sem. Morbi sit amet justo tempor velit auctor placerat. Maecenas nec lobortis orci. Aenean dictum enim lacus, ac blandit lacus elementum nec. Mauris porttitor neque volutpat tincidunt sollicitudin. Cras porta lectus ac facilisis tempor. Suspendisse in velit nisl. Sed convallis leo at nunc aliquet fermentum. Pellentesque feugiat at ex sed elementum. In porta vulputate ipsum sit amet consectetur.

    +     +     + + + Impossible Two + +

    Aliquam sagittis ex at magna porttitor, quis scelerisque ligula malesuada. Vestibulum vitae mauris id nisi pretium ornare a id lectus. Nam suscipit magna id sem ultricies vestibulum. Nulla facilisi. Duis venenatis lectus massa, ac mollis nisi suscipit non. Sed et sapien vulputate, imperdiet nibh vel, lobortis nisl. Curabitur sagittis justo nibh. Nulla vulputate sodales justo at efficitur. Cras justo augue, mollis vitae nulla sed, vestibulum tincidunt ante. Vestibulum et lorem lectus. Maecenas accumsan lacus a nisi euismod rutrum eu dapibus justo. Etiam scelerisque a odio a euismod. Pellentesque vestibulum pellentesque nisi, a tempus erat cursus ac. Morbi ut auctor lectus.

    +     +     + + + Impossible Three + +

    Nam congue ex nec justo iaculis maximus. Vestibulum lobortis magna sed urna auctor, vel dignissim massa posuere. In sed venenatis elit. Vivamus congue gravida tempus. Nunc quis fermentum nisi. Nullam hendrerit lorem et tellus semper, sit amet scelerisque purus lobortis. Quisque sollicitudin quis neque eu suscipit. Praesent volutpat justo quis magna vehicula molestie.

    +     +     + + + An Exercise in a Section + +

    Exercises can appear in a section of their own. You need to give the section a title, even if it seems obvious what to call it. Individual exercises may have titles, as you choose. Problem: How should we hide solutions?

    +     + +

    Maybe a global switch should be used to suppress solutions, while a separate processing regime could use them as part of a solutions manual.

    +     +     + + + An Exercise with a Hard-Coded Problem Number + +

    Compute the definite integral \definiteintegral{2}{4}{x^2}{x}, not as an approximate value from a Riemann sum, but as an exact value based of the limit by using the Fundamental Theorem.

    +     + +

    An antiderivative of x^2 is F(x)=x^3/3, so by the FTC,\definiteintegral{2}{4}{x^2}{x}=F(4)-F(2)=\frac{1}{3}\left(4^3-2^3\right)=\frac{56}{3}!?! This is indeed an exciting result, but we are mostly interested in seeing that the sentence-ending punctuation is absorbed properly into the displayed equation.

    +     +     + + + +

    Can you prove Corollary directly? If not consider that a problem could have several parts, which should be formatted as a second-level list, since the problems normally get numbered at the top level.

      +

    1. Why is this result a Corollary?

      2. +

    2. Could you interchange the Theorem and Corollary?

      3. +

    +     + + + MVT +

    Consider the definite integral as an area function and employ the Mean Value Theorem.

    +     + + + Motivator +

    Think harder!

    +     + + + Helpful +

      +

    1. It follows easily.

      2. +

    2. Yes.

      3. +

    +     + + +

    We could prove either result first, then obtain the other as an easy consequence.

    +     +     +     @@ -423,6 +16316,17 @@ along with MathBook XML. If not, see . + + Solutions to a Single Exercises Division + solutionsfor one group of exercises + + +

    Sometimes you may want the solutions to exercises within a single exercises division (or similar, like a worksheet). Default behavior in this situation can produce two titles, when just one would be sufficient. Here we have used the scope attribute to point to a specific exercises, and provided a (single) very specific title.

    +     + + +     + All Solutions that are Answers solutionsall answers @@ -448,7 +16352,7 @@ along with MathBook XML. If not, see . List of Results -

    We had an automatic list of theorems for just one section, back in . Here we expand to include corollary in our space-delimited list of elements and we request divisions (headings) at each subsection and section. The default scope is the entire document, which is appropriate here in the backmatter. There are many subsections with no results, so we set the empty attribute to no to suppress them, though this is the default behavior (yes being the other option to see divisions with no list items). These lists are most valuable if you are in the practice of giving items titles.

    +

    We had an automatic list of theorems for just one section, back in . Here we expand to include corollary in our space-delimited list of elements and we request divisions (headings) at each subsection and section. The default scope is the entire document, which is appropriate here in the backmatter. There are many subsections with no results, so we set the empty attribute to no to suppress them, though this is the default behavior (yes being the other option to see divisions with no list items). These lists are most valuable if you are in the practice of giving items titles.

     @@ -508,7 +16412,7 @@ along with MathBook XML. If not, see . glossary -

    A glossary may have a headnote, perhaps with some explanation. This glossary is placed in the back matter. Placement as a specialized division is another option, see.

    +

    A glossary may have a headnote, perhaps with some explanation. This glossary is placed in the back matter. Placement as a specialized division is another option, see .

     From 17bd72f1373a94bb85932424372afcf03fd5f785 Mon Sep 17 00:00:00 2001 From: "Cox Geoffrey W." <63681414+geoff-cox@users.noreply.github.com> Date: Mon, 14 Jul 2025 15:19:33 -0400 Subject: [PATCH 04/12] Update sample-article.xml --- examples/sample-article/sample-article.xml | 35 +++++----------------- 1 file changed, 8 insertions(+), 27 deletions(-) diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index b6441c0b2c..6639753ec8 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -10189,25 +10189,15 @@ along with MathBook XML. If not, see .
    Veil Element Testing -

    - The function f(t) = e^{-t} satisfies the differential equation - f'(t) = -f(t), - which is characteristic of exponential decay. -

    +

    The function f(t) = e^{-t} satisfies the differential equation f'(t) = -f(t), which is characteristic of exponential decay.

    -

    - This sentence contains a simple hidden phrase and continues normally. -

    +

    This sentence contains a simple hidden phrase and continues normally.

    -

    - Here is a veil wrapping emphasized hidden text within an emphasized span. -

    +

    Here is a veil wrapping emphasized hidden text within an emphasized span.

    -

    - You can also hide inline math like f(t) = e^{-t} without breaking the flow. -

    +

    You can also hide inline math like f(t) = e^{-t} without breaking the flow.

    -

    +

    Testing long text. Looks bad in print, but should be fine in HTML: This is a very long phrase that includes emphasis, @@ -10225,20 +10215,11 @@ along with MathBook XML. If not, see .

    -

    - Multiple consecutive veils: \cos(t) - first hidden, then some regular text, and second hidden part. -

    +

    Multiple consecutive veils: first hidden, then some regular text, and second hidden part.

    - - - h(t) = \int \sin(t)\ dt - - + h(x) = \int_0^x \sin(t)\ dt -

    - Final test: a veil at the end of the sentence. -

    +

    Final test: a veil at the end of the sentence.

    From 7ee19190f06612decaa521b29b1353e8894eabec Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Mon, 14 Jul 2025 15:25:42 -0400 Subject: [PATCH 05/12] removed commented code --- xsl/pretext-latex-common.xsl | 9 --------- 1 file changed, 9 deletions(-) diff --git a/xsl/pretext-latex-common.xsl b/xsl/pretext-latex-common.xsl index cf20f44605..818a5730af 100644 --- a/xsl/pretext-latex-common.xsl +++ b/xsl/pretext-latex-common.xsl @@ -1155,15 +1155,6 @@ along with MathBook XML. If not, see . - - %% Veil support: line-wrapping underline with optional visibility \usepackage[normalem]{ulem} From a8516cf02c45233ac3b669b09e4a4c5998fafa14 Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Wed, 20 Aug 2025 09:10:50 -0400 Subject: [PATCH 06/12] updated-veil-commits --- .gitignore | 5 +- css/components/elements/_veil.scss | 121 +++++++++++++++++++++++--- examples/sample-article/project.ptx | 2 +- js/pretext_add_on.js | 128 +++++++++++++++++++++++++--- xsl/pretext-html.xsl | 62 ++++++++++++-- xsl/pretext-latex-common.xsl | 60 ++++++++++--- 6 files changed, 332 insertions(+), 46 deletions(-) diff --git a/.gitignore b/.gitignore index 573d92f828..c23c5ecaff 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,7 @@ examples/webwork/minimal/generated/* **/node_modules/ # cssbuilder output -css/dist/*.map \ No newline at end of file +css/dist/*.map + +# don't track changes to examples +examples/* \ No newline at end of file diff --git a/css/components/elements/_veil.scss b/css/components/elements/_veil.scss index b8a4845070..ee463d10d1 100644 --- a/css/components/elements/_veil.scss +++ b/css/components/elements/_veil.scss @@ -1,22 +1,121 @@ -.veil-toggle { - background-color: #007bff; - color: white; - padding: 0.05rem 0.25rem; +/* ========================================================================== + PreTeXt — final SCSS (light: royal blue, dark: burnt orange) + - Transparent background for revealed content + - Non-transparent button background (mode-aware) + - Works for inline (.veil--inline) and block (.veil--block) veils + - Includes keyboard focus and pressed feedback + ========================================================================== */ + +/* ---------------- Theme tokens via CSS variables ------------------------- */ +:root { + --veil-primary: #1d4ed8; /* royal blue */ + --veil-btn-bg: #f8fafc; /* very light gray-blue */ + --veil-text-color: inherit; + + --veil-focus-ring: rgba(29, 78, 216, 0.35); + --veil-hover-ring: rgba(29, 78, 216, 0.18); + --veil-pressed-shadow: rgba(0,0,0,0.06); +} + +/* Dark mode uses a burnt orange accent; PreTeXt toggles .dark-mode on */ +.dark-mode { + --veil-primary: #f59e0b; /* burnt orange */ + --veil-btn-bg: rgba(245, 158, 11, 0.12); + --veil-text-color: inherit; + + --veil-focus-ring: rgba(245, 158, 11, 0.45); + --veil-hover-ring: rgba(245, 158, 11, 0.22); + --veil-pressed-shadow: rgba(245, 158, 11, 0.16); +} + +/* Optional fallback if a system-dark page lacks the .dark-mode class */ +/* @media (prefers-color-scheme: dark) { + :root:not(.dark-mode) { + --veil-primary: #f59e0b; + --veil-btn-bg: rgba(245, 158, 11, 0.12); + --veil-focus-ring: rgba(245, 158, 11, 0.45); + --veil-hover-ring: rgba(245, 158, 11, 0.22); + --veil-pressed-shadow: rgba(245, 158, 11, 0.16); + } +} */ + +/* ---------------- Containers -------------------------------------------- */ +.veil--inline { display: inline; } +.veil--block { margin: 0.25rem 0; } + +/* ---------------- Reveal button (shown when hidden) --------------------- */ +.veil .veil-toggle { + display: inline-block; + background: var(--veil-btn-bg); + color: var(--veil-primary); + padding: 0.06rem 0.35rem; + border: 1px solid color-mix(in srgb, var(--veil-primary) 35%, transparent); border-radius: 0.25rem; font-size: 0.85rem; - font-weight: bold; + line-height: 1.2; cursor: pointer; - white-space: nowrap; + vertical-align: baseline; + transition: box-shadow 120ms ease, transform 60ms ease, border-color 120ms ease; + + &:hover { + box-shadow: 0 0 0 2px var(--veil-hover-ring); + } + &:active { + transform: scale(0.995); + } + &:focus-visible { + outline: 2px solid var(--veil-focus-ring); + outline-offset: 2px; + } } -.veil-toggle.slide-away { +/* ---------------- Hidden by default ------------------------------------ */ +.veil .veil-content { display: none; } -.veil-content { - display: none; +/* ---------------- Revealed state --------------------------------------- */ +.veil.revealed .veil-toggle { display: none; } + +.veil.revealed .veil-content { + display: inline; /* overridden to block for block variant */ + background: transparent; /* transparent background as requested */ + color: var(--veil-text-color); + border: 1px solid var(--veil-primary); + padding: 0.06rem 0.30rem; + border-radius: 0.20rem; + cursor: pointer; + transition: transform 60ms ease, box-shadow 120ms ease, border-color 120ms ease; + + &:hover { + box-shadow: 0 0 0 2px var(--veil-hover-ring) inset; + } + &:focus-visible { + outline: 2px solid var(--veil-focus-ring); + outline-offset: 2px; + } + + /* Pressed feedback (toggled by JS on pointer events) */ + &.is-pressed { + transform: scale(0.995); + box-shadow: 0 0 0 3px var(--veil-pressed-shadow) inset; + } +} + +/* Block variant shows content as a block when revealed */ +.veil--block.revealed .veil-content { + display: block; + padding: 0.40rem 0.55rem; } -.veil-content.visible { - display: inline; +/* ---------------- Print (HTML -> paper) --------------------------------- */ +@media print { + .veil .veil-toggle { display: none !important; } + .veil .veil-content { + display: inline !important; + border: none !important; + background: transparent !important; + padding: 0 !important; + } + .veil--block .veil-content { display: block !important; } } \ No newline at end of file diff --git a/examples/sample-article/project.ptx b/examples/sample-article/project.ptx index c17ad5dffb..3d64b1ed07 100644 --- a/examples/sample-article/project.ptx +++ b/examples/sample-article/project.ptx @@ -24,7 +24,7 @@ publication.xml output/latex - + pdf sample-article.xml publication.xml diff --git a/js/pretext_add_on.js b/js/pretext_add_on.js index 67b38eb7a5..21d053d5cd 100644 --- a/js/pretext_add_on.js +++ b/js/pretext_add_on.js @@ -1233,18 +1233,122 @@ document.addEventListener("click", (ev) => { setTimeout(() => button.classList.toggle("copied"), 1000); }); -window.addEventListener("load", function() { - console.log("Initializing veil click interactions"); - document.querySelectorAll('.veil-toggle').forEach(toggle => { - const content = toggle.nextElementSibling; - if (content && content.classList.contains('veil-content')) { - toggle.addEventListener('click', () => { - toggle.classList.add('slide-away'); - content.classList.add('visible'); - }); - } - }); -}); +// window.addEventListener("load", function() { +// console.log("Initializing veil click interactions"); +// document.querySelectorAll('.veil-toggle').forEach(toggle => { +// const content = toggle.nextElementSibling; +// if (content && content.classList.contains('veil-content')) { +// toggle.addEventListener('click', () => { +// toggle.classList.add('slide-away'); +// content.classList.add('visible'); +// }); +// } +// }); +// }); + +// window.addEventListener('load', () => { +// const LABEL_REVEAL = document.documentElement.getAttribute('data-veil-reveal') || 'Reveal'; +// const LABEL_HIDE = document.documentElement.getAttribute('data-veil-hide') || 'Hide'; + +// document.addEventListener('click', async (ev) => { +// const btn = ev.target.closest('.ptx-veil-toggle'); +// if (!btn) return; +// const content = btn.nextElementSibling; +// if (!content || !content.classList.contains('ptx-veil-content')) return; + +// const once = btn.classList.contains('once'); +// const expanded = btn.getAttribute('aria-expanded') === 'true'; +// const next = once ? true : !expanded; + +// btn.setAttribute('aria-expanded', String(next)); +// if (!once) btn.textContent = next ? LABEL_HIDE : LABEL_REVEAL; + +// content.hidden = !next; +// if (once) btn.classList.add('slide-away'); + +// // MathJax on demand +// if (next && window.MathJax?.typesetPromise) { +// try { await MathJax.typesetPromise([content]); } catch {} +// } +// }); +// }); + +(function () { + function isInteractive(el) { + return el.closest('a, button, input, textarea, select, label, summary, details'); + } + + function reveal(container) { + if (!container || container.classList.contains('revealed')) return; + const toggle = container.querySelector('.veil-toggle'); + const content = container.querySelector('.veil-content'); + if (!content) return; + container.classList.add('revealed'); + if (toggle) toggle.setAttribute('aria-expanded', 'true'); + content.focus({ preventScroll: true }); + // MathJax typeset on first reveal + if (window.MathJax?.typesetPromise) { + try { window.MathJax.typesetPromise([content]); } catch {} + } + } + + function hide(container) { + if (!container || !container.classList.contains('revealed')) return; + const toggle = container.querySelector('.veil-toggle'); + const content = container.querySelector('.veil-content'); + container.classList.remove('revealed'); + if (toggle) toggle.setAttribute('aria-expanded', 'false'); + if (toggle) toggle.focus({ preventScroll: true }); + if (content) content.classList.remove('is-pressed'); + } + + // Toggle via click + window.addEventListener('click', (evt) => { + const toggle = evt.target.closest('.veil .veil-toggle'); + if (toggle) { reveal(toggle.closest('.veil')); return; } + + const content = evt.target.closest('.veil.revealed .veil-content'); + if (content) { + if (isInteractive(evt.target)) return; + hide(content.closest('.veil')); + } + }); + + // Keyboard toggle on Enter/Space + window.addEventListener('keydown', (evt) => { + if (evt.key !== 'Enter' && evt.key !== ' ') return; + const toggle = evt.target.closest('.veil .veil-toggle'); + if (toggle) { evt.preventDefault(); reveal(toggle.closest('.veil')); return; } + const content = evt.target.closest('.veil.revealed .veil-content'); + if (content) { evt.preventDefault(); hide(content.closest('.veil')); } + }); + + // “Pressed” visual feedback for revealed content + window.addEventListener('pointerdown', (evt) => { + const content = evt.target.closest('.veil.revealed .veil-content'); + if (!content || isInteractive(evt.target)) return; + content.classList.add('is-pressed'); + }); + window.addEventListener('pointerup', (evt) => { + const content = evt.target.closest('.veil.revealed .veil-content'); + if (content) content.classList.remove('is-pressed'); + }); + window.addEventListener('pointercancel', () => { + document.querySelectorAll('.veil.revealed .veil-content.is-pressed') + .forEach(el => el.classList.remove('is-pressed')); + }); + window.addEventListener('pointerleave', (evt) => { + const content = evt.target.closest?.('.veil.revealed .veil-content'); + if (content) content.classList.remove('is-pressed'); + }); + + // Initialize aria state + window.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('.veil .veil-toggle') + .forEach(btn => btn.setAttribute('aria-expanded', 'false')); + }); +})(); + document.addEventListener("DOMContentLoaded", () => { const elements = document.querySelectorAll(".clipboardable"); diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index eecf6cb12e..62b2811d00 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -8614,19 +8614,65 @@ along with MathBook XML. If not, see . - - reveal - - + + + + + + + + - - \textcolor{gray}{\underline{ - - }} + + + +
    + +
    + +
    +
    + + diff --git a/xsl/pretext-latex-common.xsl b/xsl/pretext-latex-common.xsl index 818a5730af..ab25b92918 100644 --- a/xsl/pretext-latex-common.xsl +++ b/xsl/pretext-latex-common.xsl @@ -63,7 +63,6 @@ along with MathBook XML. If not, see . - @@ -1156,6 +1155,24 @@ along with MathBook XML. If not, see .     + %% Veil support (PreTeXt) + \usepackage[normalem]{ulem} + \usepackage{xcolor} + + + % \newif\ifPTXVeilRevealInPrint % future publisher-driven boolean + % \PTXVeilRevealInPrintfalse % default could be set in publisher later + + + \newcommand{\PTXveil}[1]{\uline{\,#1\,}} + + \newcommand{\PTXveilhidden}[1]{{\color{white}\,#1\,}} + + + \newcommand{\PTXveilblock}[1]{\,#1\,} + + + %% A character like a tilde, but different @@ -2646,8 +2663,8 @@ along with MathBook XML. If not, see . } - - + + - - \underline{ - - } - + --> + + + + PTX:WARNING: Veil inside math is not supported in LaTeX; content will be printed as-is. + + + + + + + + + \PTXveilblock{ + + } + + + + \PTXveil{ + + } + + + From 465e64c3bb34f8ab303361671d1ab74c69f38a0f Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Wed, 20 Aug 2025 09:13:19 -0400 Subject: [PATCH 07/12] revert-gitignore --- .gitignore | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index c23c5ecaff..573d92f828 100644 --- a/.gitignore +++ b/.gitignore @@ -22,7 +22,4 @@ examples/webwork/minimal/generated/* **/node_modules/ # cssbuilder output -css/dist/*.map - -# don't track changes to examples -examples/* \ No newline at end of file +css/dist/*.map \ No newline at end of file From 759d37d490da5d4caf3dd3890f741bf010ca3c61 Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Wed, 20 Aug 2025 09:15:15 -0400 Subject: [PATCH 08/12] removed-comments --- css/components/elements/_veil.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/css/components/elements/_veil.scss b/css/components/elements/_veil.scss index ee463d10d1..aeafe2180f 100644 --- a/css/components/elements/_veil.scss +++ b/css/components/elements/_veil.scss @@ -28,17 +28,6 @@ --veil-pressed-shadow: rgba(245, 158, 11, 0.16); } -/* Optional fallback if a system-dark page lacks the .dark-mode class */ -/* @media (prefers-color-scheme: dark) { - :root:not(.dark-mode) { - --veil-primary: #f59e0b; - --veil-btn-bg: rgba(245, 158, 11, 0.12); - --veil-focus-ring: rgba(245, 158, 11, 0.45); - --veil-hover-ring: rgba(245, 158, 11, 0.22); - --veil-pressed-shadow: rgba(245, 158, 11, 0.16); - } -} */ - /* ---------------- Containers -------------------------------------------- */ .veil--inline { display: inline; } .veil--block { margin: 0.25rem 0; } From 3affd109c1ef3a40bd3a05bc34120934b122223d Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Wed, 20 Aug 2025 09:49:56 -0400 Subject: [PATCH 09/12] js-clean-up-more-tests-in-sample-article --- examples/sample-article/project.ptx | 2 +- examples/sample-article/sample-article.xml | 65 ++++++- js/pretext_add_on.js | 207 ++++++++++++--------- 3 files changed, 189 insertions(+), 85 deletions(-) diff --git a/examples/sample-article/project.ptx b/examples/sample-article/project.ptx index 3d64b1ed07..c17ad5dffb 100644 --- a/examples/sample-article/project.ptx +++ b/examples/sample-article/project.ptx @@ -24,7 +24,7 @@ publication.xml output/latex - + pdf sample-article.xml publication.xml diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index 6639753ec8..1a73035ac0 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -10219,7 +10219,70 @@ along with MathBook XML. If not, see . h(x) = \int_0^x \sin(t)\ dt -

    Final test: a veil at the end of the sentence.

    +

    A veil at the end of the sentence.

    + +

    A hidden external link: PreTeXt website is a great resource.

    + +

    The command is pip install pretext, which installs the toolkit.

    + +

    Two quick reveals: first,second.

    + +

    The derivative of e^{kt} is k\,e^{kt}.

    + +

    The identity \sin^2\theta + \cos^2\theta = 1 is fundamental.

    + +
      +
    • The capital of France is Paris.
      • +
    • \int_0^1 x^2\,dx = \tfrac{1}{3}.
      • +
    + +
      +
    1. Differentiate: \frac{d}{dx}\big(x^3\big)=3x^2
      2. +
    2. Evaluate: f(2) = 12
      3. +
    + + + A tiny table with veiled entries + + + Quantity + Value + + + Slope + \frac{\Delta y}{\Delta x} + + + Secret code + AX-42 + + +
    + +
    + Just some cubic functions. + +
    + + +

    Hint. Use an integrating factor \mu(x)=e^{\int p(x)\,dx} to solve y'+p(x)y=q(x).

    +     + + + \int_0^{2\pi}\sin(x)\,dx = 0 + + + + Geometric Series + + For |r| < 1, \sum_{k=0}^{\infty} r^k = \frac{1}{1-r}. + + +

    Consider the partial sums S_n = \sum_{k=0}^{n} r^k and compute (1-r)S_n, then take n\to\infty.

    +     +     + +

    The eigenvalues of \begin{pmatrix}2 \amp 0\\0 \amp 3\end{pmatrix} are 2, 3.

    diff --git a/js/pretext_add_on.js b/js/pretext_add_on.js index 21d053d5cd..7fb5215db5 100644 --- a/js/pretext_add_on.js +++ b/js/pretext_add_on.js @@ -1233,119 +1233,160 @@ document.addEventListener("click", (ev) => { setTimeout(() => button.classList.toggle("copied"), 1000); }); -// window.addEventListener("load", function() { -// console.log("Initializing veil click interactions"); -// document.querySelectorAll('.veil-toggle').forEach(toggle => { -// const content = toggle.nextElementSibling; -// if (content && content.classList.contains('veil-content')) { -// toggle.addEventListener('click', () => { -// toggle.classList.add('slide-away'); -// content.classList.add('visible'); -// }); -// } -// }); -// }); - -// window.addEventListener('load', () => { -// const LABEL_REVEAL = document.documentElement.getAttribute('data-veil-reveal') || 'Reveal'; -// const LABEL_HIDE = document.documentElement.getAttribute('data-veil-hide') || 'Hide'; - -// document.addEventListener('click', async (ev) => { -// const btn = ev.target.closest('.ptx-veil-toggle'); -// if (!btn) return; -// const content = btn.nextElementSibling; -// if (!content || !content.classList.contains('ptx-veil-content')) return; - -// const once = btn.classList.contains('once'); -// const expanded = btn.getAttribute('aria-expanded') === 'true'; -// const next = once ? true : !expanded; - -// btn.setAttribute('aria-expanded', String(next)); -// if (!once) btn.textContent = next ? LABEL_HIDE : LABEL_REVEAL; - -// content.hidden = !next; -// if (once) btn.classList.add('slide-away'); - -// // MathJax on demand -// if (next && window.MathJax?.typesetPromise) { -// try { await MathJax.typesetPromise([content]); } catch {} -// } -// }); -// }); - +/** + * PreTeXt interaction layer + * -------------------------------- + * Purpose: + * Provide accessible show/hide behavior for in HTML: + * - When hidden: show a small chip-like button (.veil-toggle) + * - When revealed: show bordered content (.veil-content) that can be clicked to hide + * + * Expected markup (emitted by XSL): + * Inline: + * + * + * … + * + * Block: + *
    + * + *
    …
    + *
    + * + * Accessibility: + * - Real - * … - * - * Block: - *
    - * - *
    …
    - *
    - * - * Accessibility: + * Notes: * - Real