Introdução ao MathML - A Linguagem de Marcação para Matemática

MathML é uma linguagem de marcação que pode ser usada para exibir notações matemáticas. Você pode usar tags MathML diretamente do HTML5. É útil quando você deseja mostrar mais do que simples anotações de matemática em suas páginas da Web, e é muito fácil de usar devido à sua simplicidade e semelhança com HTML.

MathML tem dois tipos de marcação; apresentação (para layout) e conteúdo (para significado). Como somente a marcação de apresentação é suportada pelos navegadores, esse é o único tipo de marcação que pode ser usado com HTML. Você também pode usar CSS e JavaScript como se estivesse em HTML.

Vamos dar uma olhada no MathML.

Noções básicas sobre MathML

Há uma lista de elementos MathML presentes no site do Mozilla Developer. Eu também listei os elementos usados ​​nos exemplos no final deste post para referência rápida.

O elemento de nível superior em MathML é o $$ elemento, quando você escreve o código MathML no HTML, lembre-se de colocá-los dentro do $$ Tag.

,,, são os elementos básicos que representam um identificador, operador, número e string respectivamente. Note que todos os elementos MathML abaixo começam com a letra 'm'.

Aqui estão alguns exemplos simples.

Como exibir sobrescrito e subscrito

o elemento é para exibir sobrescrito. Há uma para subscritos.

$n^7$ 

Como exibir frações

$\frac{7}{26}$ 

Como exibir números inteiros da raiz

Aqui está mais um exemplo simples para exibir inteiros de raiz.

$\sqrt[5]{\mathrm{<mo>-</mo>678}}$ 

Por apenas raiz quadrada, há .

Agora vamos passar para notações mais complexas, a matriz.

Como exibir uma matriz

Para construir uma matriz, precisaremos ter uma estrutura de tabela para linhas e colunas. Para isso, usamos , e .

Além disso, vamos usar o tags para adicionar os operadores [ e ] em torno da matriz e, finalmente, colocá-los todos dentro do elemento, um elemento que agrupa expressões.

Aqui está o resultado final:

$\left[\begin{array}{ccc}0& 4& 10\\ 5& 2& X\\ 9& 11& 1\end{array}\right]$ 

Além disso, vamos colocar um pouco de CSS para fazer esse 'X' se destacar na matriz.

mi cor: vermelho;  

Como exibir equações integrais

Abaixo está um exemplo de um tipo básico de equação integral. o é usado para adicionar os limites à integral.

Como o HTML, o MathML também possui caracteres e entidades, uma das quais é usada no exemplo para mostrar o símbolo phi grego. Veja como exibir a equação integral acima:

$f\left(x\right)=\int _{\mathrm{uma}}^{b}K(x,t)\phi \left(t\right)dt$ 

Para uma lista de entidades de personagens MathML, clique aqui para encontrá-las no site do W3C..

Atributos MathML

Além dos atributos que são iguais aos do HTML (como identidade), O MathML também possui um conjunto de seus próprios atributos. O site Mozilla Developer tem uma coleção de atributos MathML para sua referência. Para fallbacks, você pode usar a biblioteca JavaScript MathJax. Se você precisar de mais ferramentas, confira este link aqui.

Eu me retiro com este codepen contendo todos os exemplos acima, para sua referência fácil.

Lista de referência de elementos MathML