mathml

[Joachim]

Guten Morgen,

Mein Problem. Wie kann ich die Größe der 2. Wurzel an die der ersten anpassen? Weiß jemand, wie das geht?

Edit Rolf B:
Als ~~~xml markiert, Zeilenumbrüche eingefügt.
MathML an sich ist UNVERÄNDERT (falsch)

<math mathsize="1em">
<msqrt>
<mrow>
<mi>a</mi>
<mi>x</mi>
<mo>&#xb2;</mo>
<mo>-</mo>
<mn>2</mn>
<mi>a</mi>
<mi>x</mi>
<mo>+</mo>
<mn>13</mn>
</mrow>
</msqrt>
<mo>=</mo>
<msqrt>
<mrow><mo>(</mo></mrow>
<mi>a</mi>
<mo>+</mo>
<mi>2</mi>
<mrow><mo>)</mo></mrow>
<mo>&#xb2;</mo>
<mo>-</mo>
<mi>a</mi>
<mi>x</mi>
<mo>+</mo>
<mn>1</mn>
</math>

Gruß Joachim

[MrMurphy]

Erst mal den Quelltext strukturiert aufschreiben. Dann ist auf einen Blick sichtbar das die zweite "schließende" Wurzel

</msqrt>

fehlt.

Ich habe zwar so gut wie keine Erfahrung mit MathML, aber ich habe einfach mal auf Verdacht die "seltsamste" Zeile (bei strukturiertem Test) / Anweisung

<mo>&#xb2;</mo>

gelöscht, danach waren die beiden Wurzeln gleich hoch.

[Joachim]

Lieber MrMurphy,

ja, das stimmt, aber dann fehlt die Quadrierung von (a+b).

Gruß Joachim

[MrMurphy]

Das die Quadrierung fehlt ist mir schon klar. Mir geht es erst mal darum das Verhalten der unterschiedlich hohen Wurzelzeichen zu ergründen. Mit MathML habe ich mich noch nicht intensiv beschäftigt.

Zunächst halte ich MathML für noch nicht sehr ausgereift. So ist mir nicht bekannt ob die unterschiedlichen Browser unterschiedliche Ergebnisse liefern.

Meine Beobachtungen habe ich mit dem Firefox gemacht.

Wenn du MathML verwendest solltest du es auch durchgehend verwenden. In deinem Fall also auch die Quadrierung mit MathML-Mitteln erstellen und nicht mittels HTML-Zeichen.

Die Höhe des Wurzelzeichens wird wohl aus dessen Inhalt jeweils individuell vom Browser errechnet und damit bestimmt.

In meinem Firefox bewirkt zum Beispiel allein das Hinzufügen von Klammern (ohne Quadrierung) eine leichte Vergrößerung des Wurzelzeichens. Ich vermute, das liegt daran, das Klammern in der Praxis auf Papier immer etwas größer als ihr Inhalt dargestellt werden.

Wenn dann der Klammer eine Quadrierung hinzugefügt wird muss das Wurzelzeichen noch größer werden, da die Quadrierung über die Klammer hinausgeht. Bei der Berechnung macht der Firefox dann wohl einen größeren Sprung als eigentlich notwendig, was dann zu der deutlichen Vergrößerung führt. Ob das vom Browser so gewollt ist oder es sich um ein bislang nicht bekanntes Problem handelt weiß ich nicht.

Eine Angleichung der Größe der Wurzelzeichen untereinander ist offensichtlich nicht vorgesehen.

Das sind alles praktische Beobachtungen von mir ohne direktes Hintergrundwissen zu MathML.

Eine konkrete Lösung kann ich dir nicht anbieten, aber vielleicht helfen meine Beobachtungen weiter.

[MrMurphy]

Hallo

Ich habe grade noch eine interessante Entdeckung gemacht. Die Darstellung scheint auch von der Schriftgröße beeinflusst zu werden.

Ersetze mal

mathsize="1em"

durch 2em, 3em oder auch Kommawerte. Dann werden die Wurzelzeichen in meinem Firefox nicht mehr so unterschiedlich angezeigt. Vielleicht hilft dir das weiter.

Wobei ich das Attribut durch CSS ersetzen würde. Wenn du mehrere MathML-Anzeigen hast könntest du so deren Schriftgröße einheitlich an einer Stelle ändern.

[Gunnar Bittersmann]

@@MrMurphy

mathsize="1em"

Wobei ich das Attribut durch CSS ersetzen würde.

Ja, zumal das Attribut missbilligt ist. Browser könnten die Unterstützung dafür jederzeit einstellen.

🖖 Live long and prosper

[MrMurphy]

Ich habe mal ein Beispiel deiner Darstellung nach den mir bekannten MathML-Regeln erstellt. Einige deiner Probleme rühren offensichtlich daher, das du die MathML-Regeln nicht konsequent anwendest, sondern bei Problemen schnell vermeintliche "einfache" Tricks anwendest, die dich dann aber quälen. Zum Beispiel bei der Klammersetzung.

Die zweite Wurzel wird zwar noch immer etwas größer darstellt, das ist meiner Meinung nach aber von MathML so gewollt, da der Inhalt höher ist. Für mich sieht das korrekt aus.

Informationen stehen auch im Quelltext. Du kannst ihn dir ja mal anschauen und auch zum eigenen Testen verwenden:

<!DOCTYPE html>
<html lang="de">

<head>
   <meta charset="utf-8">
   <title>MathML</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   html {
   }
   h1 {
      font-size: 2rem;
   }
   h2, h3, h4, h5, h6, p {
      font-size: 1.6rem;
   }
   .gross {
      font-size: 2rem;
   }
   </style>
</head>

<body>
   <main class="content">
      <h1>MathML - Anzeige bei unterschiedlichen Schriftgrößen</h1>
      <p>Meine Beobachtungen und Überlegungen habe ich mit dem Firefox-Browser gemacht. Ich verwende so wenig CSS wie möglich, um die Ergebnisse nicht durch eigene Angaben zu verfälschen.</p>

      <h2>Ausgangsproblem</h2>
      <p>Ursprung: <a href="https://forum.selfhtml.org/self/2025/jul/26/mathml/1821099#m1821099">https://forum.selfhtml.org/</a></p>
      <p>Der MathML-Quelltext wurde komplett auf MathML geändert, ohne jede weitere Formatierung. Die Wurzelzeichen werden zwar auch unterschiedich dargestellt, aber nicht so drastisch und auf einer Grundlinie, damit viel harmonischer. So ist es meiner Meinung nach auch von MathML vorgesehen.</p>
      <section>
         <math>
            <msqrt>
               <mi>a</mi>
               <mi>x</mi>
               <mn>2</mn>
               <mo>-</mo>
               <mn>2</mn>
               <mi>a</mi>
               <mi>x</mi>
               <mo>+</mo>
               <mn>13</mn>
            </msqrt>
            <mo>=</mo>
            <msqrt>
               <msup>
                  <mfenced separators=''>
                     <mi>a</mi>
                     <mo>+</mo>
                     <mn>2</mn>
                  </mfenced>
                  <mn>2</mn>
               </msup>
               <mo>-</mo>
               <mi>a</mi>
               <mi>x</mi>
               <mo>+</mo>
               <mn>1</mn>
            </msqrt>
         </math>
      </section>

      <h2>Beispiel: Schriftgröße 2rem durch CSS</h2>
      <section>
         <math class="gross">
            <msqrt>
               <mi>a</mi>
               <mi>x</mi>
               <mn>2</mn>
               <mo>-</mo>
               <mn>2</mn>
               <mi>a</mi>
               <mi>x</mi>
               <mo>+</mo>
               <mn>13</mn>
            </msqrt>
            <mo>=</mo>
            <msqrt>
               <msup>
                  <mfenced separators=''>
                     <mi>a</mi>
                     <mo>+</mo>
                     <mn>2</mn>
                  </mfenced>
                  <mn>2</mn>
               </msup>
               <mo>-</mo>
               <mi>a</mi>
               <mi>x</mi>
               <mo>+</mo>
               <mn>1</mn>
            </msqrt>
         </math>
      </section>

      <h2>Beispiel: Schriftgröße 2rem durch Attribut:  mathsize="2rem"</h2>
      <p>Ergebnis: Die Wurzel wird (zumindest in meinem Firefox) nicht korrekt dargestellt. Welche Einheit (em oder rem) ich verwende macht keinen Unterschied.</p>
      <section>
         <math mathsize="2rem">
            <msqrt>
               <mi>a</mi>
               <mi>x</mi>
               <mn>2</mn>
               <mo>-</mo>
               <mn>2</mn>
               <mi>a</mi>
               <mi>x</mi>
               <mo>+</mo>
               <mn>13</mn>
            </msqrt>
            <mo>=</mo>
            <msqrt>
               <msup>
                  <mfenced separators=''>
                     <mi>a</mi>
                     <mo>+</mo>
                     <mn>2</mn>
                  </mfenced>
                  <mn>2</mn>
               </msup>
               <mo>-</mo>
               <mi>a</mi>
               <mi>x</mi>
               <mo>+</mo>
               <mn>1</mn>
            </msqrt>
         </math>
      </section>

      <h2>Beispiele für Klammersetzung</h2>
      <p><b>&lt;mfenced&gt;</b> Die zu verwendenden Klammern werden mit open=&quot;|&quot; und close=&quot;&gt;&quot;&gt; angegeben. Ohne Angabe werden runde Klammern() verwendet. Die Angabe separators='' (zwei einzelne Anführungszeichen) gibt an, wie die Elemente getrennt werden. Wird nichts angegeben, dann wird mit Komma getrennt. Soll kein Trennsymbol verwendet werden, dann muß separators='' (zwei einzelne Anführungszeichen) gesetzt werden.</p>
      <section>
         <math class="gross">
            <mfenced>
               <mi>a</mi>
               <mi>b</mi>
               <mi>c</mi>
            </mfenced>
            <mfenced separators=''>
               <mi>a</mi>
               <mi>b</mi>
               <mi>c</mi>
            </mfenced>
            <mfenced open="|" close=">">
               <mi>a</mi>
               <mi>b</mi>
               <mi>c</mi>
            </mfenced>
         </math>
      </section>

      <h2>Script</h2>
      <p>Zur Darstellung von Klammern wird (mal wieder:) zumindest in meinen Firefox ein Script benötigt. Wahrscheinlich korrigiert es auch andere Darstellungsprobleme.</p>
      <p>Ob das von mir verwendete Script online verwendet werden darf weiß ich nicht. Dieses Beispiel dient aber dem Lernen und privaten ausprobieren und testen. Zudem veröffentliche ich mit den Quelltext nur einen Link zu dem Script und verlinke es nicht. Die aktive Verwendung des Links unterliegt also der eigenen Verantwortung.</p>

      <h2>Inspiration</h2>
      <p>Ich habe mich von folgender Seite inspirieren lassen:</p>
      <p><a href="http://elsenaju.info/mathml/MathML-Beispiele.htm">http://elsenaju.info/mathml/MathML-Beispiele.htm</a></p>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML" async></script>

   </main>
</body>

</html>

[Gunnar Bittersmann]

@@MrMurphy

nach den mir bekannten MathML-Regeln erstellt.

Die du woher hast? Anscheinend nicht aus guten Quellen wie der Spec MathML Core oder MDN.

Einige deiner Probleme rühren offensichtlich daher, das du die MathML-Regeln nicht konsequent anwendest, sondern bei Problemen schnell vermeintliche "einfache" Tricks anwendest, die dich dann aber quälen. Zum Beispiel bei der Klammersetzung.

Ach was‽

mfenced ist kein Bestandteil von MathML Core. Steht groß und breit in MDN.

In der Spec taucht das gar nicht auf. Es gibt einen Suchtreffer für „fenced“, und direkt darunter steht <mo>(</mo> – der „vermeintlich ‚einfache‘ Trick“!

Informationen stehen auch im Quelltext. Du kannst ihn dir ja mal anschauen und auch zum eigenen Testen verwenden:

Hast du deinen Quelltext denn selbst mal getestet? Dir hätte auffallen sollen, dass da gar keine Klammern angezeigt werden.

Und auch, dass

               <mi>a</mi>
               <mi>x</mi>
               <mn>2</mn>

keine hochgestellte ² erzeugt.

Es geht hier nicht darum, die Gleichung so lange zu verfälschen, bis die Wurzelzeichen gleich groß sind.

🖖 Live long and prosper

[MrMurphy]

https://forum.selfhtml.org/self/2025/feb/25/divs-ohne-zwischenabstande/1819006#m1819006

[Gunnar Bittersmann]

@@MrMurphy

https://forum.selfhtml.org/self/2025/apr/14/tebellen-scrollen/1821081#m1821081

🖖 Live long and prosper

[Rolf B]

Hallo MrMurphy,

dass dein Beispiel falsches MathML (im Sinne von: das ist nicht die Formel, zu der gefragt wurde) enthielt, wirst Du nicht abstreiten können.

Wenn Du meinst, dass Gunnar Dich fachlich falsch beurteilt, rechtfertige Dich fachlich, solange das nicht ein ein seitenlanges Nein Doch Nein Doch Nein Doch OH ausartet.

Wenn Du diesen blöden Link nochmal setzt, wird das kommentarlos gelöscht. Und hier mach ich jetzt zu.

Rolf

[Gunnar Bittersmann]

@@MrMurphy

Ich habe zwar so gut wie keine Erfahrung mit MathML, aber ich habe einfach mal auf Verdacht die "seltsamste" Zeile (bei strukturiertem Test) / Anweisung

<mo>&#xb2;</mo>

gelöscht, danach waren die beiden Wurzeln gleich hoch.

Wenn man stattdessen die Klammern löscht, sind sie auch gleich hoch. Nur hat man dann halt nicht dieselbe Gleichung.

Es scheint das Zusammenspiel von Klammern und Potenz zu sein, was das Wurzelzeichen auf der rechten Seite größer macht.

🖖 Live long and prosper

[Matthias Scharwies]

Servus!

Guten Morgen,

Mein Problem. Wie kann ich die Größe der 2. Wurzel an die der ersten anpassen?

Um die Größe der zweiten Wurzel an die der ersten Wurzel in MathML (wie in deinem Beispiel) anzupassen, solltest du sicherstellen, dass der gesamte Wurzelinhalt in einem konsistenten Container wie <mrow> steht – auch bei Klammern.

<math mathsize="1em">
  <msqrt>
    <mrow>
      <mi>a</mi><mi>x</mi><mo>²</mo><mo>−</mo><mn>2</mn><mi>a</mi><mi>x</mi><mo>+</mo><mn>13</mn>
    </mrow>
  </msqrt>
  <mo>=</mo>
  <msqrt>
    <mrow>
      <mo>(</mo><mi>a</mi><mo>+</mo><mn>2</mn><mo>)</mo><mo>²</mo><mo>−</mo><mi>a</mi><mi>x</mi><mo>+</mo><mn>1</mn>
    </mrow>
  </msqrt>
</math>

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Um die Größe der zweiten Wurzel an die der ersten Wurzel in MathML (wie in deinem Beispiel) anzupassen, solltest du sicherstellen, dass der gesamte Wurzelinhalt in einem konsistenten Container wie <mrow> steht – auch bei Klammern.

Warum sollte das nötig sein? Spec sagt: The <msqrt> element generates an anonymous <mrow> box called the msqrt base.

Und es löst das Problem überhaupt nicht.

🖖 Live long and prosper

[Joachim]

Lieber Matthias,

das Problem bleibt.

Gruß Joachim.

[Gunnar Bittersmann]

@@Joachim

<math mathsize="1em"><msqrt><mrow><mi>a</mi><mi>x</mi><mo>&#xb2;</mo><mo>-</mo><mn>2</mn><mi>a</mi><mi>x</mi><mo>+</mo><mn>13</mn></mrow></msqrt><mo>=</mo><msqrt><mrow><mo>(</mo></mrow><mi>a</mi><mo>+</mo><mi>2</mi><mrow><mo>)</mo></mrow><mo>&#xb2;</mo><mo>-</mo><mi>a</mi><mi>x</mi><mo>+</mo><mn>1</mn></math>

Zum fehlenden End-Tag kommen noch andere Ungereimtheiten hinzu:

<mrow><mo>(</mo></mrow>: Da wird nichts gruppiert; der mrow-Container kann weg. Dito bei der schließenden Klammer.

<mi>2</mi>: sollte mn sein: <mn>2</mn>

<mo>&#xb2;</mo>: Ist ² ein Operator? Ich denke, nein. Das sollte mit msup-Elementen gemacht werden.

<math>
	<msqrt>
		<mi>a</mi>
		<msup>
			<mi>x</mi>
			<mn>2</mn>
		</msup>
		<mo>-</mo>
		<mn>2</mn>
		<mi>a</mi>
		<mi>x</mi>
		<mo>+</mo>
		<mn>13</mn>
	</msqrt>
	<mo>=</mo>
	<msqrt>
		<msup>
			<mrow>
				<mo>(</mo>
				<mi>a</mi>
				<mo>+</mo>
				<mn>2</mn>
				<mo>)</mo>
			</mrow>
			<mn>2</mn>
		</msup>
		<mo>-</mo>
		<mi>a</mi>
		<mi>x</mi>
		<mo>+</mo>
		<mn>1</mn>
	</msqrt>
</math>

---

Wie/ob man die Wurzelzeichen gleich groß hinbekommt, hab ich noch nicht rausgefunden.

Fun fact: MathJax rendert die auch unterschiedlich groß: $$\sqrt{ax^2-2ax+13} = \sqrt{\left(a+2\right)^2-ax+1}$$

🖖 Live long and prosper

[Joachim]

Lieber Gunnar, danke für die Korrektur. Habe sie so eingebaut. Bin gespannt, ob die Anpassung der Wurzeln überhaupt möglich ist. Könnte man vielleicht etwas mit mspace versuchen? Gruß Joachim

[Gunnar Bittersmann]

@@Joachim

danke für die Korrektur. Habe sie so eingebaut.

Auch die Korrektur der Korrektur? Ich hab gerade noch die Sache mit <mi>2</mi> ergänzt, das <mn>2</mn> sein sollte.

Bin gespannt, ob die Anpassung der Wurzeln überhaupt möglich ist.

Ich auch. Das taggen des Threads als mathml könnte jemanden triggern hier rainzuschauen, der wirklich Ahnung von dem Zeug hat.

🖖 Live long and prosper

[Der Martin]

Moin,

Fun fact: MathJax rendert die auch unterschiedlich groß: $$\sqrt{ax^2-2ax+13} = \sqrt{\left(a+2\right)^2-ax+1}$$

der einzige formale Unterschied, den ich sehe, ist ein Klammerterm auf der rechten Seite des Gleichheitszeichens. Was ist, wenn man links den Term ax auch in Klammern setzt? Das ist mathematisch unsinnig, aber nicht falsch.

Eleganter wäre natürlich eine Lösung z.B. mit CSS.

Einen schönen Tag noch
 Martin

[Joachim]

Lieber Martin,

an Deinem Vorschlag ist was dran, aber Vorsicht: ax² ist nicht gleich (ax)², man müsste das x in Klammern setzen, das macht man aber wirklich nicht. Wie ginge das denn mit CSS? Gruß Joachim.

[Rolf B]

Hallo Joachim,

gib dem <mrow> der linken Seite eine Klasse und definiere im Stylesheet für diese Klasse ein padding.

Das ist allerdings mit Vorsicht zu genießen, die Browser rendern MathML nicht exakt einheitlich und es dann in dem einen Browser passt, ist im anderen unschön.

Ich finde aber auch keine Hinweise, wie man MathML klarmachen kann, welche Größe für einen Wurzelausdruck zu verwenden ist. Das macht er 100% selbstständig, basierend auf dem Inhalt, aber leider mit zu wenig Weitsicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

gib dem <mrow> der linken Seite eine Klasse und definiere im Stylesheet für diese Klasse ein padding.

Das ist allerdings mit Vorsicht zu genießen, die Browser rendern MathML nicht exakt einheitlich

Du sagst es. Im Firefox wirkt padding in Inline-Richtung (wo wir keins haben möchten), nicht aber in Block-Richtung.

Was aber wirkt: margin-block.

und es dann in dem einen Browser passt, ist im anderen unschön.

Bei 0.3em sieht’s sogar in Firefox und Chromia ähnlich aus; in Chromia sitzt der Radikand etwas höher.

Im Safari sind die Wurzeln nicht auf einer Linie; da dürfen es nur 0.2em sein.

☞ Back to the roots

🖖 Live long and prosper

[Joachim]

Lieber Gunnar, danke für Deine Alternative und Deine Mühe. Eigentlich gefällt mir die Math Jax Version noch am besten. Da bereitet mir allerdings die Implementierung in VSCode Schwierigkeiten. Könnt Ihr mir bitte einen nachvollziehbaren Weg dafür angeben? Gruß Joachim

[Rolf B]

Hallo Gunnar,

auf meinem Android Handy mit Chrome darf es gar nichts sein. Die Wurzel ist immer gleich hoch, und der Radikand hängt nach Bedarf unten raus

Das ist ohne margin. Die Wurzel ist eher ein Lufthaken. Aber die Radikanden haben gleiche Baseline 😲

Ceterum censeo... signum aequalitatis cancellatum esse!

Rolf

[Gunnar Bittersmann]

@@Rolf B

auf meinem Android Handy mit Chrome

Ach du Scheiße! Das Ding rendert <mo>-</mo> als Bindestrich anstatt als Minuszeichen‽

Du magst den Elektroschrott fachgerecht entsorgen und dir ein anständiges Smartphone zulegen‽ 😆

🖖 Live long and prosper

[Rolf B]

Hallo Tabellenkalk,

ja, dieser Beitrag wurde als "sinnloses Android-Bashing" gemeldet. Ich sehe das Bashing aber eher als ironisches Zanken durch einen Apfelfan und fühle mein armes kleines Handy nicht gebasht.
Ob Schließen richtig war oder nicht, sei dahingestellt, aber ich möchte dazu noch was bereden und mache deshalb wieder auf. Moderiere ich mich jetzt selbst?! Hm.

Hallo Gunnar,

das liegt nicht am „Elektroschrott“, sondern an Chrome. Siehe hier, es ist wohl eine heiße Diskussion bei den MathML Kernbeißern, was MathML Core übersetzen soll und was nicht. Offenbar übersetzen sie schon eine Menge, z.B. liefert <mi>x</mi> kein kursives x, sondern das Spezialzeichen U+1D465. Ein <mi>ax</mi> liefert normales ax

Die Darstellung liegt aber auch am Font. Mein Windows hat Cambria Math, ich gucke mir gerade die MDN-Empfehlung Latin Modern Math und STIX Two Math an.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ich sehe das Bashing aber eher als ironisches Zanken durch einen Apfelfan

Ich hätte das wohl durch ein Smiley kenntlich machen sollen. Oh, wait! Das hatte ich ja. Den muss der Melder im Übereifer übersehen haben.

das liegt nicht am „Elektroschrott“, sondern an Chrome.

Ugh. Wie konnte ich das übersehen haben? Auch meine Chromium-Browser auf macOS rendern <mo>-</mo> (mit U+002D) als Fliegenschiss. Firefox und Safari machen’s richtig und zeigen ein Minuszeichen an.

Solange Chromia das nicht fixen, sollte man wohl − (U+2212) verwenden.

☞ Codepen

Siehe hier, es ist wohl eine heiße Diskussion bei den MathML Kernbeißern, was MathML Core übersetzen soll und was nicht. Offenbar übersetzen sie schon eine Menge,

Ich hab mich schon gefragt, was da passiert. Am Font liegt es nicht; auch mit Cambria Math oder STIX Two Math wird U+002D als Bindestrich gerendert.

z.B. liefert <mi>x</mi> kein kursives x, sondern das Spezialzeichen U+1D465.

Ah, und entsprechend für alle anderen einbuchstabigen Variablenbezeichner (mi). Das erklärt, warum es mir nicht gelang, dafür die Schriftart zu ändern.

Schreibt man „1“ oder wie du sagtest „ax“ ins mi-Element, sieht man, dass die Schriftart-Deklaration greift.

(Auf macOS sehen die Variablenbezeichner so aus wie in STIX Two Text kursiv.)^[1]

Ein <mi>ax</mi> liefert normales ax

Das sollte wohl auch <mi>a</mi><mo>&InvisibleTimes;</mo><mi>x</mi> geschrieben sein.

🖖 Live long and prosper

PS: Ich habe eine Weile gebraucht um herauszufinden, wie man negative Zahlen in MathML notiert. Ins mn-Element gehört der Wert ohne Vorzeichen. [Spec] Setzt man <mo>&minus;</mo> davor, hat man Leerraum zwischen Vorzeichen und Absolutwert, der da nicht hingehört. <mo form="prefix">&minus;</mo> FTW.

---

1. editiert, vorher stand da STIX Two Math kursiv ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

PS: Ich habe eine Weile gebraucht um herauszufinden, wie man negative Zahlen in MathML notiert. Ins mn-Element gehört der Wert ohne Vorzeichen. [Spec] Setzt man <mo>&minus;</mo> davor, hat man Leerraum zwischen Vorzeichen und Absolutwert, der da nicht hingehört. <mo form="prefix">&minus;</mo> FTW.

☝︎ Gefunden in dieser Diskussion.

Oder doch <mrow><mo>&minus;</mo><mn>1</mn></mrow>, wie weiter unten gesagt wurde?

Was ist besser?

🖖 Live long and prosper

[Robert B.]

Moin,

Fun fact: MathJax rendert die auch unterschiedlich groß: $$\sqrt{ax^2-2ax+13} = \sqrt{\left(a+2\right)^2-ax+1}$$

der einzige formale Unterschied, den ich sehe, ist ein Klammerterm auf der rechten Seite des Gleichheitszeichens. Was ist, wenn man links den Term ax auch in Klammern setzt? Das ist mathematisch unsinnig, aber nicht falsch.

wenn ich das mit LaTeX ausprobiere (unsichtbare Klammern sowie geklammertes x),

\[
\sqrt{\left.ax^2\right. - 2ax + 13} = \sqrt{\left(a+2\right)^2 - ax + 1}
\]
\[
\sqrt{a\left(x\right)^2 - 2ax + 13} = \sqrt{\left(a+2\right)^2 - ax + 1}
\]

führt zumindest letzteres zu gleich hohen Wurzeln, sieht aber in der Tat sehr merkwürdig aus:

Viele Grüße
Robert

[Robert B.]

Moin,

ich komme spät zur Party, habe das …

Wie/ob man die Wurzelzeichen gleich groß hinbekommt, hab ich noch nicht rausgefunden.

Fun fact: MathJax rendert die auch unterschiedlich groß: $$\sqrt{ax^2-2ax+13} = \sqrt{\left(a+2\right)^2-ax+1}$$

… allerdings einmal (zweimal) in LaTeX ausprobiert:

Mit den „normalen“ Klammern sind beide Wurzeln gleich hoch,

\[
\sqrt{ax^2 - 2ax + 13} = \sqrt{(a+2)^2 - ax + 1}
\]

während die skalierbaren Klammern,

\[
\sqrt{ax^2 - 2ax + 13} = \sqrt{\left(a+2\right)^2 - ax + 1}
\]

zum gleichen Ergebnis wie oben mit MathJax führen:

Vielleicht verhält sich die MathJax-Darstellung vergleichbar dazu und skaliert die Klammern entsprechend (was man in den meisten Fällen – z.B. bei Brüchen – auch gerne hätte).

Viele Grüße
Robert

[Auge]

Hallo

Fun fact: MathJax rendert die auch unterschiedlich groß: $$\sqrt{ax^2-2ax+13} = \sqrt{\left(a+2\right)^2-ax+1}$$

… allerdings einmal (zweimal) in LaTeX ausprobiert:

Mit den „normalen“ Klammern sind beide Wurzeln gleich hoch,

\[
\sqrt{ax^2 - 2ax + 13} = \sqrt{(a+2)^2 - ax + 1}
\]

während die skalierbaren Klammern,

\[
\sqrt{ax^2 - 2ax + 13} = \sqrt{\left(a+2\right)^2 - ax + 1}
\]

zum gleichen Ergebnis wie oben mit MathJax führen:

Beim Anschauen deines Formelcodes und des Screenshots bin ich auf eine Idee gekommen. Was ist auf beiden Seiten gleich und wo ist der Unterschied? Auf beiden Seiten sind Ausdrücke mit einer Wurzel und auf beiden Seiten gibt es Potenzen. Allerdings befindet sich die Potenz auf der linken Seite an einem Teil, der ausswchließlich klein geschrieben ist, während er sich auf der rechten Seite an einem Teil mit großen (kapitalen) Zeichen befindet (die Ziffer 2 und die Klammern).

Also habe ich auf der linken Seite einfach mal eine Potenzierung hinzugefügt (an der 13). Die Formel stimmt so natürlich nicht mehr, aber so lässt sich MathJax eine Veränderung im Rendering entlocken.

$$ \sqrt{ax^2 - 2ax + 13^2} = \sqrt{(a+2)^2 - ax + 1} $$

Und siehe da, die Wurzelzeichen sind gleich hoch. Das ist also kein Bug, sondern von MathJax und auch den Rendering-Engines der Browser (in unterschiedlichem Maße) so vorgesehen.

$$ \sqrt{ax^2 - 2ax + 13^2} = \sqrt{(a+2)^2 - ax + 1} $$

Vorsichtshalber nochmal als Screenshot:

[edit]: Wobei, wenn ich mir das genau anschaue, sieht es so aus, dass die Wurzel nun links höher dargestellt wird, wie als rechts. 🤔

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Also habe ich auf der linken Seite einfach mal eine Potenzierung hinzugefügt (an der 13). Die Formel stimmt so natürlich nicht mehr

Hätteste ^1 gemacht, würde sie noch stimmen. 😏

Und die ¹ unsichtbar gemacht (wir haben doch weißen Hintergrund?):

$$ \sqrt{ax^2 - 2ax + 13^\color{White}1} = \sqrt{(a+2)^2 - ax + 1} $$

\sqrt{ax^2 - 2ax + 13^\color{White}1} = \sqrt{(a+2)^2 - ax + 1}

Wobei, wenn ich mir das genau anschaue, sieht es so aus, dass die Wurzel nun links höher dargestellt wird, wie rechts. 🤔

Das allerdings. Warum auch immer.

Und der Strich ragt auf der linken Seite etwas über den Radikanten hinaus. Also auf der rechen Seite auch noch ^\color{White}1 angehängt:

$$ \sqrt{ax^2 - 2ax + 13^\color{White}1} = \sqrt{(a+2)^2 - ax + 1^\color{White}1} $$

😱 Warum zum Geier macht die ¹ das Ganze wieder höher, obwohl doch schon eine ² da war?

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Und die ¹ unsichtbar gemacht (wir haben doch weißen Hintergrund?):

bis jemand mit Screenreader kommt und sich wundert, warum ein "Hoch Eins" vorgelesen wird. Pfui, das von Dir, dem A11Y Evangelisten?! 😉 Komm Du mir noch mal mit Accessibility-Details!!!1!elf!

Rolf

[Rolf B]

Hallo Joachim,

es ist halt einfach so, dass der Exponent um die Klammern herum mehr vertikalen Platz beanspruchen will als ein Exponent ohne Klammern.

In der Mathe-Lib des Forums hat displaystyle einen deutlichen Einfluss:

mit displaystyle: $$\displaystyle \sqrt{ax^2-2ax+13} ≠ \sqrt{(a+2)^2-ax+1}$$

ohne displaystyle:
$$\sqrt{ax^2-2ax+13} ≠ \sqrt{(a+2)^2-ax+1}$$

und genau das willst Du haben. Aber leider hat displaystyle="false" auf dem math-Element nicht diesen Einfluss. Ein bisschen schon, aber nicht so viel wie im Forum.

Was die Darstellung bei mir schöner macht, ist das Setzen des scriptlevel-Attributs auf dem msup für den Klammerausdruck:

  <msqrt>
    <msup scriptlevel="1">
      <mrow>
        <mo>(</mo>
        <mi>a</mi>
        <mo>+</mo>
        <mi>2</mi>
        <mo>)</mo>
      </mrow>
      <mn>2</mn>
    </msup>
    <mo>&#x2212;</mo>
    <mi>a</mi>
    <mi>x</mi>
    <mo>+</mo>
    <mn>1</mn>
  </msqrt>

Das macht das (a+2)² etwas kleiner und die Wurzeln gleichen sich an. Es hängt dann aber auch am verwendeten Math-Font. Die Cambria Math von Windows rastet bei zu kleiner font-size völlig aus und schiebt die Wurzelspitze fast in den Erdmittelpunkt.

Latin Modern Math (empfiehlt MDN) ist da etwas besser. Aber richtig gut ist das alles nicht, MathML kämpft noch darum, mit MathJax & Co mitzuhalten, glaube ich.

Rolf

[Matthias Scharwies]

Guten Morgen,

Was die Darstellung bei mir schöner macht, ist das Setzen des scriptlevel-Attributs auf dem msup für den Klammerausdruck:

...

Es hängt dann aber auch am verwendeten Math-Font. Die Cambria Math von Windows rastet bei zu kleiner font-size völlig aus und schiebt die Wurzelspitze fast in den Erdmittelpunkt.

Latin Modern Math (empfiehlt MDN) ist da etwas besser. Aber richtig gut ist das alles nicht, MathML kämpft noch darum, mit MathJax & Co mitzuhalten, glaube ich.

Könntest du das ins MathML/Einsteiger-Tutorial hinzufügen - evtl. gleich unter

• math - Das Top-Level-Element

einfügen?

Vielen dank im Voraus!

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

Könntest du das ins MathML/Einsteiger-Tutorial hinzufügen

Mach ich, aber nicht heute. Bin familiär ausgelastet…

Rolf

[Joachim]

Guten Morgen Rolf, ja, so ist es auch in meinen Augen schöner. Vielen Dank für Deine Mühe und den hilfreichen Code. Zwischenzeitlich habe ich stattdessen ein Bild davon eingefügt, wie der Formeleditor von Word eine solche Formel herstellt, da treten diese Schwierigkeiten nicht auf. Gruß Joachim.

[Joachim]

Guten Morgen Rolf, leider schon ein weiteres Problem beim Handybetrieb. Wenn in der Aufgabe 7 die Lösung angeklickt wird, erscheint auf meinem Samsung Handy der Wurzelausdruck so, als ob nur der Zähler des Bruches unter der Wurzel steht. Das bedeutet für mich, dass Mathml nicht das leistet, was ich mir vorstelle. Kannst Du mir bitte Hilfestellung bei der Installation von MathJax geben, um herauszufinden, ob das Problem damit gelöst werden kann? Gruß Joachim

[Rolf B]

Hallo Joachim,

MathML ist ein komplexes Konglomerat aus Browser und verfügbaren Math-Fonts.

Auf meinem Handy passiert das Gleiche, was Du beschreibst. Und es passiert auch auf meinem Desktop, wenn ich dem Math-Element mit Gewalt einen Math-unfähigen Font unterjubele.

D.h. es scheint, als seien auf dem Handy keine passenden Math-Fonts vorhanden. Ob es Webfonts gibt, die man hierfür einbinden kann, weiß ich nicht. Ich habe XITS gefunden, aber noch nicht ausprobiert und mir fehlt auch gerade die Idee, wie man die @fontface-Definition dafür korrekt und effizient aufsetzt.

Wie man MathJax installiert, weiß ich selber nicht. Noch nie gemacht. Auf der MathJax Homepage steht, man müsse für den Schnellstart nur ein script Element einfügen, ABER

• das ist ein Riesenbündel und sie sagen selbst, dass es kleinere Varianten gebe – aber welche für Dich richtig ist, weiß ich nicht
• es ist fremdgehostet und verweist auf jsdelivr.net sowie auf CloudFlare, das ist unschön wegen potenzieller Fremdkekse. Eine Self-Hosting Anleitung habe ich auf die Schnelle nicht gefunden.

Auf einer jsfiddle-Seite bin ich aber mit Einbinden des script-Elements und dem Beispiel-Absatz aus dem Getting Started sofort zum Ergebnis gekommen. Wie Du es für Dich korrekt machen musst, kann ich Dir nicht sagen.

Rolf

[Joachim]

Lieber Rolf, danke für Deine schnelle und ausführliche Antwort. Probiere das auch mal mit jsfiddle. Gruß Joachim.

[Auge]

Hallo

Wie man MathJax installiert, weiß ich selber nicht. Noch nie gemacht. Auf der MathJax Homepage steht, man müsse für den Schnellstart nur ein script Element einfügen, ABER

• das ist ein Riesenbündel und sie sagen selbst, dass es kleinere Varianten gebe – aber welche für Dich richtig ist, weiß ich nicht
• es ist fremdgehostet und verweist auf jsdelivr.net sowie auf CloudFlare, das ist unschön wegen potenzieller Fremdkekse. Eine Self-Hosting Anleitung habe ich auf die Schnelle nicht gefunden.

Die Doku zum Thema Selfhosting. So richtig ausführlich finde ich das aber zumindest für Anfänger im Thema nicht. Installieren mit npm oder herunterladen mit git clone und anschließend kompilieren mit npm, echt jetzt? Einfach ist das für unerfahrene Nutzungswillige nicht.

Wenn ich das aktuelle Release-Paket von Github^[1] herunterlade und auspacke, habe ich im Verzeichnis es5 JS-Skripte mit den Namen, die laut der Web-Doku angesprochen werden. Ob das aber JavaScript-Dateien sind oder TypeScript-Dateien, die erst noch kompiliert werden müssen, weiß ich nicht. Die mml-chtml.js, die ich neugierigerweise mal geöffnet habe, ist „fachgerecht“ minifiziert. 997 Kilobyte Code in einer Zeile.

Wenn Joachim durchgängig und ausschließlich mit MathML arbeitet, sollte es ausreichen das Skript mml-chtml.js zu laden. Wenn man MathJax nur dann laden will, wenn es etwas zu rendern gibt, kann man das auch erst prüfen und dann MathJax per JS nachladen. Die Pfade von cdn.jsdelivr.net auf die lokalen Quellen beziehungsweise auf die gewünschten Module umzubiegen, sollte machbar sein.

Laut Doku macht MathJax alles andere (weitere Skripte, Fonts und CSS) ganz alleine. Ich habe das allerdings selbst schon lange nicht mehr getan sondern jetzt auf die Schnelle in der Doku und den Web-Beispielen quergelesen. Das letzte Mal dass ich MathJax tatsächlich lokal eingebunden habe, war vor mehr als sechs Jahren mit einer Uraltversion, bei der das noch gänzlich anders ablief. Die Erfahrung damit ist mehr oder minder verschütt gegangen und der klägliche Rest wegen der Änderungen bei der Einbindung nutzlos.

Tschö, Auge

---

1. aktuell ist das die Version 3.2.2, die auch schon über vier Jahre alt ist ↩︎

[Joachim]

Guten Tag Auge, was ich für die Darstellung von Formeln brauche, lässt sich mit mathml nicht realisieren, deswegen würde ich ja gerne mathjax ausprobieren. Scheint nicht so einfach zu sein. Gruß Joachim.

[Rolf B]

Hallo Joachim,

Du, das weiß ich gar nicht so genau.

Mathml hängt sehr an den Fonts, und bei Mathjax habe ich gesehen, dass es 3 Math-Webfonts nachlädt.

Sofern das erlaubt ist, könnte man mal versuchen, nur diese Fonts einzubinden.

Rolf

[Auge]

Hallo

was ich für die Darstellung von Formeln brauche, lässt sich mit mathml nicht realisieren, deswegen würde ich ja gerne mathjax ausprobieren.

Es kommt mir vor, als würdest du die Aufgabe, die MathJax erfüllt, falsch einschätzen.

MathJax rendert die in einem HTML-Dokument enthaltenen Formeln in MathML- und TeX-Notation. TeX-Formeln werden von Browsern ja sowieso nativ nicht unterstützt und bis vor kurzer Zeit galt das in den meisten Browsern auch für MathML. Aktuell wird von allen Browsern eine vereinfachte Form von MathML, „MathML Core“ genannt, unterstützt. Die Verwendung von MathJax wird dennoch weiterhin empfohlen, weil es die Formatierung verbessert und bei Bedarf dafür auch geeignete Fonts nachlädt.

Scheint nicht so einfach zu sein.

Nein, denn MathML (oder TeX) benötigst du immer noch. Ohne von in einem dieser Systeme vorliegenden Formeln tut MathJax nullkommanix. Und jetzt mal abgesehen von deinen Formatierungswünschen dürfte MathML prinzipiell alle von dir benötigten Formeln darstellen können. Die Darstellung von Formeln lässt sich üblicherweise mit MathJax aber tatsächlich verbessern.

Tschö, Auge

[Joachim]

Ja, lieber Auge, mathml liefert eigentlich alle Formeln, die ich brauche. Bedauerlicherweise zum einen nicht in der gewohnten Darstellung, zum zweiten in unerwartet veränderter auf den unterschiedlichen Geräten. Dafür habe ich noch keine Lösung. Gruß Joachim.

[Auge]

Hallo

Ja, lieber Auge, mathml liefert eigentlich alle Formeln, die ich brauche.

Dann ist das erstmal klar. MathML kann das, was du benötigst.

Bedauerlicherweise zum einen nicht in der gewohnten Darstellung, zum zweiten in unerwartet veränderter auf den unterschiedlichen Geräten.

Kurze Antwort: Ja und?

Lange Antwort und unabhängig von auftretenden Fehlern^[1]: Du stellst fest, dass die Formeln in verschiedenen Browsern auf unterschiedlichen Geräten verschieden angezeigt werden, weil du die Seite(n) für Tests mit veschiedenen Browsern auf unterschiedlichen Geräten aufrufst.

Benutzer deiner Seite rufen diese üblicherweise mit immer dem selben Browser auf immer dem selben Gerät auf. Die bekommen von den Darstellungsunterschieden genauso üblicherweise nichts mit ^[2]. Und wenn sie die Seite denn doch mit verschiedenen Geräten aufrufen, ist es, abgesehen von „echten“ Fehlern, kein Beinbruch, wenn eine Formel bei identischer Aussage unterschiedlich dargestellt wird. Ihr Sinn und Zweck soll sich erschließen und wenn er das tut, ist der Zweck erfüllt.

Es ist normal, dass HTML in verschiedenen Browsern und verschiedenen Anzeigegrößen unterschiedlich ausgegeben wird. Warum sollte das nun ausgerechnet bei MathML anders sein?

Dafür habe ich noch keine Lösung.

Vielleicht brauchst du aber auch keine – soweit es nicht um Fehler geht.

Tschö, Auge

---

1. Eine unterschiedliche, aber fehlerfreie Darstellung ist kein Fehler. ↩︎

2. und vielleicht sind sie ihnen auch schnurzpiepegal ↩︎

[Rolf B]

Hallo Auge,

Eine unterschiedliche, aber fehlerfreie Darstellung ist kein Fehler

das ist ja gerade die Frage. Ist die Darstellung fehlerfrei? Dass zwei Wurzeln unterschiedlich hoch dargestellt werden, ist ärgerlich, aber verschmerzbar. Und es triggert vermutlich jeden, der auf eine saubere Darstellung eines Ausdrucks Wert legt.

Aber eine Wurzel, deren "V"-Anteil nur so hoch ist wie der Zähler eines Bruchs, ist nicht fehlerfrei.

Rolf

[Auge]

Hallo

Eine unterschiedliche, aber fehlerfreie Darstellung ist kein Fehler

das ist ja gerade die Frage. Ist die Darstellung fehlerfrei? Dass zwei Wurzeln unterschiedlich hoch dargestellt werden, ist ärgerlich, aber verschmerzbar. Und es triggert vermutlich jeden, der auf eine saubere Darstellung eines Ausdrucks Wert legt.

Aber eine Wurzel, deren "V"-Anteil nur so hoch ist wie der Zähler eines Bruchs, ist nicht fehlerfrei.

Dann fällt das eben nicht unter „fehlerfrei“. Deswegen gibt es ja diese Fußnote.

Tschö, Auge

[ThomasM]

Hallo Joachim,

was ich für die Darstellung von Formeln brauche, lässt sich mit mathml nicht realisieren, deswegen würde ich ja gerne mathjax ausprobieren. Scheint nicht so einfach zu sein. Gruß Joachim.

Wie bereits ausgeführt wurde, ist MathJax nur eine JS-Variante zum Rendern der Formeln (TeX/MathML).

Meinem MathML-Artikel im Entwickler Magazin aus 2023 habe ich neben den allgemeinen Demos einen Testcase zur parallelen Darstellung einer Formel nativ vs. mit MathJax gerendert beigefügt (dort 2.7.9 im Einsatz).

Ansonsten sollten sich Formeln grundsätzlich brauchbar mit MathML Core umsetzen lassen. Versuche es mal mit den Formeleditoren von Word und Open/Libre Office, welche MathML exportieren können. Man muss etwas nacharbeiten, u. a. die mfenced-Klammern ersetzen.

Grüße,
Thomas

[Joachim]

Lieber Thomas, danke für die Tips. Mal sehen, wie ich klar komme. Gruß Joachim.

[Joachim]

Guten Morgen, ich löse für mich das Problem auf diese Art und Weise, weil ich es nicht schaffe, den Wurzelausdruck so herzustellen, dass die Seite auf jedem Gerät zufriedenstellend aussieht. Hat jemand eine Idee? Gruß Joachim.

[Rolf B]

Hallo Joachim,

404

There isn't a GitHub Pages site here.

Rolf

[Joachim]

Jetzt wohl. Sorry.

[Rolf B]

Hallo Joachim,

nö, immer noch nicht. Sorry.

Ich habe GitHub Pages noch nicht verwendet und kann Dir darum nicht sagen, wo die caveats sind.

Aber ich habe das zuugehörige Repo gefunden und darin die Seite.

Tipp: Verwende kein JPG, sondern ein PNG mit transparentem Hintergrund. Es sei denn, du willst unbedingt eine Formel mit weißem Hintergrund auf einer leicht grauen HTML Seite.

Ich habe mich jetzt eine Weile mit MathJax beschäftigt, und ich bin nicht sicher, ob das einem das Leben einfacher macht. Die Doku verspricht 1000 Sachen und im wahren Leben klappt nichts.

Rolf

[Joachim]

Guten Morgen, habe die Adresse für die Seite geändert. Werde den Hintergrund bei den angesprochenen Aufgaben in weiß ändern. An MCMurphy: Danke für Deine Einschätzungen. Gruß Joachim.

[MrMurphy]

Hat jemand eine Idee?

Mal deutlich:

Deine Vorstellungen und Wünsche stimmten mit der Realität nicht überein. Du hast HTML / CSS / MathML nicht verstanden und wirst zu keiner Lösung kommen.

Die Realität ist, das die Größe von Wurzelzeichen (und anderen mathematischen "Zeichen") sich dem Inhalt anpassen. Das gilt auch handschriftlich und in gedruckter Form.

Die Realität ist, das in Webbrowsern auf Grund der unterschiedlichen Hardware, der unterschiedlichen Betriebssysteme, der unterschiedlichen vorhandenen Schriftarten, ... überhaupt keine einheitliche Darstellung gewollt ist.

HTML und CSS sind keine Spielwiese für Designer, Künstler, Einheitsfanatiker, ... und ähnliche. Sondern dienen bis heute der Informationsübermittlung. Webseitenersteller haben also nur die Aufgabe, die Informationen so bereit zu stellen, die möglichst viele Endgeräte (Bildschirm, Drucker, Vorlesegeräte, ...) die Informationen dem Endnutzer zugänglich machen können.

Auch wenn du Webseiten erstellen willst oder erstellst bist du deshalb nicht der Bestimmer über die Optik beim Endnutzer. Du kannst die Endnutzer (also deine Besucher) im ehesten unterstützen, indem du HTML, CSS und MathML den aktuellen Regeln entsprechend verwendest und CSS dabei eher "dezent" verwendest.

Info: Die verlinkte Seite funktioniert immer noch nicht.