Putting Math Putting Math on the Web on the Web

Copyright, 2000 © J.Golinsky,golinsky@cs.huji.ac.il

sdbi, 2000sdbi, 2000Julia GolinskyJulia Golinsky

IntroductionIntroduction• The problem of encoding mathematics for The problem of encoding mathematics for

computer processing or electronic computer processing or electronic communication is much older than the communication is much older than the web ...web ...

• Why do we need this?Why do we need this?

• What's the problem with the Web?What's the problem with the Web?

HTML is not ideal: it's capability to include HTML is not ideal: it's capability to include mathematical expressions in HTML is very limitedmathematical expressions in HTML is very limited

Some simple solutions: Some simple solutions: imagesimages

using an application that can represent using an application that can represent mathematical notation and saving it as mathematical notation and saving it as image.image.

One more example

Some simple solutions: Some simple solutions: imagesimages

• Pro:Pro:• the font, type size, spacing are exactly as you specifiedthe font, type size, spacing are exactly as you specified

• works great to present displayed equationsworks great to present displayed equations

• Con: Con: • document quality is poordocument quality is poor

• searching,indexing, reuse in other applications are not availablesearching,indexing, reuse in other applications are not available

• authoring is difficult (cut&paste)authoring is difficult (cut&paste)

• hand editing is difficult: needs specialized softwarehand editing is difficult: needs specialized software

• large documents are slow to load.large documents are slow to load.

Some simple solutions: Some simple solutions: HTML codeHTML code

-b ± Sqrt(b2 - 4ac)-b ± Sqrt(b2 - 4ac) x = -------------------x = -------------------

2a2aThe HTML code of the evaluation above is: The HTML code of the evaluation above is:

<b> <b> <pre> <pre> -b &#177; Sqrt(b² - 4ac)-b &#177; Sqrt(b² - 4ac)

x = ------------------- x = ------------------- 2a 2a

</pre> </pre> </b></b>

Working Within the Working Within the Constraints of HTML Code Constraints of HTML Code

• Pro: Pro: • you don’t have to leave HTMLyou don’t have to leave HTML

• there are no problems with cut/paste/searchthere are no problems with cut/paste/search

• there is no problem with fontsthere is no problem with fonts

• Con:Con:• problems in displaying of “special” symbols. For problems in displaying of “special” symbols. For

example: integrals, sums example: integrals, sums

• References: References: Bare Bones Guide to HTMLBare Bones Guide to HTML

Some simple solutions: Some simple solutions: Plug-insPlug-ins

using some sort of external processing program using some sort of external processing program which interfaces with the browser. Options which interfaces with the browser. Options available using current technology include Java available using current technology include Java applets, Netscape plug-ins and ActiveX controlsapplets, Netscape plug-ins and ActiveX controls

Example

Some simple solutions: Some simple solutions: Plug-insPlug-ins

• ProPro• Fairly sophisticated interactivity is possibleFairly sophisticated interactivity is possible• Complex linking, cutting and pasting, long expression foldingComplex linking, cutting and pasting, long expression folding

• There is only a one time cost for installing a plug-in or download in a There is only a one time cost for installing a plug-in or download in a Java archiveJava archive

• ConCon• have alignment limitations have alignment limitations

• cannot resize themselves after they load cannot resize themselves after they load

• cannot adequately query the browser for the surrounding cannot adequately query the browser for the surrounding appearance contextappearance context

• require current generation browsers on graphics capable platformsrequire current generation browsers on graphics capable platforms

ConclusionsConclusions• We need something to solve the problem of making the info We need something to solve the problem of making the info

available to other applications => It is available to other applications => It is not sufficient to upgrade image-based methods.not sufficient to upgrade image-based methods.

• We have to enable mathematics to be served, received and We have to enable mathematics to be served, received and processed on the Web, just as HTML has enabled this functionality processed on the Web, just as HTML has enabled this functionality for text.for text.

• We also have to consider the needs of potential users: We also have to consider the needs of potential users: education community - quick and easy creation of content, education community - quick and easy creation of content, easy-to-learn,low-cost tools. academic research easy-to-learn,low-cost tools. academic research community - searching and indexingcommunity - searching and indexing

• We want to show not only notation but also a meaning of expressionWe want to show not only notation but also a meaning of expression

• The solution is ...The solution is ...

Mathematical Markup Mathematical Markup Language (MathML)Language (MathML)

“MathML will make the Web even better for educational,MathML will make the Web even better for educational, scientific and technical materials. It also has the potential scientific and technical materials. It also has the potential to make mathematics accessible to those with visual to make mathematics accessible to those with visual disabilities. It will allow mathematical content to be reused disabilities. It will allow mathematical content to be reused and exchanged with technical computing systems forand exchanged with technical computing systems for further manipulation.”further manipulation.”

-- Tim Berners-Lee, Director W3C-- Tim Berners-Lee, Director W3C

MathML: some historyMathML: some history• 1994 1994 -- Dave Raggett included a proposal for HTML Math in the HTML 3.0 working Dave Raggett included a proposal for HTML Math in the HTML 3.0 working

draftdraft

• 1995,April1995,April - A panel discussion on math markup at the WWW Conference in - A panel discussion on math markup at the WWW Conference in Darmstadt Darmstadt

• 1995,November1995,November-representatives from Wolfram Research presented a proposal for -representatives from Wolfram Research presented a proposal for doing math in HTML to the W3C team.doing math in HTML to the W3C team.

• 1996,May1996,May - the Digital Library Initiative meeting in Champaign-Urbana. Following - the Digital Library Initiative meeting in Champaign-Urbana. Following the meeting, an HTML Math Editorial Review Board was formed.the meeting, an HTML Math Editorial Review Board was formed.

• 1997,March1997,March - this group was formally reconstituted as the W3C Math working group - this group was formally reconstituted as the W3C Math working group

• 1998,April1998,April - W3C released MathML 1.0 as a Recommendation - W3C released MathML 1.0 as a Recommendation • 1999,July1999,July - the Math Working Group posted MathML 1.01, a revised version of the - the Math Working Group posted MathML 1.01, a revised version of the

MathML 1.0 Recommendation.MathML 1.0 Recommendation.

Design Goals of MathMLDesign Goals of MathML

• encode mathematical material suitable for teaching and scientific communication at all levels. encode mathematical material suitable for teaching and scientific communication at all levels.

• encode both mathematical notation and mathematical meaning.encode both mathematical notation and mathematical meaning.

• facilitate conversion to and from other math formats, both presentational and semantic. Output formats should facilitate conversion to and from other math formats, both presentational and semantic. Output formats should include: - graphical displays - speech synthesizers include: - graphical displays - speech synthesizers - computer algebra systems' input - other math layout languages, such as - computer algebra systems' input - other math layout languages, such as TeX - plain text displays, e.g. VT100 emulators - print media, including braille TeX - plain text displays, e.g. VT100 emulators - print media, including braille

• support efficient browsing for lengthy expressions.support efficient browsing for lengthy expressions.

• be human legible, and simple for software to generate and process. be human legible, and simple for software to generate and process.

MathML should:MathML should:

The Role of MathML on The Role of MathML on the Web the Web • provides the encoding of mathematical data for the provides the encoding of mathematical data for the

bottom layerbottom layer

• is not intended for editing by hand, but is for handling by is not intended for editing by hand, but is for handling by specialized authoring toolsspecialized authoring tools

• facilitates the use and re-use of mathematical and facilitates the use and re-use of mathematical and

scientific content on the Web, and for other applicationsscientific content on the Web, and for other applications

• attempts to capture something of the meaning behind attempts to capture something of the meaning behind notationnotation

• In some ways, MathML is analogous to other low-level, communication In some ways, MathML is analogous to other low-level, communication formats such as Adobe's PostScript language.formats such as Adobe's PostScript language.

Mathematics and its Mathematics and its NotationNotation

• use of a complex and highly evolved system of two-use of a complex and highly evolved system of two-dimensional symbolic notationsdimensional symbolic notations

• ideas exist independently of the notations, ideas exist independently of the notations, however, the relation between meaning and however, the relation between meaning and notation is subtlenotation is subtle

• part of the power of mathematics is its ability to part of the power of mathematics is its ability to represent and manipulate ideas in symbolic form.represent and manipulate ideas in symbolic form.

• Example of meaning and notation: Example of meaning and notation: ** “use the chain rule to find the derivative of f composed with g” * “use the chain rule to find the derivative of f composed with g” * "write f prime, open paren, g of x, close paren,g prime of x""write f prime, open paren, g of x, close paren,g prime of x"

Presentation and ContentPresentation and Content• Presentation mark-up (using notation)Presentation mark-up (using notation)• There are 28 MathML elements with about 50 attributes. There are 28 MathML elements with about 50 attributes.

• Most elements represent templates or patterns for laying out subexpressions, like Most elements represent templates or patterns for laying out subexpressions, like mfracmfrac is used is used

for forming a fractionfor forming a fraction

• Content mark-up (using meaning)Content mark-up (using meaning)

• There are around 75 elements with about a dozen attributes.There are around 75 elements with about a dozen attributes.

• Some elements represent mathematical operations and functions,like Some elements represent mathematical operations and functions,like plusplus and and sinsin..

• Others represent mathematical objects, like Others represent mathematical objects, like setset and and vectorvector.. • Is intended for facilitating applications other than display, like computer algebra, and speech Is intended for facilitating applications other than display, like computer algebra, and speech

synthesis.synthesis.

• BUT BUT : it is harder to directly control how an expression will be displayed.: it is harder to directly control how an expression will be displayed.

Expression TreesExpression Trees

• a row, subscript and superscripts, fractions, matrices and a few othersa row, subscript and superscripts, fractions, matrices and a few others

• notational patterns or schemata often appear nested inside one another, notational patterns or schemata often appear nested inside one another, such as a square such as a square root of a fraction root of a fraction

• they generally have a number of parameters which depend on the context, they generally have a number of parameters which depend on the context, such as the such as the

amount to shift a superscript for inline math vs. displayed math.amount to shift a superscript for inline math vs. displayed math.

• even complicated, nested expressions are built-up from a handful of simple even complicated, nested expressions are built-up from a handful of simple schemata. schemata.

Few ways to arrange math symbolsFew ways to arrange math symbols::

Example: (a+b)^2Example: (a+b)^2

<msup><msup> <mfenced><mfenced>

<mi>a</mi><mi>a</mi> <mo>+</mo><mo>+</mo> <mi>b</mi><mi>b</mi> </mfenced></mfenced>

<mn>2</mn><mn>2</mn> </msup></msup>

presentationpresentation markup markup

Example: (a+b)^2Example: (a+b)^2

<msup><msup> <mfenced><mfenced>

<mi>a</mi><mi>a</mi> <mo>+</mo><mo>+</mo> <mi>b</mi><mi>b</mi> </mfenced></mfenced>

<mn>2</mn><mn>2</mn> </msup></msup>

presentationpresentation markup markup content markupcontent markup

<apply><apply> <power/><power/> <apply><apply> <plus/><plus/>

<ci>a</ci><ci>a</ci> <ci>b</ci><ci>b</ci>

</apply></apply> <cn>2</cn><cn>2</cn>

</apply></apply>

Expression Trees(2)Expression Trees(2)

It is natural to think about MathML expressions as tree structures.It is natural to think about MathML expressions as tree structures. Each node in the tree corresponds to a particular layout schema, Each node in the tree corresponds to a particular layout schema, and its "branches" or child nodes correspond to its subexpressions.and its "branches" or child nodes correspond to its subexpressions.

It also describes how the MathML tags should be nested to It also describes how the MathML tags should be nested to encode the expression.encode the expression.

HTML and MathMLHTML and MathML

• uses start <tag> and end </tag> to mark a uses start <tag> and end </tag> to mark a sectionsection

• you can specify variations by adding attributes: you can specify variations by adding attributes: BUT the ratio of tags to text is much higher than BUT the ratio of tags to text is much higher than in HTMLin HTML

• There are a few small differences: these stem There are a few small differences: these stem from the fact that the HTML syntax follows the from the fact that the HTML syntax follows the rules of SGML while MathML follows the rules of rules of SGML while MathML follows the rules of

XML.XML.

MathML uses a very similar to HTML style of mark-up:MathML uses a very similar to HTML style of mark-up:

XML and MathMLXML and MathML• Some reasons why MathML is an application of Some reasons why MathML is an application of

XML:XML:

• XML is fast becoming the browser extension mechanism of choice. By XML is fast becoming the browser extension mechanism of choice. By casting MathML as an XML application, it should soon be possible to view casting MathML as an XML application, it should soon be possible to view

MathML natively in browsers.MathML natively in browsers.

• It is quite easy to write software to process XML, and there will be more It is quite easy to write software to process XML, and there will be more

and more of it in the future.and more of it in the future.

• The downside of XML-style syntax: The downside of XML-style syntax: it is tedious it is tedious and error-prone to enter it by hand, just like complicated HTML.and error-prone to enter it by hand, just like complicated HTML.

• Solution: Solution: usingusing tools like WebEQ Equation Editor, or the Page Wizardtools like WebEQ Equation Editor, or the Page Wizard

MathML Syntax(1)MathML Syntax(1)• In MathML there are two kinds of elements:In MathML there are two kinds of elements: • Most elements have start and end tags of the form: Most elements have start and end tags of the form:

< <element_nameelement_name> ... </> ... </element_nameelement_name>>

• The remaining MathML elements are empty elements of the The remaining MathML elements are empty elements of the form: <form: <element_nameelement_name/>/>

• All elements accept a few attributesAll elements accept a few attributes: : format for attributes:format for attributes: <<element_nameelement_name attrib1='val1' attrib2='val2' ... > attrib1='val1' attrib2='val2' ... > and and <<element_nameelement_name attrib_name='value'/> attrib_name='value'/>

MathML Syntax(2)MathML Syntax(2)• Characters and symbols can only appear inside special Characters and symbols can only appear inside special

elements called elements called token elementstoken elements..

• Most MathML elements expect to only find other MathML Most MathML elements expect to only find other MathML elements in their content, like elements in their content, like mrow mrow doesdoes

• But there are elements (like But there are elements (like mimi and and momo) that their content ) that their content

consists of characters and symbols.consists of characters and symbols.

• Within token elements, one can have plain text characters, Within token elements, one can have plain text characters,

which display as themselves or special entity references.which display as themselves or special entity references. Examples of character references are Examples of character references are

&&alphaalpha; and &; and &capcap; (like &; (like &ampamp; in HTML); in HTML) Most of names are Most of names are nearly identical to LaTeX symbol namesnearly identical to LaTeX symbol names

Presentation mark-up: Presentation mark-up: Layout BoxesLayout Boxes

• Is based around the idea of a layout box.Is based around the idea of a layout box.

• Simple layout boxes just contain individual characters, and their Simple layout boxes just contain individual characters, and their

dimensions depend only on the font being used.dimensions depend only on the font being used.

• More complicated layout boxes arrange their "child boxes" according to More complicated layout boxes arrange their "child boxes" according to

some algorithmsome algorithm..• For example, a fraction box arranges two childFor example, a fraction box arranges two child boxes to be vertically stacked with a line betweenboxes to be vertically stacked with a line between

• Each element represents a sort of “smart Each element represents a sort of “smart template” for laying out subexpressions in a template” for laying out subexpressions in a certain waycertain way

Presentation mark-Presentation mark-up:Tokens up:Tokens Token elements are the only elements which directly contain Token elements are the only elements which directly contain

character datacharacter data

• <mi> ... </mi> <mi> ... </mi> indicates that its contents should be displayed as identifiersindicates that its contents should be displayed as identifiersAttributes are font properties like Attributes are font properties like fontweightfontweight, , fontstylefontstyle,etc,etc

• <mn> ... </mn> <mn> ... </mn> indicates that its contents should be rendered as numbersindicates that its contents should be rendered as numbersAttributes are like those for Attributes are like those for mimi..

• <mo> ... </mo> <mo> ... </mo> indicates that its contents should be displayed as operatorsindicates that its contents should be displayed as operatorsAttributes are Attributes are lspacelspace, , rspacerspace, , stretchystretchy, and , and movablelimitsmovablelimits..also used to mark-up symbols which are operators in a veryalso used to mark-up symbols which are operators in a verygeneral sense: parentheses, punctuationgeneral sense: parentheses, punctuation

Presentation mark-up:Presentation mark-up: Layout Schemata Layout Schemata• <mrow><mrow> child1 ...(any number)</mrow>child1 ...(any number)</mrow> most common and important general purpose layout schema, most common and important general purpose layout schema, displays its "children" aligned along the baseline in adisplays its "children" aligned along the baseline in a

horizontal row.horizontal row. • <mfenced><mfenced> child1 ...(any number) </mfenced>child1 ...(any number) </mfenced> is like an is like an mrowmrow, except that it displays enclosed in parentheses., except that it displays enclosed in parentheses.

• <mfrac> numerator denominator </mfrac><mfrac> numerator denominator </mfrac> displays fraction, by setting the displays fraction, by setting the linethicknesslinethickness attribute to 0, attribute to 0, it can also be used for binomial coefficients.it can also be used for binomial coefficients.

• <msqrt> child1 ... (any number)</msqrt><msqrt> child1 ... (any number)</msqrt> displays its "children" displays its "children" under a radical sign.under a radical sign.• <mroot> base index</mroot><mroot> base index</mroot> is nearly identical to is nearly identical to

the the msqrtmsqrt element, but expects a second child, which is element, but expects a second child, which is

displayed above the radicaldisplayed above the radical

Example: <mrow> for Example: <mrow> for groupinggrouping

Encoding for Encoding for x^2 x^2 ++ 4x4x ++ 44 = 0 would be:= 0 would be:

<mn>4</mn><mn>4</mn> <mi>x</mi><mi>x</mi>

<mo>+</mo><mo>+</mo> <mn>4</mn><mn>4</mn> <mo>=</mo><mo>=</mo> <mn>0</mn><mn>0</mn>

</mrow></mrow>

<mrow><mrow> <msup><msup>

<mi>x</mi><mi>x</mi> <mn>2</mn><mn>2</mn>

</msup></msup> <mo>+</mo><mo>+</mo>

<mrow> <msup>

<mi>x</mi> <mn>2</mn>

</msup> <mo>+</mo> <mn>4</mn> <mi>x</mi>

<mo>+</mo> <mn>4</mn> <mo>=</mo> <mn>0</mn>

</mrow>

<mrow> <mrow> <msup>

<mi>x</mi> <mn>2</mn>

</msup> <mo>+</mo>

<mrow> <mn>4</mn> <mi>x</mi>

</mrow> <mo>+</mo> <mn>4</mn>

</mrow> <mo>=</mo> <mn>0</mn>

</mrow>

More thorough encodingMore thorough encoding:

Presentation mark-up: Presentation mark-up: inheritanceinheritance

• There are three ways to set attributes:There are three ways to set attributes: • to set explicitly in a tag, to set explicitly in a tag, • to look up in the operator dictionary, to look up in the operator dictionary, • or attributes can be inherited from the environment.or attributes can be inherited from the environment.

• Each element has an environment that specifies default values Each element has an environment that specifies default values for all MathML attributes for all MathML attributes

• Values directly set in a tag affect only the element on which Values directly set in a tag affect only the element on which they are set.they are set.

• Any presentation attribute can be set using the Any presentation attribute can be set using the mstylemstyle elementelement

• Attributes set with Attributes set with mstylemstyle are in effect for all elements within are in effect for all elements within scope of the scope of the mstylemstyle

Example: using <mstyle>Example: using <mstyle>Encoding for expression Encoding for expression

<mrow><mrow> <mi>f</mi><mi>f</mi> <mfenced><mfenced> <mrow><mrow>

<mi>x</mi><mi>x</mi> <mo>+</mo><mo>+</mo> <mi>y</mi><mi>y</mi>

</mrow></mrow> </mfenced></mfenced>

</mrow></mrow>

f(x + y)f(x + y)

Example: using <mstyle>Example: using <mstyle>Encoding for expressions Encoding for expressions

<mrow><mrow> <mi>f</mi><mi>f</mi> <mfenced><mfenced> <mrow><mrow>

<mi>x</mi><mi>x</mi> <mo>+</mo><mo>+</mo> <mi>y</mi><mi>y</mi>

</mrow></mrow> </mfenced></mfenced>

</mrow></mrow>

<mrow><mrow> <mi>f</mi><mi>f</mi>

<mfenced><mfenced> <mstyle color=‘#ff0000’><mstyle color=‘#ff0000’>

<mrow><mrow> <mi>x</mi><mi>x</mi>

<mo>+</mo><mo>+</mo> <mi>y</mi><mi>y</mi>

</mrow> </mrow> </mstyle></mstyle>

</mfenced></mfenced> </mrow></mrow>

f(x + y)f(x + y)

f(f(x + yx + y))

Example: quadratic Example: quadratic formulaformula<mrow>

<mi>x</mi> <mo>=</mo>

<mfrac> <mrow> <mrow>

<mo>-</mo> <mi>b</mi>

</mrow> <mo>&PlusMinus;</mo>

<msqrt> <mrow>

<msup> <mi>b</mi>

<mn>2</mn>

</msup> <mo>-</mo>

<mrow> <mn>4</mn>

<mo>&InvisibleTimes;</mo> <mi>a</mi>

<mo>&InvisibleTimes;</mo> <mi>c</mi>

</mrow> </mrow>

</msqrt> </mrow> <mrow>

<mn>2</mn> <mo>&InvisibleTimes;</mo>

<mi>a</mi> </mrow> </mfrac> </mrow>

Presentation mark-up:Presentation mark-up: Script Schemata Script Schemata• <msub> base script </msub><msub> base script </msub> <msup> base script </msup><msup> base script </msup> displays its children as a base, and a sub- or superscript example: vectors, displays its children as a base, and a sub- or superscript example: vectors,

indexes, power.indexes, power.

• <msubsup> <msubsup> base subscript superscriptbase subscript superscript </msubsup> </msubsup> puts both a puts both a subscript and a superscript on the same basesubscript and a superscript on the same base

• <munder> base script </munder><munder> base script </munder> <mover> base script </mover><mover> base script </mover> displays its children as a base, and a under- or over- script.displays its children as a base, and a under- or over- script. example: attaching bars, tildesexample: attaching bars, tildes

• <munderover> base underscript overscript<munderover> base underscript overscript </munderover></munderover> attaches both an under- and and overscript on a base.attaches both an under- and and overscript on a base. example: limits around a summation sign.example: limits around a summation sign.

Examples: <msub> and Examples: <msub> and <msup><msup>

<mrow><mrow> <msup><msup> <msub><msub>

<mi>x</mi><mi>x</mi> <mn>1</mn><mn>1</mn>

</msub></msub> <mi>&alpha;</mi><mi>&alpha;</mi>

</msup></msup>

<mo>+</mo><mo>+</mo> <msubsup><msubsup>

<mi>x</mi><mi>x</mi> <mn>1</mn> <mn>1</mn> <mi>&alpha;</mi> <mi>&alpha;</mi>

</msubsup></msubsup> </mrow></mrow>

Examples: Examples: <munderover>, movable <munderover>, movable limitslimits

<mrow> <mstyle displaystyle='true'>

<munderover> <mo>sum</mo>

<mrow> <mi>i</mi> <mo>=</mo>

<mn>1</mn> </mrow>

<mi>&infty;</mi> </munderover>

<msup>

<mstyle> <mo>+</mo>

<mstyle displaystyle='false'> <munderover>

<mo>sum</mo> <mrow>

<mi>i</mi> <mo>=</mo> <mn>1</mn>

</mrow> <mi>&infty;</mi>

</munderover> <msup>

<mi>x</mi> <mi>i</mi>

</msup>

</mstyle></mrow>

Example: <mover>, Example: <mover>, accentaccent

<mrow><mrow> <mover><mover>

<mi>G</mi><mi>G</mi> <mo>&hat;</mo><mo>&hat;</mo>

</mover></mover> <mo>+</mo><mo>+</mo>

<mover accent='true'><mover accent='true'> <mi>G</mi><mi>G</mi>

<mo>&hat;</mo><mo>&hat;</mo> </mover></mover>

<mo>+</mo><mo>+</mo> <mover accent='false'><mover accent='false'>

<mi>G</mi><mi>G</mi> <mo>&hat;</mo><mo>&hat;</mo>

</mover></mover></mrow></mrow>

Presentation mark-up: Presentation mark-up: TablesTables

MathML tables are a lot like HTML tables, except they have substantially MathML tables are a lot like HTML tables, except they have substantially more attributes for controlling math-specific layout behaviors.more attributes for controlling math-specific layout behaviors.

• <mtable> row1 ... </mtable><mtable> row1 ... </mtable> • rowalignrowalign and and columnaligncolumnalign determine alignment of rows and columns , e.g. "center", determine alignment of rows and columns , e.g. "center",

"left", "top", etc."left", "top", etc.• rowlinesrowlines, , columnlinescolumnlines and and frameframe draw separator lines. draw separator lines.

• rowspacingrowspacing, , columnspacingcolumnspacing,,equalrowsequalrows, and , and equalcolumnsequalcolumns determine the determine the spacing spacing

• <mtr> cell1 ... </mtr><mtr> cell1 ... </mtr> accepts table attributesaccepts table attributes

• <mtd> child1 ... </mtd><mtd> child1 ... </mtd> accepts table attributes,special attributes are accepts table attributes,special attributes are rowspanrowspan and and columnspancolumnspan

Example: MatrixExample: Matrix

<mrow><mrow> <mi>A</mi><mi>A</mi> <mo>=</mo><mo>=</mo>

<mfenced open='['; close=']'><mfenced open='['; close=']'> <mtable><mtable> <mtr><mtr>

<mtd><mi>x</mi></mtd><mtd><mi>x</mi></mtd> <mtd><mi>y</mi></mtd><mtd><mi>y</mi></mtd>

</mtr></mtr>

<mtr><mtr> <mtd><mi>z</mi></mtd><mtd><mi>z</mi></mtd> <mtd><mi>w</mi></mtd><mtd><mi>w</mi></mtd>

</mtr></mtr> </mtable></mtable> </mfenced></mfenced>

</mrow></mrow>

Content mark-up: Content mark-up: Prefix NotationPrefix Notation

• Reminder:Reminder: 1 2 + - postfix notation (used in calculators) 1 + 2 - 1 2 + - postfix notation (used in calculators) 1 + 2 - infix notation (used in most programming languages) + 1 2 - infix notation (used in most programming languages) + 1 2 - prefix notation (used in LISP)prefix notation (used in LISP)

• Corresponds more closely to many natural language Corresponds more closely to many natural language constructionsconstructions

like "f of x" and "subtract 5 from 8".like "f of x" and "subtract 5 from 8".

• A pleasant consequence : parentheses are no longer A pleasant consequence : parentheses are no longer necessary, ‘cause the order of operations is clear from the necessary, ‘cause the order of operations is clear from the notation.notation.Example:Example:

• (x - y) / 2 is / - x y 2(x - y) / 2 is / - x y 2• x - (y/2) is - x / y 2x - (y/2) is - x / y 2

Content mark-up: TokensContent mark-up: Tokens• <apply><apply> - fundamental element. expects an operator schema as it first - fundamental element. expects an operator schema as it first

child, and interprets the remaining children as the arguments of that child, and interprets the remaining children as the arguments of that operator.operator.

• <reln><reln> - analogous to <apply>, used in equations, relations- analogous to <apply>, used in equations, relations• <ci><ci> - token element, represents identifiers, when an - token element, represents identifiers, when an identifier is any kind of name or label. Aidentifier is any kind of name or label. A type type attribute attribute specifies the type of object which is represented.specifies the type of object which is represented.• <cn><cn> - primarily designed to mark-up integers, rational, - primarily designed to mark-up integers, rational, real or complex numbers.real or complex numbers.BUTBUT any kind of character data is any kind of character data is permitted (like <cn>xii</cn>).The permitted (like <cn>xii</cn>).The typetype attribute specifies attribute specifies what kind of number the element encodes.what kind of number the element encodes.BaseBase attribute attribute specifies that the base is other than 10 (like hexadecimal).specifies that the base is other than 10 (like hexadecimal).

• operators and functionsoperators and functions are represented by empty elements (no <are represented by empty elements (no <coco> > element needed) ,like <element needed) ,like <coscos/> and </> and <intersectintersect>. Also one can use the >. Also one can use the fnfn element .element .

Content mark-up: Content mark-up: ContainersContainers MathML uses container elements to represent basic mathematical MathML uses container elements to represent basic mathematical

objects and data types.objects and data types.• <set><set> [<elt1> <elt2> ... | <condition>] </set>[<elt1> <elt2> ... | <condition>] </set> constructs a mathematical set whose elements are specified constructs a mathematical set whose elements are specified in two ways: - list of tokens and containersin two ways: - list of tokens and containers -- condition condition element element

• <interval> <pt1> <pt2> </interval><interval> <pt1> <pt2> </interval>

specifies interval element, children encode the end points.specifies interval element, children encode the end points. closureclosure attribute attribute determines which of the end points lie in the interval, like "open", "open-closed",etc. determines which of the end points lie in the interval, like "open", "open-closed",etc.

• <vector> <elt1> <elt2> ... </vector><vector> <elt1> <elt2> ... </vector> constructs a vector. By constructs a vector. By convention, vectors are column ones convention, vectors are column ones

• <matrix> <row1> <row2> ... </matrix><matrix> <row1> <row2> ... </matrix> expects any number of expects any number of children, but they have to all be children, but they have to all be matrixrow matrixrow elements. The children of the elements. The children of the matrixrowmatrixrow elements represent the individual entries in the matrix.elements represent the individual entries in the matrix.

Example: intervals, Example: intervals, conditioncondition

<reln> <eq/><reln> <eq/> <set><set>

<bvar> <ci>x</ci> </bvar><bvar> <ci>x</ci> </bvar> <condition><condition>

<reln> <geq/><ci>x</ci><cn>0</cn> <reln> <geq/><ci>x</ci><cn>0</cn> </reln></reln>

</condition></condition> </set></set>

<interval closure='closed-open'><interval closure='closed-open'> <cn>0</cn><cn>0</cn>

<ci>&infty;</ci><ci>&infty;</ci> </interval></interval>

</reln></reln>

Example: matrixExample: matrix<reln> <eq/> <reln> <eq/>

<apply><times/> <apply><times/> <vector> <cn>1 </cn> <cn>2 </cn> </vector> <vector> <cn>1 </cn> <cn>2 </cn> </vector> <matrix><matrix> <matrixrow><matrixrow> <cn>0 </cn> <cn>1 </cn> <cn>0 </cn> <cn>1 </cn> </matrixrow></matrixrow> <matrixrow><matrixrow> <cn>1 </cn> <cn>0 </cn> <cn>1 </cn> <cn>0 </cn> </matrixrow></matrixrow> </matrix></matrix> </apply> </apply>

<apply> <transpose/> <apply> <transpose/> <vector> <cn>2 </cn> <cn>1 </cn> </vector> <vector> <cn>2 </cn> <cn>1 </cn> </vector>

</apply> </apply> </reln> </reln>

Content mark-up: Content mark-up: Operators, relationsOperators, relations

• Around 50 empty operator elements represent commonly Around 50 empty operator elements represent commonly used functions and operators.used functions and operators.

• The only other operator element is <fn>. The only other operator element is <fn>. used to declare that its child element is an operator elementused to declare that its child element is an operator element

• In prefix notation there is no difference between functions In prefix notation there is no difference between functions and operators.and operators.

• MathML does single out relations from other functions and MathML does single out relations from other functions and operators.operators.Example: <Example: <eqeq>.>.

• Note:Note: parentheses around the x in f(x) do not appear in theparentheses around the x in f(x) do not appear in the MathML mark-up => a renderer would typically use someMathML mark-up => a renderer would typically use some kind of heuristic for deciding when parentheses are visuallykind of heuristic for deciding when parentheses are visually appropriate appropriate

Example: FunctionsExample: Functions1.1.(sin + cos)(x)(sin + cos)(x)

<apply> <apply> <fn><fn>

<mfenced> <mfenced>

<apply><plus/> <apply><plus/> <sin/><sin/> <cos/><cos/> </apply></apply>

</mfenced></mfenced></fn></fn>

<ci>x</ci><ci>x</ci> </apply></apply>

2.2.g(y) g(y) <apply><apply>

<fn><fn>gg</fn></fn> <ci>y</ci><ci>y</ci>

</apply></apply>

3.3. x=1 x=1

<reln> <reln> <eq/><eq/> <ci>x</ci><ci>x</ci> <cn>1</cn><cn>1</cn>

</reln></reln>

Content mark-Content mark-up:Qualifiers(1)up:Qualifiers(1)

The most obvious group of qualifiers: the The most obvious group of qualifiers: the intint, , sumsum, , and and prodprod elements. All three these operators have a elements. All three these operators have a notion of a lower limit, an upper limit, and a bound notion of a lower limit, an upper limit, and a bound variablevariable

<apply><sum/> <apply><sum/> <bvar> <ci>n</ci> </bvar><bvar> <ci>n</ci> </bvar>

<lowlimit> <cn>0</cn> </lowlimit><lowlimit> <cn>0</cn> </lowlimit> <uplimit> <ci>&infty;</ci> </uplimit><uplimit> <ci>&infty;</ci> </uplimit>

<apply><power/> <apply><power/> <ci>x</ci> <ci>x</ci> <ci>n</ci> <ci>n</ci>

</apply> </apply> </apply> </apply>

Content mark-Content mark-up:Qualifiers(2)up:Qualifiers(2)

Another important idiom involving qualifiers comes up Another important idiom involving qualifiers comes up with the differential operators with the differential operators diffdiff and and partialdiffpartialdiff..

<apply><diff/> <apply><diff/> <bvar> <bvar>

<ci>x</ci> <ci>x</ci> <degree> <cn>3</cn> </degree><degree> <cn>3</cn> </degree>

</bvar> </bvar> <apply><fn> f </fn> <apply><fn> f </fn>

<ci> x </ci> <ci> x </ci> </apply> </apply>

</apply> </apply>

Mixed mark-up: ReasonsMixed mark-up: ReasonsLet's recall:Let's recall:• Presentation markup captures notational structure.Presentation markup captures notational structure.• does not directly concern itself with the mathematical does not directly concern itself with the mathematical structure or meaning of an expression.structure or meaning of an expression.• is more satisfactory if it is important to control exactly howis more satisfactory if it is important to control exactly how an expression is renderedan expression is rendered

• Content markup captures mathematical structure.Content markup captures mathematical structure.• is not directly concerned with how an expression is displayedis not directly concerned with how an expression is displayed• is more satisfactory if it is important that the meaning of anis more satisfactory if it is important that the meaning of an expression can be dependably and automatically interpretedexpression can be dependably and automatically interpreted

• BUTBUT often the same mathematical notation is used to i represent several completely often the same mathematical notation is used to i represent several completely different concepts,like x different concepts,like x

• OROR the same mathematical concept may be displayed in one of various notations, like the same mathematical concept may be displayed in one of various notations, like f’(x) or df/dx.f’(x) or df/dx.

• SOSO sometimes we need both content and presentation markup sometimes we need both content and presentation markup

Mixed mark-up: ExamplesMixed mark-up: Examples1.1.ContentContent in presentation: in presentation:

more accessible,more accessible, more re-usable results:more re-usable results:

<mrow><mrow> <apply><apply>

<power/><power/> <ci><ci>xx</ci><cn></ci><cn>22</cn></cn>

</apply></apply> <mo>+</mo><mo>+</mo>

<msup><msup> <mi>v</mi><mn>2</mn><mi>v</mi><mn>2</mn>

</msup></msup> </mrow> </mrow>

2.2.PresentationPresentation in content: in content: provides a way of modifying provides a way of modifying

how a content expressionhow a content expression is rendered:is rendered:

<reln> <reln> <in/> <in/> <ci> <ci>

<mi fontweight="bold"><mi fontweight="bold">vv</mi></mi>

</ci> </ci> <ci>S</ci> <ci>S</ci>

</reln> </reln>

Presentation into content: Presentation into content: One more reason.One more reason.There are objects and operators which do not There are objects and operators which do not

have pre-defined content elements for have pre-defined content elements for encoding: likeencoding: like

rank of matrix,etc.rank of matrix,etc.<reln> <reln> <eq/> <eq/> <apply> <apply>

<fn> <fn> <semantics><semantics>

<ci><mo>rank</mo></ci> <ci><mo>rank</mo></ci> <annotation-xml encoding="OpenMath"><annotation-xml encoding="OpenMath">

<OMS CD="BasicLinAlg">matrix-rank</OMS><OMS CD="BasicLinAlg">matrix-rank</OMS> </annotation-xml> </annotation-xml>

</semantics></semantics> </fn> </fn>

<apply><apply> <times/> <times/>

<apply><apply> <transpose/><transpose/>

<ci>u</ci><ci>u</ci> </apply></apply>

<ci>v</ci><ci>v</ci> </apply></apply> </apply></apply>

<cn>1</cn><cn>1</cn> </reln></reln>

How to Mix mark-upHow to Mix mark-up• the result should still make sense.the result should still make sense.Examples “with problems”:Examples “with problems”:• <mrow> <mrow> <plus/><plus/> <mi> x </mi> <mi> y </mi> </mrow> <mi> x </mi> <mi> y </mi> </mrow>• <apply><ci> x </ci><apply><ci> x </ci><mo> + </mo><mo> + </mo><ci> y </ci></apply><ci> y </ci></apply>

• Presentation markup may only appear in content markup in three Presentation markup may only appear in content markup in three

ways:ways: 1.within 1.within cici and and cncn token elements token elements

2.within the 2.within the fnfn element element

3.within the3.within the semantics semantics element element • There is a list of content elements which may appear in There is a list of content elements which may appear in

presentation elements as childrenpresentation elements as children, , likelike <<vectorvector>,>, <<fnfn>.>.

• Content expressions may not appear within presentation Content expressions may not appear within presentation tokentoken elementselements

Macros for combined Macros for combined mark-upmark-up

• combined presentation-content pairs are combined presentation-content pairs are verbose.verbose.

• SolutionSolution: to use some kind of HTML/XML : to use some kind of HTML/XML macromacro mechanismmechanism• For example: defining of macrosFor example: defining of macros

<fn> <fn> <semantics> <semantics>

<ci><mo>rank</mo></ci> <ci><mo>rank</mo></ci> <annotation-xml encoding="OpenMath"> <annotation-xml encoding="OpenMath"> <OMS CD="BasicLinAlg">matrix-rank</OMS><OMS CD="BasicLinAlg">matrix-rank</OMS> </annotation-xml> </annotation-xml>

</semantics> </semantics> </fn> </fn>

<apply><apply> <transpose/><transpose/> <ci>X</ci><ci>X</ci>

</apply></apply>

<rank/><rank/><tr>X</tr><tr>X</tr>

Example: macroExample: macroThe sample encoding of rank couldThe sample encoding of rank could

then be condensed tothen be condensed to ::

Conclusion:Conclusion:

the combination of presentation and content markup could the combination of presentation and content markup could become much simpler and effective to generate as become much simpler and effective to generate as standard macro libraries become available.standard macro libraries become available.

<reln><reln> <eq><eq>

</apply></apply> <rank/><rank/> <apply><apply>

<times/> <times/> <tr>u</tr><tr>u</tr> <ci>v</ci><ci>v</ci>

</apply></apply> </apply></apply>

<cn>1</cn><cn>1</cn> </reln></reln>

MathML FAQ (1)MathML FAQ (1)• Who are the intended users ?Who are the intended users ? everyone from high-everyone from high-

school mathematics students to academics and engineersschool mathematics students to academics and engineers

• MathML is verbose - I edit HTML by hand with emacs, and MathML is verbose - I edit HTML by hand with emacs, and MathML looks tedious to read and edit in text form.MathML looks tedious to read and edit in text form. True! This is the downside of using XML as the base True! This is the downside of using XML as the base syntax.syntax.

• Why has MathML not reused TeX/LaTeX? Why has MathML not reused TeX/LaTeX? TeX and LaTeX encode TeX and LaTeX encode only the surface presentation of an expression and we want to provide only the surface presentation of an expression and we want to provide mechanisms for encoding mathematical semantic contentmechanisms for encoding mathematical semantic content

• Why do the goals of MathML go beyond the display of Why do the goals of MathML go beyond the display of mathematical expressions ?mathematical expressions ? The intention is to provide ways of The intention is to provide ways of communicating mathematics which, in addition to rendering communicating mathematics which, in addition to rendering mechanisms,facilitate automatic processing, searching and indexing, and mechanisms,facilitate automatic processing, searching and indexing, and reuse in other mathematical applications and contexts.reuse in other mathematical applications and contexts.

MathML FAQ (2)MathML FAQ (2)

• Is automatic translation to and from LaTeX possible? Is automatic translation to and from LaTeX possible? SIAM, SIAM, University of Western Ontario and some others are working on this.University of Western Ontario and some others are working on this.

• Does the verbose MathML syntax takes a long time to Does the verbose MathML syntax takes a long time to

transfer across the net and parse?transfer across the net and parse? By By comparison with existing image based methods MathML is relatively comparison with existing image based methods MathML is relatively quick to transfer and process.quick to transfer and process.

• MathML is XML-based. Will the browser manufacturers MathML is XML-based. Will the browser manufacturers support XML fully?Will they support MathML natively ? support XML fully?Will they support MathML natively ? As the browser manufacturers As the browser manufacturers move toward fuller support of XML and the associated style sheet move toward fuller support of XML and the associated style sheet standards such as XSL that are developing,support for MathML will standards such as XSL that are developing,support for MathML will become more "native".become more "native".

Embedding MathML in Embedding MathML in HTMLHTML• MathML must be semantically integrated into HTML.MathML must be semantically integrated into HTML. For For

example: a mechanism for browsers to recognize MathML markup as example: a mechanism for browsers to recognize MathML markup as embedded content, and not as an HTML syntax error. More embedded content, and not as an HTML syntax error. More generally, it is a special case of embedding XML in HTML.generally, it is a special case of embedding XML in HTML.

• MathML rendering must be integrated into browser MathML rendering must be integrated into browser software. software. For For example, embedded elements will need to be able to detect the example, embedded elements will need to be able to detect the ambient rendering environment, such as baseline, font family and ambient rendering environment, such as baseline, font family and color scheme.Support for printing is also essential.color scheme.Support for printing is also essential.

• Special emphasis must be given to insuring that MathML Special emphasis must be given to insuring that MathML can be easily generated by user-friendly conversion and can be easily generated by user-friendly conversion and authoring tools.authoring tools.

<math> element<math> element• encapsulates each instance of MathML markup within an encapsulates each instance of MathML markup within an

HTML page.HTML page.

• provides an attachment point for information which provides an attachment point for information which affects a MathML expression as a whole, like style sheet affects a MathML expression as a whole, like style sheet or macro information in the futureor macro information in the future

• Ideally, the math element should also serve as the Ideally, the math element should also serve as the interface for embedding MathML in HTML:it should signal interface for embedding MathML in HTML:it should signal the semantic embedding of MathML content to an HTML the semantic embedding of MathML content to an HTML processor, and admit additional attributes for controlling processor, and admit additional attributes for controlling how the MathML renderer should interact with the how the MathML renderer should interact with the browser.browser.

The Top-level The Top-level <math> element<math> element

• every valid, complete MathML expression must be contained every valid, complete MathML expression must be contained in <math> tagsin <math> tags

• The math element can contain an arbitrary number of children The math element can contain an arbitrary number of children schemata.schemata.

• the math element must always be the outermost element in a the math element must always be the outermost element in a MathML expressionMathML expression

• it is an error for one math element to contain another:it is an error for one math element to contain another:

• Applications which return subexpressions of other MathML expressions, for Applications which return subexpressions of other MathML expressions, for example as the result of a cut-and-paste operation, should always wrap example as the result of a cut-and-paste operation, should always wrap them in <them in <mathmath> tags.> tags.

• Applications which insert MathML expressions in other MathML expressions Applications which insert MathML expressions in other MathML expressions must take care to remove the < must take care to remove the <mathmath> tags> tags

Mixing and Linking Mixing and Linking MathML and HTMLMathML and HTML

• It should be possible not only to embed MathML in HTML, but It should be possible not only to embed MathML in HTML, but also to embed HTML in MathMLalso to embed HTML in MathML

• In most cases, HTML elements either do not apply in In most cases, HTML elements either do not apply in mathematical contexts (mathematical contexts (like headingslike headings) or MathML already ) or MathML already provides equivalent or better functionality specifically tailored provides equivalent or better functionality specifically tailored to mathematical content (to mathematical content (tablestables).).

• Two exceptions: Two exceptions:

- linking (element <a> in HTML): - linking (element <a> in HTML): MathML defines links MathML defines links by the use of the XML-LINK attribute, but MathML at present does not by the use of the XML-LINK attribute, but MathML at present does not provide a way for other documents to make links into a MathML expression provide a way for other documents to make links into a MathML expression - - images (<IMG> equivalent): images (<IMG> equivalent): one of the one of the reasons is that images are available only to a human reader and the goal of reasons is that images are available only to a human reader and the goal of MathML is to make the notational structure and mathematical content easily MathML is to make the notational structure and mathematical content easily available to processors available to processors

MathML is not so ideal !!MathML is not so ideal !!• Use of MathML Presentation Markup for simple mathematical Use of MathML Presentation Markup for simple mathematical

objects is an "overkill," since MathML markup is verbose objects is an "overkill," since MathML markup is verbose

compared to ASCII. compared to ASCII. Example: compare 1+sin(x) with its MathML Example: compare 1+sin(x) with its MathML codecode

• MathML Software : No Free Lunch MathML Software : No Free Lunch - almost all - almost all MathML software available is commercial - There is lack of Open MathML software available is commercial - There is lack of Open Source software for MathML in general, and for MathML Content Markup, in Source software for MathML in general, and for MathML Content Markup, in particular - For those that are available, authoring process is made particular - For those that are available, authoring process is made tedious by some solutions which enforce their own syntaxtedious by some solutions which enforce their own syntax

• Support for geometry in MathML is limited.Support for geometry in MathML is limited.

• For new elements (as rank above) we use the <annotation-xml> element For new elements (as rank above) we use the <annotation-xml> element with the OpenMath encoding Content Dictionary, with the OpenMath encoding Content Dictionary, BUTBUT where such a Content where such a Content

Dictionary may not exist in a specific encoding.Dictionary may not exist in a specific encoding.

Tools and Products Tools and Products Supporting MathMLSupporting MathML

• Viewers: WebEQ (Geometry Center), Techexplorer Viewers: WebEQ (Geometry Center), Techexplorer (IBM), (IBM), Amaya Amaya (W3C)(W3C)

• Editors : EZMath, STARS Editors : EZMath, STARS

• Conversion tools: LaTex2HTML, Omega,TeX4ht,Conversion tools: LaTex2HTML, Omega,TeX4ht,

• Generators: Mathematica (WRI), Maple (WMI), Generators: Mathematica (WRI), Maple (WMI), MathType (Design Science)MathType (Design Science)

• Some more MathML softwareSome more MathML software

• DemoDemo

ReferencesReferences• www.w3.org/Mathwww.w3.org/Math• www.w3.org/Math/mathml-faq.htmlwww.w3.org/Math/mathml-faq.html• www.mathtype.com/support/tutorials/mathmlwww.mathtype.com/support/tutorials/mathml• www.w3.org/1999/07/REC-MathML-19990707www.w3.org/1999/07/REC-MathML-19990707• tech.irt.org/articles/js081/#1tech.irt.org/articles/js081/#1• tech.irt.org/articles/js208/#introtech.irt.org/articles/js208/#intro• www.geom.umn.edu/~rminer/w3c/interfacewww.geom.umn.edu/~rminer/w3c/interfaceimages and examples:images and examples:• forum.swarthmore.edu/typesetting/web.choices.htmlforum.swarthmore.edu/typesetting/web.choices.html• www.mathtype.com/webmath/samples/wizdocs/brouwer.stmwww.mathtype.com/webmath/samples/wizdocs/brouwer.stm• www.mathtype.com/webmath/samples/wizdocs/brouwerjava. stmwww.mathtype.com/webmath/samples/wizdocs/brouwerjava. stm

for those who didn't like my lecture or MathML:for those who didn't like my lecture or MathML:The disappointment and embarrassment of MathMLThe disappointment and embarrassment of MathML