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 HTML. 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 :

T = AR
M(A) = AR, M(A) = Aℜx
y
z l
m
n

m = Ftk . Rpe

MB F = BA ∧ F

V = x2 + y2 + z2

x = – b ± b2 – 4.a.c2.a

523.dx = 523.x = 3×5 - 3×2 = 9

MinMathJS est une bibliothèque libre, sous licence GPLv3. La première version publiée date de juin 2022. Pour joindre l'auteur : eleydet@free.fr. Merci à tous ceux qui participent au développement de MinMathJS, en particulier à Joël A. pour son importante contribution.

Télécharger▼

Mise en œuvre

Exemple de page HTML :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="minmath.js"></script>
</head>

<body>
  n ⋅ R = <frac><num>P ⋅ V</num><den>T</den></frac>
  <br>
  <rac><gh>3</gh><frac><num>5</num><den>8</den></frac></rac> ⋅ <vec><i>F</i></vec>
  = 
  <frac><num><rac><gh>3</gh>5</rac> ⋅ <vec><i>F</i></vec></num><den>2</den></frac>
</body>

</html>

Résultat obtenu :

n ⋅ R = P ⋅ VT

358 ⋅ F = 35 ⋅ F2

Fonctionnalités

ObjectifCodeRendu
Angle 
<ang>a</ang>
a
Vecteur 
<vec>a</vec>
a
Mesure algébrique 
<alg>a</alg>
a
Matrice 
<mat>a</mat>
a
Valeur absolue 
<abs>a</abs>
a
Module 
<mod>a</mod>
a
Parenthèses 
<par>a</par>
a
Crochets 
<cro>a</cro>
a
Accolades 
<acc>a</acc>
a
Racine 
<rac>a</rac>
a
Coordonnées 
<coo>x<br>y</coo>
x
y
Fraction avec
numérateur et dénominateur 
<frac><num>a</num><den>b</den></frac>
ab
Intégrale avec
valeurs initiale et finale 
<int><fin>b</fin><ini>a</ini></int>x.dx
bax.dx
Somme avec
valeurs initiale et finale 
<som><fin>6</fin><ini>n=1</ini></som>n
6n=1n
Petit texte à gauche en haut 
<cro><gh>b</gh>a</cro>
ba
Petit texte à droite en haut
(exposant) 
<cro><dh>b</dh>a</cro>
ba
Petit texte à gauche en bas 
<cro><gb>b</gb>a</cro>
ba
Petit texte à droite en bas
(indice) 
<cro><db>b</db>a</cro>
ba
Alignement vertical 
<vert>a<br>b</vert>
a
b

Remarques :

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  :

La feuille de style en CSS :

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 6.

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