Fórmulas en HTML

Algunos métodos para escribir fórmulas en documentos HTML

MathML

Usar MathML directamente o con herramientas auxiliares. Parece ser que hay que usar XML en lugar de HTML

MathML es lo estándar y lo que debería usarse para obtener la mejor calidad y rapidez en la carga de las páginas, pero por desgracia, aún no se ve correctamente en muchos clientes web.

Hay trucos si se desea seguir usando HTML, como el incluir JavaScript para convertir sobre la marcha. Esta opción puede no ser válida si no se tiene control sobre toda la página (p.e. blogs, foros, cosas tipo WebCT, etc)

$f (x) = \frac{1}{\sqrt{x^{2} + 1}}$

En Firefox, al cargar una página que contiene MathML, se sugiere instalar los tipos de letra necesarios, procedimiento muy sencillo en Windows/MacOS y algo más compliado en Linux y, sobre todo, en otras variantes de Unix

Para verificar que realmente hay muchos navegadores que tienen problemas con MathML, veamos algunos ejemplos:

Netscape 4.7 (texto puro, que no permite deducir la fórmula origina)

Firefox 1.5 para Unix (esta fórmula concreta se ve bien)

Firefox 1.5 para Unix (sin instalar los tipos de letra necesarios)

Safari 1.3 para MacOS X (nótese el defecto de la parte superior de las raíces anidadas)

MS Internet Explorer 6.x Windows (nótese el tamaño ilegible de los números)

Además, otra ventaja de usar imágenes en lugar de MathML es que se pueden usar etiquetas "ALT" para poner las fórmulas como texto en linea, facilitando el acceso a otro tipo de visores "solo texto".

Desventajas del uso de imágenes:

La página tarda más en cargarse y ocupa más espacio en disco
El tamaño de las formulas es siempre el mismo, cuando debería adecuarse al temaño que tiene seleccionado el usuario en su cliente web.

HTML 4

Usar los símbolos especiales de HTML y los tamaños de letra para hacer las fórmulas.

A modo de ayuda, usar p.e. http://www.image-ination.com/equHTML.html

ƒ(x) = 1/√(x²+1)

Otras alternativas requieren tablas, CSS, etc mas complejas de automatizar:

f (x) = ∫

1

0

√ ––––––
1 + sen(x)
x²+y dx

f (x) = 1

√x²+1

La principal pega es la dificultad de conseguir exactamente el aspecto deseado y lo complejo de editar las fórmulas de esta forma.

Además, en el caso de usar CSS, tampoco se garantiza una correcta visualización en clientes antiguos.

Imagen OpenOffice 1.1.3

Guardar como HTML y buscar las imágenes resultantes

Lo mismo, aumentando el tamaño en 2 puntos

f(x)=1/(sqrt(x^2+1))

La calidad de imagen no es demasiado buena, aunque es legible

Otra imagen con OpenOffice 2.x

Las imágenes son mucho mas legibles que las de OpenOffice 1.x

Imagen MS Word

También Microsoft Word puede exportar como HTML con imágenes

Lo mismo aumentando el tamaño de letra a 18:

png:

gif:

En este caso, la calidad de las imágenes es en general peor que la de cualquier versión de OpenOffice

Imagen a partir de LaTeX

Para los que saben latex, mimeTeX puede ser una solución.

Un ejemplo, usando http://www.forkosh.dreamhost.com/mimetexpreview.html

\Large f(x)=\frac{1}{\sqrt{x^{^2}+1}}

Una alternativa que ofrece una calidad algo mejor (a costa de requerir más software si se desea instalarla localmente) es latexrender, disponible también como herramienta on-line

Imagen a partir de MathML

Otra opción puede ser generar MathML de alguna de las formas posibles y luego usar un conversor a imagen, como p.e. el de Mathematica

La legibilidad es muy buena, aunque el aspecto es bastante mas espartano que las versiones basadas en LaTeX.

Created: May 28, 2007