Vision sur MathML

Qu'est-ce que MathML

Il s'agit d'un langage de description de formules mathématiques basé sur XML.

La syntaxe de MathML prend en compte un balisage de présentation et un balisage de contenu.

Le balisage de présentation correspond à une trentaine d'éléments dont l'objectif est de représenter l'équation en utilisant des notations typographiques.

Le balisage de contenu correspond à une centaine d'éléments. Son objectif est de représenter l'équation d'une manière sémantique.

Le choix d'un balisage ou d'un autre dépend de l'utilisation que l'on veut faire de l'équation. Pour l'afficher il est préférable d'utiliser le balisage de présentation. Par conter pour refléter la structure mathématique il est préférable d'utiliser le balisage de contenu.
Ces deux balisages peuvent être mixés.

---

D'un point de vue chaine éditoriale, MathML est :

Un mauvais format d'édition

La lourdeur de sa syntaxe rend le langage MathML difficilement utilisable pour éditer des formules.

Exemple : Source MathML (balisage présentation)

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<math xmlns='http://www.w3.org/1998/Math/MathML'>
   <mrow>
      <mrow>
         <mi>x</mi>
         <mo>=</mo>
         <mfrac>
            <mrow>
               <mo>-</mo>
               <mi>b</mi>
               <mo>&#x00b1;</mo>
               <msqrt>
                 <mrow>
                    <msup>
                      <mrow>
                         <mi>b</mi>
                      </mrow>
                      <mrow>
                         <mn>2</mn>
                      </mrow>
                    </msup>
                    <mo>-</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                 </mrow>
               </msqrt>
            </mrow>
            <mrow>
               <mn>2</mn>
               <mi>a</mi>
            </mrow>
         </mfrac>
      </mrow>
   </mrow>
</math>

Affichage :

Exemple : La même équation (balisage de contenu)

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<math xmlns='http://www.w3.org/1998/Math/MathML'>
  <apply>
    <eq/>
    <ci>x</ci>
    <apply>
      <divide/>
      <apply>
        <csymbol>
          <mo>&#x00b1;</mo>
        </csymbol>
        <apply>
          <minus/>
          <ci>b</ci>
        </apply>
        <apply>
          <root/>
          <apply>
            <minus/>
            <apply>
              <power/>
              <ci>b</ci>
              <cn>2</cn>
            </apply>
            <apply>
              <times/>
              <cn>4</cn>
              <ci>a</ci>
              <ci>c</ci>
            </apply>
          </apply>
        </apply>
      </apply>
      <apply>
        <times/>
        <cn>2</cn>
        <ci>a</ci>
      </apply>
    </apply>
  </apply>
</math>

Affichage :

Un bon format de stockage

Il s'attache à décrire la structure (sémantique ou typographique) d'une équation. Mais ne stocke pas son aspect visuel. Il permet de part sa structure XML, un traitement par des parseurs diverses pour une exploitation variée (représentation graphique, synthèse vocale, traitement algébrique, affichage braille...) En ce sens MathML est plutôt un bon format de stockage.

Un bon format de publication pour le web

L'affichage des équations MathML sur le web est bien meilleure que l'affichage d'une image au format Gif ou Png équivalente. Elle s'affiche à l'aide de polices de caractères vectorielles et non de bitmap ce qui implique un affichage de meilleure qualité. De plus les navigateurs qui exploitent le MathML disposent de la mécanique de rendu qui permet l'alignement correct des équations "inline" ce qui est un souci majeur de nombreux auteurs de contenu scientifique.

Affichage : Exemple d'affichage de la même équation insérée dans un texte. (affichage de qualité bitmap)

Les versions de MathML

Il existe aujourd'hui 2 versions du format MathML.

• La version 1.0 devenu recommandation en 1998, révisé 1.01 en 1999
• La version 2.0 devenu recommandation en 2001, révisé 2.0 2nd édition en 2003
• Un groupe de travail est en cours de constitution pour définir ce que sera MathML 3.0 (points abordés : internationalisation, accessibilité, enrichissement mathématique)

Les changements majeurs entre la version 1.0 et la version 2.0 semblent concerner :

• des attributs stylistiques qui pour des raisons de séparation fond/forme doivent se trouver dans les feuilles de styles CSS ou XSL.
• des éléments du balisage de contenu dont l'utilisation est désormais déconseillée au profit d'autres balises qui existaient déjà dans la version 1.0.

Le balisage de présentation n'est pas ou peu concerné par l'évolution MathML 1.0 vers 2.0.

Les navigateurs qui supportent MathML

L'affichage MathML pour le Web n'est pas natif dans le navigateur web (excepté Amaya).

Néanmoins on peut afficher les équations MathML sous :

• Internet Explorer 6.0+ en installant le plugin MathPlayer.
• Netscape 7.0, Mozilla et Firefox en installant les polices nécessaires disponibles sur Fonts for MathML-enabled Mozilla. On y trouve les packages nécessaires à l'installation de polices pour Windows, Mac OS X et Linux.

Les éditeurs MathML

Parmi les outils permettant de produire du MathML on trouve :

• Mathematica qu'il est inutile de présenter
• Maple Même remarque
• Amaya est à la fois un navigateur et un éditeur.
• MathType est utilisable comme extension à a suite Microsoft Office et permet l'exportation MathML.
• WebEQ Permet l'édition d'équation MathML pour le web.
• OpenOffice.Org n'est pas à proprement parlé un éditeur MathML mais il peut importer et exporter des équations au format MathML (voir suite).
• AsciiMathML est un JavaScript qui utilise une syntaxe mathématique ascii pour éditer des équations et le même JavaScript interprète ce même code ascii au sein d'une page HTML pour générer à la volée le MathML correspondant et le navigateur se charge de l'affichage de l'équation correspondante.
• ...

Autour d'AsciiMathML

AsciiMathML est constitué de :

Le script de rendu AsciiMathML

L'outil AsciiMathML est un JavaScript qui interprète une syntaxe ascii propriétaire relativement simple à acquérir pour produire du MathML. Son utilisation est très simple. Il suffit d'ajouter la référence au script dans une page HTML pour que toutes les équations saisies dans la syntaxe qu'il sait interpréter soient automatiquement traduites en MathML.

Affichage : Exemple de page contenant du script AsciiMathML

Les éditeurs AsciiMathML

On trouve 2 éditeurs sur le site AsciiMathML. Le gros avantage d'utiliser un éditeur AsciiMath par rapport à toutes les autres solutions que je connais, c'est qu'il permet lorsqu'on sert affranchit de la syntaxe de produire très rapidement une série d'équation. On peut saisir au "kilomètre" texte + équation.

• L'un est un simple champ de texte :

Affichage :

• L'autre est un éditeur évolué base sur une extension d'un éditeur nommé xinha

Affichage :

L'évaluateur d'expressions

Ajouté au JavaScript AsciiMathML.js on trouve un JavaScript ASCIIMathCalculator.js qui permet d'évaluer le résultat d'une expression AsciiMathML.

Affichage :

Des extensions externes

On trouve parmi les développements gravitant autour d'AsciiMathML les outils suivants :

• ASCIIMath Image Fallback Scripts qui permets de générer une image à partir de la saisie au format AsciiMathML (utile pour les navigateurs qui ne supportent pas le MathML).
• LaTeXMathML une modification du JavaScript AsciiMathML qui permets la saisie d'équations en un code très proche de LaTeX.
• AsciiMath2TeX qui convertit du code AsciiMathML en code TeX.
• HTMLArea Qui est un éditeur alternatif Wysiwyg basé sur AsciiMathML ainsi que sur AsciiSVG (pendant d'AsciiMathML pour générer du SVG)
• AsciiMathPHP une version d'AsciiMathML portée sur PHP.

Importation de MathML dans OpenOffice

Dans les importations d'équation d'OpenOffice 2.0+ on trouve MathML 1.01. En cherchant dans le répertoire d'installation du même OpenOffice un trouve également un fichier "mathml.dtd".

J'ai fais les essais suivants :

• test 1 : création d'une équation avec WebEQ et enregistrement avec balisage de présentation
• test 2 : exportation de la même équation avec balisage de contenu
• test 2 : saisie de la même équation dans AsciiMathML et enregistrement du code MathML généré.

Dans les trois cas il faut vérifier et ajouter si nécessaire l'entête XML classique afin que le fichier soit valide et qu'OpenOffice puisse l'ouvrir :

<?xml version="1.0" encoding="utf-8"?>

tests réussis

Les tests 1 et 3 se sont avérés concluants. OpenOffice a ouvert les dites équations et est capable de les rééditer.

Affichage :

J'ai rejoué le test 1 en utilisant l'encodage des caractères avec les différentes options possibles (entity name, numerical references, UTF-8). OpenOffice ouvre correctement avec les encodages "numerical references" et "UTF-8" mais n'ouvre pas le document si on utilise l'encodage "entity name".

J'ai essayé également d'ajouter un namespace aux balises MathML et là encore l'importation se fait sans problème.

tests échoués

Par contre le test 2 ne fonctionne pas. L'importation semble fonctionner mais rien ne s'affiche.

Affichage :

conclusion

Il semble que l'importation MathML dans OpenOffice se fasse sans problème à condition d'utiliser le balisage de présentation et un encodage des caractères "numerical references" ou "UTF-8".

Exportation OpenOffice vers MathML

J'ai ensuite ressaisi la même équation sous OpenOffice et exporté cette équation vers MathML. Lors de l'exportation OpenOffice affiche le message d'alerte suivant :

Affichage :

J'ai ensuite ouvert le document produit avec WebEQ. Il s'est ouvert sans problème.

Affichage :

Enfin j'ai ouvert le même document dans un éditeur de texte pour le comparer à celui produit par WebEq (présent ci-dessus) et voici le résultat :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE math:math PUBLIC "-//OpenOffice.org//DTD Modified W3C MathML 1.01//EN" "math.dtd">
<math:math xmlns:math="http://www.w3.org/1998/Math/MathML">
 <math:semantics>
  <math:mrow>
   <math:mi>x</math:mi>
   <math:mo math:stretchy="false">=</math:mo>
   <math:mfrac>
    <math:mrow>
     <math:mrow>
      <math:mo math:stretchy="false">-</math:mo>
      <math:mi>b</math:mi>
     </math:mrow>
     <math:mo math:stretchy="false">±</math:mo>
     <math:msqrt>
      <math:mrow>
       <math:mrow>
        <math:msup>
         <math:mi>b</math:mi>
         <math:mn>2</math:mn>
        </math:msup>
        <math:mo math:stretchy="false">-</math:mo>
        <math:mn>4</math:mn>
       </math:mrow>
       <math:mi>a</math:mi>
       <math:mi>c</math:mi>
      </math:mrow>
     </math:msqrt>
    </math:mrow>
    <math:mrow>
     <math:mn>2</math:mn>
     <math:mi>a</math:mi>
    </math:mrow>
   </math:mfrac>
  </math:mrow>
  <math:annotation math:encoding="StarMath 5.0">
   x = {- b  +-  sqrt {b^2 - 4 a c}} over {2 a}
  </math:annotation>
 </math:semantics>
</math:math>

Enfin j'ai placé ce code MathML dans une page XHTML et affiché sous IE7 et Firefox 2. L'équation s'affiche correctement dans les 2 cas:

Affichage :

J'ai sorti le fichier content.xml stocké dans l'odf correspondant. Celui-ci est strictement identique au mml généré par l'exportation d'OpenOffice.

Comment Afficher le MathML dans les navigateurs

Comme indiqué plus haut les seuls navigateurs qui acceptent MathML sont (Internet Explorer)+(MathPlayer) et (Netscape7+/Mozilla/Firefox)+(Fonts Maths). Pour les autres il n'y a pas de solution actuellement. Il faut afficher une image.

Pour afficher du MathML dans ces navigateurs il y a 2 possibilités :

• stocker les équations dans des pages .xml ou .xhtml
• stocker les équations dans des pages .html

La méthode diffère assez fortement entre les 2 cas.

Intégration du MathML dans une page .xml/.xhtml

C'est la méthode la plus simple. Il suffit d'ajouter l'appel de la feuille de style mathml.xsl après l'entête xml.

Voici un exemple de page xml contenant du MathML:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="http://www.w3.org/Math/XSL/mathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head></head>
 <body>
  <math xmlns='http://www.w3.org/1998/Math/MathML'>
   <mi>x</mi><mo>+</mo><mn>3</mn>
  </math>
 </body>
</html>  

Cette page doit s'afficher aussi bien sour Internet Explorer que Firefox mais ne fonctionne que si l'on est relié à Internet puisqu'on va y chercher la feuille mathml.xsl.

Pour permettre la consultation locale il suffit de télécharger les fichiers xsl à l'adresse Putting mathematics on the Web with MathML et de pointer sur la xsl locale. J'ai posté une version de ces fichiers sur cette page

Voici la même page xml contenant du MathML avec feuille de style locale (on supposera que les xsl sont dans le même dossier que le xml) :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="mathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head></head>
 <body>
  <math xmlns='http://www.w3.org/1998/Math/MathML'>
   <msqrt><mi>&pi;</mi></msqrt>
  </math>
 </body>
</html>  

Intégration du MathML dans une page .html

Dans ce cas c'est plus difficile à gérer.

pour IE seul

La méthode est encore assez simple. Voici une page qui fonctionne :

<html>
 <head>
  <object id="mathplayer" classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></object>
  <?import namespace="math" implementation="#mathplayer" declareNamespace/>
 </head>
 <body>
  <math:math xmlns:math="http://www.w3.org/1998/Math/MathML">
   <math:msqrt><math:mi>&pi;</math:mi></math:msqrt>
  </math:math>
 </body>
</html>

A noter les 2 lignes dans l'entête html qui permettent de décoder le MathML ainsi que le namespace <math:...> qui permet de définir ce que traitera mathplayer.

pour Netscape Mozilla et Firefox

Il faut passer par un JavaScript qui parcoure le DOM de la page html et convertit le math en ce qu'il faut. Je ne placerais pas ici le code nécessaire. Mais voyez plutôt la partie suivante.

pour fonctionner sur Internet Explorer et Firefox

Un passage par le JavaScript est également nécessaire.

Voici un code qui fonctionne provenant de l'auteur d'AsciiMathML :

<html xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<object id="mathplayer" classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987">
</object>
    <?import namespace="m" implementation="#mathplayer" declareNamespace/>
<title>MathML in HTML files</title>
<script>
/* March 19, 2004 MathHTML (c) Peter Jipsen http://www.chapman.edu/~jipsen
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or (at
your option) any later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
(at http://www.gnu.org/copyleft/gpl.html) for more details.*/

function convertMath(node) {// for Gecko
  if (node.nodeType==1) {
    var newnode =
      document.createElementNS("http://www.w3.org/1998/Math/MathML",
        node.nodeName.toLowerCase());
    for(var i=0; i < node.attributes.length; i++)
      newnode.setAttribute(node.attributes[i].nodeName,
        node.attributes[i].nodeValue);
    for (var i=0; i<node.childNodes.length; i++) {
      var st = node.childNodes[i].nodeValue;
      if (st==null || st.slice(0,1)!=" " && st.slice(0,1)!="\n")
        newnode.appendChild(convertMath(node.childNodes[i]));
    }
    return newnode;
  }
  else return node;
}
function convert() {
  var mmlnode = document.getElementsByTagName("math");
  var st,str,node,newnode;
  for (var i=0; i<mmlnode.length; i++)
    if (document.createElementNS!=null)
      mmlnode[i].parentNode.replaceChild(convertMath(mmlnode[i]),mmlnode[i]);
    else { // convert for IE
      str = "";
      node = mmlnode[i];
      while (node.nodeName!="/MATH") {
        st = node.nodeName.toLowerCase();
        if (st=="#text") str += node.nodeValue;
        else {
          str += (st.slice(0,1)=="/" ? "</m:"+st.slice(1) : "<m:"+st);
          if (st.slice(0,1)!="/")
             for(var j=0; j < node.attributes.length; j++)
               if (node.attributes[j].nodeValue!="italic" &&
                 node.attributes[j].nodeValue!="" &&
                 node.attributes[j].nodeValue!="inherit" &&
                 node.attributes[j].nodeValue!=undefined)
                 str += " "+node.attributes[j].nodeName+"="+
                     "\""+node.attributes[j].nodeValue+"\"";
          str += ">";
        }
        node = node.nextSibling;
        node.parentNode.removeChild(node.previousSibling);
      }
      str += "</m:math>";
      newnode = document.createElement("span");
      node.parentNode.replaceChild(newnode,node);
      newnode.innerHTML = str;
    }
}
</script>
</head>
<body onload="convert();">
 <math><msqrt><mi>&pi;</mi></msqrt></math>
</body>
</html>

A noter que cette méthode fonctionne correctement à condition d'utiliser des entités numériques car Netscape/Mozilla/Firefox ne reconnaissent pas toutes les entités textuelles.

Tester la version de MathPlayer

J'ai pour finir trouvé un script chez Design Science qui permet de déterminer la présence et la version de MathPlayer si on est sous IE. En modifiant ce script on peut imaginer un affichage d'équation au format MathML uniquement quand le navigateur l'autorise et l'affichage d'une image alternative dans les autres cas.

Voici le code en question :

function checkForMathPlayer() {
  // first test platform, as the MathPlayer-specific code only works in IE
  if( isIEWindows()) {
    // check browser version since MathPlayer 2 requires IE 6
    if (ieVersion() >= 6.0) {
      if (isMPInstalled()) {       
        var start = navigator.appVersion.indexOf("MathPlayer");
        if (start != -1) { 
          // notify reader their browser is properly set up
        }
        else {             
          // notify reader they need to upgrade to MathPlayer 2
        }
      }
      else {               
        // direct reader to MathPlayer installation page
      }
    }
    else { 
      // notify reader they need to upgrade IE 
    }
  }
  else { 
    // direct reader to information about other browsers 
  }
}

// returns True if MathPlayer is installed
function isMPInstalled()
{
  try {
    var oMP = new ActiveXObject("MathPlayer.Factory.1");
    return true;
  }
  catch(e) {
    return false;
  }
}

// returns True if running on any version of IE Windows
function isIEWindows()
{
  return( (navigator.appName=="Microsoft Internet Explorer") && 
    (navigator.appVersion.indexOf("Windows") != -1) );
}

// returns version of Internet Explorer
function ieVersion()
{
  var ieVer = 0;
  var start = navigator.appVersion.indexOf("MSIE "); 
  if (start != -1) { 
    ieVer = parseFloat(navigator.appVersion.substring(start+5)); 
  }
  return ieVer;
}

Liens externes

Site officiel "W3C Math Home"
AsciiMathML outil de traduction et de présentation d'équations en notaton math ASCII vers MathML
AsciiMathML tutoriel et symboles un site d'aide à l'utilisation d'AsciiMathML.
Site de l'éditeur Design Science (MathType, WebEQ, MathPlayer)
Site de l'éditeur Wolfram (Validation, exportation, affichage de MathML)
article intéressant décrivant les objectifs et le principe de MathML
Conversion TeX et rendu MathML (INSA Rouen)