introduction to using mathml
DESCRIPTION
Introduction to Using MathML. Presented by:Robert Miner Director of New Product Development Bob Mathews Director of Training. What we’ll cover. Part I – Understanding MathML Overview of MathML Presentation and content markup MathML elements - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/1.jpg)
Introduction to Using MathMLIntroduction to Using MathML
Presented by: Robert MinerDirector of New Product Development
Bob MathewsDirector of Training
![Page 2: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/2.jpg)
2
What we’ll coverWhat we’ll cover Part I – Understanding MathML
Overview of MathML Presentation and content markup MathML elements Building a MathML expression and inserting into
HTML and XML pages.
![Page 3: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/3.jpg)
3
What we’ll coverWhat we’ll cover Part I – Understanding MathML Part II – Magic Incantations
DOCTYPEs & MIME types Namespaces Object Tags and Processing Instructions Universal MathML Stylesheet
![Page 4: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/4.jpg)
4
What we’ll coverWhat we’ll cover Part I – Understanding MathML Part II – Magic Incantations Part III – Tools
Design Science WebEQ Design Science MathType with MathPage
technology TeX4ht Amaya
![Page 5: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/5.jpg)
5
What we’ll coverWhat we’ll cover Part I – Understanding MathML Part II – Magic Incantations Part III – Tools
Design Science WebEQ Design Science MathType with MathPage
technology TeX4ht Amaya
Now on to Part I – Understanding MathML
![Page 6: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/6.jpg)
6
Overview of MathMLOverview of MathML The Mathematical Markup Language
(MathML) was first published as a recommendation in April 1998.
![Page 7: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/7.jpg)
7
Overview of MathMLOverview of MathML The Mathematical Markup Language
(MathML) was first published as a recommendation in April 1998.
From the “Math Activity Statement” of the W3C Math Working Group:
![Page 8: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/8.jpg)
8
The Mathematical Markup Language (MathML) was first published as a recommendation in April 1998.
From the “Math Activity Statement” of the W3C Math Working Group: “Designed as an XML application, MathML
provides two sets of tags, one for the visual presentation of mathematics and the other associated with the meaning behind equations.”
Overview of MathMLOverview of MathML
![Page 9: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/9.jpg)
9
Overview of MathMLOverview of MathML The Mathematical Markup Language
(MathML) was first published as a recommendation in April 1998.
From the “Math Activity Statement” of the W3C Math Working Group: “…two sets of tags…” “MathML is not designed for people to enter by
hand but specialized tools provide the means for typing in and editing mathematical expressions.”
![Page 10: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/10.jpg)
10
Anatomy of a MathML expressionAnatomy of a MathML expression About 30 MathML presentation elementselements
which accept about 50 attributesattributes
![Page 11: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/11.jpg)
11
Most elements represent templates or patternsfor laying out subexpressions. For example, there is an mfrac element for fractions, and anmsqrt element for square roots.
Anatomy of a MathML expressionAnatomy of a MathML expression About 30 MathML presentation elementselements
which accept about 50 attributesattributes
![Page 12: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/12.jpg)
12
Attributes generally specify additional optionalinformation about the element. Each attributehas a name and a value. For example, the mfracelement has an attribute called linethickness.
Anatomy of a MathML expressionAnatomy of a MathML expression About 30 MathML presentation elementselements
which accept about 50 attributesattributes
![Page 13: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/13.jpg)
13
Anatomy of a MathML expressionAnatomy of a MathML expression About 30 MathML presentation elementselements
which accept about 50 attributesattributes Using presentation markup, it’s possible to
precisely control how an expression will look when displayed.
About 120 content elements, accepting about a dozen attributes.
![Page 14: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/14.jpg)
14
Anatomy of a MathML expressionAnatomy of a MathML expression About 30 MathML presentation elementselements
which accept about 50 attributesattributes Using presentation markup, it’s possible to
precisely control how an expression will look when displayed.
About 120 content elements, accepting about a dozen attributes.
Most content elements represent either operatorsor mathematical data types. For example, there is a divide/ element for division, and an emptysetelement to denote the empty set.
![Page 15: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/15.jpg)
15
Anatomy of a MathML expressionAnatomy of a MathML expression About 30 MathML presentation elementselements
which accept about 50 attributesattributes Using presentation markup, it’s possible to
precisely control how an expression will look when displayed.
About 120 content elements, accepting about a dozen attributes.
Content markup facilitates applications other than display, like computer algebra and speech synthesis.
![Page 16: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/16.jpg)
16
Two types of elementsTwo types of elements Most presentation elements have start and
end tags, similar to the way some HTML has start and end tags.<element_name>…</element_name> These elements can have other data in-between
the start and end tags, such as text, extended characters, or other elements.
![Page 17: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/17.jpg)
17
Two types of elementsTwo types of elements Most presentation elements have start and
end tags, similar to the way some HTML has start and end tags.<element_name>…</element_name>
The other type of MathML element is an empty element of the form<element_name/> These elements have just one tag.
![Page 18: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/18.jpg)
18
Two types of elementsTwo types of elements Most presentation elements have start and
end tags, similar to the way some HTML has start and end tags.<element_name>…</element_name>
The other type of MathML element is an empty element of the form<element_name/> These elements have just one tag. There are only 4 empty presentation elements,
but over 100 empty content elements, used in prefix notation.
![Page 19: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/19.jpg)
19
Two types of elementsTwo types of elements Most presentation elements have start and
end tags, similar to the way some HTML has start and end tags.<element_name>…</element_name>
The other type of MathML element is an empty element of the form<element_name/>
Elements can also accept attributes. If an element has both start & end tags, the
attribute immediately precedes the > in the start tag.
![Page 20: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/20.jpg)
20
Two types of elementsTwo types of elements Most presentation elements have start and
end tags, similar to the way some HTML has start and end tags.<element_name>…</element_name>
The other type of MathML element is an empty element of the form<element_name/>
Elements can also accept attributes. In empty elements, attributes immediately
precede the />.
![Page 21: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/21.jpg)
21
Examples of attributesExamples of attributes
<mfrac linethickness='0'>…
</mfrac>
![Page 22: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/22.jpg)
22
Examples of attributesExamples of attributes
<mfrac linethickness='0'>…
</mfrac>
<mspace width='12'/>
Inserts a 12-pt space. For 12 pixels, use “12px”.
![Page 23: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/23.jpg)
23
Examples of attributesExamples of attributes
<mfrac linethickness='0'>…
</mfrac>
<mspace width='12'/>
<mtable columnalign="center">…
</mtable>
![Page 24: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/24.jpg)
24
Basic presentation elementsBasic presentation elements <mi> – identifier, such as a variable, function
name, constant, etc. example: <mi>x</mi>
rendering: x example: <mi>sin</mi>
rendering: sin
![Page 25: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/25.jpg)
25
Basic presentation elementsBasic presentation elements <mi> – identifier, such as a variable, function
name, constant, etc. <mo> – operator, such as a summation, fence
(parentheses, brace, etc.), accent, etc. example: <mo>(</mo>
rendering: ( example: <mo>∑</mo>
rendering:
![Page 26: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/26.jpg)
26
Basic presentation elementsBasic presentation elements <mi> – identifier, such as a variable, function
name, constant, etc. <mo> – operator, such as a summation, fence
(parentheses, brace, etc.), accent, etc. example: <mo>(</mo>
rendering: ( example: <mo>∑</mo>
rendering: This is an example of an entity reference. Entity referencesare just keywords in a special format, which representextended characters. Other examples are α (lower-case Greek alpha), and ∞ (infinity).
![Page 27: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/27.jpg)
27
Basic presentation elementsBasic presentation elements <mi> – identifier, such as a variable, function
name, constant, etc. <mo> – operator, such as a summation, fence
(parentheses, brace, etc.), accent, etc. <mn> – number
![Page 28: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/28.jpg)
28
Basic presentation elementsBasic presentation elements <mi> – identifier, such as a variable, function
name, constant, etc. <mo> – operator, such as a summation, fence
(parentheses, brace, etc.), accent, etc. <mn> – number Can you identify this expression?
<mi>x</mi><mo>–</mo><mo>(</mo> <mn>3</mn><mo>+</mo><mi>y</mi><mo>)</mo>
![Page 29: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/29.jpg)
29
Basic presentation elementsBasic presentation elements <mi> – identifier, such as a variable, function
name, constant, etc. <mo> – operator, such as a summation, fence
(parentheses, brace, etc.), accent, etc. <mn> – number Can you identify this expression?
<mi>x</mi><mo>–</mo><mo>(</mo> <mn>3</mn><mo>+</mo><mi>y</mi><mo>)</mo>
x – (3 + y)
![Page 30: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/30.jpg)
30
Token elementsToken elements Most MathML elements, like the mfrac
element mentioned earlier, expect to only find other MathML elements in their content…
…but some presentation elements – <mi>, <mo>, and <mn>, for example – are different. They are examples of token elements. Token elements are the only elements which
directly contain character data.
![Page 31: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/31.jpg)
31
ScriptsScripts Superscripts and subscripts are ubiquitous in
mathematical notation, and although you won’t be doing much MathML writing manually, it helps to familiarize yourself with the schemata.
MathML contains seven presentation elements for different kinds of scripts, but we’ll take a look at the most common.
![Page 32: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/32.jpg)
32
Scripts – sub & superScripts – sub & super These are the first elements we’ve seen in detail
that normally have more than one argument. Subscript: <msub> basebase scriptscript </msub> Superscript: <msup> basebase scriptscript </msup>
![Page 33: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/33.jpg)
33
Scripts – sub & superScripts – sub & super These are the first elements we’ve seen in detail
that normally have more than one argument. Subscript: <msub> basebase scriptscript </msub> Superscript: <msup> basebase scriptscript </msup> Usage:
x1 <msub><mi><mi>xx</mi></mi><mn><mn>11</mn></mn></msub>
![Page 34: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/34.jpg)
34
Scripts – sub & superScripts – sub & super These are the first elements we’ve seen in detail
that normally have more than one argument. Subscript: <msub> basebase scriptscript </msub> Superscript: <msup> basebase scriptscript </msup> Usage:
x1 <msub><mi><mi>xx</mi></mi><mn><mn>11</mn></mn></msub>
Why can’t we code it this way:
<msub> x 1 </msub>?
![Page 35: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/35.jpg)
35
Scripts – sub & superScripts – sub & super These are the first elements we’ve seen in detail
that normally have more than one argument. Subscript: <msub> basebase scriptscript </msub> Superscript: <msup> basebase scriptscript </msup> Usage:
x1 <msub><mi><mi>xx</mi></mi><mn><mn>11</mn></mn></msub>
Because msub is not a token element. A token elementis the only element that can directly contain character data.
Why can’t we code it this way:
<msub> x 1 </msub>?
![Page 36: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/36.jpg)
36
Scripts – sub & superScripts – sub & super These are the first elements we’ve seen in detail
that normally have more than one argument. Subscript: <msub> basebase scriptscript </msub> Superscript: <msup> basebase scriptscript </msup> Usage:
x1 <msub><mi><mi>xx</mi></mi><mn><mn>11</mn></mn></msub>
x2 <msup><mi><mi>xx</mi></mi><mn><mn>22</mn></mn></msup>
<msubsup><mi><mi>xx</mi></mi><mn><mn>11</mn></mn><mn><mn>22</mn></mn></msubsup>
![Page 37: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/37.jpg)
37
Including MathML in your pageIncluding MathML in your page We need some way to identify the math
markup to our browser, plug-in, or applet. MathML markup is inserted between
<math> and </math>
tags to distinguish MathML from other markup. Although most tags will differ from presentation
markup to content markup, the <math> tag is common to both.
![Page 38: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/38.jpg)
38
Coding simple expressionsCoding simple expressions As we stated at the beginning, it is not our
goal in this tutorial to make you proficient at writing MathML. You’ll likely use a software product to produce the
MathML markup rather than write it yourself. Our goal is to familiarize you enough with the
MathML syntax and construction that you can read and understand a block of code, and can perhaps make changes to it by hand.
![Page 39: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/39.jpg)
39
Coding simple expressionsCoding simple expressions As we stated at the beginning, it is not our
goal in this tutorial to make you proficient at writing MathML.
That being the case, you know enough MathML now to try your hand at coding a couple of simple expressions…
![Page 40: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/40.jpg)
40
Example 1 – try coding this…Example 1 – try coding this…
2b 4
![Page 41: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/41.jpg)
41
Example 1 – try coding this…Example 1 – try coding this…
<math>
</math>
Don’t forget to begin with the <math> start tag and end with the </math> end
tag
Don’t forget to begin with the <math> start tag and end with the </math> end
tag
2b 4
![Page 42: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/42.jpg)
42
Example 1 – try coding this…Example 1 – try coding this…
<math>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>–</mo><mn>4</mn>
</math>
2b 4
![Page 43: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/43.jpg)
43
Example 1aExample 1a
2b 4ac
![Page 44: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/44.jpg)
44
Example 1aExample 1a
<math>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>–</mo><mn>4</mn><mi>a</mi><mi>c</mi>
</math>
2b 4ac
![Page 45: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/45.jpg)
45
Example 1aExample 1a
or…2b 4ac
![Page 46: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/46.jpg)
46
<math> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>–</mo> <mn>4</mn> <mo>⁢<mo> <mi>a</mi> <mo>⁢<mo> <mi>c</mi></math>
Example 1aExample 1aThis entity doesn’t appear in
print, but here we have added
it to facilitate voice synthesisand heuristic evaluation bycomputer algebra systems.
2b 4ac
![Page 47: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/47.jpg)
47
<math> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>–</mo> <mn>4</mn> <mo>⁢<mo> <mi>a</mi> <mo>⁢<mo> <mi>c</mi> </mrow></math>
Example 1aExample 1a
24bac−
Horizontal row of expressions aligned on the baseline.
Wrapping an mrow around an element or elements is always
permissible, and often necessary in order to group terms together, for example, for use in a script,
etc.
![Page 48: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/48.jpg)
48
€
x2 + y2 = r2
Example 2 – one more…Example 2 – one more…
![Page 49: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/49.jpg)
49
Example 2 – one more…Example 2 – one more…<math> <mrow> <msup> <mi>x</mi><mn>2</mn> </msup> <mo>+</mo> <msup> <mi>y</mi><mn>2</mn> </msup> <mo>=</mo> <msup> <mi>r</mi><mn>2</mn> </msup> </mrow></math>
€
x2 + y2 = r2
![Page 50: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/50.jpg)
50
Other presentation elementsOther presentation elements Presentation elements are grouped:
Token Elements <mi> identifier <mn> number <mo> operator, fence, or separator <mtext> text
![Page 51: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/51.jpg)
51
Other presentation elementsOther presentation elements Presentation elements are grouped:
Token Elements General Layout
<mrow> to group subexpressions <mfrac> form fraction from 2 subexpressions <mroot> radical with a specified index <mfenced> surround content with a pair of fences
![Page 52: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/52.jpg)
52
Other presentation elementsOther presentation elements Presentation elements are grouped:
Token Elements General Layout Scripts and Limits
<msub>, <msup>, <msubsup> <munder> attach a script under a base <mover> attach a script over a base <munderover> attach a script both under
and over a base
![Page 53: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/53.jpg)
53
Other presentation elementsOther presentation elements Presentation elements are grouped:
Token Elements General Layout Scripts and Limits Tables
<mtable> table or matrix <mtr> row in a table or matrix <mtd> one entry in a table or matrix
![Page 54: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/54.jpg)
54
Other presentation elementsOther presentation elements Presentation elements are grouped:
Token Elements General Layout Scripts and Limits Tables Actions
<maction> binds actions to a subexpression
![Page 55: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/55.jpg)
55
Content elementsContent elements Most fundamental to content markup is the <apply> element, which enables the explicit application of a function to its argument.
![Page 56: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/56.jpg)
56
Content elementsContent elements <apply> application of a function to argument. Token Elements
<cn> content number <ci> content identifier
![Page 57: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/57.jpg)
57
Content elementsContent elements <apply> application of a function to argument. Token Elements Basic Content Elements
<inverse/> generic inverse <compose/> compose 2 or more functions <piecewise> piecewise defined function
![Page 58: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/58.jpg)
58
Content elementsContent elements <apply> application of a function to argument. Token Elements Basic Content Elements Arithmetic, Algebra, and Logic
<divide/> division <power/> to the power of <root/> nth root <conjugate/> complex conjugate
![Page 59: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/59.jpg)
59
Content elementsContent elements <apply> application of a function to argument. Token Elements Basic Content Elements Arithmetic, Algebra, and Logic Relations
<eq/> equal <geq/> greater than or equal <factorof/> the “divides” operator
![Page 60: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/60.jpg)
60
Content elementsContent elements <apply> application of a function to argument. Token Elements Basic Content Elements Arithmetic, Algebra, and Logic Relations Calculus and Set Theory
<partialdiff/> partial derivative <lowlimit> lower limit (of integral, etc.) <union/> union or meet
![Page 61: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/61.jpg)
61
Content elementsContent elements <apply> application of a function to argument. Token Elements Basic Content Elements Arithmetic, Algebra, and Logic Relations Calculus and Set Theory Further element groups include sequences &
series, elementary classical functions, statistics, linear algebra, semantic mapping elements, and constants.
![Page 62: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/62.jpg)
62
Example 3 – content markupExample 3 – content markup We want to code this expression in content
markup:
We know we need to surround the code with the <math>…</math> element…
…but we haven’t seen yet how to combine content elements to create an entire expression, so here goes…
€
cosπ = −1
![Page 63: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/63.jpg)
63
Example 3 – content markupExample 3 – content markup
€
cosπ = −1
![Page 64: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/64.jpg)
64
Example 3 – content markupExample 3 – content markup
<math> <apply> <eq/> <apply> <cos/> <ci>π</ci> </apply> <apply> <minus/> <cn>1</cn> </apply> </apply></math>
€
cosπ = −1
![Page 65: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/65.jpg)
65
Example 3 – content markupExample 3 – content markup<math> <apply> <eq/> <apply><apply> <cos/> <cos/> <ci>π</ci> <ci>π</ci> </apply> </apply> <apply> <minus/> <cn>1</cn> </apply> </apply></math>
to the left of the
to the right of the
€
cosπ = −1
![Page 66: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/66.jpg)
66
Example 3 – compareExample 3 – compare<math> <apply> <eq/> <apply> <cos/> <ci>π</ci> </apply> <apply> <minus/> <cn>1</cn> </apply> </apply></math>
<math><mi>cos</mi><mi>π</mi><mo>=</mo><mo>–</mo><mn>1</mn>
</math>
€
cosπ = −1
![Page 67: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/67.jpg)
67
SummarySummary Presentation markup is for describing math
notation, and content markup is for describing mathematical objects and functions. In presentation markup, expressions are built-up
using layout schemata, which tell how to arrange their subexpressions (i.e., mfrac or msup).
![Page 68: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/68.jpg)
68
SummarySummary Presentation markup…& content markup MathML elements either
have start and end tags to enclose their content, or
use a single empty tag.
![Page 69: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/69.jpg)
69
SummarySummary Presentation markup…& content markup MathML elements… Attributes may be specified in a start or
empty tag. Attribute values must be enclosed in quotes.
![Page 70: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/70.jpg)
70
SummarySummary Presentation markup…& content markup MathML elements… Attributes … in a start or empty tag. All character data must be enclosed in token
elements.
![Page 71: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/71.jpg)
71
SummarySummary Presentation markup…& content markup MathML elements… Attributes … in a start or empty tag. All character data … token elements. Extended characters are encoded as entity
references.
![Page 72: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/72.jpg)
72
SummarySummary Presentation markup…& content markup MathML elements… Attributes … in a start or empty tag. All character data … token elements. Extended characters as…entity references. We discussed other layout schemata – math, mfrac, mrow, etc.
The next session of the tutorial will deal with displaying MathML in browsers.
![Page 73: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/73.jpg)
73
Part II – Magic IncantationsPart II – Magic Incantations
DOCTYPEs & MIME types Namespaces Object Tags and Processing Instructions Universal MathML Stylesheet
Triggering MathML rendering in browsers requires special declarations in the page.
![Page 74: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/74.jpg)
74
Which Browsers?Which Browsers? Internet Explorer (requires add-on software)
The main choices are: MathPlayer (IE5.5 or higher under Windows) Techexplorer (IE5 or higher, many platforms) JavaScript/CSS (IE6 Windows, others soon?)
Netscape (add-ons required before NS7 PR1)
Some things to note: MathML doesn’t yet work on the Mac The decision to include MathML isn’t final
![Page 75: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/75.jpg)
75
DOCTYPEs and MIME typesDOCTYPEs and MIME types There are two ways browsers determine what
kind of data needs to be displayed. Local files indicate their type with a filename
extension (Windows, Unix) or extra data included in the file (Mac).
Data coming over an http connection doesn’t have a filename. Thus, web servers include extra data about what kind of file is being sent. This extra data is called a MIME type.
![Page 76: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/76.jpg)
76
DOCTYPEs and MIME typesDOCTYPEs and MIME types Web servers generally use file extensions to
pick the MIME type. This doesn’t always work…
Netscape 7 is fanatical about using only the MIME type to determine how to display a document.
Internet Explorer is extremely cavalier in using the MIME type, preferring to sniff inside the document to guess its type.
![Page 77: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/77.jpg)
77
MIME typesMIME types We are concerned with three kinds of files:
XML files. This includes XHTML files. Netscape 7 will only render MathML in this kind of file.
HTML files. Internet Explorer will only render MathML in HTML files.
XSL files. These are also XML files, but they usually end .xsl instead of .xml, which screws up many/most web servers.
![Page 78: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/78.jpg)
78
XHTML vs HTMLXHTML vs HTML
Start and end tags must always match. Things such as <br /> must be empty tags. All attributes must have quotes around them Your code actually has to be correct!
XHTML and HTML are nearly the same. The main difference is that XHTML is picky while HTML is lax.
The most important things are:
![Page 79: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/79.jpg)
79
MIME typesMIME typesThe upshot is: To work in Netscape, you need an XML
document. To work in Internet Explorer you need an
HTML document. So, in practice you create an XHTML
document, and fiddle with the MIME type On the server using scripts, etc. On the client using XSL stylesheets.
![Page 80: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/80.jpg)
80
DOCTYPEsDOCTYPEs A DOCTYPE is a special declaration at the
beginning of an HTML or XML document that defines what kind of markup is in the document. DOCTYPEs are really for validation, not
identification. DOCTYPEs point to a DTD, which defines the
syntax of the markup in the document.
![Page 81: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/81.jpg)
81
DOCTYPEsDOCTYPEs
<!DOCTYPE html SYSTEM "..//xhtml-math11-f.dtd">
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""../DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN""http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"[ <!ENTITY mathml http://www.w3.org/1998/Math/MathML"> ]>
Typical DOCTYPE declarations look like this:
![Page 82: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/82.jpg)
82
DOCTYPEsDOCTYPEs Netscape 7 requires a DOCTYPE, but
doesn’t actually look at the DTD to which it points. Instead the DTD must match one of a few
predefined values.
Internet Explorer doesn’t require a DOCTYPE, but it does download the DTD and use it if there is one.
![Page 83: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/83.jpg)
83
DOCTYPEsDOCTYPEsThe upshot is: In your XHTML document, you put a
DOCTYPE, and The W3C Math WG pulls its hair out trying to
make a DTD available that is both correct and works around the bugs in the IE parser.
![Page 84: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/84.jpg)
84
NamespacesNamespaces
XML languages are identified by a URI. MathML is http://www.w3.org/1998/Math/MathML XHTML is http://www.w3.org/1999/xhtml
They can be indicated in two ways. By using an xmlns attribute on an element By adding a prefix to element names
Complexities arise when two XML dialects must mix. The case of interest is XHTML + MathML. The solution is to use namepaces.
![Page 85: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/85.jpg)
85
NamespacesNamespaces
<html xmlns="http://www.w3.org/1999/xhtml">
…
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>x</mi><mo>+</mo><mn>2</mn>
</math>
…
</html>
Use the xmlns attribute on the outermost element of the embedded markup. This places the element on which the attribute is set, and its children in the indicated namespace.
![Page 86: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/86.jpg)
86
NamespacesNamespaces
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> … <m:math> <m:mi>x</m:mi><m:mo>+</m:mo><m:mn>2</m:mn> </m:math> …</html>
To use prefixes, you must Associate a prefix and a namespace using an xmlns:prefix attribute on a containing element.
Use the prefix to identify elements that should be in the namespace.
![Page 87: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/87.jpg)
87
Namespaces & DOCTYPEsNamespaces & DOCTYPEs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "xhtml-math11-f.dtd" [<!ENTITY mathml
http://www.w3.org/1998/Math/MathML">]>
<html xmlns="http://www.w3.org/1999/xhtml" … <math xmlns="&mathml;"> <mi>x</mi><mo>+</mo>< mn>2</mn> </math> …</html>
Since the URIs for namespaces are long, one trick some people like is to declare an entity reference for it in the DOCTYPE:
![Page 88: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/88.jpg)
88
Objects and PIsObjects and PIs
The <object> element instructs IE what piece of software to load.
A processing instruction (or PI) is used to assign the add-on software to render markup from a particular namespace.
Two additional declarations are required to trigger add-on software for math rendering in Internet Explorer:
![Page 89: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/89.jpg)
89
Objects and PIsObjects and PIs
<OBJECT ID="behave1" CLASSID="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></OBJECT>
Windows uses a long string of digits and letters called a class id to uniquely identify software components.
The object tag uses an attribute to specify a class id:
![Page 90: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/90.jpg)
90
Objects and PIsObjects and PIs
<OBJECT ID="behave1" CLASSID="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></OBJECT>
<?IMPORT NAMESPACE="M" IMPLEMENTATION="#behave1" ?>
There are many kinds of processing instructions, with different attributes.
For “IE behaviors” one specifies a namespace, and the ID of an object:
![Page 91: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/91.jpg)
91
Objects and PIsObjects and PIs
Behaviors are actually triggered by a namespace prefix, and not the namespace itself.
The upshot is, to use add-ons such as MathPlayer or Techexplorer, You must include an OBJECT and PI. You must use the prefix method for namespaces.
One complexity arises from a bug in Internet Explorer behaviors:
![Page 92: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/92.jpg)
92
Putting It TogetherPutting It Together
Write XHTML Include a DOCTYPE Include an OBJECT and PI Include a namespace declaration Use namespace prefixes on the MathML
Altogether then, to create a document that works in both IE and Netscape, you must:
![Page 93: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/93.jpg)
93
Putting It TogetherPutting It Together
Netscape will only render your document if it is XML.
Internet Explorer will only render it if it is HTML.
The solution? XSL stylesheets…
But wait! Even if you do all that, there is still the insurmountable problem of MIME types:
![Page 94: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/94.jpg)
94
The MathML StylesheetThe MathML Stylesheet
You add an XSL stylesheet to an XML document using a PI.
The stylesheet sits on the server with your document.
The stylesheet runs in the client to transform your document for viewing.
An XSL stylesheet is a set of templates for transforming an input document into an output document.
![Page 95: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/95.jpg)
95
The MathML StylesheetThe MathML Stylesheet
Detect what browser it is running in and output either XML or HTML accordingly
Detect what add-ons are installed and output the necessary Object and PI declarations
Convert content to presentation markup
XSL is powerful. The W3C Math WG has created a Universal MathML Stylesheet which can:
![Page 96: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/96.jpg)
96
The MathML StylesheetThe MathML Stylesheet
<?xml-stylesheet type="text/xsl" href="style/mathml.xsl"?>
The MathML stylesheet PI looks like this:
![Page 97: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/97.jpg)
97
The MathML StylesheetThe MathML Stylesheet
Include the stylesheet PI. Write XHTML. Don’t use entity references.
Use numeric references instead. Use namespaces to indicate the MathML. Don’t use Object tags or behavior PIs. It’s not necessary to use a DOCTYPE.
In order to use the MathML stylesheet,
![Page 98: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/98.jpg)
98
SummarySummary
The document must be XHTML (NS). It needs a DOCTYPE (NS). The MathML must be in a namespace (both,) and
you have to use the prefix method (IE). You need an <object> element and behavior PI (IE). Serve it as XML for NS, and HTML for IE.
Getting MathML in a document to render in both IE and Netscape is quite a trick. The necessary ingredients are:
![Page 99: Introduction to Using MathML](https://reader033.vdocuments.net/reader033/viewer/2022061614/568149f3550346895db723ef/html5/thumbnails/99.jpg)
99
SummarySummary
The document must be XHTML without entity names.
Include the stylesheet PI. The MathML must be in a namespace (either
method). You can omit the DOCTYPE, <object>
element and behavior PI.
A simpler, alternative method which also deals with the MIME types is to use the Universal Math Stylesheet: