@@Joachim > es geht um die Aufgabe 107. Dies ist mein Stand der Dinge zur Lösung des Problems. Was meint Ihr? Welches Problems? Dazu später. Zunächst einmal die Positionierung des Eingabefelds: die kann so nicht hinhauen. Du positionierst das Eingabefeld absolut auf dem Bild – kann man machen. Die Position gibst du in `em` an, damit alles mit der Schriftgröße zusammen skaliert – gut so. Nur dass eben nicht alles mit der Schriftgröße skaliert: das Bild tut es nicht. Um das zu beheben, musst du die Breite oder die Höhe des Bilds auch in `em` angeben. Das jeweils andere ist auf `auto` zu setzen ([aus Gründen](https://forum.selfhtml.org/self/2024/apr/29/grosse-css-probleme-in-verbindung-mit-bootstrap-5/1814739#m1814739)). --- Nun wie angekündigt zur Frage: welches Problem? Dir gefällt nicht, wie MathML vom Browser gerendert wird? Und deshalb erstellst du Grafiken, die völlig verpixelt sind? Also, wenn ich die Wahl habe zwischen einer scharf gerenderten Formel mit unterschiedlich großen Wurzelzeichen und gleich großen Wurzelzeichen, aber völlig verpixelt – ich würde mich für ersteres entscheiden. Also wenn du da Grafiken einsetzen willst, musst du das auch richtig tun: - Die Grafiken so groß machen, dass sie auch auf hochauflösenden Displays (was heutzutage fast jeder in der Tasche hat) scharf sind. - Das richtige Grafikformat verwenden. JPEG ist es nicht. JPEG ist für Fotos gut, wo es viele verschiedene Farben und eher Farbverläufe als scharfe Kanten gibt. Für schwarze Schrift auf weißem Grund brauchst du nicht Millionen von Farben. Fürs Anti-Aliasing reichen wenige Grautöne. (16 ist eine brauchbare Anzahl.) Ein sinnvolles Grafikformat für Textgrafiken, die man eher verlustfrei komprimieren sollte, ist PNG-8. (GIF ginge auch.) Nicht mit voller Palette (256 Farben), sondern reduziert (eben etwa so um die 16). Wenn du auf dem Weg mit den Grafiken weitergehen willst, solltest du sie alle nochmal neu erstellen. Und dann auch mit richtigen Mal- und Minuszeichen. Und dir was zur Umschaltung zwischen Hell- und Dunkelmodus überlegen. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14

@@Joachim > es geht um die Aufgabe 107. Dies ist mein Stand der Dinge zur Lösung des Problems. Was meint Ihr? Welches Problems? Dazu später. Zunächst einmal die Positionierung des Eingabefelds: die kann so nicht hinhauen. Du positionierst das Eingabefeld absolut auf dem Bild – kann man machen. Die Position gibst du in `em` an, damit alles mit der Schriftgröße zusammen skaliert – gut so. Nur dass eben nicht alles mit der Schriftgröße skaliert: das Bild tut es nicht. Um das zu beheben, musst du die Breite oder die Höhe des Bilds auch in `em` angeben. Das jeweils andere ist auf `auto` zu setzen ([aus Gründen](https://forum.selfhtml.org/self/2024/apr/29/grosse-css-probleme-in-verbindung-mit-bootstrap-5/1814739#m1814739)). --- Nun wie angekündigt zur Frage: welches Problem? Dir gefällt nicht, wie MathML vom Browser gerendert wird? Und deshalb erstellst du Grafiken, die völlig verpixelt sind? Also, wenn ich die Wahl habe zwischen einer scharf gerenderten Formel mit unterschiedlich großen Wurzelzeichen und gleich großen Wurzelzeichen, aber völlig verpixelt – ich würde mich für ersteres entscheiden. Also wenn du da Grafiken einsetzen willst, musst du das auch richtig tun: - Die Grafiken so groß machen, dass sie auch auf hochauflösenden Displays (was heutzutage fast jeder in der Tasche hat) scharf sind. - Das richtige Grafikformat verwenden. JPEG ist es nicht. JPEG ist für Fotos gut, wo es viele verschiede Farben und eher Farbverläufe als scharfe Kanten gibt. Für schwarze Schrift auf weißem Grund brauchst du nicht Millionen von Farben. Fürs Anti-Aliasing reichen wenige Grautöne. (16 ist eine brauchbare Anzahl.) Ein sinnvolles Grafikformat für Textgrafiken, die man eher verlustfrei komprimieren sollte, ist PNG-8. (GIF ginge auch.) Nicht mit voller Palette (256 Farben), sondern reduziert (eben etwa so um die 16). Wenn auf dem Weg mit den Grafiken weitergehen willst, solltest du sie alle nochmal neu erstellen. Und dann auch mit richtigen Mal- und Minuszeichen. Und dir was zur Umschaltung zwischen Hell- und Dunkelmodus überlegen. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14