Transcript Introduction to Using MathML

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
Building a MathML expression and inserting into
HTML and XML pages.
2
What we’ll cover


Part I – Understanding MathML
Part II – Magic Incantations




DOCTYPEs & MIME types
Namespaces
Object Tags and Processing Instructions
Universal MathML Stylesheet
3
What 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
4
Overview 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:

“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.”
5
Overview 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:

“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.”
6
Overview 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.”
7
Overview 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.”
8
Anatomy of a MathML expression
About 30 MathML presentation elements
which accept about 50 attributes
 Using presentation markup, it’s possible to
precisely control how an expression will look
when generally
displayed.
Attributes
Most elements
specifyrepresent
additionaltemplates
optional or patterns
information
for
about
laying
theout
element.
subexpressions.
Each attribute
For example,about
 About 120
content
elements,
accepting
hasaa name
and
there
a value.
is an mfrac
For example,
element
thefor
mfrac
fractions, and an
dozen
attributes.
element hasmsqrt
an attribute
element
called
forlinethickness.
square roots.
 Content
markuprepresent
facilitates
applications
Most
content elements
either
operators other
or mathematical
data
types.
For example,
there isand
than display,
like
computer
algebra
a divide/
for division, and an emptyset
speech element
synthesis.

element to denote the empty set.
9
Two 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.
10
Two 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.
11
Two 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.
12
Two 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 />.
13
Examples of attributes
n
n!
 k   k! n  k !


 
<mfrac linethickness='0'>
…
</mfrac>
Inserts a 12-pt space. For
12 pixels, use “12px”.
<mspace width='12'/>
<mtable columnalign="center">
…
</mtable>
14
Basic presentation elements

<mi> – identifier, such as a variable, function
name, constant, etc.


example: <mi>x</mi>
rendering: x
example: <mi>sin</mi>
rendering: sin
15
Basic 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>&sum;</mo>
rendering: S
This is an example of an entity reference. Entity references
are just keywords in a special format, which represent
extended characters. Other examples are &alpha; (lowercase Greek alpha), and &infin; (infinity).
16
Basic 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?


x – (3 + y)
<mi>x</mi><mo>–</mo>
<mo>(</mo>
<mn>3</mn><mo>+</mo><mi>y</mi>
<mo>)</mo>
17
Token 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.
18
Scripts


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.
19
Scripts – sub & super

These are the first elements we’ve seen in detail
that normally have more than one argument.



Subscript: <msub> base script </msub>
Superscript: <msup> base script </msup>
Usage:
x1 <msub><mi>x</mi><mn>1</mn></msub>
x2 <msup><mi>x</mi><mn>2</mn></msup>
x1
2
Why can’t we code it this way:
<msubsup><mi>x</mi>
<msub> x 1 </msub>?
<mn>1</mn>
<mn>2</mn></msubsup>
20
Including 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.
21
Coding 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.
22
Coding 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…
23
Example 1 – try coding this…
<math>
Don’t forget to begin with the
<math> start tag and end with the
</math> end tag
b2  4
</math>
24
Example 1 – try coding this…
<math>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>–</mo><mn>4</mn>
</math>
b2  4
25
Example 1a
Horizontal row of expressions aligned
This
doesn’tWrapping
appear in an mrow
on entity
the baseline.
print,
but here
we have or
added
around
an element
elements is
it to facilitate
voice synthesis
always permissible,
and often
and
heuristicinevaluation
by terms
necessary
order to group
computer
systems.
together,algebra
for example,
for use in a
script, etc.
<math>
<mrow>
<math>
<msup>
<msup>
<mi>b</mi>
<math>
<mi>b</mi>
<mn>2</mn>
<mn>2</mn>
<msup>
2
</msup>
b
 4ac
</msup>
<mi>b</mi>
<mo>–</mo>
<mo>–</mo>
<mn>2</mn>
<mn>4</mn>
<mn>4</mn>
</msup>
<mo>&InvisibleTimes;<mo>
<mo>&InvisibleTimes;<mo>
<mi>a</mi>
<mo>–</mo><mn>4</mn><mi>a</mi><mi>c</mi>
<mi>a</mi>
<mo>&InvisibleTimes;<mo>
<mo>&InvisibleTimes;<mo>
</math>
<mi>c</mi>
<mi>c</mi>
</mrow>
</math>
</math>
or…
26
Example 2 – one more…
<math display='block'>
<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>
27
x22  y 22  r 22
Other presentation elements

Presentation elements are grouped:

Token Elements

<mi>

<mn>

<mo>

<mtext>
identifier
number
operator, fence, or separator
text
28
Other 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

29
Other 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

30
Other presentation elements

Presentation elements are grouped:




Token Elements
General Layout
Scripts and Limits
Tables

<mtable> table or matrix

<mtr>

<mtd>
row in a table or matrix
one entry in a table or matrix
31
Other presentation elements

Presentation elements are grouped:





Token Elements
General Layout
Scripts and Limits
Tables
Actions

<maction> binds actions to a subexpression
32
Content elements

Most fundamental to content markup is the
<apply> element, which enables the explicit
application of a function to its argument.
33
Content elements

<apply> application of a function to argument.

Token Elements


<cn>
<ci>
content number
content identifier
34
Content elements

<apply> application of a function to argument.

Token Elements
Basic Content Elements




<inverse/>
<compose/>
<piecewise>
generic inverse
compose 2 or more functions
piecewise defined function
35
Content elements

<apply> application of a function to argument.

Token Elements
Basic Content Elements
Arithmetic, Algebra, and Logic






<divide/>
<power/>
<root/>
<conjugate/>
division
to the power of
nth root
complex conjugate
36
Content elements

<apply> application of a function to argument.

Token Elements
Basic Content Elements
Arithmetic, Algebra, and Logic
Relations






<eq/>
<geq/>
<factorof/>
equal
greater than or equal
the “divides” operator
37
Content 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
38
Content 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.





39
Example 3 – content markup

We want to code this expression in content
markup:
cos   1

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…
40
Example 3 – content markup
<math>
<apply>
<eq/>
<apply>
<cos/>
<ci>&pi;</ci>
</apply>
<apply>
<minus/>
<cn>1</cn>
</apply>
</apply>
</math>
cos   1
41
Example 3 – content markup
<math>
<apply>
<eq/>
<apply>
<cos/>
<ci>&pi;</ci>
</apply>
<apply>
<minus/>
<cn>1</cn>
</apply>
</apply>
</math>
cos   1
42
Example 3 – content markup
<math>
<apply>
<eq/>
<apply>
<cos/>
<ci>&pi;</ci>
</apply>
<apply>
<minus/>
<cn>1</cn>
</apply>
</apply>
</math>
cos   1
43
Example 3 – content markup
<math>
<apply>
<eq/>
<apply>
<cos/>
<ci>&pi;</ci>
</apply>
<apply>
<minus/>
<cn>1</cn>
</apply>
</apply>
</math>
to the left of the 
to the right of the 
44
cos   1
Example 3 – content markup
<math>
<apply>
<eq/>
<apply>
<cos/>
<ci>&pi;</ci>
</apply>
<apply>
<minus/>
<cn>1</cn>
</apply>
</apply>
</math>
cos   1
45
Example 3 – compare
<math>
<apply>
<eq/>
<apply>
<cos/>
<ci>&pi;</ci>
</apply>
<apply>
<minus/>
<cn>1</cn>
</apply>
</apply>
</math>
<math>
<mi>cos</mi>
<mi>&pi;</mi>
<mo>=</mo>
<mo>–</mo>
<mn>1</mn>
</math>
46
cos   1
Summary

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).
47
Summary


Presentation markup…& content markup
MathML elements either


have start and end tags to enclose their content,
or
use a single empty tag.
48
Summary



Presentation markup…& content markup
MathML elements…
Attributes may be specified in a start or
empty tag.

Attribute values must be enclosed in quotes.
49
Summary




Presentation markup…& content markup
MathML elements…
Attributes … in a start or empty tag.
All character data must be enclosed in token
elements.
50
Summary





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.
51
Summary







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.
52
Part II – Magic Incantations
Triggering MathML rendering in browsers
requires special declarations in the page.




DOCTYPEs & MIME types
Namespaces
Object Tags and Processing Instructions
Universal MathML Stylesheet
53
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

54
DOCTYPEs 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.
55
DOCTYPEs 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.
56
MIME 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.
57
XHTML vs HTML
XHTML and HTML are nearly the same. The main
difference is that XHTML is picky while HTML is lax.
The most important things are:




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!
58
MIME types
The 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.
59
DOCTYPEs

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.
60
DOCTYPEs
Typical DOCTYPE declarations look like this:
<!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"> ]>
61
DOCTYPEs

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.
62
DOCTYPEs
The 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.
63
Namespaces
Complexities arise when two XML dialects must mix.
The case of interest is XHTML + MathML. The
solution is to use namepaces.

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
64
Namespaces
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.
<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>
65
Namespaces
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.
<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>
66
Namespaces & DOCTYPEs
Since the URIs for namespaces are long, one
trick some people like is to declare an entity
reference for it in the DOCTYPE:
<!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>
67
Objects and PIs
Two additional declarations are required to
trigger add-on software for math rendering in
Internet Explorer:

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.
68
Objects and PIs
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:
<OBJECT
ID="behave1"
CLASSID="clsid:32F66A20-7614-11D4-BD11-00104BD3F987">
</OBJECT>
69
Objects and PIs
There are many kinds of processing
instructions, with different attributes.
For “IE behaviors” one specifies a
namespace, and the ID of an object:
<OBJECT
ID="behave1"
CLASSID="clsid:32F66A20-7614-11D4-BD11-00104BD3F987">
</OBJECT>
<?IMPORT NAMESPACE="M" IMPLEMENTATION="#behave1" ?>
70
Objects and PIs
One complexity arises from a bug in Internet
Explorer behaviors:


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.
71
Putting It Together
Altogether then, to create a document that
works in both IE and Netscape, you must:





Write XHTML
Include a DOCTYPE
Include an OBJECT and PI
Include a namespace declaration
Use namespace prefixes on the MathML
72
Putting It Together
But wait! Even if you do all that, there is still
the insurmountable problem of MIME types:

Netscape will only render your document if it
is XML.

Internet Explorer will only render it if it is
HTML.

The solution? XSL stylesheets…
73
The MathML Stylesheet
An XSL stylesheet is a set of templates for
transforming an input document into an output
document.

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.
74
The MathML Stylesheet
XSL is powerful. The W3C Math WG has
created a Universal MathML Stylesheet which
can:

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
75
The MathML Stylesheet
The MathML stylesheet PI looks like this:
<?xml-stylesheet
type="text/xsl"
href="style/mathml.xsl"
?>
76
The MathML Stylesheet
In order to use the 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.
77
Summary
Getting MathML in a document to render in
both IE and Netscape is quite a trick. The
necessary ingredients are:





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.
78
Summary
A simpler, alternative method which also deals
with the MIME types is to use the Universal
Math Stylesheet:




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.
79