Modif de balises mathml par javascript non mise à jour à l'affichage

**gdumont** · 02/04/2020, 14h18

Bonjour,

Je rencontre un pb bizarre et malgré mes recherche, je ne vois pas de solution:

J'ai une fonction javascript qui ajoute un arbre mathml pour afficher 1/2 en fraction verticale.

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
<head>
 
<script type="text/javascript"> 
 
function addFrac(el) {
        var mathbox = el.parentNode;
        var f = document.createElement('mfrac');
        var n = document.createElement('mi');
        var nn = document.createTextNode("1");
        n.appendChild(nn);
        var d = document.createElement('mi');
        var dd = document.createTextNode("2");
        d.appendChild(dd);
        f.appendChild(n);
        f.appendChild(d);
        mathbox.appendChild(f);
        mathbox.removeChild(el);
}
 
</script> 
</head>
 
<html>
	<math xmlns="http://www.w3.org/1998/Math/MathML">
 	   <mi onclick="addFrac(this);">Ajouter 1/2</mi>
	</math>
 
</html>

Le code mathml modifié par javascript est bon mais firefox affiche juste "12" et non la fraction mise en forme.

Si ensuite je vais dans l'inspecteur, que j'édite le DOM du bloc mathml (j'ajoute un retour chariot par exemple et je l'enlève et je quitte l'édition), l'affichage est mis à jour dans firefox et je vois la fraction.

Comment puis-je faire pour que l'affichage puisse se mettre à jour dès la modif du DOM par le javascript ?

Merci beaucoup pour vos contributions.

**NoSmoking** · 03/04/2020, 10h19

Bonjour et bienvenue sur DVP.

Visiblement le moteur de rendu de FireFox ne prend pas en compte ces éléments si ils sont ajoutés via un appendChildl mais supporte très bien ces éléments si il sont injectés sous forme de innerHTML ou via insertAdjacentHTML.

Code :

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

1
2
3
4
5
const html = "<mfrac><mi>3</mi><mi>6</mi></mfrac>";
// marche avec
mathbox.insertAdjacentHTML("beforeend", html);
// ou
mathbox.innerHTML = html;

**melka one** · 03/04/2020, 18h05

jour

ou utilise createElementNS et pour les chiffres utilise createTextNode

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
function addFrac(el) {
 
var mathNS = "http://www.w3.org/1998/Math/MathML";
 
 
        var mathbox = el.parentNode;
        var f = document.createElementNS(mathNS,'mfrac');
        var n = document.createElementNS(mathNS,'mi');
        var nn = document.createTextNode('1');
        n.appendChild(nn);
        var d = document.createElementNS(mathNS,'mi');
        var dd = document.createTextNode('2');
        d.appendChild(dd);
        f.appendChild(n);
        f.appendChild(d);
        mathbox.appendChild(f);
        mathbox.removeChild(el);
}

**NoSmoking** · 03/04/2020, 19h24

ou utilise createElementNS

Bien vu, c'est traité comme du SVG et non du HTML, bizarre mais j'en prends note même si vu le non support je ne pense pas m'en servir de sitôt

!

La spécification n'est pas d'une grande aide sur ce coup :

Envoyé par 2.1.2 MathML and Namespaces

xmlns="http://www.w3.org/1998/Math/MathML" may be used on the math element, it will be ignored by the HTML parser, which always places math elements and its descendents in the MathML namespace (other than special rules described in Appendix A Parsing MathMLfor invalid input, and for annotation-xml.

Mathematical Markup Language (MathML)

Modif de balises mathml par javascript non mise à jour à l'affichage

JavaScript

Discussions similaires

Partager

Partager