MathML - Mathematical Markup Language
MathML é uma linguagem de marcação, baseada em XML, para criar fórmulas matemáticas. Ela está dividida em duas partes: Presentation e Content Markup. Esse artigo vai tratar apenas da Presentation Markup.
Entendendo o básico
MathML é uma linguagem de marcação, baseada em XML, para criar fórmulas matemáticas. Ela está dividida em duas partes:
Esse artigo vai tratar apenas da Presentation Markup.
A maioria dos navegadores atuais já oferecem algum suporte nativo para às instruções MathML, e com o tempo, esse suporte deve ficar ainda mais completo, pois a MathML está incluída na especificação do HTML5.
Os exemplos que vou utilizar foram testados no Firefox 22. É interessante utilizar um navegador atualizado para visualizar o resultado gerado pelos códigos.
Vou iniciar mostrando os principais elementos da MathML e depois vou mostrar exemplos completos. Veja um exemplo bem simples:
Essa marcação deve apresentar a raiz quadrada de 2, assim:
Os elementos mais usados em MathML são "mn", "mi" e "mo". Eles servem para representar respectivamente números (ex.: 1, 0.235), variáveis/constantes (ex.: x, π) e operadores (ex. +, =).
Veja um exemplo usando esses 3 elementos:
Esse código gera a seguinte informação:
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:
Esse código gera a seguinte saída:
E consigo a seguinte saída:
Outro elemento que tem o número de filhos predefinido é "mfrac", que serve para criar frações, o primeiro filho é o numerador e o segundo é o denominador. Segue um exemplo:
Saída:
Saída:

- Presentation
- Content Markup
Esse artigo vai tratar apenas da Presentation Markup.
A maioria dos navegadores atuais já oferecem algum suporte nativo para às instruções MathML, e com o tempo, esse suporte deve ficar ainda mais completo, pois a MathML está incluída na especificação do HTML5.
Os exemplos que vou utilizar foram testados no Firefox 22. É interessante utilizar um navegador atualizado para visualizar o resultado gerado pelos códigos.
Vou iniciar mostrando os principais elementos da MathML e depois vou mostrar exemplos completos. Veja um exemplo bem simples:
<math>
<msqrt>
<mn>2</mn>
</msqrt>
</math>
<msqrt>
<mn>2</mn>
</msqrt>
</math>
Essa marcação deve apresentar a raiz quadrada de 2, assim:
Perceba que o elemento raiz do MathML é o "math", e que a raiz quadrada é representada pelo elemento "msqrt" (para outras raízes existe o elemento "mroot", veja os exemplos na próxima página) 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 números (ex.: 1, 0.235), variáveis/constantes (ex.: x, π) e operadores (ex. +, =).
Veja um exemplo usando esses 3 elementos:
<math>
<mi> y </mi>
<mo> = </mo>
<mi> x </mi>
<mo> - </mo>
<mn> 3 </mn>
</math>
<mi> y </mi>
<mo> = </mo>
<mi> x </mi>
<mo> - </mo>
<mn> 3 </mn>
</math>
Esse código gera a seguinte informação:
Outro elemento usado com frequência é o "mrow". Esse elemento tem a função de agrupar outros elementos em linha. A princípio, pode parecer um elemento sem muita utilidade, mas em MathML existem elementos com um número específico 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>
<mfenced>
<mi> x </mi>
<mo> - </mo>
<mn> 3 </mn>
</mfenced>
</math>
Esse código gera a seguinte saída:
Essa característica pode ser útil em alguns casos, mas nesse exemplo, eu não quero essa separação. Para evitar isso, vou usar o "mrow":
<math>
<mfenced>
<mrow>
<mi> x </mi>
<mo> - </mo>
<mn> 3 </mn>
</mrow>
</mfenced>
</math>
<mfenced>
<mrow>
<mi> x </mi>
<mo> - </mo>
<mn> 3 </mn>
</mrow>
</mfenced>
</math>
E consigo a seguinte saída:
Obs.: é possível especificar quais caracteres serão utilizados como parênteses e separadores do "mfenced". 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>
<mfenced open="[" close="]" separators="|">
<mn> 2 </mn>
<mn> 5 </mn>
<mn> 8 </mn>
</mfenced>
</math>
Outro elemento que tem o número 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>
<mfrac>
<mrow>
<mn> 2 </mn>
<mo> + </mo>
<mn> 5 </mn>
</mrow>
<mn>2</mn>
</mfrac>
</math>
Saída:
Os elementos "msub" e "msup" também têm o número de filhos predefinidos:
<math>
<msub>
<mn> 2 </mn>
<mn> 5 </mn>
</msub>
<mo>+</mo>
<msup>
<mn> 1 </mn>
<mn> 4 </mn>
</msup>
</math>
<msub>
<mn> 2 </mn>
<mn> 5 </mn>
</msub>
<mo>+</mo>
<msup>
<mn> 1 </mn>
<mn> 4 </mn>
</msup>
</math>
Com MathML, é possível criar matrizes com uma sintaxe semelhante às tabelas HTML. O elemento pai é o "mtable". Dentro dele temos elementos de linha "mtr", e dentro desses, elementos de coluna "mtd". Veja:
<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>
</mtable></mfenced>
</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>
</mtable></mfenced>
</math>
Saída:
Muito bom!