Crie Marcação Matemática em HTML com MathML

Mathematical Markup Language - MathML é uma aplicação do XML para representar símbolos e fórmulas matemáticas, apontada na integração dela em documentos World Wide Web.


MathML

Mathematical Markup Language (Linguagem de Marcação Matemática) (MathML) é uma aplicação do XML para representar símbolos e fórmulas matemáticas, apontada na integração dela em documentos World Wide Web. Ela é uma recomendação do grupo de trabalho matemático do W3C. Ela está dividida em duas partes:

  • Presentation
  • Content Markup

Exemplo raíz quadrada de 2

2

<math>
      <msqrt>
            <mn>2</mn>
      </msqrt>
</math>

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:

y = x - 3

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

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:

x - 3

<math>
      <mfenced>
            <mi> x </mi>
            <mo> - </mo>
            <mn> 3 </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:

2 + 5 2

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

Os elementos “msub” e “msup” também têm o número de filhos predefinidos:

2 5 + 1 4

<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:

1 0 0 1

<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>

Fórmula de Bhaskara:

x = - b ± b2 - 4 . a . c 2 . a

<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>

Documentação Oficial: MathML Mathematical

Via: PRMINFO


html xml


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!