Utilisation de MathJax et MathML pour une page dynamique

**Benjamin Arsac** · 17/05/2021, 14h19

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

mais impossible d'y arriver. La console affiche

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

**NoSmoking** · 18/05/2021, 16h57

Bonjour et bienvenue sur DVP.
Je te conseilles de regarder cette page https://www.mathjax.org/#demo, il semblerait qu'il y ait ce que tu cherches à faire via une méthode mise à disposition : Updating Previously Typeset Content

**mathieu** · 18/05/2021, 17h53

bien vu NoSmoking, j'avais commencer à faire des tests parce que je trouve ça intéressant et j'ai l'impression que ça va régler le souci de Benjamin Arsac

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>
</head>
<body>
<p>
  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}.\]
</p>
  <div id="azdf"></div>  
  <script>
    setTimeout(function () {
      // test d'une modification qui se fait 2 secondes aprés le chargement de la page
      document.getElementById("azdf").innerHTML = "\\(\\sqrt{b^2-4ac} \\ne 0\\)";
      
      // forcer la mise à jour des formules
      MathJax.typeset();
      
    }, 2000);
  </script>
</body>
</html>

**Benjamin Arsac** · 19/05/2021, 20h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="mspace.js"></script>

qui charge le fichier mspace.js avec dedans la fonction suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ABCIWEB** · 19/05/2021, 21h22

Envoyé par Benjamin Arsac

Voilà, je trouve que c'est pas mal aussi comme solution et cela évite d'être dépendant de fichiers en ligne.

Merci d'avoir posté ta solution, et en effet c'est toujours plus rassurant de ne pas être dépendant d'une source externe.

**mathieu** · 19/05/2021, 22h10

Envoyé par Benjamin Arsac

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)

c'est noté je la mets dans mon marque-pages.
juste une remarque, sur cette page il y a une faute de typographie, "sixièmes" a pour abréviation "6^es" et "quatrièmes" => "4^es".
vous pouvez retrouvez des informations à ce sujet dans cet article :
https://sqlpro.developpez.com/cours/normes/#LI-B-1

Utilisation de MathJax et MathML pour une page dynamique

JavaScript

Discussions similaires

Partager

Partager