Accessibility/MathML: Difference between revisions

Jump to navigation Jump to search

Accessibility/MathML (view source)

Revision as of 19:00, 20 February 2014

6,008 bytes added ,  20 February 2014
Added MathML examples.
No edit summary
(Added MathML examples.)
Line 11: Line 11:
==Element types==
==Element types==


The following includes descriptions for the various types of MathML elements for the purpose of this document.
The following includes descriptions and examples for the various types of MathML elements for the purpose of this document.
Some examples are pulled from MDN.
Some examples are pulled from MDN.


Line 29: Line 29:
ms is used for arbitrary string literals meant to be interpreted by a programming language or other system.
ms is used for arbitrary string literals meant to be interpreted by a programming language or other system.
A special case is mglyph (image), which is used inside other token elements when a Unicode character is unavailable.
A special case is mglyph (image), which is used inside other token elements when a Unicode character is unavailable.
Another special case is the malignmark element, which will be described below in the table and matrix section.
Example markup is listed below.
Example markup is listed below.


<pre>
<pre>
<math>  
<math>  
   <mi>y</mi>
   <mi>y</mi>
  <mo>+</mo>
   <mn>10</mn>
   <mn>10</mn>
   <mo>+</mo>
   <mspace width="1em"/>
   <mtext>Arbitrary text</mtext>
   <mtext>Arbitrary text</mtext>
   <mspace width="1em"/>
   <mspace width="1em"/>
   <ms>InterpretedStringLiteral</ms>
   <ms>InterpretedStringLiteral</ms>
  <mspace width="1em"/>
   <mi>
   <mi>
     <mglyph src="an-image" alt="an-image-description"/>
     <mglyph src="x.png" alt="x"/>
   </mi>
   </mi>
</math>
</math>
</pre>
</pre>
[[File:MathML-tokens.png|frame|left|The above describes y + 10, arbitrary text, an interpreted string literal, and a glyph (an image of x).  Rendered using MathJax due to lack of glyph support in Gecko.]]
<br clear=all>


===Layout===
===Layout===
Line 80: Line 86:
     </mrow>
     </mrow>
   </mrow>
   </mrow>
  <mspace width="1em"/>
   <mfrac>
   <mfrac>
     <mi>x</mi>
     <mi>x</mi>
     <mn>2</mn>
     <mn>2</mn>
   </mfrac>
   </mfrac>
  <mspace width="1em"/>
   <msqrt>
   <msqrt>
     <mn>2</mn>
     <mn>2</mn>
   </msqrt>
   </msqrt>
  <mspace width="1em"/>
   <mroot>
   <mroot>
     <mi>x</mi>
     <mi>x</mi>
     <mn>5</mn>
     <mn>5</mn>
   </mroot>
   </mroot>
  <mspace width="1em"/>
   <mfenced>
   <mfenced>
     <mi>x</mi>
     <mi>x</mi>
Line 96: Line 106:
     <mi>z</mi>
     <mi>z</mi>
   </mfenced>
   </mfenced>
  <mspace width="1em"/>
   <menclose notation="circle">
   <menclose notation="circle">
     <mi>a</mi>
     <mi>a</mi>
Line 104: Line 115:
</pre>
</pre>


The above describes (x+y) + 2, x/2 as a fraction, the square root of 2, the 5th root of x,  
[[File:MathML-layout-semantics.png|frame|left|The above describes (x+y) + 2, x/2 as a fraction, the square root of 2, the 5th root of x, a 3D vector (x, y, z), and (a + b) circled. Rendered using Gecko.]]
a 3D vector (x, y, z), and (a + b) circled.
<br clear=all>


====Formatting====
====Formatting====
Line 130: Line 141:
</pre>
</pre>


The above describes the expression "x + y" rendered in blue from right to left,
[[File:MathML-layout-formatting.png|frame|left|The above describes the expression "x + y" rendered in blue from right to left, with extra padding, and with the "+ y" not displayed. Rendered using Gecko.]]
with extra padding, and with the "+ y" not displayed.
<br clear=all>


====Elementary math====
====Elementary math====
Line 170: Line 181:
     <mn>508</mn>
     <mn>508</mn>
   </mstack>
   </mstack>
  <mspace width="1em"/>
   <mlongdiv>
   <mlongdiv>
     <mn>5</mn>
     <mn>5</mn>
Line 178: Line 190:
</pre>
</pre>


The above describes the subtraction of 15 from 523, with a borrow from the ten's column to the one's column,
[[File:MathML-layout-elementary.png|frame|left|300px|The above describes the subtraction of 15 from 523, with a borrow from the ten's column to the one's column, as well as the division of 5 by 5 resulting in 1. Rendered using the MathML-mml3ff addon with Gecko as elementary math support is not natively available in Gecko.]]
as well as the division of 5 by 5 resulting in 1.
<br clear=all>


===Scripts and limits===
===Scripts and limits===
Line 198: Line 210:


<pre>
<pre>
<math>
<math display="block">
   <msubsup>
   <msubsup>
     <mi>b</mi>
     <mi>b</mi>
Line 204: Line 216:
     <mn>2</mn>
     <mn>2</mn>
   </msubsup>
   </msubsup>
  <mspace width="1em"/>
   <munderover>
   <munderover>
     <mo>&sum;</mo>
     <mo>&sum;</mo>
    <mi>5</mi>
     <mrow>
     <mrow>
       <mi>n</mi>
       <mi>n</mi>
Line 212: Line 224:
       <mn>1</mn>
       <mn>1</mn>
     </mrow>
     </mrow>
    <mi>5</mi>
   </munderover>
   </munderover>
   <mi>n</mi>
   <mi>n</mi>
   <mo>=</mo>
   <mo>=</mo>
   <mn>15</mn>
   <mn>15</mn>
  <mspace width="1em"/>
   <mmultiscripts>
   <mmultiscripts>
     <mi>x</mi>
     <mi>x</mi>
Line 227: Line 241:
</pre>
</pre>


The above describes the base b with superscript 1 and subscript 2,
[[File:MathML-scripts-limits.png|frame|left|The above describes the base b with subscript 1 and superscript 2, the summation of n from 1 to 5 being 15, and x with post-superscript a and pre-subscript b. Rendered using Gecko.]]
the summation of n from 1 to 5 being 15, and x with post-superscript a and pre-subscript b.
<br clear=all>
 
===Tables/matrices===
These elements describe a table or matrix.  This is also used for layout.
These include the following:
* mtable - the container for a table, contains any number of mtr or mlabeledtr elements
* mtr - a row, containing any number of mtd elements
* mlabeledtr - a labelled row, having a caption on the side, containing any number of mtd elements
* mtd - a table cell, containing any number of elements
 
For mlabeledtr, the first mtd contained inside becomes the caption.
 
In addition, there are two elements used for table formatting:
* maligngroup - denotes a column in a table, used for alignment
* malignmark - denotes an alignment point inside an alignment group
 
malignmark is used inside a token element to set the alignment point.
Example markup is listed below.
 
<pre>
<math>
  <mrow>
    <mo>[</mo>
    <mtable>
      <mtr>
        <mtd>
          <mn>1</mn>
        </mtd>
        <mtd>
          <mn>0</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mn>0</mn>
        </mtd>
        <mtd>
          <mn>1</mn>
        </mtd>
      </mtr>
    </mtable>
    <mo>]</mo>
  </mrow>
  <mspace width="1em"/>
  <mtable>
    <mlabeledtr>
      <mtd>
        <mtext>Volume of a sphere</mtext>
      </mtd>
      <mtd>
        <mi>V</mi>
        <mo>=</mo>
        <mfrac>
          <mn>4</mn>
          <mn>3</mn>
        </mfrac>
        <mo>&InvisibleTimes;</mo>
        <mi>&pi;</mi>
        <mo>&InvisibleTimes;</mo>
        <msup>
          <mi>r</mi>
          <mn>3</mn>
        </msup>
      </mtd>
    </mlabeledtr>
  </mtable>
  <mspace width="1em"/>
  <mtable>
    <mtr>
      <mrow>
        <mn>3</mn>
        <mo>&InvisibleTimes;</mo>
        <maligngroup/>
        <mi>x</mi>
        <maligngroup/>
        <mo>+</mo>
        <maligngroup/>
        <mi>y</mi>
        <maligngroup/>
        <mo>=</mo>
        <maligngroup/>
        <mn>7</mn>
      </mrow>
    </mtr>
    <mtr>
      <mrow>
        <mphantom>
          <mn>0</mn>
          <mo>&InvisibleTimes;</mo>
          <maligngroup/>
          <mi>x</mi>
          <maligngroup/>
          <mo>+</mo>
        </mphantom>
        <maligngroup/>
        <mi>y</mi>
        <maligngroup/>
        <mo>=</mo>
        <maligngroup/>
        <mn>1</mn>
      </mrow>
    </mtr>
  </mtable>
</math>
</pre>
 
[[File:MathML-tables-matrices.png|frame|left|The above describes the two-by-two identity matrix, the equation to determine the volume of a sphere, and two aligned equations.  Rendered using MathJax due to lack of support of maligngroup and malignmark in Gecko.]]
<br clear=all>
 
===Semantics annotation===
These elements provide explicit annotation for MathML.
These include the following:
* semantics - starts a semantic annotation block, containing MathML and annotations
* annotation - annotation information in non-XML format
* annotation-xml - annotation information in XML format
 
The first child of semantics is the content being annotated, with the following
annotation elements annotating the content.
 
Example markup is listed below.
 
<pre>
<math>
  <semantics>
    <!-- Presentation MathML -->
    <mrow>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>
    <!-- Content MathML -->
    <annotation-xml encoding="MathML-Content">
      <apply>
        <plus/>
        <apply>
          <power/>
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>
    <!-- annotate TeX -->
    <annotation encoding="application/x-tex">
      x^{2} + y
    </annotation>
  </semantics>
</math>
</pre>
 
[[File:MathML-semantics-annotation.png|frame|left|The above is the square of x added to y, with the content also annotated (invisibly) as Content MathML and TeX markup.  Rendered using Gecko.]]
<br clear=all>
 
===Other===
Other elements not fitting into the above categories.
* maction - binds actions to expressions
* merror - displays content as an error message
 
maction elements allow for interactivity with MathML content.
Example markup is listed below.
 
<pre>
<math>
  <merror>
    <mrow>
      <mtext>Division by zero: </mtext>
      <mfrac>
        <mn>1</mn>
        <mn>0</mn>
      </mfrac>
    </mrow>
  </merror>
</math>
</pre>
 
[[File:MathML-other-error.png|frame|left|The above is a divide by zero error.  Rendered using Gecko.]]
<br clear=all>
 
<pre>
<math>
  <maction actiontype="toggle">
    <mfrac>
      <mn>6</mn>
      <mn>8</mn>
    </mfrac>
    <mfrac>
      <mrow>
        <mn>3</mn>
        <mo>&sdot;</mo>
        <mn>2</mn>
      </mrow>
      <mrow>
        <mn>4</mn>
        <mo>&sdot;</mo>
        <mn>2</mn>
      </mrow>   
    </mfrac>
    <mfrac>
      <mn>3</mn>
      <mn>4</mn>
    </mfrac>
  </maction>
</math>
</pre>
 
[[File:MathML-other-action.gif|frame|left|The above is a togglable expression displaying 6/8, (3*2)/(4*2), and 3/4 upon each mouse press.  Rendered using Gecko.]]
<br clear=all>


=Interface=
=Interface=
Jwei
29

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/933831"

Navigation menu