Programa para visualizar registros matemáticos en html. Formas básicas de insertar fórmulas en documentos HTML

Vlad Merzhevich

Realmente no me gusta MathML: es engorroso, inconveniente, redundante y no apto para edición manual. Intenta cambiar rápidamente un carácter en una fórmula larga y odiarás MathML. Ese es el caso de TEX, el viejo Knuth sabía lo que hacía y escribió el sistema por sí mismo; más tarde, TEX se convirtió en el estándar de facto en la comunidad científica para escribir fórmulas. Si está familiarizado con HTML y CSS, comprender TEX no será difícil, es intuitivo y tiene una sintaxis algo similar a estos lenguajes;

Sin embargo, persiste el problema de cómo mostrar la fórmula en la página para que se muestre correctamente en todos los navegadores. El método más universal sigue siendo la imagen, pero necesitamos automatizar y simplificar el proceso de creación de imágenes, para lo cual están diseñados los diferentes servicios, que se analizarán más adelante.

Editor de ecuaciones LaTEX

Es mejor empezar a familiarizarse con el mundo de las fórmulas con este servicio, ya que cuenta con un pequeño editor en línea a través del cual puedes entender LaTEX: es una extensión del sistema TEX con la misma sintaxis. Una vez ingresada la fórmula, el resultado se puede ver haciendo clic en el botón "Renderizar ecuación" (Fig. 1).

Arroz. 1. Vista del editor en la página.

La fórmula se agrega a su página mediante una etiqueta. , como se muestra en el ejemplo 1.

La fórmula en formato TEX se inserta en la dirección después del signo de interrogación y se escribe en una línea. Si necesita aumentar o disminuir el tamaño de una imagen, se utilizan las siguientes palabras clave.

• \pequeño (tamaño 8pt)
• \pequeño (10pt)
• \normal (12 puntos)
• \grande (14pt)
• \enorme (20pt)

La palabra clave debe insertarse antes de la fórmula como se muestra a continuación.

En la página, una fórmula tan ampliada se ve así (Fig. 2).

Arroz. 2. Fórmula en la página.

Google

Lamentablemente Google ha dejado de dar soporte a este servicio y se desconoce su destino futuro, pero por ahora sigue funcionando con normalidad y se puede utilizar.

El principio de inserción de una fórmula es el mismo que el del servicio anterior. Usamos la etiqueta y como dirección nos referimos al servicio de Google y le pasamos la fórmula en formato TEX. La dirección en sí generalmente se escribe así.

https://chart.googleapis.com/chart?cht=tx&chl=formula

El ejemplo 2 muestra la suma de la fórmula de distribución normal.

Para cambiar el tamaño de la fórmula, podemos usar las palabras clave \tiny, \large, etc., agregándolas antes de la expresión. Google también tiene otra forma de controlar el tamaño de una imagen; para hacer esto, debes agregar el parámetro chs=x a su dirección, por ejemplo chs=200x20. Tenga en cuenta que las proporciones de la imagen pueden distorsionarse mucho si elige la relación de aspecto incorrecta. El único parámetro (chs=40) se percibe como la altura de la imagen, el ancho se calculará automáticamente (ejemplo 3).

Ejemplo 3: tamaño de imagen

En la figura se muestra una imagen de la fórmula con una altura de 40 píxeles. 3.

Arroz. 3. Fórmula con una altura determinada

MatemáticasJax

Si su sitio necesita mostrar muchas fórmulas y símbolos matemáticos diferentes, entonces tiene sentido incluir la biblioteca local MathJax. Esta biblioteca funciona en todos los navegadores, incluidas las versiones anteriores de IE, así como en iPhone, iPad y Android, y es compatible con la notación MathML, TEX y AsciiMath.

Para utilizar MathJax, necesita descargar la biblioteca y todos los archivos necesarios para su funcionamiento y copiarlos a su servidor. Puede hacerlo más fácilmente y descargar el script a través de la red, como se muestra a continuación.

El archivo JS principal ocupa unos 50 KB, pero durante el funcionamiento carga varias fuentes y otros scripts. El resultado es de unos doscientos kilobytes. Parece mucho, pero debemos tener en cuenta que la mayoría de archivos se almacenan en caché la primera vez que se descargan y la siguiente vez que no se descargan los archivos.

De forma predeterminada, las fórmulas se resaltan usando la construcción $$...$$ y \[...\], y los caracteres en minúscula y las expresiones se resaltan usando \(...\) (ejemplo 4).

Ejemplo 4: uso de MathJax

MatemáticasJax

Cuando \(a \ne 0\) obtenemos dos raíces de la ecuación \(ax^2 + bx + c = 0\), para encontrarlas utilizamos la fórmula $$(x)_(1,2) = (- b \pm \ sqrt(b^2-4ac) \over 2a).$$

El resultado de este ejemplo se muestra en la Fig. 4.

Arroz. 4. Fórmulas en la página.

Si hace clic derecho en la fórmula, se abrirá un menú a través del cual podrá configurar algunos parámetros y ver la fuente en forma de TEX o MathML (Fig. 5).

Arroz. 5. Menú contextual

Todo usuario que quiera publicar en Internet textos que contengan fórmulas matemáticas o físicas se enfrenta al problema de colocar estas fórmulas en documentos HTML.
¿Cómo hacer esto?
Veamos los 3 métodos más populares:
Método 1: insertar fórmulas en forma de imágenes. Usando Word y la ecuación de Microsoft
La mayoría de las veces, las fórmulas en las páginas HTML se presentan en forma de gráficos (rasterizados o vectoriales), pero este método tiene desventajas obvias. Por ejemplo, una fórmula de dibujo es casi imposible de editar y su calidad una vez impresa suele dejar mucho que desear.

Para fórmulas simples que no requieren el uso de signos integrales, sumas con límites, fracciones complejas, etc., puedes limitarte a las herramientas del propio Word.
Para configurar subíndices y superíndices, debe seleccionar el texto deseado y ir al elemento del menú Formato > Fuente.
Para insertar caracteres griegos y varios caracteres especiales en la fórmula, vaya al elemento de menú Insertar > Símbolo y seleccione la fuente y el símbolo deseados. Como espacio al escribir fórmulas, debe usar el llamado espacio sin separación, que se puede encontrar en el menú Insertar > Símbolo o usar un atajo de teclado especial presionando simultáneamente Ctrl+Shift+Espacio.

Para un conjunto de fórmulas complejas, existe el editor de ecuaciones Microsoft Equation, que se incluye en Microsoft Office. Tenga en cuenta que MS Equation no siempre está instalado de forma predeterminada y debe cuidar su disponibilidad al instalar el editor de Word y luego, para facilitar su uso, agregar el botón correspondiente al menú del editor de Word. Después de esto, para configurar fórmulas, simplemente haga clic en el botón o vaya al elemento de menú Insertar > Objeto > Ecuación de Microsoft. También puedes llamar al editor de fórmulas en modo fuera de línea.

Las desventajas del primer método son su complejidad, violación del orden de entrada de la fórmula (por ejemplo: primero los corchetes, luego la expresión en ellos), además, las fórmulas se perciben como una imagen separada del texto y cuando Si se cambia la fuente, ésta puede volverse desproporcionada.

Método 2: insertar fórmulas utilizando el marcado MathML.
El principio general del uso de MathML es que las construcciones matemáticas están integradas en un documento HTML normal y (si el navegador o programa especial admite esta especificación) se reproducen adecuadamente cuando el documento se carga desde Internet.

Lo primero que encontrará en MathML y ​​lo que distingue a este lenguaje de marcado de sus análogos es el uso de dos formas de codificar expresiones. Uno de ellos se basa en la transmisión directa de la sintaxis de la fórmula (presentación), el otro, por el contrario, refleja la semántica de la expresión (contenido). En pocas palabras, el primer método implica registrar una fórmula sin conexión con su significado, el segundo, por el contrario, refleja su contenido matemático.
Ejemplo de escritura en MathML:

El resultado será la fórmula:

Desventajas: no todos los navegadores admiten "MathML"; Un estudio exhaustivo de "MathML" es engorroso y difícil para el usuario medio.

Método 3: insertar fórmulas utilizando el marcado TeX.
Su creador es Donald Knuth.
El sistema TeX es un sistema de composición tipográfica diseñado para crear libros, especialmente aquellos con muchas fórmulas matemáticas. Preparar su manuscrito en formato TeX significa que le dice a la computadora exactamente cómo convertir el texto de la página.
El sistema TeX no tiene su propio editor. Para diseñar un archivo tex, puede utilizar cualquier editor, por ejemplo, Notepad o WinEdt, especialmente orientado al conjunto de archivos TeX. El texto se formatea mediante un sistema de etiquetas similar a las etiquetas HTML.
Si escribimos la siguiente línea

MathJax le permite incluir fórmulas matemáticas en páginas web utilizando el marcado LaTeX, MathML o AsciiMath, después de lo cual las fórmulas serán procesadas por una biblioteca de JavaScript y convertidas a HTML, SVG o MathML para mostrarlas en cualquier navegador moderno.

Actualmente, MathJax le permite utilizar tanto una copia de esta biblioteca en su propio servidor como una versión de la biblioteca del CDN cdn.mathjax.org:

La configuración TeX-AMS-MML_HTMLoMML es uno de los archivos de configuración más comunes (y por lo tanto más grandes). Aunque el uso de esta configuración puede no ser efectivo, se proporciona aquí para permitirle comenzar a usar MathJax rápidamente.

Referencia rápida

Dado que el marcado LaTeX me pareció más conciso, a continuación solo se describen las preguntas sobre su uso cuando se trabaja con MathJax:

para ver cómo se escribe cualquiera de las fórmulas, haga clic derecho en la expresión y seleccione "Mostrar matemáticas como > Comandos TeX" (no se muestran los caracteres delimitadores);

para mostrar la fórmula en un bloque separado, enciérrela entre separadores $$...$$ o \[...\] \[\sum_(i=0)^n i^2 = \frac((n^2+ n)( 2n+1))(6)\]

Para mostrar una fórmula dentro de una línea, enciérrela entre delimitadores \(...\) . Por ejemplo, \(\sum_(i=0)^n i^2 = \frac((n^2+n)(2n+1))(6)\) . Tenga en cuenta que los delimitadores $...$ no se admiten de forma predeterminada porque pueden aparecer signos de dólar individuales en el texto y hacer que el texto se convierta incorrectamente en una fórmula;

para mostrar letras del alfabeto griego, use \alpha , \beta , …, \omega: \(\alpha\) , \(\beta\) , …, \(\omega\) . Para mayúsculas utilice \Gamma , \Delta , …, \Omega: \(\Gamma\) , \(\Delta\) , …, \(\Omega\) ;

para superíndices y subíndices utilice ^ y _ . Por ejemplo, x_i^2: \(x_i^2\) ;

grupos. Superíndice y subíndice y otras operaciones se aplican sólo al siguiente "grupo". Un "grupo" es un solo carácter o cualquier fórmula encerrada entre llaves (...). Si haces 10^10 , de repente obtendrás \(10^10\) . Pero 10^(10) probablemente le dará lo que quería: \(10^(10)\) . Utilice llaves para resaltar una fórmula a la que se le aplican mayúsculas o minúsculas: x^5^6 provocará un error; (x^y)^z corresponde a \((x^y)^z\) , y x^(y^z) corresponde a \(x^(y^z)\) . Observe la diferencia entre x^i^2 \(x_i^2\) y x_(i^2) \(x_(i^2)\) ;

paréntesis. Los caracteres individuales () crean paréntesis y corchetes \((2+3)\) . Utilice \( y \) para mostrar las llaves \(\(\)\) .
Los corchetes descritos anteriormente no se ajustan a la fórmula. Es decir, si escribe (\frac(\sqrt x)(y^3)) , los paréntesis serán demasiado pequeños: \((\frac(\sqrt x)(y^3))\) . El uso de \left(y \right) ajustará automáticamente el tamaño de los corchetes al tamaño de la fórmula que rodean: \left(\frac(\sqrt x)(y^3)\right) coincide con \(\left(\ frac(\sqrt x)(y^3)\right)\) . \left y \right se aplican a todos los siguientes tipos de paréntesis: (y) \(\left(x\right)\) , [ y ] \(\left\) , \( y \) \(\left\( x\ derecha\)\) , | \(\left|x\right|\) , \langle y \rangle \(\left\langle x\right\rangle\) , \lceil y \rceil \(\left\lceil x\right\rceil\) , y \lfloor y \rfloor \(\left\lfloor x\right\rfloor\) .
También se indican corchetes invisibles. : \left.\frac12\right\rbrace coincide con \(\left.\frac12\right\rbrace\) ;

sumas e integrales \sum y \int ; el subíndice corresponde al límite inferior y el superíndice al límite superior. Por ejemplo, \sum_1^n \(\sum_1^n\) . No olvides (...) si los límites constan de más de un carácter. Por ejemplo, \sum_(i=0)^\infty i^2 corresponde a \(\sum_(i=0)^\infty i^2\) . Similar a \prod \(\prod\) , \int \(\int\) , \bigcup \(\bigcup\) , \bigcap \(\bigcap\) , \iint \(\iint\) ;

fracciones Hay dos formas de crear una fracción. \frac ab se aplica a los dos grupos siguientes y genera el siguiente \(\frac ab\) ; para numeradores y denominadores más complejos, utilice (...) : \frac(a+1)(b+1) corresponde a \(\frac(a+1)(b+1)\) . Si el numerador y el denominador son demasiado complejos, puedes usar \over , que separa el grupo en el que se encuentra: (a+1\over b+1) coincide con \((a+1\over b+1)\) ;

fuentes

• utilice \mathbb o \Bbb en negrita para "pizarra negra": \(\mathbb(CHNQRZ)\) ;
• use \mathbf para negrita: \(\mathbf(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathbf(abcdefghijklmnopqrstuvwxyz)\) ;
• use \mathtt para una fuente de "máquina de escribir": \(\mathtt(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathtt(abcdefghijklmnopqrstuvwxyz)\) ;
• use \mathrm para fuente "romana": \(\mathrm(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathrm(abcdefghijklmnopqrstuvwxyz)\) ;
• use \mathsf para una fuente sans-serif: \(\mathsf(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathsf(abcdefghijklmnopqrstuvwxyz)\) ;
• use \mathcal para escritura "caligráfica": \(\mathcal( ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) ;
• use \mathscr para una fuente "script" (como si estuviera escrita a mano): \(\mathscr(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) ;
• use \mathfrak para la fuente "Fraktur" (estilo alemán antiguo): \(\mathfrak(ABCDEFGHIJKLMNOPQRSTUVWXYZ) \mathfrak(abcdefghijklmnopqrstuvwxyz)\) ;

signos de raíz. Utilice \sqrt , que se ajusta al tamaño del argumento: \sqrt(x^3) \(\sqrt(x^3)\) ; \sqrt(\frac xy) \(\sqrt(\frac xy)\) . Para expresiones complejas, es preferible utilizar (...)^(1/2) ;

algunas funciones, como "lim", "sin", "max", "ln", etc., suelen utilizar la fuente "romana" (romana) en lugar de la fuente "italiana" (cursiva). Utilice \lim , \sin , etc. para obtener algo como esto: \sin x \(\sin x\) en lugar de sin x \(sin x\) . Utilice subíndices para adjuntar etiquetas adicionales a \lim: \lim_(x\to 0) \[\lim_(x\to 0)\]

Hay demasiados caracteres especiales y anotaciones para enumerarlos todos aquí. Éstos son algunos de los más utilizados:

• \lt \gt \le \ge \neq \(\lt\, \gt\, \le\, \ge\, \neq\) . Puedes usar \not para poner una barra diagonal en casi cualquier cosa: \not\lt \(\not\lt\) , pero esto a menudo se ve feo;
• \times \div \pm \mp \(\times\, \div\, \pm\, \mp\) . \cdot corresponde al punto en el centro: \(x \cdot y\) ;
• \cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing \(\cup\, \cap\, \setminus\, \subset\, \subseteq \,\subsetneq \,\supset \, \in\, \notin\, \emptyset\, \varnothing\) ;
• (n+1 \elija 2k) o \binom(n+1)(2k) \((n+1 \elija 2k)\) ;
• \to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \(\to\, \rightarrow\, \leftarrow\, \Rightarrow\, \Leftarrow\, \mapsto\) ;
• \land \lor \lnot \forall \exists \top \bot \vdash \vDash \(\land\, \lor\, \lnot\, \forall\, \exists\, \top\, \bot\, \vdash \, \vDash\) ;
• \star \ast \oplus \circ \bullet \(\star\, \ast\, \oplus\, \circ\, \bullet\) ;
• \approx \sim \simeq \cong \equiv \prec \(\approx\, \sim \, \simeq\, \cong\, \equiv\, \prec\) ;
• \infty \aleph_0 \(\infty\, \aleph_0\) \nabla \partial \(\nabla\, \partial\) \Estoy \Re \(\Estoy\, \Re\) ;
• para comparaciones de módulos utilice \pmod , por ejemplo, a\equiv b\pmod n \(a\equiv b\pmod n\) ;
• \ldots coincide con los puntos suspensivos en \(a_1, a_2, \ldots,a_n\) ; \cdots coincide con los puntos suspensivos en \(a_1+a_2+\cdots+a_n\) ;
• Algunas letras griegas tienen una forma de escritura para representar una variable: \epsilon \varepsilon \(\epsilon\, \varepsilon\), \phi \varphi \(\phi\, \varphi\), etc. “Escrito a mano” l en minúscula: \ell \(\ell\) .

Detexify le permite dibujar un personaje en una página web y luego enumera los caracteres \(\TeX\) que se parecen al dibujado. No se garantiza que esto funcione también en MathJax, pero es un buen lugar para empezar a buscar. Para comprobar si un comando es compatible, consulte la lista actual de comandos \(\LaTeX\) compatibles en MathJax.org.

espacios. MathJax normalmente decide cómo utilizar espacios en fórmulas utilizando un complejo conjunto de reglas. Imprimir espacios adicionales en las fórmulas no cambiará la cantidad de espacios que MathJax agrega a la fórmula: a␣b y a␣␣␣␣b corresponden a \(a b\) . Para agregar más espacios use \, para un espacio estrecho \(a\,b\) o \; para espacio amplio \(a\;b\) . \quad y \qquad coinciden con espacios grandes \(a\quad b\) , \(a\qquad b\) .
Para usar texto sin formato, use \text(...) : \(\(x\in s\mid x\text( es extra grande)\)\) ;

acentos y signos diacríticos. Utilice \hat para un solo carácter \(\hat x\) , \widehat para una fórmula \(\widehat(xy)\) (pero si hace el carácter demasiado ancho, se verá incómodo). Del mismo modo \bar \(\bar x\) y \overline \(\overline(xyz)\) , y \vec \(\vec x\) y \overrightarrow \(\overrightarrow(xy)\) y \overleftrightarrow \ ( \overleftrightarrow (xy)\) . Para puntos como \(\frac d(dx)x\dot x = \dot x^2 + x\ddot x\) , use \dot y \ddot ;

Los caracteres especiales utilizados para la interpretación de MathJax se pueden escapar usando el carácter \: \$ \(\$\) , \( \(\(\) , \_ \(\_\), etc. Si necesita el carácter \ , debería usar \backslash \(\backslash\) ya que \\ coincide con una nueva línea.

Antes de HTML5, usar fórmulas era un verdadero castigo. Juzgue usted mismo: en 2005 era necesario tener a mano un navegador especial o dividir el texto en HTML e insertar imágenes o PDF. La búsqueda y otras operaciones de edición y/o visualización/papel eran una tarea ambigua, a la que se dedicaban monografías enteras.

En 2012 ya era más sencillo. Ahora es posible conectar los complementos necesarios (Firemath para Firefox y Daum Equation Editor para Chrome). Pero la ambigüedad de los estándares (y el soporte) nos obligó a escribir el mismo artículo para cada uno de los navegadores (y para sus versiones). O salude a los usuarios con el saludo mágico "Su navegador debe actualizarse/agregarse con una extensión".

¿Incómodo? - ¡Sí! ¿Llevó mucho tiempo encontrar una solución universal? - ¡Sí! ¿Te hace pensar qué tipo de grabación es mejor (presentación o contenido), qué convertidor usar (y solo hay una docena de ellos que son generalmente conocidos)? - ¡SÍ! ¡SÍ! ¡SÍ!

Como resultado, el trabajo de publicación se convirtió en dominar dos o tres léxicos de marcado y estudiar el trabajo de al menos un programa de transcodificación.

Ahora, con la llegada de HTML5, todo se ha vuelto mucho más fácil. Hay un contenedor nuevo en él.
Cada instancia válida de MathML debe estar dentro de este contenedor.
No permite el anidamiento, pero puede haber una cantidad arbitraria de otros elementos secundarios en su interior.

Atributos de etiqueta Además de los siguientes atributos, una etiqueta acepta cualquier atributo de .

clase, identificación, estilo
Sujeto a uso junto con hojas de estilo.
directorio
Indica la dirección de la fórmula: ltr - de izquierda a derecha o rtl - de derecha a izquierda.
árbitro
Se utiliza para establecer un hipervínculo al URI especificado.
matemáticasantecedentes
Color de fondo. Puede utilizar nombres de colores #rgb, #rrggbb y HTML.
color matematico
Color del texto. Puede utilizar #rgb, #rrggbb y nombres de colores HTML.
mostrar
Este atributo especifica el método de salida. Valores posibles:

• bloque: significa que este elemento se mostrará fuera del rango de texto actual, como un bloque, que se puede colocar en cualquier lugar sin cambiar el significado del texto;
• en línea: significa que este elemento aparecerá dentro del rango actual de texto y no se puede sacar de él sin cambiar el valor de ese texto.

El valor predeterminado está en línea.

Modo