MathML: Mathematical Markup Language

16 de dez de 2012 - Paulo Dias


MathML é uma linguagem de marcação, baseada em XML, para criar formulas matemáticas. Ela está dividida em duas partes: Presentation e Content Markup. Esse artigo vai tratar apenas da Presentation Markup.

Atualmente me parece que apenas o Firefox e o Opera oferecem algum suporte nativo para as instruções MathML( tive alguns problemas com o Opera ), mas isso provavelmente vai mudar em breve, pois a MathML está incluído na especificação do HTML5. Portanto para acompanhar esse artigo recomendo o uso de um desses navegadores ( também existe o plugin Mathplayer para IEca, mas eu não testei )

Vamos iniciar com um exemplo simples:
    <math>
          <msqrt>
                <mn>2</mn>
          </msqrt>
    </math>

Essa marcação deve apresentar a raiz quadrada de 2, assim: 2

Nesse exemplo notamos que o elemento raiz do MathML é o math, a raiz quadrada é representada pelo elemento msqrt e o elemento mn representa um número.

Os elementos mais usados em MathML são mn, mi e mo. Eles servem para representar respectivamente numeros( ex. 1, 0.235 ), variáveis/constantes( ex. x, π ) e operadores( ex. +, = ). Veja um exemplo usando os 3 elementos:

      <math>
            <mi> y </mi>
            <mo> = </mo>
            <mi> x </mi>
            <mo> - </mo>
            <mn> 3 </mn> 
      </math>
y = x - 3

Outro elemento usado com freqüência é o mrow. Esse elemento tem a função de agrupar outros elementos em linha. A principio pode parecer um elemento sem muita utilidade, mas em MathML existem elementos com um numero especifico de filhos. Dessa forma mrow se torna muito útil. Por exemplo, o elemento mfenced serve para colocar parênteses ao redor de outro elemento, mas se for colocado mais de um elemento filho dentro dele, esses elementos são separados por vírgula, veja:

      <math>
            <mfenced>
                  <mi> x </mi>
                  <mo> - </mo>
                  <mn> 3 </mn> 
            </mfenced> 
      </math>
x - 3

Essa característica pode ser útil em alguns casos, mas nesse exemplo seria melhor que não houvesse essa separação. Para evitar isso podemos fazer o seguinte:

      <math>
            <mfenced>
                  <mrow>
                        <mi> x </mi>
                        <mo> - </mo>
                        <mn> 3 </mn>
                  </mrow> 
            </mfenced> 
      </math>
x - 3
Outra característica importante do elemento mfenced é que podemos especificar quais caracteres serão utilizados como parênteses e separadores. Isso é possível através dos atributos open, close e separators.
      <math>
            <mfenced open='[' close=']' separators='|'>

                        <mn> 2 </mn>
                        <mn> 5 </mn>
                        <mn> 8 </mn>

            </mfenced> 
      </math>
2 5 8

Outro elemento que tem o numero de filhos predefinido é mfrac que serve para criar frações, o primeiro filho é o numerador e o segundo é o denominador. Segue um exemplo:

      <math>
            <mfrac>
                  <mrow>
                        <mn> 2 </mn>
                        <mo> + </mo>
                        <mn> 5 </mn>
                  </mrow>
                  <mn>2</mn>
            </mfrac>
      </math>
2 + 5 2

Ainda temos os elementos msub e msup que também tem o numero de filhos predefinidos:

      <math>
            <msub>
                  <mn> 2 </mn>
                  <mn> 5 </mn>
            </msub>

            <mo>+</mo>

            <msup>
                  <mn> 1 </mn>
                  <mn> 4 </mn>
            </msup>
      </math>
2 5 + 1 4

Com MathML também podemos criar matrizes. A sintaxe é semelhante as tabelas html. O elemento pai é o mtable. Dentro dele temos elementos de linha mtr, e dentro desses, elementos de coluna mtd.

      <math>
            <mfenced><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>
             </mfenced></mtable>
      </math>
1 0 0 1

Com esse conhecimento sobre os elementos de MathML podemos criar expressões como essas:

      <math>
         <mrow>
               <mn>x</mn>
               <mo>=</mo>
               <mrow>
                     <mfrac>
                           <mrow>
                                 <mo>-</mo>
                                 <mi>b</mi>
                                 <mo>±</mo>
                                 <msqrt>
                                       <mrow>
                                            <msup>
                                                 <mi>b</mi><mn>2</mn>
                                            </msup>
                                            <mo>-</mo> 
                                            <mn>4</mn>
                                            <mo>.</mo>
                                            <mi>a</mi>
                                            <mo>.</mo>
                                            <mi>c</mi>
                                       </mrow>
                                 </msqrt>
                           </mrow>
                           <mrow>
                                 <mn>2</mn>
                                 <mo>.</mo>
                                 <mi>a</mi>
                           </mrow>
                     </mfrac>
               </mrow>
         </mrow>  
   </math>
x = - b ± b2 - 4 . a . c 2 . a
      <math>
            <mrow>
                  <msub>
                        <mi>S</mi>
                        <mi>n</mi>
                  </msub>
                  <mo>=</mo>
                  <mfrac>
                        <mrow>
                              <mfenced>
                                    <mrow>
                                    <msub>
                                          <mi>a</mi><mn>1</mn>
                                    </msub>
                                    <mo> + </mo>
                                    <msub>
                                          <mi>a</mi><mn>1</mn>
                                    </msub>
                                    </mrow>
                              </mfenced>
                              <mo>.</mo>
                              <mi>n</mi>
                        </mrow>
                        <mn>2</mn>
                  </mfrac>
            </mrow>
      </math>
S n = a1 + an . n 2
      <math>
            <mrow>
               <msup>
                     <mi>a</mi><mn>2</mn>
               </msup>
               <mo>+</mo>
               <msup> 
                     <mi>b</mi><mn>2</mn>
               </msup>
               <mo>=</mo>
               <msup>
                     <mi>c</mi><mn>2</mn>
               </msup>
            </mrow>
      </math>
a2 + b2 = c2
Update:
13/01/2012 O Chrome gerou todos os códigos corretamente

Mais informações:
http://www.fisiocomp.ufjf.br/seminarios/MathML.pdf
http://www.w3.org/TR/MathML3/
https://developer.mozilla.org/en-US/docs/MathML/Element

Paulo Dias

Graduado no curso tecnólogo em análise e desenvolvimento de sistemas. Defensor do Software Livre e da democratização da informação. Possui as certificações Linux LPIC-1 e Java OCA. Atualmente exerce a função de coordenador técnico na área de telecomunicações.

Siga-me no Twitter