{"id":24757,"date":"2015-09-24T21:01:20","date_gmt":"2015-09-24T13:01:20","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24757"},"modified":"2016-01-25T16:58:16","modified_gmt":"2016-01-25T08:58:16","slug":"mathml-markup","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/mathml-markup\/","title":{"rendered":"Introduction to MathML – The Markup Language for Math"},"content":{"rendered":"

MathML<\/a> is a markup language<\/a> that can be used to display mathematical notations<\/strong>. You can use MathML tags directly from HTML5. It is useful for when you wish to show more than simple notations of Math in your web pages, and it\u2019s quite easy to use due to its simplicity and resemblance to HTML<\/strong>.<\/p>\n

MathML has two types of markup; presentation (for layout) and content (for meaning). Since only the presentation markup is supported<\/a> by browsers, that\u2019s the only markup type that can be used with HTML. You can also use CSS and JavaScript on it just like you would on HTML.<\/p>\n

Let\u2019s take a look at MathML.<\/p>\n

Understanding MathML<\/h2>\n

There\u2019s a list of present MathML elements in the Mozilla Developer website<\/a>. I\u2019ve also listed the elements used in the examples at the end of this post for quick reference.<\/p>\n

The top level element in MathML is the <math><\/code> element, When you write MathML code in the HTML, remember to put them inside the <math><\/code> tags.<\/p>\n

<mi><\/code>,<mo><\/code>,<mn><\/code>,<ms><\/code> are the basic elements representing an identifier ,operator, number and string respectively. Note that all the MathML elements below start with the letter \u2018m\u2019.<\/p>\n

Here are some simple examples.<\/p>\n

How to Display Superscript & Subscript<\/h2>\n

The <msup><\/code> element is for displaying superscript. There\u2019s an <msub><\/code> for subscripts.<\/p>\n

<math>\r\n    <msup>\r\n        <mi>n<\/mi>\r\n        <mn>7<\/mn>\r\n    <\/msup>\r\n<\/math>\r\n<\/pre>\n
\"MathML<\/figure>\n
How to Display Fractions<\/h2>\n
<math>\r\n    <mfrac>\r\n        <mn>7<\/mn>\r\n        <mn>26<\/mn>\r\n    <\/mfrac>\r\n<\/math>\r\n<\/pre>\n
\"MathML<\/figure>\n
How to Display Root Integers<\/h2>\n
Here\u2019s one more simple example for displaying root integers.<\/p>\n
<math>\r\n    <mroot>\r\n        <mn><mo>-<\/mo>678<\/mn>\r\n        <mn>5<\/mn>\r\n    <\/mroot>\r\n<\/math>\r\n<\/pre>\n
\"MathML<\/figure>\n
For only square root, there\u2019s <msqrt><\/code>.<\/p>\n
Now let\u2019s move on to more complex notations, the matrix.<\/p>\n
How to Display a Matrix<\/h2>\n
To construct a matrix, we will need to have a table structure for rows and columns. For this, we use <mtable><\/code>, <mtr><\/code> and <mtd><\/code>.<\/p>\n
Apart from that, we\u2019ll use the <mo><\/code> tags to add the operators [<\/code> and ]<\/code> around the matrix, and finally put them all inside the <mrow><\/code> element, an element that groups expressions.<\/p>\n
Here\u2019s the end result:<\/p>\n
<math>\r\n <mrow>\r\n  <mo> [ <\/mo>\r\n  <mtable>\r\n    <mtr>\r\n      <mtd> <mn>0<\/mn> <\/mtd>\r\n      <mtd> <mn>4<\/mn> <\/mtd>\r\n      <mtd> <mn>10<\/mn> <\/mtd>\r\n    <\/mtr>\r\n    <mtr>\r\n      <mtd> <mn>5<\/mn> <\/mtd>\r\n      <mtd> <mn>2<\/mn> <\/mtd>\r\n      <mtd> <mi>X<\/mi> <\/mtd>\r\n    <\/mtr>\r\n    <mtr>\r\n      <mtd> <mn>9<\/mn> <\/mtd>\r\n      <mtd> <mn>11<\/mn> <\/mtd>\r\n      <mtd> <mn>1<\/mn> <\/mtd>\r\n    <\/mtr>\r\n  <\/mtable>\r\n  <mo> ] <\/mo>\r\n <\/mrow>\r\n<\/math>\r\n<\/pre>\n
Also, let\u2019s throw in a bit of CSS to make that \u2018X\u2019 stand out in the matrix.<\/p>\n
mi {\r\n    color:red;\r\n}\r\n<\/pre>\n
\"MathML<\/figure>\n
How to Display Integral Equations<\/h2>\n
Below is an example of a basic type of integral equation. The <mmultiscripts><\/code> is used to add the limits to the integral.<\/p>\n
\"MathML<\/figure>\n
Like HTML, MathML also has characters and entities, one of which is used in the example to show the Greek phi symbol. Here\u2019s how to display the integral equation above:<\/p>\n
<math>\r\n    <mrow>\r\n        <mrow>\r\n            <mi>f<\/mi>\r\n            <mo>(<\/mo>\r\n            <mi>x<\/mi>\r\n            <mo>)<\/mo>\r\n        <\/mrow>\r\n        <mo>=<\/mo>\r\n        <mrow>\r\n            <mmultiscripts>\r\n                <mo>∫<\/mo>\r\n                <mi>a<\/mi>\r\n                <mi>b<\/mi>\r\n            <\/mmultiscripts>\r\n            <mrow>\r\n                <mi>K<\/mi>\r\n                <mo>(<\/mo>\r\n                <mi>x<\/mi>\r\n                <mo>,<\/mo>\r\n                <mi>t<\/mi>\r\n                <mo>)<\/mo>\r\n            <\/mrow>\r\n            <mrow>\r\n                <mi>φ<\/mi>\r\n                <mo>(<\/mo>\r\n                <mi>t<\/mi>\r\n                <mo>)<\/mo>\r\n            <\/mrow>\r\n            <mi>d<\/mi>\r\n            <mi>t<\/mi>\r\n        <\/mrow>\r\n    <\/mrow>\r\n<\/math>\r\n<\/pre>\n
For a list of MathML character entities, click here<\/a> to find them on the W3C website.<\/p>\n
MathML Attributes<\/h2>\n
Apart from attributes that are are the same as HTML\u2019s (like id<\/code>), MathML also has a set of their own attributes. The Mozilla Developer site has a collection of MathML attributes<\/a> for your reference.  For fallbacks, you can use the JavaScript library MathJax<\/a>. If you need more tools, check out this link here<\/a>.<\/p>\n
I take my leave with this codepen containing all of the examples above, for your easy reference.<\/p>\n