\maketitle \newpage \tableofcontents
~\protect\thispagestyle{empty}

Présentation de MathML

Quelques remarques

Avant tout, sachez que le MathML est un langage de type xml qui, une fois interprété par votre navigateur, affiche des formules mathématiques. Je tiens donc à mettre les choses au point tout de suite. Le rendu des formules mathématiques dépendra de votre navigateur internet. C'est donc un problème... En effet, il se peut que selon votre navigateur, le contenu affiché ne soit pas le même, ou alors que la mise en forme ne soit pas bonne. Par exemple, internet explorer ne comprend pas le MathML. Je vous conseille donc d'utiliser firefox ou opera, ces navigateurs gèrent en effet très bien le MathML.
Quelques remarques à propos de ce langage :

Le MathML n'est pas fait pour être écrit à la main, mais pour être généré par des programmes informatiques. En effet, étant un langage xml, sa syntaxe est assez lourde.
Le MathML pouvant être inséré dans des pages xhtml, on peut lui appliquer un style css!
Utiliser du MathML sur le net est devenu la meilleure alternative. En effet, là où une image pose des problèmes d'accessibilité, le MathML permet d'avoir un contenu sémantique et de plus, on peut zoomer sur les formules sans perdre de qualité, comme pour les documents PDF.
Justement, parlons des documents PDF. Ils sont plutôt lourds, et présentent l'inconvénient de ne pas pouvoir être traités facilement par un programme informatique, contrairement à MathML. De plus, le PDF est à la base un format d'impression, qui n'a en fait rien à faire sur le web.

Quelques notions de xml

Avant de commencer, nous allons voir quelles sont les contraintes de MathML. Le MathML est un langage xml, c'est-à-dire qu'il est structuré de manière similaire à l'Xhtml, avec des balises. On dit que c'est un langage balisé. Un exemple simple de document écrit en xml peut être le suivant :



  
    
      Bonjour.
    
  
  
    
      Comment allez vous ?
    
  

]]>

Commentons le code précédent. Cela pourrait par exemple être un fichier dans lequel sont stocks les messages d'une conversation entre les employés d'un bureau.

La première ligne est utilisée afin d'indiquer au navigateur internet que l'on va utiliser du xml.
L'élément bureau, contient tout le reste, c'est l'élément racine (en anglais root) du document. La présence de cet élément est obligatoire en xml.
Chaque élément de type employé est un n\oe{ud} qui est dit enfant de l'élément bureau. Chacun de ces éléments possède un attribut, nommé "nom", qui possède lui-même une valeur qui correspond ici au nom de l'employé.
Et finalement, on retrouve les n\oe{}uds "message" qui sont des enfants des n\oe{}uds "employe". Ils contiennent tous du texte, qui correspond au message laissé par l'employé.

Mais pourquoi parle-t-on d'xml déjà ? Ah oui! C'est vrai, comme je l'ai dit, MathML est du xml. Ah bon!? Mais comment peut-on écrire des maths avec du xml ?? Et bien en fait, tout comme le xhtml (ou le html), le MathML est interprété par votre navigateur internet afin d'afficher, à partir d'un fichier xml, du contenu mathématique. Pour éclaircir tout cela, je vais tout de suite vous en expliquer le fonctionnement à travers un exemple simple.

Quelques exemples

Premier exemple très simple

Voici donc un premier exemple très simple de MathML :


 $a + 1$ 
]]>

Détaillons alors cet exemple... Tout d'abord, je vais vous expliquer à quoi sert l'attribut xmlns de la balise math. En fait, je l'ai dit dans l'introduction, le MathML peut, par exemple, être utilisé dans un document Xhtml. Et donc, comme on utilise deux langages différents ayant la même syntaxe (xml), il y a toujours un risque de collision entre les balises de ces deux langages. Il est effectivement possible qu'une balise MathML existe en Xhtml. Pour cela, on utilise un espace de nom ou name space. L'attribut xmlns sert donc à indiquer cet espace de nom, qui fait référence au site du w3c. Xhtml et html possèdent également chacun un espace de nom.
Après ce premier point assez important, voici l'explication du reste. On peut noter que l'élément racine d'un document MathML est la balise math, tout se trouve donc à l'intérieur de cette balise.
On note ensuite la présence de trois balises différentes : mi, mo et mn. Mais pourquoi ? Et bien tout simplement parce que le MathML est un langage propre et précis. Par exemple, chaque balise commence par un m et de plus chaque lettre de balise a une signification. On aura ainsi mi : la balise identifier, pouvant contenir le nom d'une variable, d'un symbole, d'une fonction ou un texte quelconque. Ensuite, la balise mo, contient des opérateurs. Et enfin, la balise mn qui sert à afficher tous les caractères numériques. Finalement, c'est très précis! Surtout quand ont sait que cet exemple ne sert qu'à afficher

a + 1

.
Bien, on peut passer au second exemple.

Les exposants


 $a^{2}$ 
]]>

Cet exemple très simple, sert simplement à afficher ceci :

a^{2}

. La balise msup prend deux paramètres, le premier appelé base et le second qui sera l'exposant.
Mais alors... Comment on fait si on veut afficher

a^{b + 1}

par exemple ? Il y aura plus de deux arguments non ?
Oui, en effet, dans la balise msup, on ne peut placer que deux balises qui correspondent à la base et à l'argument. Cependant, on peut évidemment afficher

a^{b + 1}

sans aucun problème. Il existe effectivement une balise nommée mrow, qui est un peu l'équivalent de la balise div de l'xhtml, et qui comme son nom l'indique, sert à regrouper une expression sur une ligne. Elle peut donc être utilisée de la manière suivante :


 $a^{b + 1}$ 
]]>

Ce qui va afficher

a^{b + 1}

.
Passons maintenant au dernier exemple.

Exposants et indices

Pour le moment tout ce qui a été passé en revue peut être réalisé en html grâce aux balises sub et sup, pourquoi avoir utilisé MathML ? Bonne question ! Et pour y répondre, je dirai simplement qu'en html, même en combinant les balises sub et sup, on obtiendra jamais le bon affichage pour cette expression :

a_{b}^{2}

. Et oui, l'un des deux indices sera décalé. Alors qu'en MathML, il suffit de faire ça :


 $a_{b}^{2}$ 
]]>

On voit maintenant que la balise msubsup prend deux paramètres qui sont l'indice et l'exposant.

Un exemple complet et concret

Pour finir, voici un exemple complet, qui écrit :

x_{n + 1} = a - x_{n}^{2}


 $x_{n + 1} = a - x_{n}^{2}$ 
]]>

Vous pouvez évidemment tester tous ces exemples sur votre navigateur, pour cela, il vous suffit de copier le contenu de chaque exemple dans un fichier ayant l'extension .xml.

Conclusion

Voila donc une première approche de MathML qui en énonce les principes de base. Le rendu dans un navigateur qui supporte ce langage est assez impressionnant et montre à quel point le MathML peut être un outil pratique. Maintenant que nous avons vu les rudiments concernant MathML, nous allons voir comment l'intégrer dans une page web. Il existe plusieurs solutions à cet effet, dont une, qui est de loin la meilleure mais qui nécessite une certaine rigueur dans l'écriture de votre code xhtml.

Du MathML dans une page web

Comment faire ?

Le principe

Et si on décidait de faire les choses proprement ? Pourquoi je dis ça ? Et bien, j'ai constaté que la majorité des sites web présents sur le net ne respectent aucune norme, sont brouillons, incohérents et totalement inaccessibles, c'est vrai que c'est plus simple de tout faire à l'arrache, mais avec MathML en plus, il vaut mieux faire les choses proprement. L'objectif va donc être d'inclure des formules de math, écrites en MathML, dans une page web, qui sera écrite en Xhtml 1.1.

L'encodage des caractères

Et avant de commencer, j'ajoute quelque chose que j'avais passé sous silence dans le premier chapitre. Dans la déclaration xml de votre document, il faut en fait ajouter un attribut encoding qui spécifie de quelle manière les caractères de votre fichier sont encodés. Vous avez sûrement entendu parler du code ASCII. De base, le latin1 contient 256 caractères, de 0x00 0xFF (en hexadécimal). Sachant qu'une grande partie des caractères utilisés en mathématiques se trouve entre les adresses 0x2200 et 0x22FF, on comprend bien que celui-ci ne convient pas. L'objectif n'étant pas de passer en revue tous les types d'encodage, je vais aller droit au but et dire tout de suite... qu'on va utiliser l'utf-8. N'oubliez donc pas lorsque vous enregistrez vos fichiers, de spécifier l'encodage utf-8. Si vous ne savez pas comment faire, renseignez vous sur le net. Voici donc maintenant par quoi commenceront nos fichiers :

]]>

Le doctype

Il y a certaines règles respecter pour utiliser un langage xml. Ces règles s'appliquent donc au MathML et au Xhtml. Comme chaque langage xml a ses spécificités, il faut, pour chacun de ces langages, définir des règles. Pour cela, on a inventé les DTD. Vous connaissez peut être les "validateurs" du W3C (html, MathML...), et bien si votre site web est valide, cela signifie qu'il respecte les règles de sa DTD. On appelle Doctype ou déclaration de type du document XHTML l'endroit où figure la DTD retenue. Xhtml et MathML possèdent chacun leur DTD. On pourrait penser que nous allons devoir utiliser deux DTD, une pour Mathml et l'autre pour Xhtml. Et bien c'est faux! Et oui, il existe une DTD qui nous facilite la vie, la DTD "XHTML 1.1 plus MathML 2.0". Sympa n'est-ce pas ?
On peut donc trs simplement construire nos documents Xhtml 1.1 contenant du MathML 2.0 de la manière suivante :




    ...
     $ici une expression mathématique$ 
    ...

]]>

On notera en particulier la présence de l'espace de nom du xhtml.

Utilisation de Xhtml et CSS

Structure d'un document Xhtml

Commençons par quelques rappels sur le xhtml. Et pour commencer, voici la structure générale d'un document xhtml1.1.




  
    Titre de la page
	
  
  
	
  

]]>

On remarque premièrement l'attribut ajouté dans la balise html, il ne sert qu'à définir la langue utilisée dans le document. Ensuite, on voit la balise head, celle-cie est utilisée pour spécifier certaines informations relatives à la page. Par exemple, une première information peut être le titre de la page, ici contenu entre les balises title. Vient ensuite la balise body, qui, comme son nom l'indique, contient le corps de la page. On retrouvera notamment le code MathML dans cette partie. Dernière remarque : les commentaires, je vous laisse deviner où ils sont. Exemple concret :




  
    Titre de la page
  
  
     $x_{n + 1} = a - x_{n}^{2}$ 
  

]]>

Cet exemple peut certes sembler inutile car il affiche la même chose que précédemment, cependant, on peut maintenant utiliser toutes les joyeuseries de xhtml et css, et ça c'est vraiment cool!