cClaude.rocks ☕ Le blog

MathML

Il est possible d’ajouter des équations scientifiques à vos pages web en utilisant le standard MathML.

Présentation

MathML est un langage basé sur XML permettant de décrire des équations mathématiques.

MathML ne s’occupe pas uniquement de la présentation mais aussi du sens des différentes composantes des formules mathématiques. On distingue donc les balises de présentation (presentation markup) des balises décrivant la formule, le contenu (content markup).

Si MathML est insuffisant pour vos besoins, regardez OpenMath un système permettant d’inclure des balises sémantiques. Mais vous allez voir que MathML est déjà très puissant.

Voici une rapide introduction à MathML.

Introduction

D’abord vous devrez mettre votre formule dans une balise math en utilisant la syntaxe suivante :

<math xmlns="http://www.w3.org/1998/Math/MathML">

… votre équation ici …

</math>

Écrivons notre première équation : $x+2=0$

Il faut commencer par identifier les différentes parties :

Le code HTML sera :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>x</mi>
  <mo>+</mo>
  <mn>2</mn>
  <mo>=</mo>
  <mi>0</mi>
</math>

Bon, ce n’est pas très efficace pour celle-ci. Mais il faut garder à l’esprit que du coup on met un type sur chaque partie de l’équation et que celle-ci pourra être correctement interprétée par un programme.

On va complexifier un peu en ajoutant la notion de parenthèse et d’exposant : $\left(x+2\right)\left(x-5\right)=x^2-2x-15$

Pour comprendre la syntaxe on va simplifier, écrivons $\left(x\right)$ en MathML:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfenced>
  <mi>x</mi>
  </mfenced>
</math>

Mais attention <mfenced> <mi>x</mi> <mi>y</mi> </mfenced> donnera: $\left(x,y\right)$

Pour écrire la première partie de notre équation $\left(x+2\right)$ nous devrons donc utiliser la balise mrow à l’intérieur de la balise mfenced comme ceci :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfenced>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
  </mfenced>
</math>

Maintenant attardons-nous sur l’écriture de : $\left(x+2\right)\left(x-5\right)$

La nouveauté c’est juste le signe multiplié implicite entre les deux blocs de parenthèses. Cela s’écrit assez simplement, c’est un opérateur il sera entouré par la balise <mo> et lui-même s’écrit à l’aide de : &InvisibleTimes;

Cela donne donc :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfenced>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
  </mfenced>
  <mo>&InvisibleTimes;</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
      <mo>-</mo>
      <mn>5</mn>
    </mrow>
  </mfenced>
</math>

Il ne nous reste plus qu’à apprendre comment s’écrit une puissance comme : $x^2$

Pour cela, on utilisera la balise msup comme cela :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

Avant la dernière partie, voici une petite subtilité de présentation, la balise math peut prendre de nombreux attributs, mais nous nous limiterons ici à l’attribut display qui peut prendre deux valeurs inline ou block. Cela permet d’informer le moteur de rendu si l’on souhaite que l’affichage se fasse à la suite du contenu courant ou dans un bloc (ligne) séparé.

Exemple inline : $x^2$ - <math display="inline" xmlns=... >...</math>

Exemple block : $$x^2$$

À vous de jouer :

Et bien maintenant vous avez tout ce qu’il faut pour écrire cette équation $\left(x+2\right)\left(x-5\right)=x^2-2x-15$ avec MathML, comme je suis gentil, je vous mets le début :

Références :

• Page Wikipedia de MathML en français,
• Documentation MathML §2,
• Documentation MathML §3,
• Browser support [En](ne semble plus très à jour),
• Web technology support [En]

ᦿ