Envoyer un mail à l’auteur
xavier at ultra-fluide.com

Utilisation de MathML dans une page web

Nous avons récemment publié sur le web la traduction d'une étude sur le TrustRank comprenant des expressions mathématiques. Ces formules sont écrites en MathML. Voici notre retour d'expérience relatif à la publication de fragments MathML sur le web. Vous y trouverez les différents réglages qui permettent de rendre ces pages web opérationnelles. En espérant que cela puisse servir d'exemple et faciliter ainsi l'adoption des standards web...

Le standard MathML
Pourquoi avoir choisi MathML
Compatibilité navigateurs
Choix du Doctype
Type MIME et réglages serveur
Exemple

MathML

MathML est un langage XML destiné à composer des expressions mathématiques. La spécification MathML a été conduite par le W3C. Elle est, dans sa version 2.0, une recommandation du W3C depuis février 2001, puis dans une seconde édition de la même version une recommandation depuis octobre 2003.

Les éléments du langage MathML et ceux du langage XHTML sont différents et sans point commun. Cependant l'appartenance des 2 langages au méta langage XML, et la modularité de XHTML 1.1 permet de constituer un document XML bien formé et valide comprenant des expressions mathématiques et susceptible d'être publié sous forme de page web. Ce document pourra être interprété et rendu par les outils récents. D'autres outils n'ayant pas la capacité de tirer partie des fragments MathML pourront néanmoins présenter le document en tant que page web, avec une dégradation modérée de l'ensemble. C'est ainsi que ces nouveaux standards du web avancent vers l'interopérabilité.

Pourquoi avoir choisi MathML

Nous aurions pu présenter ces formules à l'aide d'images. Cette solution assure en apparence une compatibilité plus large ainsi qu'une présentation uniforme du contenu. Mais derrière cette approche instinctive et partiellement erronée, une autre analyse découvre d'autres richesses et quelques raisons d'utiliser MathML :

le contenu XML de MathML permet un niveau d'accessibilité infiniment supérieur à celui d'une image : la prétendu uniformité de présentation de l'image s'effondre lorsque, pour une raison ou une autre, l'utilisateur n'a pas accès à l'image. De plus la structure MathML conduit à une représentation visuelle lorsque le rendu est possible mais apporte également la composante sémantique totalement absente de l'image.
il est possible de moduler le rendu d'une expression MathML en toute simplicité grâce aux feuilles de styles.
la création d'une image pour chaque formule et sa mise en page est d'une lourdeur sans comparaison avec l'édition d'un bloc MathML.
dans le même ordre d'idée, la maintenance (évolutive ou corrective) du contenu, si elle s'avère nécessaire, est bien plus simple sur un fragment MathML que le processus de fabrication de l'image.
et puis à titre personnel, rien ne paraissait plus attractif que de tester l'utilisation d'un standard récent et de rendre concret le potentiel que renferme la modularité de XHTML 1.1.

Compatibilité navigateurs

Peu de navigateurs disposent d'une capacité de rendu pour MalthML. Voici à notre connaissance ceux nativement compatibles MathML :

Amaya (projet développé par le W3C)
navigateurs bâtis sur Gecko (Firefox, Mozilla, Camino, Netscape, K-Meleon, Galeon...)

Internet Explorer peut également traiter le rendu de MathML après l'installation d'un plugin. En voici un pour IE6 et un autre pour IE5+ (non testé). Mais certains navigateurs connus restent encore totalement à l'écart (IE sans le plugin, Safari, Opéra...).

Un navigateur non compatible MathML affichera correctement la page web, sauf les expressions mathématiques. MathML étant un fragment XML, le navigateur va afficher les noeuds textes des éléments XML lorsqu'ils ne sont pas compris. Il en résulte généralement l'affichage une suite de caractères difficilement intelligibles. Les internautes utilisant un navigateur non compatible MathML en auront un aperçu sur l'exemple de formule présenté en bas de cette page.

Choix du Doctype

XML se borne à définir des règles syntaxiques. Tout langage XML doit préciser en complément ses règles propres, sa sémantique. Un document XML doit donc logiquement fournir à l'utilisateur des informations relatives au(x) langage(s) XML utilisé(s), c'est le rôle de sa DTD. Pour qu'une page web soit valide, au sens XML du terme, il est donc nécessaire de spécifier la DTD à laquelle le document se réfère.

Depuis sa version 1.1 le standard XHTML est devenu modulaire. Le W3C a proposé un mécanisme simple permettant d'étendre la DTD XHTML pour l'utilisation conjointe d'autres langages avec XHTML. Nous avions déjà exploité la modularisation XHTML1.1 en créant une DTD spécifique pour l'utilisation du module target. Dans le cas présent, la création d'une DTD spécifique n'est pas nécessaire puisque le W3C l'a déjà écrite : xhtml-math11-f.dtd (DTD XHTML1.1 + MathML2.0).

On appelle Doctype ou déclaration de Doctype du document XHTML l'endroit où figure la DTD retenue. Amaya et Gecko sont tolérants face à une erreur de Doctype, mais les plugins IE ne le sont pas. C'est pourquoi, en dehors de tout point de vue théorique, il est important dans la pratique de spécifier correctement le Doctype en rapport avec le contenu réel du document. Voici un exemple de déclaration convenable, avec l'entête XML (adapter l'encodage si besoin est) et l'exploitation des espaces de nom :

<?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">
<html xmlns="http://www.w3.org/1999/xhtml">
    ...
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        ici une expression mathématique
    </math>
    ...
</html>

Pour éviter d'avoir à préciser pour chaque formule mathématique l'espace de nom MathML avec l'url complète il est possible de définir une entité ce qui conduit à cette déclaration :

<?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">
    ...
    <math xmlns="&mathml;">
        ici une expression mathématique
    </math>
    ...
</html>

Type MIME et réglages serveur

Le type MIME est une information qui qualifie la nature d'un document (par exemple : texte, HTML, image PNG, PDF...). Cette information est véhiculée sur le web dans l'entête HTTP pour chaque objet transmis par le serveur. Elle est utile en bout de chaîne pour l'agent qui utilisera l'objet afin qu'il détermine l'algorithme adapté à l'interprétation et au traitement de l'objet. Un conflit entre le type MIME transmis et la nature réel de l'objet conduit souvent à un résultat totalement inapproprié tant il est difficile pour l'agent utilisateur de déterminer de l'extérieur la bonne façon de traiter cet objet.

Pour les documents qui nous concernent, comme pour tous les documents XML, le type MIME adapté est le suivant :

application/xhtml+xml

L'emploi de ce type MIME est indispensable puisque Gecko et les plugins IE n'effectuent pas le rendu de MathML lorsqu'un autre MIME (text/html par exemple) est utilisé.
Malheureusement certains navigateurs, dont principalement IE, ne savent pas traiter correctement le type MIME application/xhtml+xml et visualisent un fichier XML brut au lieu d'effectuer le rendu d'une page HTML. Dans ce contexte il devient nécessaire de transmettre un type MIME variable en fonction des capacités du navigateur. C'est possible puisque les entêtes HTTP véhiculent, lors des échanges navigateurs vers serveur, la liste des types MIME acceptés par le navigateur.

La démarche consiste donc à paramétrer le serveur pour qu'il adapte le type MIME du document en fonction de la déclaration de l'agent utilisateur. Dernier écueil cependant, la déclaration faite par IE ne prend pas en compte l'éventuelle présence d'un plugin (qui impose pourtant le MIME application/xhtml+xml). Il est donc indispensable de tester également la nature de l'agent utilisateur. En définitive la procédure est la suivante :

test acceptation application/xhtml+xml
- si oui MIME = application/xhtml+xml
- si non, test si l'agent utilisateur dispose d'un plugin
  - si oui MIME = application/xhtml+xml
  - si non MIME = text/html

Nous avons implémenté ces règles sur un serveur Apache dans le cadre de pages statiques. Nous utilisons l'extension .xhtml pour les pages contenant des expressions MathML. Ces lignes de configuration peuvent être entrées dans un fichier .htaccess ou dans httpd.conf, elle sont basées sur l'exploitation du module rewrite d'Apache :

AddType application/xhtml+xml .xhtml  /* souvent appliqué par défaut
Options +FollowSymlinks                
RewriteEngine on
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml
RewriteCond %{HTTP_USER_AGENT} !MathPlayer  
RewriteRule  ^.*\.xhtml$ - [T=text/html]

Rappel : Apache doit être compilé avec (ou avoir chargé) mod_rewrite.

Nous avons également implémenté ces règles pour servir des pages web dynamiques avec PHP, en supposant que l'url de la page traitée est dans la variable $the_uri :

if(substr($the_uri, -6)==".xhtml"){
 if(
  (strpos($_SERVER['HTTP_ACCEPT'],"application/xhtml+xml") === false)
     && 
   (strpos($_SERVER['HTTP_USER_AGENT'],"MathPlayer") === false)
   ){
     header("Content-Type: text/html; charset=iso-8859-15");
    }
 else {header("Content-Type: application/xhtml+xml");}    
}

Exemple d'un fragment web avec une expression MathML

Cette page dispose du Doctype et type MIME compatibles avec l'exploitation de MathML pour son contenu. Nous proposons ci-dessous un exemple de formule relevée sur le "torture test" de la fondation Mozilla.

Dans le tableau ci-dessous vous trouverez à gauche le code MathML correspondant, au centre la formule en MathML, à droite une capture d'écran de la même formule. Les internautes disposant d'un navigateur capable de rendre MathML verront les cases du milieu et de droite identiques à peu de chose près, alors que les autres visualiseront au centre la succession des noeuds texte du fragment MathML.

Fragment MathML Formule MathML Capture d'écran

Fragment MathML	Formule MathML	Capture d'écran
`<math xmlns="&mathml;"> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <mfrac> <mn>1</mn> <mrow> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo>+</mo> <mfrac> <mn>1</mn> <mrow> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo>+</mo> <mfrac> <mn>1</mn> <mrow> <msub> <mi>a</mi> <mn>3</mn> </msub> <mo>+</mo> <mfrac> <mn>1</mn> <mrow> <msub> <mi>a</mi> <mn>4</mn> </msub> </mrow> </mfrac> </mrow> </mfrac> </mrow> </mfrac> </mrow> </mfrac> </math>`	$a_{0} + \frac{1}{a_{1} + \frac{1}{a_{2} + \frac{1}{a_{3} + \frac{1}{a_{4}}}}}$	$formule MathML$

<math xmlns="&mathml;">
 <msub>
  <mi>a</mi>
  <mn>0</mn>
 </msub>
 <mo>+</mo>
 <mfrac>
  <mn>1</mn>
  <mrow>
   <msub>
    <mi>a</mi>
    <mn>1</mn>
   </msub>
   <mo>+</mo>
   <mfrac>
    <mn>1</mn>
    <mrow>
     <msub>
      <mi>a</mi>
      <mn>2</mn>
     </msub>
     <mo>+</mo>
     <mfrac>
      <mn>1</mn>
      <mrow>
       <msub>
        <mi>a</mi>
        <mn>3</mn>
       </msub>
       <mo>+</mo>
        <mfrac>
         <mn>1</mn>
         <mrow>
          <msub>
           <mi>a</mi>
           <mn>4</mn>
          </msub> 
         </mrow> 
        </mfrac>
       </mrow>
      </mfrac>
     </mrow>
    </mfrac>
   </mrow>
 </mfrac>
</math>

$a_{0} + \frac{1}{a_{1} + \frac{1}{a_{2} + \frac{1}{a_{3} + \frac{1}{a_{4}}}}}$

$formule MathML$