Tutoriel HTML - sommaire

Écrire des formules mathématiques dans un document HTML

Les navigateurs sont des programmes avec des super pouvoirs. Ils sont capables d'interpréter de nombreux langages : HTML, CSS, JavaScript, SVG mais aussi MathML.
Donc une page web (ou document HTML) peut contenir des instructions dans tous ces langages.

Des entités de caractères utiles

Mais avant d'aborder le langage mathML je vous montre que pour des formules mathématiques basiques, on peut se contenter de HTML à condition d'utiliser certaines entités de caractère (ou entités HTML).

Exemple

Moyenne simple = ∑ x_i / n

3 = √ 9

3³ = 9

Moyenne pondérée = ∑ n_ix_i / ∑ n_i

y = 4x +10 / 2

Le code correspondant

Pour mettre des nombres en indice et en exposant j'ai utilisé respectivement les balises SUB et SUP.

J'ai utilisé aussi certaines entités de caractère :

Le langage MathML

Définition

Le Mathematical Markup Language ou MathML est un langage basé sur XML permettant l'affichage de symboles mathématiques, notamment sur Internet. Il s'agit d'une recommandation du W3C.

Exemple de formule mathématique complexe

Le code XML

Le code CSS

	math {display : block ; font-size : 20px; 
		width : 60% ; margin : 10px auto; 
		border : 1px solid red;
		padding : 20px;}

On peut bien sûr styliser les éléments du langage MathML avec le CSS.
Ici chaque formule sera dans une boite bordurée de rouge avec des marges conséquentes.

La syntaxe du langage MathML

Le code MathML doit être contenu à l'intérieur de la balise double math.

Les principales balises doubles du langage MathML :
• les identifiants sont encadrés par la balise double mi (math identifier)
• les opérateurs sont encadrés par le conteneur mo (math operator)
• les nombres sont encadrés par la balise double mn (math number)
• les expressions sont encadrées par le conteneur mrow (math row)
• une fraction est encadrée par le conteneur mfrac ; elle se compose de deux expressions écrites l'une après l'autre : le numérateur et le dénominateur ; chacune avec le conteneur mrow
• une radicande (contenu de la racine carrée) est encadrée par la balise double msqrt (math square root)

Autre exemple

Le rendu

Le code

C'est l'occasion de voir d'autres éléments du langage :
• la balise double msup pour mettre en exposant
• la balise double msub pour mettre en indice

Lorsque l'on écrit "ax" cela signifie que a est multiplié par b. le signe multiplié est implicite, ceci est rendu ici par une entité de caractère dont le radical est "InvisibleTimes" (multiplié invisible). Ceci illustre le fait que MathML décrit aussi le rôle des objets et pas uniquement la mise en forme.

Production du code

Comme vous constatez le langage MathML est assez verbeux.
Le W3C conseille d'utiliser un éditeur de MathML.
L'offre d'éditeurs est variée. Le plus souvent il s'agit de micro frameworks JS qui convertissent un expression en du code MathML. Je vous propose d'utiliser la librairie JavaScript ASCIIMathML.js.

Mise en oeuvre

Dans le document HTML il faut télécharger le fichier .js correspondant à cette librairie.
Tout "template string" contenu dans une instruction HTML sera converti en MathML.

Rappel : pour réaliser un "template string" il faut délimiter l'expression (qui peut être multilignes) par des accents graves (altgr +7).
Attenion : ces accents graves sont peu lisibles.

Le code correspondant

Dans la partie HEAD de cette page web

<script src="ASCIIMathML.js">Chargement de la librairie</script>

Dans la partie BODY

Je dois écrire les formules mathématiques selon une syntaxe simplifiée mais interprétable par le micro framework. ... <p>Quatre formules : <br> `x^2 + y^2 = r^2` <br>`x=(-b +- sqrt(b^2 – 4ac))/(2a)` <br>`sum_(i=1)^n i^3=((n(n+1))/2)^2` <br><br>` "Aire d'un quart de cercle" = ( pi R^2 ) / 4 ` </p> ...

Ces quatre formules sont des 'template strings' (délimités par des accents graves).
Notez les symboles utilisés : sqrt, sum_, pi, ^, etc.
Les éventuelles légendes doivent être entre guillemets.

Le rendu

Quatre formules :
`x^2 + y^2 = r^2`
`x=(-b +- sqrt(b^2 – 4ac))/(2a)`
`sum_(i=1)^n i^3=((n(n+1))/2)^2`
` "Aire d'un quart de cercle" = ( pi R^2 ) / 4 `

Chaque formule est encadrée conformément à la règle de style interne pour l'élément math.