Afficher des formules mathématiques sur une page Web Html

Pour afficher une formule mathématique en Html, on a 3 possibilités:

• Faire référence à des images des formules

Il s'agit de créer une image de la formule et d'y faire un lien dans la page web par le biais d'une balise . Cette méthode n'est pas pratique puisqu'il faut créer et gérer autant d'images que de formules et les remplacer après toute modification de formule. Cela dit, la formule sera affichée de la même manière quel que soit le navigateur web utilisé. Ci après l'exemple d'une image d'une formule mathématique (intégrale)

• Faire référence à un serveur dédié à la traduction formule/image

Il s'agit d'utiliser un serveur sur lequel est installé un programme qui fera la correspondance formule/image. Le programme en question c'est mathex qui prend en entrée le language LaTeX. Ainsi pour afficher un e formule il suffira de mettre dans la page Html un lien vers le serveur avec sa représentation LaTex.

Par exemple, dans votre code Html, vous pouvez créer un lien vers une image en utilisant la source suivante :

src="http://www.forkosh.com/mathtex.cgi?\int_{a}^{b}f(x)dx"
ce qui donnera :

Dans notre cas,

* http://www.forkosh.com/mathtex.cgi est l'endroit où se trouve le programme mathtex (qui utilise le LaTeX pour afficher une formule sur le web). Pour ce faire, soit, vous installez mathtex en local sur votre serveur, soit vous utilisez un serveur partagé comme dans notre exemple.

* \int_{a}^{b}f(x)dx est la formule LaTeX à représenter sous forme d'image. Pour trouver ce code LaTeX à insérer après mathex.cgi?, on peut utiliser l'éditeur d'équation en ligne qui se trouve ici.
Le problème de cette méthode est que lorsque le serveur disparaît, l'affichage de la formule aussi!

• Utiliser le language MathML 

MathML est un language basé sur XML qui est désormais supporté dans de nombreux navigateurs internet. De cette manière, une description texte de la formule sera interprétée par le navigateur comme une image (c'est le même principe que les images vectorielles SVG qui utilisent aussi le XML et peuvent donc être intégrées dans le code Html). Pour ceux qui ne veulent pas s'embêter à apprendre la syntaxe MathML, il existe des éditeurs d'équation tel que MathCast (OpenMath). Pour avoir une liste d'éditeurs, aller ici. Il existe aussi des générateurs de code online de MathML dont des convertisseurs docx/LaTeX/MathML.

Par exemple, la formule LaTeX précédente (\int_{a}^{b}f(x)dx) se traduit par le code suivant entre "" à mettre dans le fichier Html:

Ce qui donne:

${\int }_{\text{a}}^{\text{b}}\text{f(x)dx}$

Cette méthode pourrait être la meilleure si tous les navigateurs affichaient correctement le MathML (le problème est le même pour le SVG). Dans notre cas, le navigateur Chrome n'affiche actuellement pas correctement la formule (l'intégrale est traduite mais pas les bornes a et b). En revanche le navigateur Opera donnera un affichage correct.

En conclusion chaque méthode présente ses avantages et inconvénients. Personnellement j'utiliserai la 3ème méthode en indiquant sur la page web le navigateur recommandé ou à éviter pour un affichage correct de la formule.