MathMl in HTML5
Before the release of HTML5 the use of formulas was a real handful. Judge for yourself: in 2005, it was necessary to have on hand, or special browser, or you can break the text into proper HTML and insertion of images or PDF. Search and other editing operations and/or output to the screen/paper was ambiguous task, which was dedicated to the whole monographs.
In 2012 it was already easier. Have the opportunity to connect the required plug-ins (for FireFox Firemath and Daum Equation Editor for Chrome). But the ambiguity of the standards (and support) are actually forced to write the same article for each of the browsers (and their versions). Or to meet users magic greeting "Your browser should then update the extension".
Uncomfortable? — Yes! It took a lot of time searching for universal solutions? — Yes! Makes you think about what type of recording is better (presentation or content), what Converter to use (and there are only a dozen or so well-known)? — YES! YES! YES!
As a result, the work of publication has turned into a development of two or three lexicon markup and study at least one program-recoder.
Now, with the advent of HTML5, everything became much easier. It has a new container
Every valid MathML instance must be inside this container.
It does not allow attachments, but inside can be an arbitrary number of other child elements.
In addition to the following attributes, the tag
class, id, style
When used together with the style sheets.
dir
Indicates the direction of the formula:
ref
Used to set a hyperlink to the specified URI.
mathbackground
The color of the background. You can use
mathcolor
The color of the text. You can use
display
This attribute specifies the method of output. Possible values:
the
The default value is
mode <span title="This deprecated API is no longer used but probably still works."
Outdated display attribute.
Possible values:
overflow
Determines how the expression behaves if the text is too long to fit in the specified width range.
Possible values:
In 2012 it was already easier. Have the opportunity to connect the required plug-ins (for FireFox Firemath and Daum Equation Editor for Chrome). But the ambiguity of the standards (and support) are actually forced to write the same article for each of the browsers (and their versions). Or to meet users magic greeting "Your browser should then update the extension".
Uncomfortable? — Yes! It took a lot of time searching for universal solutions? — Yes! Makes you think about what type of recording is better (presentation or content), what Converter to use (and there are only a dozen or so well-known)? — YES! YES! YES!
As a result, the work of publication has turned into a development of two or three lexicon markup and study at least one program-recoder.
Now, with the advent of HTML5, everything became much easier. It has a new container
<math>. Every valid MathML instance must be inside this container.
It does not allow attachments, but inside can be an arbitrary number of other child elements.
tag Attributes
In addition to the following attributes, the tag
<math> takes any attributes of the <mstyle>.class, id, style
When used together with the style sheets.
dir
Indicates the direction of the formula:
ltr — left-to-right, or rtl — right-to-left.ref
Used to set a hyperlink to the specified URI.
mathbackground
The color of the background. You can use
#rgb, #rrggbb, and HTML color names .mathcolor
The color of the text. You can use
#rgb, #rrggbb, and HTML color names .display
This attribute specifies the method of output. Possible values:
the
-
the
blockmeans that this element will be displayed outside the current range of text as a block, which can be located anywhere without changing the meaning of the text;
the inlinemeans that this element will be displayed within the current range of text, and cannot be moved without changing the value of this text.
The default value is
inline .mode <span title="This deprecated API is no longer used but probably still works."
Outdated display attribute.
Possible values:
display (which has the same effect as display="block" ) and inline .overflow
Determines how the expression behaves if the text is too long to fit in the specified width range.
Possible values:
linebreak (the default), scroll, elide, truncate, scale .Examples
the
the
the notes: XHTML documents with MathML should be served as
View in HTML5
the
<!DOCTYPE html>
<html>
<head>
<title>MathML in HTML5</title>
</head>
<body>
<math>
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</mrow>
</math>
</body>
</html>
View XHTML
the
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MathML in XHTML</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html>
the notes: XHTML documents with MathML should be served as
application/xhtml+xml. You can easily achieve this by adding .xhtml extension for local files. For Apache servers you can configure .htaccess file for this extension to the correct MIME type. Because we have kept our MathML in an XML document, you need to be confident in a well-formed XML document.browser Support
Full version
the
Mobile version
the
browser Support
Full version
| Element | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| XHTML description | (24-I) | 1.0 (1.7 or higher) | 9.5 | 5.1 | |
| HTML5 description | (24-I) | 4.0 (2.0) | 5.1 | ||
dir |
12.0 (12.0) | ||||
href |
WebKit bug 85733 | 7.0 (7.0) | WebKit bug 85733 | ||
mathbackground |
(24-I) | 4.0 (2.0) | 5.1 | ||
mathcolor |
(24-I) | 4.0 (2.0) | 5.1 | ||
overflow |
Mobile version
| Element | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| XHTML description | 1.0 (1.0) | |||||
| HTML5 description | 4.0 (2.0) | |||||
dir |
12.0 (12.0) | |||||
href |
7.0 (7.0) | |||||
mathbackground |
4.0 (2.0) | |||||
mathcolor |
4.0 (2.0) | |||||
overflow |
core Gecko
Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) adds support for all MathML attributes for top-level items (i.e. the same behavior as
Alternative text descriptions (
<mstyle> element). However, displaystyle attribute is not fulfilled. His support was added in Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).Alternative text descriptions (
alttext) or a reference to an alternative image (the attributes of the altimg, altimg-width, altimg-height and altimg-valign) is not currently implemented in Gecko.Specifications
the
| Specification | Status | Comment |
|---|---|---|
| MathML 3.0 | recommendation | Current specification |
| MathML 2.0 | recommendation | Initial specification |
