MathML
Le Mathematical Markup Language (MathML) est un langage basé sur XML conçu pour représenter et afficher des expressions mathématiques de manière structurée sur le web. Contrairement aux images statiques ou aux approximations textuelles, MathML permet de décrire la sémantique et la présentation des formules mathématiques, offrant une accessibilité accrue et une intégration dynamique avec HTML. Il est particulièrement utilisé dans les contextes éducatifs, scientifiques et techniques pour rendre des équations complexes de façon précise et adaptable.
MathML gagne en popularité pour afficher des formules mathématiques dans des documents web ou des logiciels spécialisés. Vous pouvez intégrer des éléments MathML directement dans un document HTML, comme nous allons le voir.
La syntaxe MathML repose sur deux approches principales : la présentation (pour l’affichage visuel) et le contenu (pour la sémantique). Les éléments de présentation, comme mrow, mfrac, msup ou msqrt, organisent visuellement les expressions, tandis que les éléments de contenu, comme apply ou plus, décrivent leur structure logique. Les formules sont construites à partir d’éléments comme mi (identifiants), mn (nombres) et mo (opérateurs), placés dans une balise math. Les attributs comme display (block ou inline) contrôlent le rendu, et les styles CSS peuvent personnaliser l’apparence. MathML utilise un modèle arborescent où chaque élément imbriqué définit une partie de l’expression, garantissant une grande précision pour des formules complexes.
Les attributs en MathML jouent un rôle essentiel pour ajuster l’apparence et le comportement des expressions. Par exemple, l’attribut mathvariant permet de définir le style des identifiants (par exemple, italic pour les variables). Les attributs comme numalign ou denomalign dans mfrac contrôlent l’alignement des fractions. Pour les exposants ou indices (msup, msub), l’attribut scriptlevel ajuste la taille du texte. Les éléments de présentation comme mtable permettent de créer des matrices avec des attributs comme rowspacing ou columnalign pour l’espacement et l’alignement. Enfin, l’attribut id facilite l’interaction avec CSS ou JavaScript, et xmlns garantit la compatibilité XML. Ces attributs offrent une flexibilité pour un rendu précis et accessible.
Principales balises de présentation MathML
Voici une description détaillée des balises les plus couramment utilisées en MathML de présentation (MathML-Presentation). Toutes ces balises doivent être placées à l’intérieur de l’élément racine
<math>
.
| Balise | Description | Exemple d’utilisation | Rendu approximatif |
|---|---|---|---|
<math> | Élément racine obligatoire de toute expression MathML. L’attribut
display="block"
ou
"inline"
contrôle le mode d’affichage. | <math display="block">…</math> | — |
<mi> | Identifiant (variable, constante, fonction). Par défaut en italique. | <mi>x</mi>
ou
<mi mathvariant="normal">sin</mi> | x, sin |
<mn> | Nombre. | <mn>123.45</mn> | 123.45 |
<mo> | Opérateur, symbole ou séparateur (+, −, ×, =, (, etc.). L’espacement est géré automatiquement. | <mo>+</mo>
ou
<mo fence="true">(</mo> | + , ( |
<mtext> | Texte brut (non mathématique), utile pour les unités ou commentaires. | <mtext>kg</mtext> | kg |
<mrow> | Groupe horizontal d’éléments. Sert à structurer l’arbre sans effet visuel particulier. | <mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow> | a + b |
<mfrac> | Fraction. Attributs utiles :
bevelled="true"
,
numalign
,
denomalign
. | <mfrac><mi>a</mi><mi>b</mi></mfrac> | a/b |
<msqrt> | Racine carrée. | <msqrt><mi>x</mi></msqrt> | √x |
<mroot> | Racine n-ième (indice en premier enfant). | <mroot><mi>x</mi><mn>3</mn></mroot> | ³√x |
<msup> | Exposant. | <msup><mi>x</mi><mn>2</mn></msup> | x² |
<msub> | Indice. | <msub><mi>x</mi><mn>1</mn></msub> | x₁ |
<msubsup> | Indice et exposant simultanés. | <msubsup><mi>x</mi><mn>1</mn><mn>2</mn></msubsup> | x₁² |
<munder> | Élément placé sous le premier enfant (ex. limite). | <munder><mi>lim</mi><mrow><mi>x</mi><mo>→</mo><mn>0</mn></mrow></munder> | lim sous x→0 |
<mover> | Élément placé au-dessus (ex. barre, vecteur). | <mover><mi>x</mi><mo>→</mo></mover> | x avec flèche au-dessus |
<munderover> | Sous et au-dessus (ex. somme, intégrale). | <munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover> | ∑ avec i=1 en bas et n en haut |
<mtable>, <mtr>, <mtd> | Tableau ou matrice. Fonctionne comme un tableau HTML. | <mtable><mtr><mtd><mn>1</mn></mtd><mtd></mtr></mtable> | Matrice |
<mspace> | Espace vide personnalisé (attributs width, height, depth). | <mspace width="1em"/> | — |
<menclose> | Encadre ou décore une expression (longdiv, circle, box, etc.). | <menclose notation="box"><mi>x</mi></menclose> | x encadré |
Cette liste couvre environ 90 % des besoins courants en MathML de présentation. Pour des cas plus avancés (opérateurs extensibles, annotations sémantiques, MathML-Content), il existe de nombreuses autres balises, mais celles-ci constituent la base indispensable pour commencer à écrire des formules complexes directement dans une page web.
Laboratoire en ligne
Je vous invite à éditer le code MathML dans la boîte suivante pour observer le résultat.