kostja250581: Mit Javascript und DOM, MathML-Code erzeugen

Hallo liebes Leute,

ich stehe vor einem unlösbaren Problem und brauche Hilfe.

Auf einem Bereich meiner Seite soll MathML-Code erstellt werden.

Hier der HTML-Bereich:

  
<div id="Ausgabe">  
    <math xmlns="http://www.w3.org/1998/Math/MathML">  
        <mstyle id="0" displaystyle="true">  
  
        </mstyle>  
    </math>  
</div> <!-- Ausgabe -->  

Der Javascript Code soll dynamisch alles Ezeugen, dabei habe ich es zuerst auf diese Art versucht. Es soll ein Tag namens <mfrac> erstellt werden.

  
function bruch_bereich_eintragen() {  
    var mfrac = document.createElement('mfrac');  
    document.getElementById('0').appendChild(mfrac);  

Was zuerst zwar funktioniert, füge ich dort zwei Zahlen hinzu wird es nicht als Bruch angezeigt.

So sieht der richtige Code aus.

  
<mfrac>  
    <mn>78</mn>  
    <mn>56</mn>  
</mfrac>  

Nur leider wird es nicht in de MathML-Optik angezeigt. Man sieht nur ---->7856<----

Danach hab ich mich im Netz umgeschaut und folgenden Ansatz gefunden.

  
function bruch_bereich_eintragen() {  
    var mfrac = document.createElementNS('http://www.w3.org/1998/Math/MathML','mfrac');  
    document.getElementById('0').appendChild(mfrac);  

Leider funktioniert mit der NS erweiterung garnichts mehr. Woran liegt das ?

  1. Moin,

    <div id="Ausgabe">
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mstyle id="0" displaystyle="true">

      
    Ist denn 0 überhaupt eine gültige ID oder müssen die nicht mit \_ oder einem Buchstaben beginnen? Und reicht id, musst du den Namensraum berücksichtigen oder ist xml:id die richtige Wahl?  
      
    
    > Der Javascript Code soll dynamisch alles Ezeugen, dabei habe ich es zuerst auf diese Art versucht. Es soll ein Tag namens <mfrac> erstellt werden.  
    >   
    > ~~~javascript
      
    
    > function bruch_bereich_eintragen() {  
    >     var mfrac = document.createElement('mfrac');  
    >     document.getElementById('0').appendChild(mfrac);  
    > 
    
    

    Was zuerst zwar funktioniert, füge ich dort zwei Zahlen hinzu wird es nicht als Bruch angezeigt.

    Du kannst dir mal den erzeugten Code anzeigen lassen, dann siehst du, ob JavaScript auch tatsächlich das im DOM-Baum generiert:

    <mfrac>
        <mn>78</mn>
        <mn>56</mn>
    </mfrac>

    
    >   
    > […]  
    >   
    > Danach hab ich mich im Netz umgeschaut und folgenden Ansatz gefunden.  
    >   
    > ~~~javascript
      
    
    > function bruch_bereich_eintragen() {  
    >     var mfrac = document.createElementNS('http://www.w3.org/1998/Math/MathML','mfrac');  
    >     document.getElementById('0').appendChild(mfrac);  
    > 
    
    

    Leider funktioniert mit der NS erweiterung garnichts mehr. Woran liegt das ?

    Wie erzeugst du denn die mn – mit createElement oder mit createElementNS?

    Viele Grüße,
    Robert

    1. Ich glaube ich habe mich schlecht ausgedrückt.

      Mit den Befehlen.

        
      function bruch_bereich_eintragen() {  
           var mfrac = document.createElement('mfrac');  
           document.getElementById('0').appendChild(mfrac);  
      
      

      oder

        
      function bruch_bereich_eintragen() {  
           var mn = document.createElement('mn');  
           document.getElementById('0').appendChild(mn);  
      
      

      usw. werden die HTML Tags gesetzt, das funktioniert hervorragend. Das Problem ist das diese nicht in der Optik von MathML angezeigt werden.

      <mfrac></mfrac> ist das tag für ein Bruch <mn></mn> für eine Zahl. Setze ich zwei <mn> tags in ein <mfrac> wird das in HTML5 als Bruch angezeigt. Wenn man diese Sachen vorher in die HTML-Seite reinschreibt wird alles richtig angezeigt. Macht man es mit DOM werden zwar die Tags und der Inhalt richtig gesetzt aber die Anzeige als Bruch funktioniert nciht. Meine Frage war ob ich was übersehe oder falsch mache?

      1. Hi,

        document.getElementById('0').appendChild(mfrac);

        [...]

        document.getElementById('0').appendChild(mn);

        Damit sind die mn aber nicht in mfrac.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        1. Ja das weiß ich :D , der <mfrac> bekommt auch ne ID damit ich da reinschreiben kann. Wahr wohl ein missverstädliches Beispiel. Es wird alles so gesetzt wie es sein soll. Es wird nur falsch angezeigt. :-)

          1. Moin,

            Es wird alles so gesetzt wie es sein soll. Es wird nur falsch angezeigt. :-)

            Dann bring doch mal ein komplettes, vollständiges Beispiel.

            Viele Grüße,
            Robert

            1. Das wäre echt viel Code. Es sind zig Schleifen und if else Befehle damit das ganze die Struktur im HTML-Docoment bekommt die ich haben möchte. Ich weiß nicht wie ich das anschaulich hier darstellen kann.

              Ich mach ein kleines Beispiel und hoffe es wird verstanden!

              Es soll ein Bruch mit zwei Zahlen in dem folgenden <div> dargestellt werden!

                
              <div>  
                  <math xmlns="http://www.w3.org/1998/Math/MathML">  
                      <mstyle id="0" displaystyle="true">  
                
                      </mstyle>  
                  </math>  
              </div>  
              
              

              Hier die ein Beispielscript für so eine Funktion

                
              function zeichnen() {  
                  bruch_einzeichnen();  
                  zahl_einzeichnen('58');  
                  zahl_einzeichnen('76');  
              }  
                
              function bruch_einzeichnen() {       //Zeichnet die <mfrac>-Tags ein  
                  var mfrac = document.createElementNS('mfrac');  
                  mfrac.id='1';    // Der <mfrac>-Tag bekommt eine ID  
                  document.getElementById('0').appendChild(mfrac); //Das <mfrac> wird an die letzte position der id='0' geschrieben  
              }  
                
              funktion zahl_einzeichnen(inhalt) { //Selbe wie bei <mfrac> nur ohne ID vergabe und mit Inhalt  
                  var mn = document.createElementNS('mn');  
                  var zahl = document.createTextNode (inhalt);  
                  mn.appendChild(zahl);  
                  document.getElementById('1').appendChild(mn);  
              }  
              
              

              Wenn ich jetzt die Funktion Zeichnen auslöse, z.b durch einen Link

                
              <a href="#" onClick="zeichnen;">Zeichnen</a>  
              
              

              wird wie gewüscht alles so erstellt

                
              <div>  
                  <math xmlns="http://www.w3.org/1998/Math/MathML">  
                      <mstyle id="0" displaystyle="true">  
                
              <!-------------------mit DOM erstellter Code------------------------------>  
                
                          <mfrac id="1">  
                              <mn>58</mn>  
                              <mn>76</mn>  
                          </mfrac>  
              <!------------------------------------------------------------------------>  
                
                      </mstyle>  
                  </math>  
              </div>  
              
              

              Alles wird so gemacht wie ich es will. Leider nur im HTML-Code. Als Anzeige kommt nur 5876

              Was mach ich falsch ?

              1. Moin,

                Ich mach ein kleines Beispiel und hoffe es wird verstanden!

                Ja, aber ich verstehe immer noch nicht, warum du dich gegen den richtigen Namensraum sträubst.

                Es soll ein Bruch mit zwei Zahlen in dem folgenden <div> dargestellt werden!

                <div>
                    <math xmlns="http://www.w3.org/1998/Math/MathML">
                        <mstyle id="0" displaystyle="true">

                </mstyle>
                    </math>
                </div>

                  
                … Deshalb schlage ich vor, die beiden mn in obigem Beispiel direkt einzufügen, denn die brauchst du ja eh. Mit JavaScript kannst du dann deren Textknoten befüllen. Dann stimmt nämlich schon zumindest einmal der Namensraum.  
                  
                Viele Grüße,  
                Robert
                
                1. Ok und wenn ich weitere Brüche erstellen will? Ich will ja nicht einfach nur eine Darstellung, die kann ich ja einfach in die HTML-Datei intigrieren in dem ich sie vorher reinschreibe. Ich will das koplete und komplexe Blöcke dynamisch nach bedarf erstellt werden. Ein Beispiel dafür ist z.b hier.

                  Beipsiel

                  Dort werden Formeln im ASCI-Format eingegeben und umgewandelt in MathML-Code mit der Darstellung im Browser.

                  Es soll schon komplexer und einfach cooler werden was ich vor habe ;-)

                  1. Ich habe das Problem gelöst. Anscheinend darf man die Tags nicht einzelnd hintereinander Einfügen. Man muss sie erstmal als Block kombinieren und dann ausgiben.

                    Hier ein Beispiel

                      
                    function zeichen() {  
                      
                        var mnElement = document.createElementNS('http://www.w3.org/1998/Math/MathML', 'mn');  
                        mnElement.appendChild(document.createTextNode('5'));  
                      
                        var mnElement2 = document.createElementNS('http://www.w3.org/1998/Math/MathML', 'mn');  
                        mnElement2.appendChild(document.createTextNode('6'));  
                      
                        var mfracElement = document.createElementNS('http://www.w3.org/1998/Math/MathML', 'mfrac');  
                      
                        mfracElement.appendChild(mnElement);  
                      
                        mfracElement.appendChild(mnElement2);  
                      
                        document.getElementById('0').appendChild(mfracElement);  
                    }  
                    
                    

                    MFG

      2. Moin,

        Ich glaube ich habe mich schlecht ausgedrückt.

        Diesmal schon, aber das kriegen wir wieder hin.

        function bruch_bereich_eintragen() {
             var mfrac = document.createElement('mfrac');
             document.getElementById('0').appendChild(mfrac);

          
        Das Element mfrac, welches hier erzeugt wird, gehört zum XHTML-Namensraum. Allerdings gibt es in XHTML kein solches Element.  
          
        
        > ~~~javascript
          
        
        > function bruch_bereich_eintragen() {  
        >      var mn = document.createElement('mn');  
        >      document.getElementById('0').appendChild(mn);  
        > 
        
        

        Dito, nur für das mn-Element.

        usw. werden die HTML Tags gesetzt, das funktioniert hervorragend. Das Problem ist das diese nicht in der Optik von MathML angezeigt werden.

        … weil sie vermutlich zum XHTML-Namensraum gehören und nicht zum MathML-Namensraum. Der DOM-Inspector zeigt dir diese Information an.

        <mfrac></mfrac> ist das tag für ein Bruch <mn></mn> für eine Zahl. Setze ich zwei <mn> tags in ein <mfrac> wird das in HTML5 als Bruch angezeigt. Wenn man diese Sachen vorher in die HTML-Seite reinschreibt wird alles richtig angezeigt.

        An Hand des Beispiels aus dem Ausgangsbeitrag ist das auch kein Wunder. Indem du das Element math aus dem MathML-Namensraum nutzt, gehören natürlich auch alle Kind-Elemente dazu.

        Macht man es mit DOM werden zwar die Tags und der Inhalt richtig gesetzt aber die Anzeige als Bruch funktioniert nciht.

        Ja, denn die Elemente gehören sehr wahrscheinlich zum XHTML-Namensraum (oder gar keinem), statt zu MathML.

        Viele Grüße,
        Robert

    2. Hallo,

      <mstyle id="0" displaystyle="true">
      Ist denn 0 überhaupt eine gültige ID ...

      in HTML 5 schon.

      oder müssen die nicht mit _ oder einem Buchstaben beginnen?

      Doch, in HTML 4.01 und XHTML 1.x müssen sie.

      So long,
       Martin

      --
      Der Sinn einer Behörde besteht in ihrer Existenz.
        (alte Beamtenweisheit)
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. Moin Martin,

        oder müssen die nicht mit _ oder einem Buchstaben beginnen?

        Doch, in HTML 4.01 und XHTML 1.x müssen sie.

        Gibt es eigentlich einen Grund dafür?

        Viele Grüße,
        Robert

        1. Hallo Robert,

          oder müssen die nicht mit _ oder einem Buchstaben beginnen?
          Doch, in HTML 4.01 und XHTML 1.x müssen sie.
          Gibt es eigentlich einen Grund dafür?

          ja, einen recht trivialen. Elemente mit einer ID treten implizit als Javascript-Objekte unterhalb von document auf. Und da hat man wohl damals zweckmäßigerweise festgelegt, dass IDs auch den Javascript-Regeln für Bezeichner entsprechen müssen.

          Ciao,
           Martin

          --
          Es sagte...
          ein korpulenter Lehrer zu einem Schüler, der ihn ein Fass genannt hatte: "Nein. Ein Fass ist von Reifen umgeben, ich dagegen von Unreifen."
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(