Introducción a MathML, el lenguaje de diseño para matemáticas

MathML es un lenguaje de diseño que se utiliza para mostrar notaciones matemáticas. Puedes utilizar etiquetas MathML directamente en HTML5. Es útil para cuando deseas mostrar notaciones matemáticas complejas en tu páginas web, y es muy sencillo de utilizar debido a su simplicidad y semejanza con HTML.

Vamos a echar un vistazo a MathML.

Entendiendo MathML

El elemento de nivel superior en MathML es el elemento math. Cuando quieres insertar código MathML en el HTML, recuerda que debes ponerlo siempre dentro del tag math.

mi, mo, mn y ms son los elementos básicos que definen a un identificador, a un operador, a un número y una cadena, respectivamente. Ten en cuenta que todos los elementos MathML siempre comienzan con la letra "m".

En este artículo te mostramos algunos ejemplos simples.

Cómo mostrar superíndices y subíndices

El elemento msup nos sirve para visualizar superíndices. También existe msub para subíndices.

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

Como mostrar fracciones

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

Cómo mostrar raíces con índice

Aquí tienes un ejemplo simple sobre cómo mostrar raíces con índice en html.

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

Para mostrar solo una raíz cuadrada, hay que utilizar el msqrt

Ahora vamos a ver notaciones más complejas.

Cómo mostrar una matriz

Para construir una matriz necesitamos tener una tabla estructurada en filas y columnas. Para ello utilizamos los tags mtable, mtr y mtd.

Aparte de eso, también utilizaremos los tags mo para añadir los operadores [ y ] alrededor de la matriz, y finalmente los pondremos todos dentro del elemto mrow, un elemento para agrupar expresiones.

Aquí tienes 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>X</mi> </mtd>
    </mtr>
    <mtr>
      <mtd> <mn>9</mn> </mtd>
      <mtd> <mn>11</mn> </mtd>
      <mtd> <mn>1</mn> </mtd>
    </mtr>
  </mtable>
  <mo> ] </mo>
 </mrow>
</math>

Si quieres destacar la X en la matriz, no está de más darle un toque de color con CSS.

mi {
    color:red;
}

Como mostrar ecuaciones integrales

Más abajo tienes un ejemplo básico de lo que se considera una ecuación integral. El tag mmultiscripts se utiliza para añadir el límite a la integral.

Como en HTML, MathML también cuenta con caracteres y entidades, uno de ellos por ejemplo se utiliza para mostrar el símbolo griego pi. Aquí tienes cómo mostrar la ecuación integral de antes en MathML.

<math>
    <mrow>
        <mrow>
            <mi>f</mi>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
        </mrow>
        <mo>=</mo>
        <mrow>
            <mmultiscripts>
                <mo>&Integral;</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>&phi;</mi>
                <mo>(</mo>
                <mi>t</mi>
                <mo>)</mo>
            </mrow>
            <mi>d</mi>
            <mi>t</mi>
        </mrow>
    </mrow>
</math>

Si quieres ver una lista de las entidades de MathML, pulsa aquí.

Atributos de MathML

Aparte de los atributos que también se utilizan en HTML (como id), MathML también cuenta con su propio set de atributos. La web de Mozilla Developer tiene una colección de los atributos de MathML para que te documentes.

Fuente: hongkiat.com

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP