2017-09-19 6 views
0

J'utilise MathJax pour convertir mathml en svg. SVG utilisé par un périphérique qui le rend.Pause grand contenu mathml pour tenir dans la largeur du conteneur

contenu html

<!doctype html> 
<html> 
<head> 
    <meta charset='UTF-8'> 
    <style> 
    body { 
     font-size: 2em; 
    } 
    </style> 
<script type="text/javascript" 
      src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> 
    </script> 

</head> 
<body> 
<math xmlns='http://www.w3.org/1998/Math/MathML'> 
    <mrow> 
    <mfrac><mn>1</mn><mn>2</mn></mfrac> 
    <msub><mi>m</mi><mn>1</mn></msub> 
    <msubsup> 
     <mi>u</mi> 
     <mn>1</mn> 
     <mn>2</mn> 
    </msubsup> 
    </mrow> 
    <mo>+</mo> 
    <mrow> 
    <mfrac><mn>1</mn><mn>2</mn></mfrac> 
    <msub><mi>m</mi><mn>2</mn></msub> 
    <msubsup> 
     <mi>u</mi> 
     <mn>2</mn> 
     <mn>2</mn> 
    </msubsup> 
    </mrow> 
    <mrow> 
    <mtext> 
    Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf 
    Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf 
    </metxt> 
    </mrow> 
</math> 
<div> 
</body> 
</html> 

Depuis MathJax rend le MathML unique seule ligne, dans le navigateur, nous pouvons avoir une scrollbar pour voir la MathML complète. Dans mon cas, l'appareil ne peut pas afficher la barre de défilement, ce qui réduit la taille de police à afficher sur la ligne individuelle.

Je sais que mathjax a une configuration par laquelle nous pouvons le contrôler.

MathJax.Hub.Config({ 
           CommonHTML: { linebreaks: { automatic: true } }, 
           "HTML-CSS": { linebreaks: { automatic: true } }, 
            SVG: { linebreaks: { automatic: true } } 
          }); 

Cela ne fonctionne pas pour moi. Comment pouvons-nous rendre responsive Mathml?

Quelqu'un peut-il me suggérer comment puis-je casser mathml long pour tenir dans la largeur du conteneur.

Merci

Répondre

1

algorithme de MathJax pour rupture de ligne est pour briser les mathématiques, pas de texte. Il ne casse donc pas les lignes dans un élément <mtext>. (MathJax ne se casse pas dans un élément symbolique, il casse que les mathématiques à <mo> éléments, quand il le peut.)

Il est pas clair de votre exemple comment long texte dans <mtext> est utilisé (car il est tout simplement faux texte), mais il semble que le texte fasse probablement partie d'une phrase qui l'entoure, plutôt que les mathématiques elles-mêmes. Si c'est le cas, vous ne devez pas inclure cela dans les mathématiques, mais dans un texte sans le HTML environnant.

+0

MathJax ajoute toujours des informations de hauteur et de largeur aux éléments svg générés, valeur de hauteur trop petite pour s'adapter au contenu d'une seule ligne. Comment calcule-t-il réellement la hauteur. L'unité de hauteur et de largeur de BTW est toujours en ex, est-ce que mathjax a une option pour configurer l'unité générée. –

+0

Je suis confus par votre commentaire. Augmenter la hauteur rendrait la ligne * plus large *, donc je ne vois pas comment c'est trop petit. La hauteur et la largeur sont calculées pour correspondre à la hauteur d'un «x» dans les mathématiques avec la hauteur d'un «x» dans le texte environnant. C'est une raison pour laquelle il est donné en unités de "ex". Il n'y a pas de mécanisme pour changer cela à d'autres unités. –