Utilisation de MathJax et MathML pour une page dynamique
Bonjour,
Je suis professeur de mathématiques et je me suis lancé dans la réalisation d'un site internet en Html,css et javascript pour faire du calcul mental en ligne.
J'ai découvert hier que MathML (que j'utilise pour afficher des fractions) n'est supporté que par très peu de navigateurs.
J'ai ensuite trouvé une solution avec MathJax mais, après de nombreuses recherches et essais, impossible d'aboutir.
Je vous explique plus clairement mon problème:
J'ai une fonction js qui crée et insère un calcul mental aléatoire dans ma page HTML en utilisant les balises MathML puis lance un chrono.
J'ai mis dans l'entête de la page HTML:
Code:
1
2
| <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script> |
mais je voudrais recharger la recherche des balises MathML dans la page à chaque insertion de nouveau contenu.
J'ai vu qu'on pouvait utiliser
Code:
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
mais impossible d'y arriver. La console affiche
Citation:
MathJax.Hub is undefined
.
Je sollicite donc votre aide car je crois que cela dépasse mes connaissances et je trouve dommage de me passer de l'écriture fractionnaire dans mon calcul mental.
J'espère avoir été clair. N’hésitez pas à me demander davantage d'éléments.
Merci d'avance pour votre aide
Benjamin
Autre solution pour MathML non supporté sur certains navigateurs
Merci beaucoup à tous les deux pour vos réponses et votre réactivité!
Effectivement, cela fonctionne. J'avais commencé à explorer ce site mais j'avais du mal à m'y retrouver et n'était pas sûr que c'était la fonction adaptée à mon problème.
Cela fonctionne donc bien, merci!
Cela dit, j'ai finalement trouvé une solution avant d'avoir vos réponses qui me satisfait mieux (temps de chargement moins loin il me semble et accès à la feuille de style pour gérer plus facilement le côté esthétique). Je la présente au cas où cela pourrait intéresser un autre visiteur:
J'ai mis dans le head:
Code:
<script type="text/javascript" src="mspace.js"></script>
qui charge le fichier mspace.js avec dedans la fonction suivante:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| (function () {
"use strict";
window.addEventListener("load", function () {
var box, div, link, namespaceURI;
// First check whether the page contains any <math> element.
namespaceURI = "http://www.w3.org/1998/Math/MathML";
// Create a div to test mspace, using Kuma's "offscreen" CSS
document.body.insertAdjacentHTML("afterbegin", "<div style='border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;'><math xmlns='" + namespaceURI + "'><mspace height='23px' width='77px'></mspace></math></div>");
div = document.body.firstChild;
box = div.firstChild.firstChild.getBoundingClientRect();
document.body.removeChild(div);
if (Math.abs(box.height - 23) > 1 || Math.abs(box.width - 77) > 1) {
// Insert the mathml.css stylesheet.
link = document.createElement("link");
link.href = "mathml.css";
link.rel = "stylesheet";
document.head.appendChild(link);
}
});
}()); |
qui charge la feuille de style mathml.css si le navigateur ne supporte pas MathML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| @namespace "http://www.w3.org/1998/Math/MathML";
/* math */
math {
display: inline;
text-indent: 0;
}
math[display="block"] {
display: block;
text-align: center;
}
/* fraction */
mfrac {
display: inline-block !important;
vertical-align: -50%;
border-collapse: collapse;
text-align: center;
font-size: 6vmin;
}
mfrac > * {
display: block !important;
}
mfrac > * + * {
display: inline-block !important;
vertical-align: top;
}
mfrac:not([linethickness="0"]) > *:first-child {
border-bottom: solid 4px;
} |
J'ai trouvé cette solution sur https://developer.mozilla.org/fr/doc...thML/Authoring et je l'ai adapté/simplifié (je n'ai gardé que la partie css sur les fractions mais il y a beaucoup plus dans le document d'origine)
Voilà, je trouve que c'est pas mal aussi comme solution et cela évite d'être dépendant de fichiers en ligne.
Merci en tout cas encore pour votre aide!
Je vous mets ci-dessous l'adresse de mon site web (que je continue à développer quand j'ai du temps) comme mathieu semble intéressé par les maths ;)
Hésitez pas à me dire ce que vous en pensez (c'est du code d'amateur mais je m'amuse bien!)
https://amazing-austin-66a8c9.netlif...alcul%20mental (je vous mets que la page calcul mental car c'est celle sur laquelle je travaille pour le moment)
Benjamin
