Matthias Scharwies: MathML - Updates und Feedback

problematische Seite

Guten Morgen,

MathML

ich habe unsere Tutorials in ''social media'' beworben - da kam doch gleich ein Wikipedia-Zitat als DM zurück:

alt: "MathML [gilt] für die manuelle Editierung als unhandlich, sodass nur Programme zur Generierung zum Einsatz kommen. Durch die Syntax lässt es sich nur schwer bzw. gar nicht durch CSS formatieren. Daher wird zur Erstellung mathematischer Dokumente häufig auf das altbewährte Textsatzsystem LaTeX gesetzt."

Grund Genug, den Wikipedia-Artikel zu aktualisieren[1]. Mittlerweile ist er gesichtet und wir sind dort verlinkt!

neu: MathML Core ist als XML-Dialekt integraler Bestandteil von HTML5. Es ist auf die modernen Browser zugeschnitten und wurde speziell für die Zusammenarbeit mit anderen Webstandards entwickelt, darunter HTML, CSS, DOM und JavaScript.

Durch die Syntax lässt es sich durch CSS formatieren. Mit JavaScript kann das DOM eines MathML-Dokuments ausgelesen und dynamisch verändert werden.

Eine weitere DM behandelte vermeintliche Render-Unterschiede bei folgendem Quellcode:

<mo>[</mo>
    <munderover>
        <mi>lim</mi>
       <mrow> z → ∞  </mrow>
      <mrow></mrow>
  </munderover>
  <msup>
     <mrow><mo>(</mo><mn>1</mn><mo>+</mo>
     <mfrac>
			 <mn>1</mn>
			 <mi>z</mi>
		</mfrac>
                    <mo>)</mo></mrow>
    <mn>2</mn>
  </msup>
 <mo>]</mo>

Findet ihr den Fehler? [2]

Das zweite Problem: Klammern, für die früher das mfenced-Element zuständig waren, benötigen im Chrome ein vorgeschaltetes mrow:

<mrow><mo>(</mo>

   ...

</mo>)</mo><mrow>

... sonst werden sie nicht größengerecht gerendert. Wo könnte man das im Tutorial unterbringen?

Das finde ich schon zu viel Info - ein weiteres Unterkapitel aufmachen?

ToDo: Gleichungen umformen

Ich möchte die Zinseszinsformel nach n auflösen.

Eigentlich ist das eine Lösung auf der Suche nach einem Problem:

  1. Die Formeln sollen untereinander stehen; rechts kommt jeweils der Rechenschritt
  2. Für die Anordnung würde ich jeweils einzelne math-Formeln nehmen, die dann im Grid liegen -> das als Alternative zu unserer Layout-Tabelle im Einsteiger-Tutorial.

Kennt ihr einen guten JavaScript-Algorithmus, der Gleichungen löst? Oder sollte man den notfalls nur verlinken?

Herzliche Grüße

Matthias Scharwies

--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

  1. https://de.m.wikipedia.org/wiki/Mathematical_Markup_Language ↩︎

  2. Die token-Elemente müssen zwingend notiert werden! Firefox rendert auch so; Chrome „verschluckt“ alles, was nicht ausgezeichnet ist! ↩︎

  1. problematische Seite

    Hallo Matthias,

    beim Grenzwert würde ich eher schreiben:

    <munder>
      <mo>lim</mo>
      <mrow>
        <mi>z</mi>
        <mo></mo>
        <mo></mo>
      </mrow>
    </munder>
    
    

    Als Hinweis für untereinander platzierte Formeln:

    Die seit 01/23 mit MathML angereicherte Chromium-Engine hat die starke Tendenz, Formeln zu zentrieren, auch wenn man beim math-Element indentalign="left" setzt. In diesem Beispiel gelang es mir nach einigem Basteln mittels max-width: max-content.

    Generell gilt wohl, dass Chromium primär auf das aktuell spezifizierte MathML Core setzt, während Firefox und Safari flexibler mit den lange existierenden Standards agieren. Zudem gibt es auch weiterhin die JS-Bibliothek MathJax (hier für das genannte Beispiel verwendet).

    Über die Onlinesemester der letzten Jahre ist bei mir auch eine halbwegs präsentable Vorlesung zu MathML angefallen. <Have_fun/>!

    Grüße,
    Thomas

    1. problematische Seite

      Servus!

      Hallo Matthias,

      beim Grenzwert würde ich eher schreiben:

      <munder>
        <mo>lim</mo>
        <mrow>
          <mi>z</mi>
          <mo></mo>
          <mo></mo>
        </mrow>
      </munder>
      
      

      Ja, eben! Chrome hat das gar nicht gerendert. Auch das munderover mit leerem mrow als drittem Parameter war eher ungeschickt.

      Als Hinweis für untereinander platzierte Formeln:

      Die seit 01/23 mit MathML angereicherte Chromium-Engine hat die starke Tendenz, Formeln zu zentrieren, auch wenn man beim math-Element indentalign="left" setzt. In diesem Beispiel gelang es mir nach einigem Basteln mittels max-width: max-content.

      Hab ich schon gefunden und (im noch unveröffentlichten) Algebra-Tutorial verlinkt.

      Generell gilt wohl, dass Chromium primär auf das aktuell spezifizierte MathML Core setzt, während Firefox und Safari flexibler mit den lange existierenden Standards agieren. Zudem gibt es auch weiterhin die JS-Bibliothek MathJax (hier für das genannte Beispiel verwendet).

      Ja, das wird wohl so wie bei SVG 2.0: Was Chrome nicht gefällt, wird auf die nächste Version (und damit ins Nirvana) verschoben. Und was Chrome gefällt, wird dann zum WHATWG-Standard ;-)

      Über die Onlinesemester der letzten Jahre ist bei mir auch eine halbwegs präsentable Vorlesung zu MathML angefallen. <Have_fun/>!

      Danke, ist verlinkt!

      Herzliche Grüße

      Matthias Scharwies

      --
      Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
      1. problematische Seite

        Hallo Matthias,

        Ja, eben! Chrome hat das gar nicht gerendert. Auch das munderover mit leerem mrow als drittem Parameter war eher ungeschickt.

        Das munder-Beispiel klappt in Edge, Iron und Opera (gerade keinen nativen Chrome zur Hand, sollte aber nicht anders rendern).

        Ja, das wird wohl so wie bei SVG 2.0: Was Chrome nicht gefällt, wird auf die nächste Version (und damit ins Nirvana) verschoben. Und was Chrome gefällt, wird dann zum WHATWG-Standard ;-)

        Ja, im Januar wurde großspurig getönt, dass man nun der ganzen Welt MathML bringt 😎. Dabei war es ja bereits in Chrome 24 (2012) mal drin und andere Browser sind lange voraus. Insofern erwarte ich da wenig Innovation.

        Über die Onlinesemester der letzten Jahre ist bei mir auch eine halbwegs präsentable Vorlesung zu MathML angefallen. <Have_fun/>!

        Danke, ist verlinkt!

        Danke Dir.

        Grüße,
        Thomas

        1. problematische Seite

          Hallo,

          Das munder-Beispiel klappt in Edge, Iron und Opera (gerade keinen nativen Chrome zur Hand, sollte aber nicht anders rendern).

          im MacOS-Chrome klappt das mit munder auch.

          Gruß
          Jürgen

        2. problematische Seite

          Servus!

          Hallo Matthias,

          Ja, eben! Chrome hat das gar nicht gerendert. Auch das munderover mit leerem mrow als drittem Parameter war eher ungeschickt.

          Das munder-Beispiel klappt in Edge, Iron und Opera (gerade keinen nativen Chrome zur Hand, sollte aber nicht anders rendern).

          Hab' jetzt lang überlegt, ob ich's poste - aber es ist ja öffentlich. Es ging um diese Formel:

          https://elbosso.github.io/wie_man_eindruck_schindet.html (screenshot)

          https://elbosso.github.io (mathml)

          und da hatte der Chrome 111 eben nicht ...

          Herzliche Grüße

          Matthias Scharwies

          --
          Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
          1. problematische Seite

            Hallo Matthias,

            Hab' jetzt lang überlegt, ob ich's poste - aber es ist ja öffentlich. Es ging um diese Formel:

            https://elbosso.github.io/wie_man_eindruck_schindet.html (screenshot)

            https://elbosso.github.io (mathml)

            und da hatte der Chrome 111 eben nicht ...

            Schau mal in den Quellcode, es sind einige Elemente nicht richtig ausgezeichnet (wohlgeformt). Firefox unterkringelt die Tags gut sichtbar.

            Zudem liegt das Unendlich-Zeichen direkt in <mrow>∞</mrow>, was nicht zulässig ist. Hatten wir ja gerade, also nimm halt <mn>∞</mn>.

            Grüße,
            Thomas

            1. problematische Seite

              Servus!

              Hallo Matthias,

              Hab' jetzt lang überlegt, ob ich's poste - aber es ist ja öffentlich. Es ging um diese Formel:

              https://elbosso.github.io/wie_man_eindruck_schindet.html (screenshot)

              https://elbosso.github.io (mathml)

              und da hatte der Chrome 111 eben nicht ...

              Eine weitere DM behandelte vermeintliche Render-Unterschiede bei folgendem Quellcode:

              Schau mal in den Quellcode, es sind einige Elemente nicht richtig ausgezeichnet (wohlgeformt). Firefox unterkringelt die Tags gut sichtbar.

              Zudem liegt das Unendlich-Zeichen direkt in <mrow>∞</mrow>, was nicht zulässig ist. Hatten wir ja gerade, also nimm halt <mn>∞</mn>.

              Js, ebent. Das wollte ich im Ursprungspost doch sagen.

              Findet ihr den Fehler? [1]

              Viele Fachleute - auch bei SELFHTMl - hatten ursprünglich experimentiert und dann gemeint, dass MathML …

              1. nicht ausgereift ist
              2. den Download bestimmter Schriften auf Seiten der Nutzer erfordert.

              Kaum hatte ich unser Tutorial auf Mastodon beworben, kamen eben diese zwei Personen und meinten, dass

              1. MathML nicht mit CSS funktionierte (den Wikipedia-Artikel hab ich aktualisiert)
              2. Chrome falsch rendert. Ich hatte dem BlogSchreiber eben diese Markup-Fehler privat gepostet und unser Tutorial ergänzt:

              {{Beachten|Sie, dass Chrome, Edge und Opera '''Terme ohne Verwendung der Basis-Elemente nicht rendern'''!}}

              Herzliche Grüße

              Matthias Scharwies

              --
              Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

              1. Die token-Elemente müssen zwingend notiert werden! Firefox rendert auch so; Chrome „verschluckt“ alles, was nicht ausgezeichnet ist! ↩︎

    2. problematische Seite

      Hallo,

      <Have_fun/>!

      Danke! Sehr cool. Hab nur mal in 2-3 Stellen reingezappt und stolpere über deine Streitfrage in der 34. Minute, ob infinity ein Identifier oder Operator sein soll. Warum nicht Number?

      Gruß
      Kalk

      1. problematische Seite

        Hallo,

        … ob infinity ein Identifier oder Operator sein soll. Warum nicht Number?

        habe ich mich auch gefragt.

        Gruß
        Jürgen

      2. problematische Seite

        Hallo Kalk,

        <Have_fun/>!

        Danke! Sehr cool. Hab nur mal in 2-3 Stellen reingezappt und stolpere über deine Streitfrage in der 34. Minute, ob infinity ein Identifier oder Operator sein soll. Warum nicht Number?

        Guter Punkt, darüber habe ich vorhin beim munder-Beispiel auch (wieder) nachgedacht und mo verwendet. Kurz in die kommende 4.0-Spec geschaut und dort wird gesagt, dass mn eher nicht für Dinge wie Konstanten genommen werden soll. Von daher wird je nach Tutorial mi/mo verwendet, im MDN wiederum durchaus <mn>∞</mn>.

        In der Content-Markup-Form gibt es übrigens separate Elemente wie <infinity/>.

        Grüße,
        Thomas

        1. problematische Seite

          Kürzlich ist mir intuitiv auch <mn>∞</mn> in dieses Beispiel geraten. ;)

          Grüße,
          Thomas

    3. problematische Seite

      Hier noch drei Beispiele aus dem Video:

      Matheformel
      Physikformel
      THG Mathemann

      Grüße,
      Thomas