Afficher des mathématiques dans du HTML avec TeX

Et le rendu : $\backslash frac\{1\}\{2\; \backslash times\; \backslash pi\}$. Cette fois, c'est bien ce que l'on souhaitait !

En fait, cela rend bien sur ce site… mais si vous le faites sur votre site, vous allez avoir un problème de positionnement : le bas de l'image sera alignée avec le bas de votre texte, ce qui aura pour effet de décaler les barres de fraction vers le haut. Heureusement, il suffit de peu de choses pour améliorer ça…

Code source (CSS)

/*Si vos images sont toutes de la forme */ .TexPic { margin:3px 0;/*Décoller l'images des lignes supérieures et inférieures*/ vertical-align:middle;/*La centrer par rapport à la ligne d'écriture*/ }

Avant de continuer, quelques exemples de réalisation :

Nous avons donc fini la première partie de ce tutorial : un outil pour afficher les maths. Mais ce n'est pas encore parfait !

Un peu de sémantique

Ça y est, nous avons un script fonctionnel… mais peut être un peu compliqué. En effet, nous aurons rarement besoin d'image : une grande partie des équations peut être affichée directement, sans utiliser d'images ! Quelques exemples ? $U\_\{n+1\}=U\_n\; +\; U\_\{n-1\}$, ou $\backslash alpha\; x^2\; +\; \backslash beta\; x\; +\; \backslash gamma\; =\; 0$ (testez en sélectionnant, il ne s'agit pas d'images)… mais comment reconnaitre les équations qui peuvent être affichées sous forme de texte ?

Est-ce vraiment utile ?

Avant de nous avancer, peut être faut-il expliquer en quoi il est intéressant de passer par du texte :

• D'abord, c'est moins lourd à charger pour vos visiteurs. Les images ont leur poids, et ralentissent le chargement complet de la page ;
• Ensuite, c'est plus accessible. Je ne rentrerais pas dans les détails de l'accessibiltié et de la sémantique dans cet article car il y aurait des pages à rédiger, mais comprenez que pour un aveugle (ou plus prosaïquement pour Google) du texte est plus clair qu'une image, aussi jolie soit-elle.
• Enfin, le texte peut être zoomé dézoomé, renvoyé à la ligne… contrairement à une image.

Comment faire ?

Nous allons maintenant supposer que vos textes sont rédigés dans un format proche du HTML, et que vous avez sélectionné la balise <math> pour entourer vos formules (c'est le cas sur Wikipedia). Voici un texte d'exemple :

… associé à une fonction de conversion math/image :

Code source (PHP)

(.+)\<\/math\>#isU', '',$buffer); }

Notre rendu sera alors :
Soit $n~$ un entier naturel non nul, $k~$ est un $n~$-nombre de Kaprekar dans la base $a~$ si et seulement s'il existe deux entiers naturels $u~$ quelconque et $0\; \backslash leq\; v\; \backslash leq\; a^n~$ tels que $k^2\; =\; u.a^n\; +\; v~$ et $k\; =\; u\; +\; v~$.

Que d'images inutiles !
Nous allons donc passer en textuel toutes les formules qui n'utilisent pas de balises (signalées par un anti-slash). Rajoutons aussi un support des puissances et des exposants, et quelques formules basiques qui peuvent facilement être rendues en HTML (attention, le niveau du code augmente) :

Code source (PHP)

(.+)\<\/math\>#isU', 'RegexpCallback',$buffer); } function RegexpCallback($Partie) { $Partie=str_replace(array('<','>'),array('<','>'),$Partie); //On va tenter d'afficher le TeX en HTML s'il n'y a que des symboles conventionnels et simples (pas de \frac) : //Liste de symboles TeX que l'on peut rendre en html : $TexHtml=array( '\\alpha'=>'α', '\\beta'=>'β', '\\gamma'=>'γ', '\\delta'=>'δ', '\\epsilon'=>'ε', '\\zeta'=>'ζ', '\\eta'=>'η', '\\theta'=>'θ', '\\iota'=>'ι', '\\kappa'=>'κ', '\\lambda'=>'λ', '\\mu'=>'μ', '\\omicron'=>'ο', '\\pi'=>'π', '\\rho'=>'ρ', '\\sigma'=>'σ', '\\tau'=>'τ', '\\phi'=>'φ', '\\chi'=>'χ', '\\psi'=>'ψ', '\\omega'=>'&omega', '\\infty'=>'∞', '\\,'=>' ', '\\;'=>' ', '\\ldots'=>'...', '\\leq'=>'≤', '\\le'=>'≤', '\\geq'=>'≥', '\\ge'=>'≥', '\\%'=>'%', '<'=>'<', '>'=>'>', '\\times'=>'×',//signe de multiplication '\\pm'=>'±',//Plus ou moins '\\mathbb{N}'=>'ℕ', '\\mathbb{Z}'=>'ℤ', '\\mathbb{Q}'=>'ℚ', '\\mathbb{R}'=>'ℝ', '\\mathbb{C}'=>'ℂ', ); $TryHTML=str_replace(array_keys($TexHtml),array_values($TexHtml),$Partie[1]);//Effectuer le remplacement dans la formule de toutes les balises connues. if(strpos($TryHTML,'\\')===false && $TryHTML{strlen($TryHTML)-1}!='~')//'//Si il ne reste plus de balises (signalées par un \ ) c'est que l'on peut rendre la formule en texte. {//On peut afficher comme du HTML, alors on en profite :) Penser quand même à gérer exposants et indices (signalés par ^ et _). $TryHTML=preg_replace('#_{(.+)}#U','_$1',$TryHTML); $TryHTML=preg_replace('#_(.)#U','_$1',$TryHTML); $TryHTML=preg_replace('#\^{(.+)}#U','^$1',$TryHTML); $TryHTML=preg_replace('#\^(.)#U','^$1',$TryHTML); return '' . $TryHTML . ''; } else {//sinon, afficher l'image. if($Partie[1]{strlen($Partie[1])-1}=='~') $Partie[1]=substr($Partie[1],0,-1);//Lire le paragpraphe "pour aller plus loin" pour comprendre cette partie. return ''; } } ?>

Et cette fois il n'y a plus aucune image :
Soit $n$ un entier naturel non nul, $k$ est un $n$-nombre de Kaprekar dans la base $a$ si et seulement s'il existe deux entiers naturels $u$ quelconque et $0\; \backslash leq\; v\; \backslash leq\; a^n$ tels que $k^2\; =\; u.a^n\; +\; v$ et $k\; =\; u\; +\; v$.

Pensez à rajouter des règles dans votre CSS :

Pour aller plus loin

Comme je l'ai dit plus haut, par défaut mathtran ne gère pas les matrices et les lettres « blackboard » (bref, les ajouts LaTeX) : nous allons voir comment les ajouter.
Nous verrons aussi comment régler certains problèmes qui peuvent apparaitre une fois le module sémantique installé.

Blackboard

Il n'y a malheureusement pas de miracles : si la formule est trop complexe, on ne la récupérera pas. Mais si elle est simple, on peut l'utiliser en texte – voir le code plus haut qui donne les caractères unicode des lettres communes. Et on peut donc écrire « $\backslash mathbb\{N\}$ est l'ensemble des naturels, $\backslash mathbb\{R\}$ celui des réels. ».

Matrice

En LaTeX, il est commun d'utiliser \left(\begin{array}{cc} 0&0&0\\0&0&0\\0&0&4\end{array}\right) pour définir une matrice. Mathtran le permet, mais pas avec cette syntaxe : il faut donc marquer \left[\matrix{0 & 0 & 0 \cr 0 & 0 & 0 \cr 0 & 0 & 4}\right] pour obtenir un résultat proche.

Éléments chimiques

Vous aurez peut être noté une condition bizarre dans le code précédent : $TryHTML{strlen($TryHTML)-1}!='~').
En fait, c'est pour permettre le forcage du rendu en image, qui est nécessaire pour pallier à certaines déficiences du HTML.
Imaginons par exemple l'écriture d'un symbole chimique – au hasard, l'hélium : $^2\_1He$. Eh oui, HTML ne met pas les sup et sub les uns en dessous des autres… il faut donc forcer l'image. Pour cela, j'ai choisi (comme Wikipedia) de mettre un tilde à la fin de la formule : il n'est pas affiché, mais force la génération de l'image même si le contenu pourrait en théorie être un texte : $^2\_1He~$.

Conclusion

Voilà qui clôt ce rapide tutoriel. Vos questions sont les bienvenues, vous pouvez me contacter.

1. ¹ ↑

   Rappelons aussi que vous pouvez écrire vos codes directement et les transformer en balises images avec une expression régulière. Si vous optez pour une solution avec des accolades, consultez cette page.