1
MathML 1 Mathematical Typesetting Mathematical typesetting differs - - PowerPoint PPT Presentation
MathML 1 Mathematical Typesetting Mathematical typesetting differs - - PowerPoint PPT Presentation
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.
2
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
3
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
- f 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.
4
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).
5
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
- f 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.
6
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>/
7
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.
8
Constants, Symbols and Blank Spaces
- Constants and symbols rendering are implemented with
character entities (like < or ) together with <mn>..</mn> tag.
- For example <mn>α</mn> will display α; <mn>π</mn>
will display π; <mn>∞</mn> will display ∞; <mn>±</mn> will display ±; <mn>ℏ</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.
9
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
- ne 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>
10
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 ∑ or integral ∫), 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.
11
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.
12
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>,
- nly 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
- pen="[" close="]"> or <mfenced open="{" close="}">.
13
Indented Formulas
- A mathematical expression may appear in the running
text (“inline mode”) or indented from the running text and centered (“display mode”). These representation modes in MathML are determined by the attribute mode of the <math> element: <math mode="inline"> … </math> or <math mode="display"> … </math>
- In the display mode the letters and symbols in
numerators and denominators are set in normal size, whereas in the inline mode they are displayed in a smaller font. If the mode attribute is not used, it is set to its default value "inline".
14
Some Sources
- A document with examples for all of the above
slides: http://www.math.wsu.edu/students/odykhovychny i/M300/slides/04_MathML/04_MathML_example_doc ument.html
- A nice cheat sheet by Prof. Cooper:
http://www.math.wsu.edu/math/kcooper/M300/math mlcheat.php
- More information (references and tutorials) could
be found here https://www.w3.org/Math/
- MathJax library to be used for Chrome or Internet
Explorer/Edge: https://www.mathjax.org/
15
ICE #6
- Typeset the following page using HTML and MathML: