MathML 1 Mathematical Typesetting ● Mathematical typesetting differs in significant ways from typesetting of ordinary text. ● Mathematical typesetting uses a different font with different spacing between characters than ordinary typesetting. ● It is frequently not line-oriented. ● It has complex alignments both horizontally and vertically. ● It uses a huge character set. ● It has some symbols that change size and have other typesetting around them that depend on the situation 2 XML ● XML stands for Extensible Markup Language. It represents yet another effort by the W3C to divorce content from presentation. Whereas CSS allows us to take most formatting out of a document, but continues to require a restricted set of typesetting commands concerning the structure of the document, XML removes most of the restrictions on the structural commands. XML allows an author to determine the structure of a document, create tags to describe that structure, and leave all the formatting for later. ● XML has a stricter syntax than HTML, but really has very few rules. The only requirements for a well-formed XML file are as follows: 1. Every opening XML tag must have a corresponding closing tag: for example <tag> must be followed by </tag>. 2. Tags must be nested properly. The last tag to open must be the first to close. 3. <tag/> is considered to be equivalent to <tag></tag>. 4. There must be one tag, called the root tag, which does not appear in the content of any other tag. 3 XML ● What are the tags? That is up to us. We can define the tags, their relationship to each other, and the way in which their content will be formatted on a page. As you can see, this means that every XML document actually relies on at least two other files. ● A Data Type Definition (DTD) file contains the rules regarding relationships among the tags we define. We do not really require a DTD, but it allows us to define default values, and enforces our syntax across many different XML documents. ● In addition to a DTD, the presentation of our XML requires an associated style file to tell how it is to be formatted. The style file could be done in CSS - see this sample XML with CSS formatting. As you can see, the control over the appearance is limited. For that reason the X Stylesheet Language was invented - XSL. XSL is a much more versatile language for XML formatting, allowing us to include some typesetting commands in addition to formatting instructions. In short, XSL can handle all procedural matters, while XML is exclusively structural. You can view more examples of that same sample XML file here, here, and here (if you try clicking the links you will see simple web pages, try looking into the source code and you will see XML file. As I mentioned, Ctrl+U is the default shortcut for showing source code in Chrome, Firefox, IE, Edge; for Safari try these steps http://ccm.net/faq/33026-safari-view-the-source-code-of-a-webpage . Also in the header of the file you will see a link to the stylesheet file – try opening this file by simply copying file address, pasting it in your browser’s address line and pressing enter). 4 MathML ● Mathematical Markup Language (MathML) is a mathematical markup language, an application of XML for describing mathematical notations and capturing both its structure and content. It aims at integrating mathematical formulae into World Wide Web pages and other documents. ● Although MathML was officially included by World Wide Web Consortium (W3C) in HTML5 Standard in 2015, currently there is no built-in support for it in such popular browsers as Chrome, Internet Explorer or Edge (it is still possible to render MathML typesetting with those browser, but it requires some additional libraries/extensions, e.g. https://en.wikipedia.org/wiki/MathJax ). Latest versions of Firefox and Safari have built-in support for MathML. ● MathML typesetting may look cumbersome (e.g. this <math><msup><mi>x</mi><mn>2</mn></msup></math> will simply produce x^2).But on the other hand, it appears to be highly structured and meaningful in itself. For example, this give search engines better understanding of what exactly particular formula says. 5 MathML Syntax ● MathML was designed as a small subset of XML, so its syntax is basically that of XML. The rules are simple: 1. MathML commands are tags as with HTML, enclosed in “angle brackets” (less than and greater than signs). 2. MathML tags themselves enclose the text that is to be formatted. 3. There must be a top-level tag that encloses all the content. In MathML that tag is always <math>. 4. Every opening tag must have corresponding closing tag. 5. Tags must be nested properly. ● All tags in MathML start from “m” letter, e.g. <math>, <mi>, <mn>/ 6 Basic Elements ● MathML code is inserted into the <body> element of an HTML document and wrapped with the <math>...</math> tag. ● The symbols to be represented as a part of expressions and formulas have to be inserted as text into one of the following basic child elements of the <math> tag: <mi> for variables, e.g., <mi>x</mi> for “x”; <mn> for number values, e.g., <mn>2</mn> for “2”; <mo> for mathematical operators, e.g., <mo>+</mo> for “+”, or <mo>=</mo> for “=”. ● These basic elements are therefore necessary for every expression in MathML and determine the font style of the inserted symbols. The elements <mn> and <mo> can contain several symbols, however, <mi> can contain only one-letter variables. ● Another important element in MathML is <mrow> which lets group several MathML elements to a single unit, a term. For simple examples it usually does not have a visible effect, but we will see below cases where it is necessary. 7 Constants, Symbols and Blank Spaces ● Constants and symbols rendering are implemented with character entities (like &lt; or &nbsp;) together with <mn>..</mn> tag. ● For example <mn>&alpha;</mn> will display α; <mn>&pi;</mn> will display π; <mn>&infin;</mn> will display ∞; <mn>&pm;</mn> will display ±; <mn>&hbar;</mn> will display ℏ. ● See complete list of all characters here https://www.w3.org/TR/MathML2/chapter6.html#chars.entity.tables ● The MathML <mspace> element is used to display a blank space, whose size is set by its attributes, e.g. depth, height, width. 8 Superscripts, Subscripts, Fractions ● Expressions can be written as superscripts or subscripts using tags <msup> and <msub> respectively. <msup> and <msub> should contain exactly two child elements (two parameters are passed to msup/msub command): the first one is treated as a variable, the second one is actually an expression for superscript/subscript. you want to display expression consisting of more than one element you should use <mrow> tag to group elements together. ● A fraction is generated by the element <mfrac>. <mfrac> should also contain exactly two child elements: the first one will is used as numerator, the second one provides content for denominator. For example, typesetting for “2 over x” expression will look like: <mfrac> <mn>2</mn> <mi>x</mi> </mfrac> ● If the numerator or the denominator consists of several terms, they have to be grouped by <mrow> to separate units. For example, typesetting for “2 over (x + 3)” expression will look like: <mfrac> <mn>2</mn> <mrow><mi>x</mi><mo>+</mo><mn>3></mn></mrow> </mfrac> 9 Square Root, Sum, Limit, Integral ● In MathML the root symbol is generated by the element <msqrt>. The tag should have exactly one child to be used an expression under the square root. ● To display roots with indices different from 2, i.e., to use other roots than the square root, MathML provides the element <mroot> which expects two subelements, first the term from which the root is to be extracted, and second the index. ● <munder>/<mover> can attach attach an accent or a limit under/ below an expression. Both tags expect two child elements: base expression and expression to be attached under/below the base expression. ● The limits of sums, products or integrals are enabled by the element <munderover>. It expects three elements in the ordered sequence: symbol (sum &sum; or integral &int;), the lower limit, and the upper limit. If one of the limits is not intended to be displayed, its place has to occupied by an empty element <mn></mn>. ● Again, to display an expression that is longer than just a single variable/number use <mrow> tag. 10 Functions ● Functions are usually displayed in italic letters, thus they should be included into <mi> tags. However, names for standard functions like sine, cosine, logarithm etc. are represented in roman letters, and so several letters enclosed by <mi> tags are not displayed in italic. ● Functions of several variables can be defined in MathML by the grouping element <mfenced>. ● The commas between the arguments then are set automatically. In case of a single argument consequently no comma is displayed. 11 Matrices ● To display matrices, we need to combine <mfenced> element and <mtable> element. <mtable> is responsible for rendering tabular structure; <mfenced> will enclose the table in brackets. <mtable> should be nested inside <mfenced>. ● <mtable> has the same structure as an HTML table <table>, only with the mandatory m prefix in the element name, i.e. table row is defined with <mtr> tag and inside each row we define cells using <mtd> tag. ● With the attributes open and close in <mfenced> we can customize the brackets to be display, e.g. <mfenced open="[" close="]"> or <mfenced open="{" close="}">. 12 Indented Formulas ● A mathematical expression may appear in the running text (“inline mode”) or indented from the running text and centered (“display mode”).