Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Bases de MathML

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 { a b | a 2 + b 2 3 } , escribir el cálculo d y d x = 1 y 2 , formar expresiones complejas lim n N ( 1 + 1 n ) n e N , k = 2 z x 2 2 z y 2 - ( 2 z x y ) 2 ( 1 + ( z x ) 2 + ( z 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 mapea a y = f n ( x ) = ( 1 + 1 x n ) n a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a η b | x | = { - x si x < 0 x de lo contrario 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 ai1 , ... , ain , x1  están en la misma línea de base, otros alineamientos son posibles): i-th row [ a11 a12 a13 ... a1n : : : ... : ai1 ai2 ai3 ... ain : : : : an1 an2 an3 ... a n n ] [ x1 x2 x3 : xn ]

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. p(x) q(x) = a0 + a1x + a2 x2 + ... + an-1 xn-1 b0 + b1x + b2 x2 + ... + bn-1 xn-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 = logo-star mozilla-16 a b d x + mathboard

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(http://www.mozilla.org/images/mozilla-banner.gif);
  opacity: 0.2;
  position: absolute;
  left: 0;
  width: 100%;
  height: 58px;
}

Etiquetas y colaboradores del documento

 Colaboradores en esta página: maedca, palfrei
 Última actualización por: maedca,