You’re reading Ry’s MathML Tutorial |
Vectors & Functions
This module covers all of the mathematical notation required for describing vector-valued functions. We’ll explore standard typesetting conventions, including: font selection, diacritics, subscripts, and relevant HTML entities. We’ll also look at a more robust method of grouping expressions.
Font Faces
Vectors are typically written using a bold face, rather than the italic face
of real-valued variables or the roman face of scalar constants. MathML lets you
explicitly define the element type with the mathvariant
attribute:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mn
mathvariant=
'bold'
>
0</mn>
<mo>
⋅
</mo>
<mi
mathvariant=
'bold'
>
v</mi>
<mo>
=</mo>
<mn>
0</mn>
</math>
Since the variables on the left side of this equation describe a vector, we
used the mathvariant
attribute to display them in a bold font, but
the right side is real-valued, so we left it as the default roman face.
The rendered equation is shown below. Also notice the
⋅
entity, which represents the dot product operator.
The mathvariant
attribute can be defined on any of the atomic
MathML elements: <mi>
, <mn>
, or
<mo>
. Accepted values are listed below:
normal |
bold |
italic |
bold-italic |
fraktur |
bold-fraktur |
script |
bold-script |
sans-serif |
bold-sans-serif |
sans-serif-italic |
sans-serif-bold-italic |
monospace |
double-struck |
initial |
tailed |
looped |
stretched |
These font faces let us display all sorts of important mathematical
characters without the need for special entities. For example, we can easily
describe 2-dimensional Cartesian space using double-struck
:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<msup>
<mi
mathvariant=
'double-struck'
>
R</mi>
<mn>
2</mn>
</msup>
</math>
Interestingly, these values are considered logical classes, even though they’re all typographic in nature. Once again, the close relationship between mathematical notation and underlying meaning makes it hard separate presentation from semantics.
Overscripts
An alternative notation for vectors is an arrow over the variable:
We can create this with the <mover>
element, which works
the same as <msup>
, except the script is drawn directly over
the base instead of to the right:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mover>
<mi>
v</mi>
<mo>
→
</mo>
</mover>
</math>
We used the →
entity to create a rightwards arrow, but
you can use any character for the overscript. For other useful overscripts like
line segments and double arrows, please refer to the Geometry section of the
Symbol Reference.
Dotless Letters
It’s important to remember that you can also use special entities for
the base of an overscript, too. One common case is the
“i‑hat” and “j‑hat” vectors. If you were to
use a normal i
and j
as the base of an
<mover>
element, the circumflex accent would appear on
top of the dots:
Instead, you should use the ı
and
ȷ
entities for the base, which are the dotless‑i
and dotless‑j, respectively. An ASCII caret (^
) can be used
for the circumflex accent, giving you the following expression:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mn>
3</mn>
<mover>
<mi>
ı
</mi>
<!-- Dotless i -->
<mo>
^</mo>
</mover>
<mo>
+</mo>
<mn>
2</mn>
<mover>
<mi>
ȷ
</mi>
<!-- Dotless j -->
<mo>
^</mo>
</mover>
<mo>
+</mo>
<mn>
5</mn>
<mover>
<mi>
k</mi>
<mo>
^</mo>
</mover>
</math>
Subscripts
MathML subscripts work exactly like superscripts, except instead of
<msup>
, you use <msub>
. For example, a
generic three-dimensional vector can be marked up as the following.
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mi
mathvariant=
'bold'
>
v</mi>
<mo>
=</mo>
<mrow>
<mo>
(</mo>
<msub>
<mi>
v</mi><mn>
1</mn>
</msub>
<mo>
,</mo>
<msub>
<mi>
v</mi><mn>
2</mn>
</msub>
<mo>
,</mo>
<msub>
<mi>
v</mi><mn>
3</mn>
</msub>
<mo>
)</mo>
</mrow>
</math>
This should look something like:
Like <msup>
and <mover>
,
<msub>
requires precisely 2 arguments, so remember to wrap
sub-expressions in an <mrow>
.
Super/Subscript Pairs
Of course, as soon as we have subscripted elements, we’re going to
need superscript/subscript pairs. For this, MathML provides the
<msubsup>
element, which takes three arguments: the base,
the subscript, and the superscript. For example, consider the conservation of
kinetic energy equation:
This can be marked up with the following (right side omitted for brevity).
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mrow>
<mfrac><mn>
1</mn><mn>
2</mn></mfrac>
<msub><mi>
m</mi><mn>
1</mn></msub>
<msubsup>
<mi>
u</mi>
<mn>
1</mn>
<mn>
2</mn>
</msubsup>
</mrow>
<mo>
+</mo>
<mrow>
<mfrac><mn>
1</mn><mn>
2</mn></mfrac>
<msub><mi>
m</mi><mn>
2</mn></msub>
<msubsup>
<mi>
u</mi>
<mn>
2</mn>
<mn>
2</mn>
</msubsup>
</mrow>
</math>
Arguments and Tuples
The Subscripts section demonstrated a perfectly
acceptable way to define a sequence using <mo>
; however,
MathML also includes the <mfenced>
tag as a friendlier (and
more semantic) way to manage brackets:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mi
mathvariant=
'bold'
>
F</mi>
<mfenced>
<mi>
x</mi>
<mi>
y</mi>
<mi>
z</mi>
</mfenced>
</math>
This should display a vector-valued function that takes three arguments:
Instead of manually adding parentheses and commas with
<mo>
, we let <mfenced>
do all the work
for us. As you might expect, MathML lets you customize the separator and
opening/closing characters via the separators
, open
,
and close
attributes. For instance, if you’d like to mark up
an ordered tuple with angled brackets, you could specify them like so:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mfenced
open=
'⟨'
close=
'⟩'
>
<mi>
x</mi>
<mi>
y</mi>
<mi>
z</mi>
</mfenced>
</math>
Since there is no angled bracket character on a keyboard, we had to use the
⟨
and ⟩
entities for the attribute
values, but you could use any character (e.g., curly braces or square
brackets).
The <mfenced>
tag is a natural way to describe sets and
intervals, and of course, it can also be used to wrap parenthetical groups.
Instead of relying on nested <mrow>
’s, sub-expressions
can be grouped with <mfenced>
by specifying an empty
separator, as shown below.
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<msup>
<mfenced
separators=
''
>
<mrow><mn>
3</mn><mi>
x</mi></mrow>
<mo>
−
</mo>
<mrow><mn>
2</mn><mi>
y</mi></mrow>
</mfenced>
<mn>
2</mn>
</msup>
</math>
While it’s ok to put commas in an <mo>
tag, you
should never use arithmetic operators like −
or
+
as a value for the separator
attribute.
Vector Operators and Entities
In addition to ⋅
, vector mathematics uses a variety of
special symbols. A few of the most useful ones are listed below, and an
extensive list can be found in the Symbol
Reference.
Symbol | Entity | Hex | Description |
---|---|---|---|
⋅ | ⋅ |
⋅ |
Dot product |
⨯ | ⨯ |
⨯ |
Cross product |
‖ | ‖ |
‖ |
Norm (magnitude) bars |
⟨ | ⟨ |
⟨ |
Left angle bracket |
⟩ | ⟩ |
⟩ |
Right angle bracket |
∘ | ∘ |
∘ |
Function composition |
→ | → |
→ |
General function mapping |
… | … |
… |
Horizontal ellipsis |
∈ | ∈ |
∈ |
Member of set |
⊆ | ⊆ |
⊆ |
Subset |
⊂ | ⊂ |
⊂ |
Strict subset |
⊇ | ⊇ |
⊇ |
Superset |
⊃ | ⊃ |
⊃ |
Strict superset |
These new symbols give us most of the tools we need to talk about vectors and functions. For instance, we can now map function compositions from one space to another:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mi
mathvariant=
'bold'
>
F</mi>
<mo>
∘
</mo>
<mi
mathvariant=
'bold'
>
G</mi>
<mo>
:</mo>
<mi>
U</mi>
<mo>
⊆
</mo>
<msup>
<mi
mathvariant=
'double-struck'
>
R</mi>
<mn>
3</mn>
</msup>
<mo>
→
</mo>
<msup>
<mi
mathvariant=
'double-struck'
>
R</mi>
<mn>
2</mn>
</msup>
</math>
This should look something like:
Invisible Operators
Unfortunately, the special characters don’t stop there. On top of the
standard mathematical symbols, there are also a handful of invisible
entities that you need to be aware of. All of these are operators, so they
should only appear in an <mo>
tag.
Entity | Hex | Description |
---|---|---|
⁡ |
⁡ |
Function application |
⁢ |
⁢ |
Invisible multiplication |
⁣ |
⁣ |
Invisible separator |
(n/a) |
⁤ |
Invisible addition |
Even though you can’t see these symbols, they still add
important information to a MathML expression. For example, consider two
interpretations of the ambiguous expression x(y)
:
Without an operator between x
and (y)
, it’s
not clear whether x
is a variable that should be multiplied by
y
or a function call taking y
as its argument. To
explicitly specify the latter, you would use the
⁡
operator:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mi>
a</mi>
<mo>
⁡
</mo>
<mrow>
<mo>
(</mo>
<mi>
b</mi>
<mo>
)</mo>
</mrow>
</math>
Similarly, ⁣
resolves subscript ambiguities
when referencing matrix elements (more on matrices in the Tables section):
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<msub>
<mi>
a</mi>
<mrow>
<mn>
1</mn>
<mo>
⁣
</mo>
<mn>
2</mn>
</mrow>
</msub>
</math>
Finally, the invisible addition entity distinguishes a mixed number from an algebraic multiplication:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<mn>
4</mn>
<mo>
⁤
</mo>
<mfrac>
<mn>
2</mn>
<mn>
3</mn>
</mfrac>
<mo>
≠
</mo>
<mn>
4</mn>
<mo>
⋅
</mo>
<mfrac>
<mn>
2</mn>
<mn>
3</mn>
</mfrac>
</math>
The extra semantic information encoded by invisible entities provides subtle visual cues to the MathML renderer. For example, putting a line break between a function name and its opening parenthesis has the potential to confuse readers. These entities also have a significant impact on spoken renditions of an expression (“Four and two thirds” vs. “Four times two over three”).
It’s good practice to include the above entities whenever applicable. But, as we’ve experienced for most of this tutorial, no serious harm will come if you forget to add one here or there.
Summary
This section presented the typographic tools necessary to mark up vectors
and functions. We used mathvariant
to set the font face of token
elements, <mover>
to embellish symbols,
<msub>
and <msubsup>
to script vector
components, <mfenced>
to specify argument lists, and several
HTML entities to represent both visible and invisible operators.
The vector projection formula sums up many of these new elements:
<math
xmlns=
'http://www.w3.org/1998/Math/MathML'
display=
'block'
>
<msub>
<mi
mathvariant=
'italic'
>
proj</mi>
<mi
mathvariant=
'bold'
>
v</mi>
</msub>
<mo>
⁡
</mo>
<mi
mathvariant=
'bold'
>
a</mi>
<mo>
=</mo>
<mstyle
displaystyle=
'true'
>
<mfrac>
<mrow>
<mi
mathvariant=
'bold'
>
a</mi>
<mo>
⋅
</mo>
<mi
mathvariant=
'bold'
>
v</mi>
</mrow>
<msup>
<mfenced
open=
'‖'
close=
'‖'
>
<mi
mathvariant=
'bold'
>
v</mi>
</mfenced>
<mn>
2</mn>
</msup>
</mfrac>
</mstyle>
<mo>
⁢
</mo>
<mi
mathvariant=
'bold'
>
v</mi>
</math>
The next section examines a few more typographic nuances related to calculus, then we’ll be ready to move on to more complicated layout concerns.
Mailing List
Sign up for my low-volume mailing list to find out when new content is released. Next up is a comprehensive Swift tutorial planned for late January.
You’ll only receive emails when new tutorials are released, and your contact information will never be shared with third parties. Click here to unsubscribe.