Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Cette page explique comment écrire des formules mathématiques en utilisant le langage MathML. À l'instar du HTML, le MathML est décrit par des balises et des attributs. Le code source HTML devient lourd lorque votre document contient des structures avancées telles que des listes ou tableaux mais heureusement il existe plusieurs générateurs de HTML à partir de notations simples, des éditeurs WYSIWYG ainsi que des systèmes de gestions de contenu (CMS) qui aide à l'écriture de page Web.

Les notations mathématiques sont encore plus complexes, avec des structures telles que les fractions, les racines carrées ou les matrices qui sont susceptibles de nécessiter leur propres balisage. Par conséquent, de bons outils d'édition MathML sont encore plus importants et nous en décrivons quelques-uns ci-dessous. En particulier, l'équipe MathML de Mozilla a développé TeXZilla, un convertisseur Javascript de LaTeX vers MathML compatible avec Unicode, dont le but est d'être utilisé dans divers scenari décrits ici. Bien sûr, la liste n'est pas exhaustive et vous êtes invité à jeter un œil à la  liste du W3C des logiciels MathML (en) où vous pouvez trouver divers outils.

Notez que MathML est conçu pour être bien intégré au HTML5 et en particulier vous pouvez utiliser les concepts Web usuels tels que CSS, DOM, Javascript ou SVG. Cela ne rentre pas dans le cadre de ce document mais n'importe qui avec les connaissances de base des langages Web pourra facilement mélanger ceux-ci avec le MathML. Allez voir nos démonstrations et la référence MathML pour plus de détails.

Utiliser MathML

MathML dans les pages HTML

Vous pouvez utiliser du MathML de présentation au sein des documents HTML5 :

<!DOCTYPE html>
<html>
    <head>
        <title>MathML dans HTML5</title>
    </head>
    <body>
        <h1>MathML dans HTML5</h1>

        <p>
        Racine carrée de 2 :
        <math>
            <msqrt>
                <mn>2</mn>
            </msqrt>
        </math>
        </p>
     </body>
</html>

Le MathML de contenu n'est pas supporté par les navigateurs. Il vous est alors recommandé de convertir votre arborescence de MathMLde contenu en du MathML de présentation avant de le publier, par exemple à l'aide de la feuille de style ctop.xsl. Les outils mentionnés sur cette page génèrent du MathML de présentation.

Alternative pour les navigateurs sans support de MathML

Malheureusement, certains navigateurs sont incapables de rendre des équations avec MathML ou en ont seulement un support limité. Par conséquent, vous devrez utiliser un émulateur de MathML pour fournir un rendu alternatif. Si vous n'avez besoin que de constructions mathématiques basiques telles que celles utilisées dans cet article alors une simple feuille de style mathml.css devrait suffire. Pour l'utiliser, insérez cette ligne dans votre document HTML :

<script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>

Si vous avez besoin de constructions plus complexes, vous devrez alors envisager d'utiliser la bibliothèque MathJax comme émulateur de MathML :

<script src="http://fred-wang.github.io/mathjax.js/mpadded.js"></script>

Notez que ces deux scripts assurent la détection des fonctionnalités des éléments mspace ou mpadded (renseignez-vous sur la table de compatibilité des navigateurs au pied de cet article).

Si vous ne souhaitez pas utiliser ce lien vers GitHub mais préférez intégrer ces émulateurs ou d'autres dans votre projet, vous pourriez avoir besoin des scripts de détection pour vérifer le niveau de support de MathML par votre navigateur. Par exemple la fonction suivante vérifie le support de MathML en essayant l'élément mspace (vous pourriez remplacer mspace par mpadded):

function supporteMathML () {
    let div = document.createElement("div"), box;
    div.innerHTML = "<math><mspace height='23px' width='77px'/></math>";
    document.body.appendChild(div);
    let box = div.firstChild.firstChild.getBoundingClientRect();
    document.body.removeChild(div);
    return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;
}

Alternativement, la chaîne de caractères d'agent utilisateur suivante va permettre la détection des moteurs de rendu avec support natif de MathML (Gecko et WebKit) :

var ag_ut = navigator.userAgent;
var isGecko = ag_ut.indexOf("Gecko") > -1 && ag_ut.indexOf("KHTML") === -1 && ag_ut.indexOf('Trident') === -1;
var isWebKit = ag_ut.indexOf('AppleWebKit') > -1 && ag_ut.indexOf('Chrome') === -1;

Notez que cette chaîne de détection n'est pas la méthode la plus fiable et pourrait dysfonctionner d'une version à une autre.

Les fontes mathématiques

Afin d'obtenir une bonne mise en page ou pour permettre différents mise en style, il est important d'avoir des fontes mathématiques disponibles. Vous pouvez ainsi fournir à vos visiteurs un lien vers les Instructions sur les fontes de MDN, de telle manière qu'ils puissent vérifier s'ils ont les fontes appropriées installées sur leur système ou non. Il est tout aussi bon de prévoir une alternative avec les fontes Web.

Avant Gecko 31.0 (Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28), il était quelque peu fastidieux d'installer des fontes mathématiques, lisez à ce propos les instructions pour Mozilla 2.0. Depuis Gecko 31.0 (Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28), c'est beaucoup plus simple et compatible avec tout moteur de rendu Web ayant un support de MathML. Par exemple, voyez-ci une feuille de style minimale pour utiliser la fonte Latin Modern pour les textes et Latin Modern Math pour les expressions mathématiques :

@namespace url('http://www.w3.org/1999/xhtml');
@namespace m url('http://www.w3.org/1998/Math/MathML');

body, m|mtext {
    font-family: Latin Modern;
}
m|math {
    font-family: Latin Modern Math;
}

En fin vous pouvez utiliser la règle @font-face comme usuellement pour founir une alternative WOFF pour les fontes Latin Modern et Latin Modern Math. Regardez ce dépôt GitHub pour obtenir des fontes WOFF et des échantillons de feuilles de style CSS à utiliser sur votre site ainsi que sa page d'essai.

MathML dans les documents XML (XHTML, EPUB, etc)

Si pour quelque raison vous avez besoin de MathML au sein de documents XML, soyez sûr de satisfaire aux exigences usuelles : document valide, usage d'un type MIME correct et espaces de noms MathML "http://www.w3.org/1998/Math/MathML" sur les racines <math>. Par exemple, la version XHTML de l'exemple précèdent ressemble à ceci :
 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>XHTML avec un exemple MathML</title>
    </head>
    <body>
        <h1>XHTML avec un exemple MathML</h1>

        <p>
        Racine carrée de 2 :
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <msqrt>
                <mn>2</mn>
            </msqrt>
        </math>
        </p>
    </body>
</html> 

MathML dans les méls et clients de messagerie instantanée

Les clients méls modernes peuvent envoyer et recevoir des méls au format HTML5 et donc y insérer des expressions MathML. Soyez sûrs dans ce cas d'avoir activé les options "envoyez en tant que HTML" et "visionner en tant que HTML". Dans Thunderbird, vous pouvez utiliser la fonctionnalité "Insérer du HTML" pour coller votre code HTML + MathML. MathBird est une extension de Thunderbird pratique pour insérer des expressions MathML en utilisant la syntaxe d'insertion d'AsciiMath. À nouveau, la manière dont MathML est géré et la qualité du rendu de MathML dépend des clients méls. Même si votre navigateur supporte le MathML, votre fournisseur mél Web pourrait vous empêcher de recevoir ou d'envoyer des méls contenant du MathML.

En théorie, les clients de messagerie instantanée basés sur Gecko peuvent intégrer un des convertisseurs tirés de Javascript de texte en MathML mentionnés ci-après et rendre les expressions MathML. Il y a par exemple une extension InstantBird pour gérer les expressions LaTeX.

Conversion depuis une syntaxe simple

Il y a de nombreuses notations simples (par exemple les syntaxes wiki ou markdown) pour générer des pages HTML. De fait, cela est aussi vrai pour MathML: par exemple les syntaxes ASCII telles qu'utilisées dans les calculatrices ou le plus puissant langage LaTeX, très populaire dans la communauté scientifique. Dans cette section, nous présenterons quelques-uns de ces outils pour convertir du texte respectant une certaine syntaxe en MathML.

  • Avantages :
    • Écrire des expressions mathématiques peut ne nécessiter qu'un éditeur de texte standard.
    • De nombreux outils sont disponibles et certains sont compatibles avec le convertisseur LaTeX-to-PDF.
    • Cela donne accès à des fonctionnalités avancées de LaTeX comme les macros.
  • Inconvénients :
    • Ce peut être plus difficile à utiliser : il faut apprendre la syntaxe, une erreur dans le code amène facilement à une erreur de conversion ou de rendu etc
    • L'interface n'est pas conviviale : l'on n'a accès qu'à un éditeur de code sans rendu en direct de l'expression mathématique.
    • Aucune des syntaxes n'a été standardisée, rendant la compatibilité entre convertisseurs difficile. Par exemple, le langage populaire LaTeX continue de recevoir de nouveaux paquets et tous les convertisseurs ne sont pas à jour.

Conversion côté client

Dans un environnement web, la plus évidente méthode pour convertir un texte brut respectant une syntaxe en une arborescence DOM est d'utiliser Javascript. De fait, de nombreuses bibliothèques ont été développées pour accomplir cette tâche.

  • Avantages :
    • Mise en place aisée : seulement un peu de Javascript et de CSS.
    • C'est une solution purement basée Web : tout est fait par les navigateurs et non par d'autres programmes nécessitant une installation.
  • Inconvénients :
    • Cela ne fonctionnera pas si l'utilisateur a désactivé Javascript.
    • Le code MathML n'est pas présenté aux robots d'indexation (par exemple ceux des moteurs de recherche mathématique ou les agrégateurs de contenu).
    • La conversion doit être faite à chaque chargement de page, pouvant amener à un ralentissement du chargement ou à des conflits avec l'analyse HTML (par exemple "<" pour les balises)
    • Vous devez synchroniser le convertisseur Javascript avec les autres programmes Javascript sur votre page.

TeXZilla a un élément HTML personnalisé <x-tex> pouvant être utilisé pour écrire des expressions telles que :

<x-tex>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex>

Et l'obtenir automatiquement converti en MathML. C'est une technologie toujours en développement, mais qui pourra être améliorée à l'avenir au moyen des composants Web et du shadow DOM. Alternativement, vous pouvez utiliser la traditionnelle analyse Javascript des expressions au chargement comme tout les autres outils de cette section font.

Un autre outil de conversion, simple et côté client, est ASCIIMathML. Il vous suffit de télécharger le script ASCIIMathML.js et de le copier dans votre dossier de site web, puis d'ajouter une balise <script> sur chaque page pour charger le script ASCIIMathML. Toute expression mathématique délimitée au moyen ` (accent grave) sera automatiquement analysée et convertie en MathML:

<html>
    <head>
        ...
        <script src="ASCIIMathML.js"></script>
        ...
    </head>
    <body>
        ...
        <p>Lorem `x^2 + y^2 = r^2` ipsum ...
        ...

LaTeXMathML est un script similaire d'analyser plus de commandes LaTeX. Son installation est semblable : copiez LaTeXMathML.js et LaTeXMathML.standardarticle.css dans votre dossier, ajoutez des liens vers ces fichiers dans vos documents et les contenus LaTeX de vos pages web, si marqués par la classe "LaTeX", seront automatiquement analysés et convertis en HTML et MathML:

<head>
    ...
    <script src="LaTeXMathML.js"></script>
    <link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" /> 
    ...
</head>

<body>
    ...
    <div class="LaTeX">
        \documentclass[12pt]{article}
        \begin{document}
        \title{LaTeXML Example}
        \maketitle
        \begin{abstract}
        This is a sample LaTeXML document.
        \end{abstract}
        \section{First Section}
        $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
        \end{document}
    </div>
    ...

jqMath est un autre script pour analyser une expression utilisant une syntaxe simplifiée proche de LaTeX mais supportant en plus les caractères non-ASCII comme √{∑↙{n=1}↖{+∞} 6/n^2} = π pour rendre n = 1 + 6 n 2 = π . Son installation se fait de la même manière : copiez ses fichiers Javascript et CSS dans votre dossier de site web et référencez-les dans vos pages (regardez le fichier COPY-ME.html de l'archive zip pour lire un exemple). L'un des avantages de jqMath par rapport aux scripts précédents est qu'il ajoutera automatiquement quelques règles CSS pour faire l'affichage mathématique et rendre les formules lisibles sur des navigateurs avec un support limité de MathML.

Programmes en ligne de commande

Un moyen alternatif est de convertir les expressions LaTeX avant de publier votre site web. Vous pouvez utiliser des programmes en ligne de commande pour générer et publier ces pages statiques sur votre serveur.

  • Avantages :
    • L'on obtient des pages web statiques : le code source en LaTeX ne nécessite pas d'être converti à chaque chargement, le code MathML est exposé aux robots d'indexation et l'on peut ajouter le code MathML aisément sur tout serveur web.
    • Des programmes binaires peuvent s'exécuter plus vite que des programmes Javascript et être plus sophistiqués, c'est-à-dire avoir un support LaTeX plus complet ou générer d'autres formats comme l'EPUB.
    • Vous pouvez assurer la compatibilité avec d'autres outils pour générer un PDF, c'est-à-dire que vous pouvez utiliser le même fichier source .tex  pour à la fois faire du LaTeX et du LaTeXML.
  • Inconvénients :
    • Cela requiert d'installer des programmes sur son ordinateur, ce qui peut être plus compliqué ; et ces programmes peuvent être indisponibles sur certaines plates-formes.
    • Vous devez exécuter ces programmes sur votre ordinateur et avoir un flux de travail pour obtenir vos pages web à la fin ; cela peut s'avérer quelque peu fastidieux.
    • Les programmes binaires ne sont pas appropriés dans une extension Mozilla ou une application XUL.

TeXZilla peut être utilisé depuis la ligne de commande et a essentiellement le même support qu'itex2MML, décrit précédemment. Toutefois, le comportement de filtre de flux n'est pas encore implémenté.

If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like itex2MML or Blahtex. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:

wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
tar -xzf itexToMML.tar.gz; \
cd itex2MML/itex-src;
make
sudo make install

Now suppose that you have a HTML page with TeX fragments delimited by dollars:

input.html

...
</head>
<body>
  <p>$\sqrt{a^2-3c}$</p>
  <p>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$</p>
</body>
</html>

Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do

cat input.html | itex2MML > output.html

There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example TeX4ht is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source:

   mk4ht mzlatex foo.tex # Linux/Mac platforms
   mzlatex foo.tex       # Windows platform

LaTeXML is another tool that is still actively developed but the release version is rather old, so you'd better install the development version. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:

  latexml --dest foo.xml foo.tex
  latexmlpost --dest foo.html --format=html5 foo.xml

If you want to have a MathJax fallback for non-Gecko browsers, copy the Javascript lines given above into a mathjax.js file and use the --javascript parameter to tell LaTeXML to include that file:

  latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml

If your LaTeX document is big, you might want to split it into several small pages rather putting everything in a single page. This is especially true if you use the MathJax fallback above, since in that case MathJax will take a lot of time to render the equations in non-Gecko browsers. Use the --splitat parameter for that purpose. For example, this will split the pages at the \section level:

  latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml

Finally, to generate an EPUB document, you can do

  latexmlc --dest foo.epub --splitat=section foo.xml

Server-side Conversion

  • pros:
    • Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion.
  • cons:
    • This might be a bit more difficult to set up, since you need some admin right on your server.

TeXZilla can be used as a Web server in order to perform server-side LaTeX-to-MathML conversion. LaTeXML can also be used as a deamon to run server-side. Mathoid is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.

Instiki is a Wiki that integrates itex2MML to do server-side conversion. In future versions, MediaWiki will support server-side conversion too.

Graphical Interface

Input Box

TeXZilla has several interfaces, including a CKEditor plugin used on MDN, an online demo, a Firefox add-on or a FirefoxOS Webapp. Abiword contains a small equation editor, based on itex2MML. Bluegriffon is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.

BlueGriffon

WYSIYWG Editors

Firemath is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.

OpenOffice and LibreOffice have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml.

Open Office Math

Amaya is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as a+2 is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.

Optical Character & Handwriting Recognition

Inftyreader is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the Windows Math Input Panel

Windows Math Input Panel

or the online converter Web Equation.

Informations sur le document original

  • Auteur(s): Frédéric Wang
  • Autres contributeurs: Florian Scholz
  • Informations de droits d'auteur : des parties de ce contenu sont © 2010 par des contributeurs mozilla.org individuels ; contenu disponible sous licence Creative Commons | Détails.

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : JNa0, fred.wang, Goofy
Dernière mise à jour par : JNa0,