[

Les mathématiques sur le web

Il n'y a pas si longtemps, il était très difficile d'utiliser des équations mathématiques dans une page web. La façon traditionnelle de le faire était d'insérer dans la page des images contenant les équations. Le procédé est évidemment loin d'être idéal : par exemple, si l'utilisateur change la taille du texte, les équations, elles, ne suivent pas. Heureu­sement, il y a maintenant d'autres solutions, la plus connue étant MathJax.

MathJax, LaTeX et MathML

MathJax est une bibliothèque en JavaScript qui permet d'insérer dans une page web des équations codées en LaTeX ou en MathML. LaTeX est un système typo­gra­phique utilisé pour les documents technique et scienti­fiques. Quant à MathML, c'est un langage dérivé du XML créé pour coder des équations mathématiques. Son

utilisation conduit à des expressions très complexes, même pour les équations les plus simples. Pour cette raison, nous nous concentrerons sur l'utilisation de MathJax avec LaTeX.

À cette fin, la première chose à faire est d'insérer le code suivant dans les métadonnées de la page web :

<script type="text/x-mathjax-config">
   MathJax.Hub.Config({
      extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS"],
      TeX: { extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"] },
      tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
         displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }
   });
</script>

<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js">
</script>

Cela peut paraître un peu effrayant, mais en fait il suffit de faire un copier-coller de cette page-ci à votre éditeur de texte favori.

Pour le reste, il faut coder les équations en LaTeX, en entourant les équations en ligne de signes de dollar ($ … $) et les équations en exergue de doubles signes de

dollar ($$ … $$). (Il existe une autre notation qui permet d'éviter les signes de dollar mais qui est moins commode à utiliser.)

C'est évidemment impossible de donner un cours de LaTeX en une seule page. Nous allons donc seulement fournir quelques exemples et faire quelques remarques.

Exemples choisis

Tout d'abord, voici un tableau avec des exemples :

Quelques exemples d'équations avec MathJax
Code LaTeX Équation mise en forme
$x \in [a, b]~(a \lt b)$ \(x \in [a, b]~(a \lt b)\)
$c= \sqrt {a^2+b^2}$ \(c= \sqrt {a^2+b^2}\)
$a_{2j}=\frac 1 2 a_j$ \(a_{2j}=\frac 1 2 a_j\)
$S=\sum_{i=0}^n a_i$ \(S=\sum_{i=0}^n a_i\)
$$S=\sum_{i=0}^n a_i$$ \[S=\sum_{i=0}^n a_i\]
$f(x)=\frac {P(x)}{Q(x)}$ \(f(x)=\frac {P(x)}{Q(x)}\)
$$f(x)=\frac {P(x)}{Q(x)}$$ \[f(x)=\frac {P(x)}{Q(x)}\]
$f(x)=\dfrac {P(x)}{Q(x)}$ \(f(x)=\dfrac {P(x)}{Q(x)}\)
$\dfrac {d}{dx}\dfrac {f(x)}{g(x)}=
\dfrac {f'(x)g(x)-f(x)g'(x)}{\left( g(x) \right)^2}$		 \(\dfrac {d}{dx}\dfrac {f(x)}{g(x)}=\dfrac {f'(x)g(x)-f(x)g'(x)}{\left( g(x) \right)^2}\)
$I=\int_a^b f(x)~dx$ \(I=\int_a^b f(x)~dx\)
$$I=\int_a^b f(x)~dx$$ \[I=\int_a^b f(x)~dx\]

Les remarques de la section suivante aideront à comprendre la logique derrière le code.

Quelques remarques

Voici maintenant pour les remarques :

  • Les symboles spéciaux sont codés en LaTeX en utilisant un nom précédé d'une barre oblique inversée (backslash). Par exemple, on utilise \frac pour une fraction, \sum pour une somme, \int pour une intégrale, etc.
  • On utilise une barre de soulignement (_) pour les indices et un accent circonflexe (^) pour les exposants. Les mêmes symboles sont utilisés pour donner les limites d'une somme ou d'une intégrale.
  • Dans une fraction, la notation \frac est suivie du numérateur puis du dénominateur.
  • Lorsqu'il y a plus d'un caractère dans une entité (exposant, numérateur, …) on les regroupe en utilisant

des accolades ({}).

On constate également les faits qui suivent. Il est à noter que ces défauts sont dus non pas à MathJax, mais à LaTeX.

  • Le symbole d'intégrale est trop petit dans les équations en ligne et trop grand dans les équations en exergue. Le symbole de somme souffre un peu du même défaut.
  • Dans beaucoup de cas, les fractions en ligne sont trop petites. On peut éviter le problème en utilisant \dfrac au lieu de \frac.

En outre, lorsqu'on utilise MathJax, on est limité dans le choix de police pour les équations. Ceci n'est cependant pas complètement négatif, car cela permet de distinguer facilement le contenu mathématique du texte normal.

Ressources

On trouvera de la documentation abondante (malheureusement en anglais) sur les sites web officiels des différents outils mentionnés ici : https://www.mathjax.org/, https://www.latex-project.org/ et https://www.w3.org/Math/.

En français, des ressources plutôt limitées sont disponibles sur l'encyclopédie en ligne Wikipédia aux adresses https://fr.wikipedia.org/wiki/MathJax, https://fr.wikipedia.org/wiki/LaTeX et https://fr.wikipedia.org/wiki/MathML.

Si vous devez utiliser des équations mathématiques dans une page web, nous espérons que l'information présentée ici, bien que succincte, vous sera utile. Pour un exemple d'usage intensif de MathJax dans un site web, visitez notre site sur le calcul intégral (http://fadagogo.com/calcul2/).

Accueil