MathJax 4.0 – Le boss des maths sur le Web
Vous savez ce qui m’a plu en découvrant aujourd’hui
MathJax 4.0
?
Ce n’est pas tant les nouvelles fonctionnalités (pourtant impressionnantes) que le chemin parcouru depuis 2009. Car il y a 15 ans, afficher une simple équation mathématique sur une page web relevait du parcours du combattant et aujourd’hui, avec MathJax c’est tout ce qu’il y a de plus trivial.
Alors pour ceux qui ne connaissent pas, MathJax c’est LE moteur JavaScript open-source qui permet d’afficher des équations mathématiques sur n’importe quel navigateur. Sans plugin, sans galère, juste du JS pur.
Et cette v4 règle enfin des problèmes qu’on traîne depuis des années. Prenez par exemple le retour à la ligne automatique… Jusqu’à présent, si vous aviez une équation trop longue, tant pis pour votre mise en page. Et bien avec la v4, MathJax gère maintenant le line-breaking intelligent, aussi bien pour les équations en ligne que pour celles en bloc.
Les performances ont aussi pris un coup de boost considérable grâce à l’équipe qui a déplacé la génération de la synthèse vocale dans des web workers séparés. Concrètement, ça veut dire que même sur des pages bourrées d’équations complexes, votre navigateur reste réactif. Fini les freezes quand vous chargez un document de 200 pages avec des maths partout.
Côté typographie, c’est également du très lourd puisque MathJax 4.0 introduit un nouveau système de fonts par défaut avec une couverture de caractères bien plus étendue. Vous pouvez maintenant choisir parmi plusieurs polices mathématiques selon vos besoins.
L’intégration HTML dans les expressions LaTeX et MathML, sont également très cool car ça permet d’inclure des éléments HTML directement dans vos formules mathématiques. Des liens cliquables dans une équation, des tooltips interactifs, des animations… Les possibilités sont énormes pour créer des contenus éducatifs vraiment engageants.
Pour l’utiliser, il vous suffit d’inclure l’appel vers ce JS dans votre page HTML :
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
Puis d’aller lire
la documentation ici
pour apprendre à l’utiliser.
Voici un exemple d’intégration :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js">
</script>
</head>
<body>
When (a ne 0), there are two solutions to (ax^2 + bx + c = 0) and they are
[x = {-b pm sqrt{b^2-4ac} over 2a}.]
</body>
</html>
Et voici ce que c’est censé rendre visuellement :
Et si vous avez un WordPress, y’a même
des plugins pour ce truc
.
L’accessibilité n’est pas en reste avec un explorateur d’expressions mis à jour qui s’active par défaut comme ça, les utilisateurs de lecteurs d’écran peuvent naviguer dans les formules complexes avec une bien meilleure ergonomie. Ça permet de rendre les maths accessibles à tous.
Ah et j’allais oublier, MathJax 4.0 est maintenant disponible en modules ES6 en plus des modules CommonJS. Pour les développeurs qui bossent avec des stacks modernes, c’est un vrai plus pour l’intégration et l’optimisation des bundles.
Pour les développeurs de plateformes éducatives, de blogs scientifiques ou de wikis techniques, cette mise à jour va donc considérablement vous simplifier la vie. Plus besoin de bidouiller des solutions custom pour gérer les équations trop longues ou optimiser les performances sur mobile.
Un grand merci à Newa pour la découverte !
Source : korben.info