Page sur l’écriture des mathématiques dans une page ouèbe

Ce texte est développé dans ces deux do cuments.

Galère

En commençant ce site, j’avais envie d’écrire des mathématiques, mais sans image ni pseudo-L^aT_eX. Je me suis alors intéressé à MathML dont j’avais vu quelques ex em pl es.

Je commence par passer quelques pages qui étaient du HTML 4.01 en XHTML 1.0, tout en utilisant les feuilles de style CSS2. Jusque là, tout va bien mais le MathML ne veut pas s’afficher. Je me rends compte de la puissance de CSS et de sa facilité d’utilisation. Le validateur du W3C a chauffé le temps que les pages soient correctes, par exemple en changeant la balise <embed> en <object>.

Une fois cela fait, je m’attaque à MathML. Pour cela, les pages doivent devenir du XHTML 1.1, c’est-à-dire que leur en-tête doit être un peu plus complet (voir le code source de cette page). De plus, le fichier doit avoir une extension .xhtml, la balise <br /> est interdite et doit être remplacée par les balises de paragraphes <p> et </p>, rendues obligatoires pour encadrer le contenu, comme des images. En d’autres termes, il n’est plus possible d’avoir du texte ou des images sans balises de paragraphe autour. Pour régler les espacements entre les paragraphes, il faut jouer sur les styles CSS, quitte à créer des variantes. Attention, l’interpréteur de XML est intolérant à la moindre erreur (il affiche une erreur et rien d’autre), contrairement à l’interpréteur HTML.

Ça marche

Voici ce qu’on peut faire, afficher du SVG (la courbe d’équation $y = {(x - 1)}^{2} (x + 1) = x^{3} - x^{2} - x + 1$ ) et des maths :

$x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$

$\int_{- ∞}^{+ ∞} \frac{sin (x)}{x} d x = π$

Comment faire

Si vous avez lu le code source de cette page, vous avez dû vous rendre compte de la lourdeur du langage MathML, bien moins facile à coder que le L^aT_eX, il faut de plus utiliser une application externe comme kformula (qui sait pondre du MathML 2, contrairement à OpenOffice.org Math qui ne connaît que le MathML 1) ; et encore, il faut enregistrer le résultat puis copier-coller. Il n’y a pas de transformation à la volée. Cela dit, on s’en sort avec des copier-coller massifs : la syntaxe, bien que lourde, est facile.

En-tête

Voici la partie utile de l’en-tête, attention il s’agit de MathML version 2 (je rappelle que le fichier doit avoir l’extension .xhtml) :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd" [
<!ENTITY mathml "http://www.w3.org/1998/Math/MathML"> ]
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" xmlns:pref="http://www.w3.org/2002/Math/preference" pref:renderer="css">
  <head>
    <link rel="stylesheet" href="../../default.css" type="text/css" />

Il est possible dans la feuille de style de choisir une police personnelle pour les mathématiques, histoire de tout harmoniser avec le site. Utiliser la balise… math.

Balises

Maintenant quelques balises, elles doivent être placées entre <> et fermées comme toutes les balises HTML :

Pour commencer, il faut <math xmlns="&mathml;">, l’entité &mathml; est définie dans l’en-tête et sert d’abréviation,
<mi> distingue les inconnues, en italiques,
<mn> distingue les nombres,
<mo> distingue les opérateurs,
<ci type="fn"> distingue les fonctions,
<mrow> sert à regrouper au besoin,
<msqrt> affiche une racine carrée,
<mfrac> affiche une fraction (attend deux groupes),
<msup> affiche un exposant (attend deux groupes),
<msub> affiche un indice (attend deux groupes),
<msubsup> affiche un indice et un exposant (attend trois groupes),
<mfenced close=">" open="<"> affiche des parenthèses pointues (pour les produits scalaires), il est conseillé de créer un groupe à l’intérieur,
<mover> affiche un caractère au-dessus (attend deux groupes).

Il est important de noter que toutes les entités HTML habituelles sont effectives, que ce soit par leur nom comme ∅ pour l’ensemble vide ∅, mais aussi par leur code hexadécimal utf-8, à savoir ici ∅. Les entités spéciales à MathML sont aussi reconnues hors des balises math, par exemple 𝔽 ou 𝔐 (&Fopf; et &Mfr;). Voici un petit script shell qui permet d’obtenir ce nom, ou son code s’il n’y en a pas, directement en lui donnant en entrée le caractère utf-8 (obtenu par copier-coller par exemple). Attention, il nécessite konwert pour fonctionner.

Il est même possible de créer un lien sur du MathML, et même d’insérer du MathML dans du SVG, inséré dans du XHTML.

Méthode avec Javascript

J’ai appris qu’il existait une autre méthode utilisant Javascript, et sans MathML. Cette fois, il ne faut rien installer sur le serveur hébergeant le site, contrairement à la méthode utilisant L^aT_eX. Il faut juste copier quelques fichiers à la racine du site, et inclure le code L^aT_eX entre des balises bien choisies.

Il s’agit du projet jsMath. Attention, parfois, certains symboles sont rendus en images.

En HTML5

On n’est plus obligé d’utiliser des en-têtes compliqués, on peut supprimer :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd" [
<!ENTITY mathml "http://www.w3.org/1998/Math/MathML"> ]
>

On peut se contenter de :

<html>

eu lieu de

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" xmlns:pref="http://www.w3.org/2002/Math/preference" pref:renderer="css">

On peut aussi supprimer l’appel à un xmlns (direct ou non) dans la balise math.

Quant à la balise mfenced, on remplace :

<mfenced>

par, en ouverture

<mrow>
  <mo fence="true">(</mo>

et en fermeture on remplace

</mfenced>

par

  <mo fence="true">)</mo>
</mrow>

Maison