Introduction

Malgré les nombreuses années écoulées, l'insertion de formules mathématiques dans les pages Web demeure peu évidente. Le langage MathML solutionne en partie ce problème avec, malheureusement, une syntaxe lourde et complexe. Plusieurs bibliothèques produisent de magnifiques résultats, mais elles restent volumineuses, assez exigeantes dans leur application.

MinMathJS est une bibliothèque légère, facile, conçue pour les formules mathématiques ordinaires. Elle utilise un système de balises à la manière du BBcode. Dans le cas où une fonctionnalité manquerait, la procédure pour la programmer, relativement simple, consiste à reprendre une fonctionnalité déjà présente et à l'adapter. En somme, maîtrisez votre bibliothèque! Exemples d'affichages :

[acc]T[/acc] = [acc][bg]A[/bg][vert][vec]R[/vec]
[vec]M_(A)[/vec][/vert][/acc] = [acc][bg]A[/bg][vec]R[/vec], [vec]M_(A)[/vec][/acc] = [acc][bg]A[/bg][bd]ℜ[/bd][vert]x
y
z[/vert] [vert]l
m
n[/vert][/acc]

m = [rac][div]Ft[sur]k . Rpe[/div][/rac]

[vec]M_B [vec]F[/vec] [/vec] = [vec]BA[/vec] ∧ [vec]F[/vec]

[mod][vec]V[/vec][/mod] = [rac]x² + y² + z²[/rac]

x = [div]– b ± [rac]b² – 4.a.c[/rac][sur]2.a[/div]

[int][fin]5[/fin][ini]2[/ini][/int]3.dx = [cro][hd]5[/hd][bd]2[/bd]3.x[/cro] = 3×5 - 3×2 = 9

y = [par]1 – [div]ln [par] tan [par]lat ⋅ [div]π[sur]180[/div][/par] + [div]1[sur] cos [par]lat ⋅ [div]π[sur]180[/div][/par] [/div][/par][sur]π

[/div][/par] ⋅ 2 ^z-1

MinMathJS est une bibliothèque libre, sous licence GPLv3. Merci à tous ceux qui participent à son développement, en particulier à Joël A. pour son importante contribution. Pour joindre l'auteur : eleydet@free.fr

Téléchargement

La première version, publiée en juin 2022, a connu quelques évolutions mineures. La dernière date d'avril 2023.

Première version ▼

La nouvelle version, publiée en mai 2025, remplace les chevrons des balises par des crochets, apporte quelques renommages et compléments.

Nouvelle version ▼

Mise en œuvre

Exemple de page HTML :

Résultat obtenu :

n ⋅ R = [div]P ⋅ V[sur]T[/div]

[rac][hg]3[/hg][div]5[sur]8[/div][/rac] ⋅ [vec]F[/vec] = [div][rac][hg]3[/hg]5[/rac] ⋅ [vec]F[/vec][sur]2[/div]

Fonctionnalités

Remarques :

• Quelques balises HTML utiles :
  • <i>...</i> : Texte en italique.
  • ^... : Texte en exposant.
  • _... : Texte en indice.
• L'encodage UTF-8, largement utilisé de nos jours, permet d'obtenir les caractères grecs : α, β, γ, δ, ε...

Programmation

Une formule mathématique comporte du texte, disposé ici ou là, éventuellement rapetissé, agrémenté de symboles. Ces derniers pourraient s'obtenir en étirant le caractère adapté aux dimensions voulues. Avec MinMathJS, les symboles sont systématiquement dessinés. Afin de se limiter à un seul fichier, minmath.js  :

• Produit une feuille de style en CSS.
• Intègre les dessins directement dans le code en CSS.

La feuille de style en CSS :

• Dispose les textes aux emplacements souhaités, en définissant les marges intérieures et le type de rendu.
• Dessine, en arrière plan et avec un chemin au format SVG, les symboles mathématiques manquants.

Par ailleurs, les balises propres à MinMathJS sont remplacées par les balises HTML <span>...</span> associées à la classe appropriée. L'écriture rendue nettement plus courte améliore agréablement la lisibilité.

A vous de jouer

Vous ne trouvez pas la fonctionnalité dont vous avez besoin? Voici les différentes étapes pour la créer vous-même. Imaginons que vous souhaitiez obtenir un triangle au-dessus d'un caractère. Vous décidez de nommer tri la nouvelle balise.

Etape 1

Ouvrir le fichier minmath.js. Ajouter "tri" dans le tableau ch de la ligne 8.

Etape 2

A la fin de la variable mmjs.styles, ajouter .tri dans les Propriétés communes.

Etape 3

Au-dessus des Propriétés communes, placer le code ci-dessous.

.tri {

}

Définir une marge suffisante pour laisser de la place au dessin. Ici, la marge mesure 7 pixels en haut, 2 pixels à droite, 0 pixel en bas et 2 pixels à gauche.

.tri {
padding: 7px 2px 0px 2px;
}

Par défaut, le dessin s'affiche à gauche en haut. Pour le placer au centre en haut, écrire :

.tri {
padding: 7px 2px 0px 2px;
background-position: 50% 0;
}

Il ne reste plus qu'à réaliser le dessin au format SVG. Les propriétés width et height en définissent respectivement la largeur et la hauteur, en pixels. L'attribut d de la balise path permet de tracer la figure.

.tri {
padding: 7px 2px 0px 2px;
background-position: 50% 0;
background-image: url("data:image/svg+xml;utf8,<svg width='14' height='6' xmlns='http://www.w3.org/2000/svg'><path d='M 0 6 L 7 0 L 14 6'/></svg>");
}

Complément

• L'image placée en arrière plan se dessine également avec la fonction mmjs.url().
• La propriété background-size: ... ; permet de changer les dimensions de l'image. Par exemple, background-size: 10px 100%; ajuste l'image à 10 pixels horizontalement et, verticalement, à 100% de l'espace disponible.
• Un même arrière plan peut comporter plusieurs images, chacune adaptée aux positions et aux dimensions désirées.