Bases de MathML

Este documento muestra algunas de las construcciones básicas de MathML. Está confeccionado para mostrarse correctamente con la tipografía/fuente Symbol. Puedes ver su fuente. No obstante, los documentos de MathML tienden a ser verborrágicos y puede ser que te extravíes intentando localizar fragmentos de MathML con la vista usual de código fuente. Se ha hecho esta demo con el fin de ilustrar los siguientes aspectos. Puedes hacer un clic derecho sobre cualquier fragmento matemático de interés a lo largo de este documento. El menú contextual no aparecerá. En realidad, el fragmento matemático hará zoom y, si haces clic una segunda vez, verás el WYSIWYG de lenguaje de marcado de MathML; y, si tu haces clic por tercera vez, el fragmento regresará a su estado original. Este modo de tres estados busca limitar los conflictos con otros agentes que compitan por el mouse.

Con MathML se puede construir conjuntos tales como (procede a hacer clic sobre cualquiera de estas ecuaciones para probar el zoom) ${0, 1, 2, 3, 4}$ o ${⌊ \frac{a}{b} ⌋ | a^{2} + b^{2} \leq 3}$ , escribir el cálculo $\frac{d y}{d x} = \frac{1}{y^{2}}$ , formar expresiones complejas $lim_{n \to N} {(1 + \frac{1}{n})}^{n} - e^{N}$ , $k = \frac{\frac{\partial^{2} z}{\partial x^{2}} \frac{\partial^{2} z}{\partial y^{2}} - {(\frac{\partial^{2} z}{\partial x \partial y})}^{2}}{{(1 + {(\frac{\partial z}{\partial x})}^{2} + {(\frac{\partial z}{\partial y})}^{2})}^{2}}$ , escribir ecuaciones de vectores $Y = a X + b$ , etcétera.

Nota cómo las anotaciones matemáticas aparecen en el flujo de texto principal y responden a medida de que reajustas la ventana. También puedes escribir ecuaciones representadas como la siguiente

$x \overset{mapea a}{\to} y = f_{n} (x) = {(1 + \frac{1}{x^{n}})}^{n}$ $\int_{a}^{b} f (x) d x = \frac{b - a}{6} [f (a) + 4 f (\frac{a + b}{2}) + f (b)] - \frac{{(b - a)}^{5}}{4! 5!} f^{(4)} (η), a \leq η \leq b$ $| x | = {\begin{matrix} - x & si x < 0 \\ x & de lo contrario \end{matrix}$ Tambien puedes escribir construcciones matemáticas bidimensionales [2D] como las matrices. El ejemplo siguiente muestra el paso i -th de la multiplicación de una matriz A por un a vector x (nota cómo $a_{i 1}, ..., a_{i n}, x_{1}$ están en la misma línea de base, otros alineamientos son posibles): $i -th row [\begin{matrix} a_{11} & a_{12} & a_{13} & ... & a_{1 n} \\ : & : & : & ... & : \\ a_{i 1} & a_{i 2} & a_{i 3} & ... & a_{i n} \\ : & : & : & : \\ a_{n 1} & a_{n 2} & a_{n 3} & ... & a_{n n} \end{matrix}] [\begin{matrix} x_{1} \\ x_{2} \\ x_{3} \\ : \\ x_{n} \end{matrix}]$

En Mozilla, MathML corre dentro del navegador principal por lo tanto responde a otras operaciones del navegador tales como el zoom (intenta Ver -> Ampliación/Zoom de texto), y puedes hacer hiperenlaces $a^{2} + b^{2} = c^{2}$ , aplicar estilos con effectos $a^{2} + b^{2} = c^{2}$ , o usar colores $a^{2} + b^{2} = c^{2}$ en formas variadas. $\frac{p (x)}{q (x)} = \frac{a_{0} + a_{1} x + a_{2} x^{2} + ... + a_{n - 1} x^{n - 1}}{b_{0} + b_{1} x + b_{2} x^{2} + ... + b_{n - 1} x^{n - 1}} .$

También puedes hacer otras cosas extrañas y riesgosas que no son adaptables, advierte Bongo, tales como mezclar MathML con otros markups. $Lagartija + Bongo = \frac{}{\int_{a}^{b} d x} +$

MathML and Javascript

HTML Content

<p>
And you can turn to JavaScript and the DOM for dynamic operations.
</p>

<div style="text-align:center">
Fill the gaps in this matrix with resizable input fields.
</div>
<math class="inputmath" display="block">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mo>[</mo>
<mtable>
<mtr>
<mtd><mn>1</mn></mtd>
<mtd>
<mtext><input id="input12" value="?" size="1"/></mtext>
</mtd>
</mtr>
<mtr>
<mtd>
<mtext><input id="input21" value="?" size="1"/></mtext>
</mtd>      
<mtd><mn>4</mn></mtd>
</mtr>
</mtable>
<mo>]</mo>
</mrow>
</math>
<div style="text-align:center">
Left size:
<a class="control" href="javascript:incrementInput('input21', 1);" title="increase input">+</a>
<a class="control" href="javascript:incrementInput('input21',-1);" title="decrease input">-</a>

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
 Right size:
<a class="control" href="javascript:incrementInput('input12', 1);" title="increase input">+</a>
<a class="control" href="javascript:incrementInput('input12',-1);" title="decrease input">-</a>
<br/>
 (click these control buttons to see their effects.)
 </div>

<p>
Each entry of the following matrix represents
<math>
<msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup>
</math> for some <i>n</i>.
When you left-click any individual entry, it should toggle between its expanded and
unexpanded forms. You can also <a href="javascript:unexpand();">unexpand all</a> or
<a href="javascript:expand();">expand all</a>.
</p>

<div>
<math display="block">
<mtable>
<mtr>
<mtd>
<mtable align="axis" columnalign="left left left">
<mtr>
<mtd>
<maction id="a11" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>0</mn>
</msup>
<mn>1</mn>
</maction>
</mtd>
<mtd>
<maction id="a12" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>1</mn>
</msup>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a13" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
<mtr>
<mtd>
<maction id="a21" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>1</mn>
</msup>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a22" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a23" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>3</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
<mtr>
<mtd>
<maction id="a31" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a32" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>3</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a33" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>4</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>4</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>6</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>4</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
<mtr>
<mtd>
<maction id="a41" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>3</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a42" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>4</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>4</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>6</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>4</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a43" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>5</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>5</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>5</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>4</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>10</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>10</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>5</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>4</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>5</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
</mtable>
</mtd>
</mtr>
</mtable>
</math>
</div>

CSS Content

.control {
text-decoration: none;
font-weight: bold;
font-size: 200%;
}
input {
color: red;
}
[class="inputmath"] {
border: 1px dotted;
}

JavaScript Content

function setSelection(id,value) {
document.getElementById(id).setAttribute("selection",value);
}
function expand()
{
  setSelection("a11","2");  setSelection("a12","2");  setSelection("a13","2");
  setSelection("a21","2");  setSelection("a22","2");  setSelection("a23","2");
  setSelection("a31","2");  setSelection("a32","2");  setSelection("a33","2");
  setSelection("a41","2");  setSelection("a42","2");  setSelection("a43","2");
}
function unexpand()
{
  setSelection("a11","1");  setSelection("a12","1");  setSelection("a13","1");
  setSelection("a21","1");  setSelection("a22","1");  setSelection("a23","1");
  setSelection("a31","1");  setSelection("a32","1");  setSelection("a33","1");
  setSelection("a41","1");  setSelection("a42","1");  setSelection("a43","1");
}

function incrementInput(inputID, increment)
{
  var inputElement = document.getElementById(inputID);
  var size = parseInt(inputElement.size) + increment;
  if (size <= 0)
    size = 1
  inputElement.size = size;
}

Y podría haber más cosas...

MathML Button

HTML Content

<div style="text-align: center">
  <button style="white-space: normal;">
     <span style="color: brown;">

       For example, <b>click</b> this MathML continued fraction<br/>
       inside this HTML button<br />
     </span>
<math>
<mrow>
<mfrac>
<mi>&pi;</mi>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<mn>1</mn>
</mstyle>
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>1</mn><mn>2</mn></msup>
</mstyle>
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>3</mn><mn>2</mn></msup>
</mstyle>               
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>5</mn><mn>2</mn></msup>
</mstyle>
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>7</mn><mn>2</mn></msup>
</mstyle>
<mstyle scriptlevel="0">
<mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>      
</mrow> 
</mstyle> 
</mfrac>  
</mrow>
</math>
  </button>
</div>

Para más información sobre MathML en Mozilla, mira la página del Proyecto MathML. Hay enlaces a más ejemplos, capturas de pantalla e instrucciones sobre cómo descargar fuentes tipográficas para varias plataformas. Dichas fuentes son requeridas para visualizar otros ejemplos además de las construcciones básicas mostradas aquí.

MathML Background Image

HTML Content

<div class="background"></div>
<math display="block">
<mrow>
<msub>
<mi>Z</mi>
<mi>&alpha;</mi>
</msub>
<mrow>
<mo>(</mo>
<mi>f</mi>
<mo>)</mo>
</mrow>
<mo>=</mo>

<mfrac>
<mn>1</mn>
<mrow>
<mn>2</mn>
<mi>i</mi>
<mo>&ThinSpace;</mo>
<mi>cos</mi>
<mo>(</mo>
<mfrac>
<mrow>
<mi>&alpha;</mi>
<mi>&pi;</mi>
</mrow>
<mn>2</mn>
</mfrac>
<mo>)</mo>
</mrow>
</mfrac>

<mrow>
<msub>
<mo>&int;</mo>
<mi>C</mi>
</msub>
<mfrac>
<mrow>
<mi>f</mi>
<mo stretchy='false'>(</mo>
<mi>i</mi>
<mi>z</mi>
<mo stretchy='false'>)</mo>
<msup>
<mrow>
<mo>(</mo>
<mo>-</mo>
<mi>z</mi>
<mo>)</mo>
</mrow>
<mi>&alpha;</mi>
</msup>
</mrow>
<mrow>
<msup>
<mi>e</mi>
<mrow>
<mn>2</mn>
<mi>&pi;</mi>
<mi>z</mi>
</mrow>
</msup>
<mo>-</mo>
<mn>1</mn>
</mrow>
</mfrac>
</mrow>
<mi>d</mi>
<mi>z</mi>
</mrow>
</math>

CSS Content

[class="background"] {
  background-image: url(https://www.mozilla.org/images/mozilla-banner.gif);
  opacity: 0.2;
  position: absolute;
  left: 0;
  width: 100%;
  height: 58px;
}

Bases de MathML

Bases de MathML

MathML and Javascript

HTML Content

CSS Content

JavaScript Content

MathML Button

HTML Content

MathML Background Image

HTML Content

CSS Content

Etiquetas y colaboradores del documento