Introducción a MathML: El Lenguaje de Marcado para Matemáticas

MathML es un lenguaje de marcado que se puede usar para mostrar notaciones matemáticas. Puedes usar etiquetas MathML directamente desde HTML5. Es útil cuando deseas mostrar algo más que simples notaciones matemáticas en tus páginas web, y es bastante fácil de usar debido a su simplicidad y parecido con HTML.

MathML tiene dos tipos de marcado; presentación (para diseño) y contenido (para significado). Dado que los navegadores solo admiten el marcado de presentación, ese es el único tipo de marcado que se puede usar con HTML. También puedes usar CSS y JavaScript en él como lo harías con HTML.

Veamos MathML.

Entendiendo MathML

Hay una lista de elementos MathML actuales en el sitio web para desarrolladores de Mozilla. También he enumerado los elementos utilizados en los ejemplos al final de esta publicación para una referencia rápida.

El elemento de nivel superior en MathML es el elemento <math>. Cuando escribas código MathML en el HTML, recuerda ponerlo dentro de las etiquetas <math>.

<mi>, <mo>, <mn>, <ms> son los elementos básicos que representan un identificador, operador, número y cadena respectivamente. Ten en cuenta que todos los elementos MathML a continuación comienzan con la letra ‘m‘.

Aquí tienes algunos ejemplos sencillos.

Cómo Mostrar Superíndice y Subíndice

El elemento <msup> es para mostrar superíndice. Hay un <msub> para subíndices.

<math>
    <msup>
        <mi>n</mi>
        <mn>7</mn>
    </msup>
</math>

𝑛7

Cómo Mostrar Fracciones

<math>
    <mfrac>
        <mn>7</mn>
        <mn>26</mn>
    </mfrac>
</math>

Cómo Mostrar Raíces Enteras

Aquí tienes un ejemplo más sencillo para mostrar raíces enteras.

<math>
    <mroot>
        <mn><mo>-</mo>628</mn>
        <mn>5</mn>
    </mroot>
</math>

Para la raíz cuadrada solamente, existe <msqrt>.

Ahora pasemos a notaciones más complejas, la matriz.

Cómo Mostrar una matriz

Para construir una matriz, necesitaremos tener una estructura de tabla para filas y columnas. Para ello, usamos <table>, <tr> y <td>.

Aparte de eso, usaremos las etiquetas <mo> para agregar los operadores [ y ] alrededor de la matriz, y finalmente los pondremos todos dentro del elemento <mrow>, un elemento que agrupa expresiones.

Aquí está el resultado final:

<math>
 <mrow>
  <mo> [ </mo>
  <mtable>
    <mtr>
      <mtd> <mn>0</mn> </mtd>
      <mtd> <mn>4</mn> </mtd>
      <mtd> <mn>10</mn> </mtd>
    </mtr>
    <mtr>
      <mtd> <mn>5</mn> </mtd>
      <mtd> <mn>2</mn> </mtd>
       <mtd> <mi class="rojo">X</mi> </mtd>
    </mtr>
    <mtr>
      <mtd> <mn>9</mn> </mtd>
      <mtd> <mn>12</mn> </mtd>
      <mtd> <mn>1</mn> </mtd>
    </mtr>
  </mtable>
  <mo> ] </mo>
 </mrow>
</math>

Además, agreguemos un poco de CSS para que esa ‘X’ se destaque en la matriz.

math mi.rojo {
    color: red;
}

Cómo Mostrar Ecuaciones Integrales

A continuación, se muestra un ejemplo de un tipo básico de ecuación integral. El <mmultiscripts> se utiliza para agregar los límites a la integral.

Como HTML, MathML también tiene caracteres y entidades, una de las cuales se utiliza en el ejemplo para mostrar el símbolo griego phi. Aquí se explica cómo mostrar la ecuación integral anterior:

<math>
    <mrow>
        <mrow>
            <mi>f</mi>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
        </mrow>
        <mo>=</mo>
        <mrow>
            <mmultiscripts>
                <mo>∫</mo>
                <mi>a</mi>
                <mi>b</mi>
            </mmultiscripts>
            <mrow>
                <mi>K</mi>
                <mo>(</mo>
                <mi>x</mi>
                <mo>,</mo>
                <mi>t</mi>
                <mo>)</mo>
            </mrow>
            <mrow>
                <mi>φ</mi>
                <mo>(</mo>
                <mi>t</mi>
                <mo>)</mo>
            </mrow>
            <mi>d</mi>
            <mi>t</mi>
        </mrow>
    </mrow>
</math>

Para obtener una lista de entidades de caracteres MathML, haz clic aquí para encontrarlas en el sitio web del W3C.

Atributos MathML

Además de los atributos que son iguales a los de HTML (como id), MathML también tiene un conjunto de atributos propios. El sitio para desarrolladores de Mozilla tiene una colección de atributos MathML para tu referencia. Para los repliegues, puedes usar la biblioteca JavaScript MathJax. Si necesitas más herramientas, consulta este enlace aquí.

Me despido con este codepen que contiene todos los ejemplos anteriores, para tu fácil referencia.

See the Pen MathML_ejemplos by Alex (@htmldesdecero) on CodePen.

Lista de Referencia de Elementos MathML

Fuente: https://www.hongkiat.com/blog/mathml-markup/