Ajoutez facilement des formules mathématiques sur une page Web

$$f'(x_0)=\lim↙{x→x_0}{f(x)-f(x_0)}/{x-x_0}$$

[ Retrouvez également ici les autres guides sur TheRaphit.com. ]

Besoin de publier un cours ou une documentation incluant des formules mathématiques sur le Web ?

Grâce à ce guide, vous allez pouvoir facilement insérer des formules élaborées directement dans vos pages HTML sans avoir besoin d'utiliser des images, un logiciel complémentaire, ou un module serveur.

Vous obtiendrez ainsi facilement du contenu rapide à charger, et compatible avec tous les navigateurs récents !

La librairie jqMath

Les formules sur cette page sont formées à partir d'une librairie JavaScript librement utilisable : jqMath.

Je ne suis pas un grand fan de Java ou des CSS mais quand il s'agit d'écrire des maths, je peux bien faire des concessions ! :)- De plus si je vous recommande jqMath, c'est que les scripts sont légers, rapides et que l'utilisation mémoire d'un onglet de navigateur avec beaucoup de formules sera à peine supérieure à celle d'une page Web en pur HTML.

Si vous vous rendez sur la page du projet, vous y trouverez déjà une documentation très fournie (en anglais, toutefois). Cependant, comme toujours sur Internet, vous n'aurez là qu'une partie de l'information si vous souhaitez obtenir des résultats visuellement satisfaisants.

Par exemple, si vous n'utilisez que les scripts de jqMath mis à disposition sur la page du projet, voici à quoi ressemblera la formule classique de l'intégration d'une fonction d'une variable, continue sur un intervalle réel $[a,b]$ :

$∫_a^b f(x)dx = F(b)-F(a)$
On peut sûrement obtenir mieux que cela, non ? Oui en effet, en suivant les instructions de ce guide, vous obtiendrez :

$$∫_a^b f(x)dx = F(b)-F(a)$$
Voilà qui ressemble à quelque chose de sérieux désormais ! Je n'ai pas ménagé ma peine pour aller piocher les informations ça et là, afin de vous concocter une archive prête à être installée, ainsi qu'un fichier de template HTML que vous n'aurez plus qu'à compléter.

Installation des fichiers

Tout ce qui vous sera nécessaire pour créer des pages Web avec des formules élaborées tient dans quelques fichiers à copier directement dans votre répertoire Web. Cela fonctionnera sans problèmes si vos pages sont hébergés sur un serveur tiers, pas besoin d'avoir accès à la configuration du serveur HTTP, ni même de connaître celle-ci : il n'y a rien à adapter, tout se passe entre le contenu de vos pages et le navigateur du visiteur. Cela peut aussi fonctionner sur un serveur intranet, sans accès au réseau Internet public.

Vous pouvez télécharger l'archive ici : Package jqMath TheRaphit (format ZIP - 2,9 Mo)

Une fois décompressée, vous trouverez un répertoire jqmath-package dans lequel il y a trois sous-répertoires :

mathscribe : contient la librairie JavaScript elle-même
mathfonts : des polices de caractères donnant un meilleur rendu aux formules
html : contient le fichier template.html qui est le modèle de page Web, préparé avec les bons tags HTML

Les chemins utilisés dans le fichier template.html sont relatifs, si vous ne les changez pas, il ne fonctionnera que dans son répertoire. Mais bien évidemment, vous pouvez le placer où vous voulez dans le répertoire parent de votre site, en adaptant ces chemins.

Voilà, il n'y a pas besoin de plus pour commencer à rédiger des formules qui s'intègreront à votre page !

Petite section pour les puristes qui veulent directement intégrer les scripts et CSS à leurs pages Web existantes (passez à la partie suivante sinon).

Voici précisément les tags HTML à ajouter dans la section <head> de votre code HTML :

<link rel="stylesheet" href="jqmath-package/mathscribe/jqmath-0.4.3.css" />
<link rel="stylesheet" href="jqmath-package/mathfonts/latinmodern/mathfonts.css" />
<link rel="stylesheet" href="jqmath-package/mathfonts/stix/mathfonts.css" />
<script src="jqmath-package/mathscribe/jquery-1.4.3.min.js"></script>
<script src="jqmath-package/mathscribe/jqmath-etc-0.4.6.min.js" charset="utf-8"></script>
<script>M.MathPlayer = false; M.trustHtml = true;</script>

Ici, cela suppose que votre fichier HTML est située dans un répertoire où vous avez directement décompressé l'archive.

Il faut également ajouter le MathML Namespace à votre balise <html> comme ceci :

<html xmlns:m="http://www.w3.org/1998/Math/MathML">

Ce n'est qu'une indication, le navigateur de votre lecteur ne fera pas de requête vers cet URL et cela fonctionnera sur un intranet.

Enfin dernière chose, vérifiez bien que vous avez indiqué que votre fichier HTML contient des caractères UTF-8 :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

N'oubliez pas que ce n'est pas automatique pour les navigateurs !

Rédaction des formules

La librairie utilise une synthaxe voisine de TeX. Voici quelques élements que vous pouvez employer :

\$...\$ : délimite une formule « inline »
\$\$...\$\$ : délimite un « bloc » indépendant contenant une formule
{...} : groupe des éléments, par exemple le numérateur et le dénominateur d'une fraction ; \${ax+b}/{cx+d}\$ donnera ${ax+b}/{cx+d}$
^ et _ : exposant et indice, respectivement
↙ et ↖ : souscription et surscription, respectivement
\bo, \it et \bi : affichage d'une variable en gras, italique ou gras-italique
\ov : barre supérieure, par exemple $|z|^2=z\ov z$ ou $\ov ℝ=[-∞;+∞]$
\table : tableaux et matrices - les colonnes sont séparées par , (virgule) et les lignes par ; (point-virgule)
\text "..." : insère du texte non formaté dans une formule, le texte en question doit être entre " (double-quote)
\ : caractère d'échappement - vous permet notamment d'écrire un $ dans une formule ou n'importe où ailleurs sur la page, sans qu'il ne soit interprété

Les scripts vont ignorer les espaces et les retours à la ligne. Cependant, les éléments de mise en forme tels que \bo ou \ov doivent être suivis d'un espace pour être interprétés correctement.

Une petite précision concernant la différence entre le « inline » et le « bloc ». Dans les manuels ainsi que sur Wikipédia, les formules mathématiques sont généralement écrites sur leur propre ligne et centrées, comme ceci :

$$∑↙{k=0}↖n k={n(n+1)}/2$$
C'est ce que fait la librairie lorsque vous insérez un bloc, c'est à dire avec \$\$...\$\$. Vous n'avez pas besoin d'utiliser un <br> ou un <center>, c'est automatique. Cependant, le mode « inline » peut s'avérer utile, si vous souhaitez juste parler de l'équation $ax^2+bx+c=0$ directement dans le texte, ou de la fraction ${a}/{b}$. Notez qu'en « inline », le rendu sera nécessairement réduit, par exemple avec la somme des premiers entiers ça donne ceci : $∑↙{k=0}↖n k={n(n+1)}/2$. Les formules un tant soit peu complexes seront donc plus lisibles et mieux mises en valeur dans un « bloc. »

Voici quelques autres exemples.

La formule d'inversion d'une matrice de $M_2(ℂ)$ dont le déterminant est non nul : $ad-bc≠0$ - Le code : \$\$(\table a,b;c,d)^{-1}=1/{ad-bc}(\table d,-b;-c,a)\$\$

$$(\table a,b;c,d)^{-1}=1/{ad-bc}(\table d,-b;-c,a)$$
Le théorème flux-divergence pour un champ vectoriel différentiable $F↖{→}$ de $ℝ^3$, sur un volume $V$ de frontière $∂V=S$ - Le code : \$\$∭_V(∇↖{→}∙F↖{→})\text "d"V=∯_SF↖{→}∙\text "d"S↖{→}\$\$

$$∭_V(∇↖{→}∙F↖{→})\text "d"V=∯_SF↖{→}∙\text "d"S↖{→}$$
La formule de Cardan donnant les trois solutions d'une équation du 3^ème degré à coefficients réels $x^3+px+q=0$, dont le discriminant $\text "Δ"=-4p^3-27q^2$ est strictement positif - Le code : \$\$x_k=2√{-p/3}\cos({1/3\arccos({3q}/{2p}√{3/{-p}})+{2kπ}/3})\text "avec" k∈\{0,1,2\}\$\$

$$x_k=2√{-p/3}\cos({1/3\arccos({3q}/{2p}√{3/{-p}})+{2kπ}/3})\text "avec" k∈\{0,1,2\}$$
Ah oui, elle est magnifique celle-là, et on ne vous l'a pas apprise à l'école !

La rédaction demande un peu d'entraînement, et une table de caractères à proximité pour s'aider. Et comme vous le voyez, vous pouvez mixer sans problèmes les caractères UTF-8 tels que ℂ, ℝ ou ℤ, avec des codes HTML tels que π pour π. Le mieux est encore d'utiliser, pour rédiger votre page, un éditeur de texte quelque peu sophistiqué qui intègre déjà l'accès aux caractères unicode dans son interface... Plutôt que de tout faire avec vim tel le gros dégénéré que je suis.

Pour obtenir les codes HTML de bon nombre de symboles mathématiques, vous pouvez aussi vous aider de cette page : HTML Math Symbols.

Sinon la page de la librairie jqMath dispose d'une grande variété de symboles que vous n'aurez qu'à copier-coller.

Les Mathématiques sur TheRaphit.com

[Retour à l'accueil]

TheRaphit's Web Site - La dernière homepage du Web

[(Tout)² Evangelion] [Webzine : La Revue] [Pink Zone 2025]

Mathématiques