Introduction to Using MathML

1
Introduction to Using MathML

• Presented by Robert Miner Director of New
  Product Development
• Bob Mathews Director of Training

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

3
What well cover

• Part I Understanding MathML
• Part II Magic Incantations
• DOCTYPEs MIME types
• Namespaces
• Object Tags and Processing Instructions
• Universal MathML Stylesheet

4
What well 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

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

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

9
Anatomy of a MathML expression

• About 30 MathML presentation elements which
  accept about 50 attributes
• Using presentation markup, its 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.

10
Two types of elements

• Most presentation elements have start and end
  tags, similar to the way some HTML has start and
  end tags.
• ltelement_namegtlt/element_namegt
• These elements can have other data in-between the
  start and end tags, such as text, extended
  characters, or other elements.

11
Two types of elements

• Most presentation elements have start and end
  tags, similar to the way some HTML has start and
  end tags.
• ltelement_namegtlt/element_namegt
• The other type of MathML element is an empty
  element of the form
• ltelement_name/gt
• These elements have just one tag.
• There are only 4 empty presentation elements, but
  over 100 empty content elements, used in prefix
  notation.

12
Two types of elements

• Most presentation elements have start and end
  tags, similar to the way some HTML has start and
  end tags.
• ltelement_namegtlt/element_namegt
• The other type of MathML element is an empty
  element of the form
• ltelement_name/gt
• Elements can also accept attributes.
• If an element has both start end tags, the
  attribute immediately precedes the gt in the start
  tag.

13
Two types of elements

• Most presentation elements have start and end
  tags, similar to the way some HTML has start and
  end tags.
• ltelement_namegtlt/element_namegt
• The other type of MathML element is an empty
  element of the form
• ltelement_name/gt
• Elements can also accept attributes.
• In empty elements, attributes immediately precede
  the /gt.

14
Examples of attributes

• ltmfrac linethickness'0'gt lt/mfracgt
• ltmspace width'12'/gt
• ltmtable columnalign"center"gt lt/mtablegt

Inserts a 12-pt space. For 12 pixels, use 12px.
15
Basic presentation elements

• ltmigt identifier, such as a variable, function
  name, constant, etc.
• example ltmigtxlt/migtrendering x
• example ltmigtsinlt/migtrendering sin

16
Basic presentation elements

• ltmigt identifier, such as a variable, function
  name, constant, etc.
• ltmogt operator, such as a summation, fence
  (parentheses, brace, etc.), accent, etc.
• example ltmogt(lt/mogtrendering (
• example ltmogtsumlt/mogtrendering S

17
Basic presentation elements

• ltmigt identifier, such as a variable, function
  name, constant, etc.
• ltmogt operator, such as a summation, fence
  (parentheses, brace, etc.), accent, etc.
• ltmngt number
• Can you identify this expression?ltmigtxlt/migtltmogt
  lt/mogtltmogt(lt/mogt ltmngt3lt/mngtltmogtlt/mogtltmigtylt/migt
  ltmogt)lt/mogt

x (3 y)
18
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 ltmigt, ltmogt, and
  ltmngt, for example are different.
• They are examples of token elements.
• Token elements are the only elements which
  directly contain character data.

19
Scripts

• Superscripts and subscripts are ubiquitous in
  mathematical notation, and although you wont 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 well take a look
  at the most common.

20
Scripts sub super

• These are the first elements weve seen in detail
  that normally have more than one argument.
• Subscript ltmsubgt base script lt/msubgt
• Superscript ltmsupgt base script lt/msupgt
• Usagex1 ltmsubgtltmigtxlt/migtltmngt1lt/mngtlt/msubgt
• x2 ltmsupgtltmigtxlt/migtltmngt2lt/mngtlt/msupgt
• x1 ltmsubsupgtltmigtxlt/migt ltmngt1lt/mngt ltmngt2lt/mngtlt
  /msubsupgt

Why cant we code it this way ltmsubgt x 1 lt/msubgt?
2
21
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
• ltmathgt and lt/mathgt
• tags to distinguish MathML from other markup.
• Although most tags will differ from presentation
  markup to content markup, the ltmathgt tag is
  common to both.

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

23
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

24
Example 1 try coding this

• ltmathgt
• lt/mathgt

25
Example 1 try coding this

• ltmathgt
• ltmsupgt
• ltmigtblt/migt
• ltmngt2lt/mngt
• lt/msupgt
• ltmogtlt/mogtltmngt4lt/mngt
• lt/mathgt

26
Example 1a
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.
This entity doesnt appear inprint, but here we
have addedit to facilitate voice synthesisand
heuristic evaluation bycomputer algebra systems.
ltmathgt ltmrowgt ltmsupgt ltmigtblt/migt
ltmngt2lt/mngt lt/msupgt ltmogtlt/mogt ltmngt4lt/mngt
ltmogtInvisibleTimesltmogt ltmigtalt/migt
ltmogtInvisibleTimesltmogt ltmigtclt/migt
lt/mrowgtlt/mathgt

• ltmathgt
• ltmsupgt
• ltmigtblt/migt
• ltmngt2lt/mngt
• lt/msupgt
• ltmogtlt/mogtltmngt4lt/mngtltmigtalt/migtltmigtclt/migt
• lt/mathgt

ltmathgt ltmsupgt ltmigtblt/migt ltmngt2lt/mngt
lt/msupgt ltmogtlt/mogt ltmngt4lt/mngt
ltmogtInvisibleTimesltmogt ltmigtalt/migt
ltmogtInvisibleTimesltmogt ltmigtclt/migtlt/mathgt
or
27
Example 2 one more

• ltmath display'block'gt ltmrowgt ltmsupgt
  ltmigtxlt/migtltmngt2lt/mngt lt/msupgt ltmogtlt/mogt
  ltmsupgt ltmigtylt/migtltmngt2lt/mngt lt/msupgt
  ltmogtlt/mogt ltmsupgt ltmigtrlt/migtltmngt2lt/mngt
  lt/msupgt lt/mrowgtlt/mathgt

28
Other presentation elements

• Presentation elements are grouped
• Token Elements
• ltmigt identifier
• ltmngt number
• ltmogt operator, fence, or separator
• ltmtextgt text

29
Other presentation elements

• Presentation elements are grouped
• Token Elements
• General Layout
• ltmrowgt to group subexpressions
• ltmfracgt form fraction from 2 subexpressions
• ltmrootgt radical with a specified index
• ltmfencedgt surround content with a pair of fences

30
Other presentation elements

• Presentation elements are grouped
• Token Elements
• General Layout
• Scripts and Limits
• ltmsubgt, ltmsupgt, ltmsubsupgt
• ltmundergt attach a script under a base
• ltmovergt attach a script over a base
• ltmunderovergt attach a script both under and
  over a base

31
Other presentation elements

• Presentation elements are grouped
• Token Elements
• General Layout
• Scripts and Limits
• Tables
• ltmtablegt table or matrix
• ltmtrgt row in a table or matrix
• ltmtdgt one entry in a table or matrix

32
Other presentation elements

• Presentation elements are grouped
• Token Elements
• General Layout
• Scripts and Limits
• Tables
• Actions
• ltmactiongt binds actions to a subexpression

33
Content elements

• Most fundamental to content markup is the ltapplygt
  element, which enables the explicit application
  of a function to its argument.

34
Content elements

• ltapplygt application of a function to argument.
• Token Elements
• ltcngt content number
• ltcigt content identifier

35
Content elements

• ltapplygt application of a function to argument.
• Token Elements
• Basic Content Elements
• ltinverse/gt generic inverse
• ltcompose/gt compose 2 or more functions
• ltpiecewisegt piecewise defined function

36
Content elements

• ltapplygt application of a function to argument.
• Token Elements
• Basic Content Elements
• Arithmetic, Algebra, and Logic
• ltdivide/gt division
• ltpower/gt to the power of
• ltroot/gt nth root
• ltconjugate/gt complex conjugate

37
Content elements

• ltapplygt application of a function to argument.
• Token Elements
• Basic Content Elements
• Arithmetic, Algebra, and Logic
• Relations
• lteq/gt equal
• ltgeq/gt greater than or equal
• ltfactorof/gt the divides operator

38
Content elements

• ltapplygt application of a function to argument.
• Token Elements
• Basic Content Elements
• Arithmetic, Algebra, and Logic
• Relations
• Calculus and Set Theory
• ltpartialdiff/gt partial derivative
• ltlowlimitgt lower limit (of integral, etc.)
• ltunion/gt union or meet

39
Content elements

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

40
Example 3 content markup

• We want to code this expression in content markup

• We know we need to surround the code with the
  ltmathgtlt/mathgt element
• but we havent seen yet how to combine content
  elements to create an entire expression, so here
  goes

41
Example 3 content markup

• ltmathgt ltapplygt lteq/gt ltapplygt
  ltcos/gt ltcigtpilt/cigt lt/applygt
  ltapplygt ltminus/gt ltcngt1lt/cngt
  lt/applygt lt/applygtlt/mathgt

42
Example 3 content markup

• ltmathgt ltapplygt lteq/gt ltapplygt
  ltcos/gt ltcigtpilt/cigt lt/applygt
  ltapplygt ltminus/gt ltcngt1lt/cngt
  lt/applygt lt/applygtlt/mathgt

43
Example 3 content markup

• ltmathgt ltapplygt lteq/gt ltapplygt
  ltcos/gt ltcigtpilt/cigt lt/applygt
  ltapplygt ltminus/gt ltcngt1lt/cngt
  lt/applygt lt/applygtlt/mathgt

44
Example 3 content markup

• ltmathgt ltapplygt lteq/gt ltapplygt
  ltcos/gt ltcigtpilt/cigt lt/applygt
  ltapplygt ltminus/gt ltcngt1lt/cngt
  lt/applygt lt/applygtlt/mathgt

to the left of the
to the right of the
45
Example 3 content markup

• ltmathgt ltapplygt lteq/gt ltapplygt
  ltcos/gt ltcigtpilt/cigt lt/applygt
  ltapplygt ltminus/gt ltcngt1lt/cngt
  lt/applygt lt/applygtlt/mathgt

46
Example 3 compare

• ltmathgt ltapplygt lteq/gt ltapplygt
  ltcos/gt ltcigtpilt/cigt lt/applygt
  ltapplygt ltminus/gt ltcngt1lt/cngt
  lt/applygt lt/applygtlt/mathgt

ltmathgt ltmigtcoslt/migt ltmigtpilt/migt ltmogtlt/mogt lt
mogtlt/mogt ltmngt1lt/mngtlt/mathgt
47
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).

48
Summary

• Presentation markup content markup
• MathML elements either
• have start and end tags to enclose their content,
  or
• use a single empty tag.

49
Summary

• Presentation markup content markup
• MathML elements
• Attributes may be specified in a start or empty
  tag.
• Attribute values must be enclosed in quotes.

50
Summary

• Presentation markup content markup
• MathML elements
• Attributes in a start or empty tag.
• All character data must be enclosed in token
  elements.

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

52
Summary

• Presentation markup content markup
• MathML elements
• Attributes in a start or empty tag.
• All character data token elements.
• Extended characters asentity references.
• We discussed other layout schemata math, mfrac,
  mrow, etc.
• The next session of the tutorial will deal with
  displaying MathML in browsers.

53
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

54
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 doesnt yet work on the Mac
• The decision to include MathML isnt final

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

56
DOCTYPEs and MIME types

• Web servers generally use file extensions to pick
  the MIME type. This doesnt 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.

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

58
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 ltbr /gt must be empty tags.
• All attributes must have quotes around them
• Your code actually has to be correct!

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

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

61
DOCTYPEs
Typical DOCTYPE declarations look like this

• lt!DOCTYPE html SYSTEM "..//xhtml-math11-f.dtd"gt
• lt!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0
  Strict//EN""../DTD/xhtml1-strict.dtd"gt
• lt!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1 plus
  MathML 2.0//EN""http//www.w3.org/TR/MathML2/dtd/
  xhtml-math11-f.dtd" lt!ENTITY mathml
  http//www.w3.org/1998/Math/MathML"gt gt

62
DOCTYPEs

• Netscape 7 requires a DOCTYPE, but doesnt
  actually look at the DTD to which it points.
• Instead the DTD must match one of a few
  predefined values.
• Internet Explorer doesnt require a DOCTYPE, but
  it does download the DTD and use it if there is
  one.

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

64
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

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

• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltmath xmlns"http//www.w3.org/1998/Math/MathML"
  gt
• ltmigtxlt/migtltmogtlt/mogtltmngt2lt/mngt
• lt/mathgt
• lt/htmlgt

66
Namespaces
To use prefixes, you must

• Associate a prefix and a namespace using an
  xmlnsprefix attribute on a containing element.
• Use the prefix to identify elements that should
  be in the namespace.

• lthtml
• xmlns"http//www.w3.org/1999/xhtml"
• xmlnsm"http//www.w3.org/1998/Math/MathML"gt
• ltmmathgt
• ltmmigtxlt/mmigtltmmogtlt/mmogtltmmngt2lt/mmngt
• lt/mmathgt
• lt/htmlgt

67
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

• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
• "xhtml-math11-f.dtd" lt!ENTITY mathml
  http//www.w3.org/1998/Math/MathML"gtgt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
• ltmath xmlns"mathml"gt
• ltmigtxlt/migtltmogtlt/mogtlt mngt2lt/mngt
• lt/mathgt
• lt/htmlgt

68
Objects and PIs
Two additional declarations are required to
trigger add-on software for math rendering in
Internet Explorer

• The ltobjectgt 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.

69
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

• ltOBJECT
• ID"behave1"
• CLASSID"clsid32F66A20-7614-11D4-BD11-00104BD3
  F987"gt
• lt/OBJECTgt

70
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

• ltOBJECT
• ID"behave1"
• CLASSID"clsid32F66A20-7614-11D4-BD11-00104BD3
  F987"gt
• lt/OBJECTgt
• lt?IMPORT NAMESPACE"M" IMPLEMENTATION"behave1"
  ?gt

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

72
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

73
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

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

75
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

76
The MathML Stylesheet
The MathML stylesheet PI looks like this

• lt?xml-stylesheet
• type"text/xsl"
• href"style/mathml.xsl"
• ?gt

77
The MathML Stylesheet
In order to use the MathML stylesheet,

• Include the stylesheet PI.
• Write XHTML. Dont use entity references. Use
  numeric references instead.
• Use namespaces to indicate the MathML.
• Dont use Object tags or behavior PIs.
• Its not necessary to use a DOCTYPE.

78
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 ltobjectgt element and behavior PI
  (IE).
• Serve it as XML for NS, and HTML for IE.

79
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, ltobjectgt element and
  behavior PI.