Nueva pregunta

Pregunta:

Fecha: 17-05-2018 10:52:03 (En Español)

[Aporte] | Lenguaje de marcado matemático (MathML) en HTML | Ejemplo de formula general[Resuelta]

Hola, comunidad.

Comparto un tema que usualmente se establece en otros sistemas de composición de texto (por ejemplo: LaTex), que si estás tratando temas donde tienes que mostrar procedimientos matemáticos, existe esta solución que está incrustada en HTML. Te contaré un poco sobre el tema.

MathML es un lenguaje de marcado para describir la notación matemática y capturar tanto su estructura como su contenido. El objetivo de MathML es permitir que las matemáticas se sirvan, reciban y procesen en la World Wide Web, al igual que HTML ha habilitado esta funcionalidad para el texto.

Alrededor de 38 de las etiquetas MathML describen estructuras notacionales abstractas, mientras que otras 170 proporcionan una forma de especificar inequívocamente el significado pretendido de una expresión.

Ejemplo de una ecuación sencilla
Ver demo
Código fuente:
<!DOCTYPE html>
<html>
  	<head>
    	<title>MathML en HTML</title>
  	</head>

  	<body>
		<math>
		    <mrow>
		      	<mrow>
			        <msup>
			          	<mi>a</mi>
			          	<mn>2</mn>
			        </msup>
			        
			        <mo>+</mo>
			        
			        <msup>
			          	<mi>b</mi>
			          	<mn>2</mn>
			        </msup>
		      	</mrow>

		      	<mo>=</mo>
		      
		      	<msup>
		        	<mi>c</mi>
		        	<mn>2</mn>
		      	</msup>
		    </mrow>
		</math>
  	</body>
</html>

En este lenguaje, precisamente en su versión 3.0, contiene presentación Markup donde se decide qué elementos se muestran, la direccionalidad, estilos de pantalla, etc.

Elementos de token, esquemas de disposición general como:
1. Subelecciones de grupo hirizontalmente (mrow)
2. Fracciones (mfrac)
3. Radicales (msqrt, mroot)
4. Cambios de estilo (mstyle)
5. Mensaje de error (merror)
6. Ajustar espacios alrededor del contenido (mpadded)
Entre otros [...], como caracteres, entidades y fuentes, marcado paralelo, etc.

Ejemplo de la Formula General
Ver demo
Código fuente:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>The quadratic formula</title>
	</head>
	
	<body>
		<h1>The quadratic formula</h1>
	  
	  	<p>
		    <math>
			    <mi>x</mi>
			    <mo>=</mo>
			    <mfrac>
			      	<mrow>
					    <mo form="prefix">-</mo> 
					    <mi>b</mi>
					    <mo>±</mo>
					      	
					    <msqrt>
					        <msup> 
					        	<mi>b</mi> 
					        	<mn>2</mn> 
					        </msup>

					        <mo>-</mo>
					        <mn>4</mn> 
					        <mo>?</mo> 
					        <mi>a</mi> 
					        <mo>?</mo> 
					        <mi>c</mi>
					    </msqrt>
			      	</mrow>

			      	<mrow>
			      		<mn>2</mn> 
			      		<mo>?</mo> 
			      		<mi>a</mi>
			      	</mrow>
			    </mfrac>
		    </math>
	  	</p>
	</body>
</html>

Las notaciones Matemáticas son aún más complejas con estructuras que contienen fracciones, raíces cuadradas o matrices que seguramente requerirán sus propias etiquetas.

Honestamente, esta librería, me encanta. Además, hay generadores como WYSIWYG, además de CMS que tienen incorporado herramientras para hacer esto con algunos clics.

Editores de ecuaciones
DragMath, FireMath, fmath, Formulator MathML Weaver, MathCast, MathFlow, MathMagic, MathType.

Convertidores de LaTeX a una expresión MathML
HeVeA, LaTeXML, MathToWeb, TeX4ht, Mathematical, latex2mathml, TeXZilla, Mathoid, SniggleTex, etc.

Referencias oficiales de W3C en cuanto a la librería MathML
MathML3 | Fundamentos de MathML | Mathematical Markup Language (MathML) Version 3.0 2nd Edition PDF.

Espero este pequeño aporte tenga el suficiene valor para colaborarle en pro de sus proyectos.

¡Saludos cordiales, comunidad!
Etiquetas: Aporte - Demo - Documentación - HTML - HTML5 - La Comunidad - Manuales - Opinión - PDF - W3C - Web - WYSIWYG - XHTML Votos: 4 - Respuestas: 2 - Vistas: 15 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 17-05-2018 17:09:32 Muchas gracias por la data Jerson, desconocía esos tags. (+1)

    He ejecutado el demo en Chrome V66 y Firefox v60 Actualizados y obtenido distintos resultados.







    Pareces que en algunos navegadores funciona y en otros aun no esta disponible.

    Saludos
      Votos: 3 - Link respuesta
     
  • Fecha: 17-05-2018 18:02:36 Walter, que bueno que le diste una ojeada. (+1)

    En efecto, en la extensa documentación aparece señalado que funciona en el motor Webkit (por lo que en Mozilla Firefox debería funcionar ya que opera en este). Incluso en Firefox aún no está totalmente adaptado, algunas funcionalidades se encuentran en estado: En progreso y No soportado actualmente. Esta información la puede encontrar en el portal MDN de Mozilla.

    De forma rápida, leyendo por la red, debido a que otros navegadores como Google Chrome y Opera, que en su tiempo funcionó, cuando estos utilizaban Webkit, la cuál ahora se han cambiado a Blink, el haber migrado, este se eliminó desde la versión 25 (Chrome), en caso de Opera desde la versión 13. Un dato, en Internet Explorer nunca ha estado disponible.

    Hay otras soluciones, como MathJax, donde este si es funcional en los navegadores en cuestión. Por supuesto, ahí se encuentran los demos.

    Agradezco la lectura que le has dado y las pruebas que has elaborado, gracias a eso, he hecho un poco más de investigación.

    Gracias Walter, para la próxima procuraré dar prueba del funcionamiento en diferentes ambientes. ¡Un saludo!
      Votos: 3 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión