Download Presentation
## Introduction to Using MathML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -

**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.**What we’ll cover**• Part I – Understanding MathML • Part II – Magic Incantations • DOCTYPEs & MIME types • Namespaces • Object Tags and Processing Instructions • Universal MathML Stylesheet**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**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**Overview of MathML**• The Mathematical Markup Language (MathML) was first published as a recommendation in April 1998.**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:**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.”**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.”**Anatomy of a MathML expression**• About 30 MathML presentationelements which accept about 50 attributes**Anatomy of a MathML expression**• About 30 MathML presentationelements which accept about 50 attributes Most elements represent templates or patternsfor laying out subexpressions. For example, there is an mfrac element for fractions, and anmsqrt element for square roots.**Anatomy of a MathML expression**• About 30 MathML presentationelements which accept about 50 attributes Attributes generally specify additional optionalinformation about the element. Each attributehas a name and a value. For example, the mfracelement has an attribute called linethickness.**Anatomy of a MathML expression**• About 30 MathML presentationelements which accept about 50 attributes • Using presentation markup, it’s possible to precisely control how an expression will look when displayed. • About 120 content elements, accepting about a dozen attributes.**Anatomy of a MathML expression**• About 30 MathML presentationelements which accept about 50 attributes • Using presentation markup, it’s possible to precisely control how an expression will look when displayed. • About 120 contentelements, accepting about a dozen attributes. Most content elements represent either operatorsor mathematical data types. For example, there is a divide/element for division, and an emptysetelement to denote the empty set.**Anatomy of a MathML expression**• About 30 MathML presentationelements which accept about 50 attributes • Using presentation markup, it’s possible to precisely control how an expression will look when displayed. • About 120 content elements, accepting about a dozen attributes. • Content markup facilitates applications other than display, like computer algebra and speech synthesis.**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.**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.**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.**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.**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 />.**Examples of attributes**<mfrac linethickness='0'>…</mfrac>**Examples of attributes**<mfrac linethickness='0'>…</mfrac> <mspace width='12'/> Inserts a 12-pt space. For 12 pixels, use “12px”.**Examples of attributes**<mfrac linethickness='0'>…</mfrac> <mspace width='12'/> <mtable columnalign="center">…</mtable>**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**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>∑</mo>rendering: S**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>∑</mo>rendering: S This is an example of an entity reference. Entity referencesare just keywords in a special format, which representextended characters. Other examples are α (lower-case Greek alpha), and ∞ (infinity).**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**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?<mi>x</mi><mo>–</mo><mo>(</mo> <mn>3</mn><mo>+</mo><mi>y</mi><mo>)</mo>**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?<mi>x</mi><mo>–</mo><mo>(</mo> <mn>3</mn><mo>+</mo><mi>y</mi><mo>)</mo> x – (3 + y)**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.**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.**Scripts – sub & super**• These are the first elements we’ve seen in detail that normally have more than one argument. • Subscript: <msub> basescript </msub> • Superscript: <msup> basescript </msup>**Scripts – sub & super**• These are the first elements we’ve seen in detail that normally have more than one argument. • Subscript: <msub> basescript </msub> • Superscript: <msup> basescript </msup> • Usage:x1<msub><mi>x</mi><mn>1</mn></msub>**Scripts – sub & super**• These are the first elements we’ve seen in detail that normally have more than one argument. • Subscript: <msub> basescript </msub> • Superscript: <msup> basescript </msup> • Usage:x1<msub><mi>x</mi><mn>1</mn></msub> Why can’t we code it this way: <msub> x 1 </msub>?**Scripts – sub & super**• These are the first elements we’ve seen in detail that normally have more than one argument. • Subscript: <msub> basescript </msub> • Superscript: <msup> basescript </msup> • Usage:x1<msub><mi>x</mi><mn>1</mn></msub> Why can’t we code it this way: <msub> x 1 </msub>? Because msub is not a token element. A token element is the only element that can directly contain character data.**Scripts – sub & super**• These are the first elements we’ve seen in detail that normally have more than one argument. • Subscript: <msub> basescript </msub> • Superscript: <msup> basescript </msup> • Usage:x1<msub><mi>x</mi><mn>1</mn></msub> x2 <msup><mi>x</mi><mn>2</mn></msup> <msubsup><mi>x</mi><mn>1</mn><mn>2</mn></msubsup>**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.**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.**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…**2**b - 4 Example 1 – try coding this…**Don’t forget to begin with the <math> start tag and end**with the </math> end tag Don’t forget to begin with the <math> start tag and end with the </math> end tag 2 b - 4 Example 1 – try coding this… <math> </math>**2**b - 4 Example 1 – try coding this… <math> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>–</mo><mn>4</mn> </math>**-**a c 4 2 b Example 1a**-**a c 4 2 b Example 1a <math> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>–</mo><mn>4</mn><mi>a</mi><mi>c</mi> </math>**-**a c 4 2 b Example 1a or…**-**a c 4 2 b This entity doesn’t appear inprint, but here we have addedit to facilitate voice synthesisand heuristic evaluation bycomputer algebra systems. Example 1a <math> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>–</mo> <mn>4</mn> <mo>⁢<mo> <mi>a</mi> <mo>⁢<mo> <mi>c</mi></math>**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. Example 1a <math><mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>–</mo> <mn>4</mn> <mo>⁢<mo> <mi>a</mi> <mo>⁢<mo> <mi>c</mi></mrow></math>**Example 2 – one more…**<math> <mrow> <msup> <mi>x</mi><mn>2</mn> </msup> <mo>+</mo> <msup> <mi>y</mi><mn>2</mn> </msup> <mo>=</mo> <msup> <mi>r</mi><mn>2</mn> </msup> </mrow></math>**Other presentation elements**• Presentation elements are grouped: • Token Elements • <mi> identifier • <mn> number • <mo> operator, fence, or separator • <mtext> text