Input in Bild einfügen
Joachim
- html
Hallo Joachim,
Guten Morgen, gibt es eine Möglichkeit ein Inputfeld in
dieses Bild unter die rechte Wurzel einzufügen?
Leider kannst du HTML-Formularelemente wie <input> nicht direkt in MathML einbetten – der Standard erlaubt nur MathML-Elemente innerhalb von <math>. Ein <input> würde dort als "fremdes" Element ignoriert oder falsch dargestellt.
👉 Es gibt aber zwei Umwege:
Du setzt die Formel ganz normal mit MathML und legst ein <input> daneben oder darüber, optisch so, dass es aussieht, als wäre es Teil der Wurzel.
<div style="position: relative; display: inline-block;">
<math>
<msqrt>
<mrow>
<mo>□</mo> <!-- Platzhalter -->
</mrow>
</msqrt>
</math>
<input type="text"
style="position: absolute; top: 0.2em; left: 0.6em; width: 2em; border: none; border-bottom: 1px solid black; text-align: center;">
</div>
Würd' ich nicht machen!!!!
Du kannst ein Platzhalterzeichen oder <mtext> mit contenteditable="true" verwenden, wenn es dir nur um eine editierbare Darstellung innerhalb der Formel geht:
<math>
<msqrt>
<mtext contenteditable="true">?</mtext>
</msqrt>
</math>
Das ist kein richtiges Formularfeld, aber man kann direkt in der Formel tippen.
Dann kannst du mit JavaScript lauschen, ob es eine Eingabe in [contenteditable]
gegeben hat.
Bis bald!
Jonathan
@@Jonathan Harker
Leider kannst du HTML-Formularelemente wie <input> nicht direkt in MathML einbetten – der Standard erlaubt nur MathML-Elemente innerhalb von <math>.
Wenn das nicht erlaubt wäre, stünde es nicht mit einem Beispiel in der Spezifikation §2.2.1.
🖖 Live long and prosper
Hallo Gunnar,
@@Jonathan Harker
Leider kannst du HTML-Formularelemente wie <input> nicht direkt in MathML einbetten – der Standard erlaubt nur MathML-Elemente innerhalb von <math>.
Wenn das nicht erlaubt wäre, stünde es nicht mit einem Beispiel in der Spezifikation §2.2.1.
und es funzt in Chrome, Edge und Firefox!
Coool!
🖖 Live long and prosper
-- “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.”
— Bruce Springsteen, Manchester 2025-05-14
Bis bald!
Jonathan
Guten Morgen, es geht um die Aufgabe 107. Dies ist mein Stand der Dinge zur Lösung des Problems. Was meint Ihr? Stört Euch bitte nicht an den anderen Aufgaben, bin damit noch nicht fertig. Freundliche Grüße Joachim
@@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).
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
Hallo Gunnar,
das Positionsproblem ist mir nicht aufgefallen, aber ich habe auch nur ein Display mit ca 96dpi an meinem Desktop und deshalb eine Standardschriftgröße von 16px. Da fallen dann auch die Pixel im Bild nicht auf.
Man kann sich dieses Bild nicht oft genug anschauen…
Rolf
@@Rolf B
Man kann sich dieses Bild nicht oft genug anschauen…
Welches der drei?
Welches auch immer, man kann es sich gar nicht anschauen. Sobald man hinschaut, ist es schon wieder weg.
Das verstößt gegen die WCAG.
Das animierte GIF sollte durch die drei statischen Einzelbilder ersetzt werden, wie sie auch im Artikel von Brad Frost zu sehen sind.
🖖 Live long and prosper
PS: Ich freu mich schon, Brad Frost demnächst auf der beyond tellerrand wiederzusehen. IIRC ist auch wieder eine Jam-Session geplant. 🎸🎹🎷🎻🥁 Das wird ein Spaß.
Hallo,
das gelbe Inputfeld schwebt irgendwo über der Formel. In dieser Form unbrauchbar.
Gruß
Jürgen
Hallo Joachim,
Uncaught ReferenceError: Eintrag107 is not defined
Aber das baust Du sicher noch.
Bitte beachte: Handys haben Autokorrektur, ich musste meinem Mobilchen sehr nachdrücklich mitteilen, dass ich a und nicht A eingeben möchte, es hat sich größte Mühe gegeben, das a groß zu schreiben. Du könntest dem input Element das Attribut autocorrect="off"
geben. Das kennt bisher nur der Firefox, aber es ist im Standard und wenn es mal in Safari und Chromia ankommt, kann es hilfreich sein.
Heißt aber auch, dass Du bis dahin die Eingabe aufbereiten musst. Leerzeichen weg und in Kleinschrift übersetzen: Eingabe107.value.trim().toLowerCase().
Ich würde ggf. auch weniger vorgeben. Aus dem - x
kann man eigentlich erraten, dass die Lösung a
sein muss. Man könnte a-x
als Lösung erwarten, und das mit Eingabe107().replaceAll(' ', '').toLowerCase() == 'a-x'
testen.
Ähnlich bei 105, die Lösung ist x+y
, aber weil schon x+
da steht, kann man y
erraten.
Ansonsten hast Du natürlich das Problem der fehlenden Zugänglichkeit von Bildern. Ein img braucht definitiv immer ein alt-Attribut, das fehlt bei Dir. Ob man es schafft, im alt-Attribut die Aufgabe so unterzubringen, dass man auf Grund des alt-Textes die Aufgabe lösen kann, weiß ich nicht.
Würde alt="Wurzel von a plus x, geteilt durch Wurzel von a hoch vier minus x hoch vier, mal Wurzel von a Quadrat plus x Quadrat, ergibt eins durch Wurzel von was?"
funktionieren? Durch richtige Betonung wird vermutlich klar, was unter der Wurzel ist und was nicht, aber ob ein Screenreader das rüberbringt? Und ich habe keine Ahnung, ob sehbehinderte Personen solche Aufgaben im Kopf oder mit mir unbekannten Hilfsmitteln lösen können. Ich könnte es vermutlich nicht im Kopf.
Rolf
@@Joachim
Guten Morgen, gibt es eine Möglichkeit ein Inputfeld in
dieses Bild unter die rechte Wurzel einzufügen?
Warum soll es ein Bild sein? Mit MathML geht das auch.
Und wenn ein Bild, dann bitte eins mit vernünftigem Malzeichen (‚ב ×
oder ‚·‘ (·
) und vernünftigem Minuszeichen ‚−‘ (&minus
).
Ich schaffe es bisher nicht.
Wie sieht denn dein bisheriger Versuch aus?
🖖 Live long and prosper
Guten Tag, den Vorschlag von Jonathan habe ich ausprobiert, funktioniert auf meinem Rechner, auf dem Handy nicht positionsgenau,leider. Mathml würde ich auch übernehmen, wenn die Wurzeln von der Größe her besser dargestellt würden, da ist das Bild, erstellt mit dem Formeleditor von Word, so, wie ich mir das vorstelle, Mal- und Minuszeichen liegen da nicht in meiner Verantwortung. Herzliche Grüße Joachim
@@Joachim
den Vorschlag von Jonathan habe ich ausprobiert, funktioniert auf meinem Rechner, auf dem Handy nicht positionsgenau,leider.
Und du glaubst jetzt, dass „funktioniert“ und „funktioniert nicht“ ausreichend wäre, um dir weiterzuhelfen?
Mathml würde ich auch übernehmen, wenn die Wurzeln von der Größe her besser dargestellt würden, da ist das Bild, erstellt mit dem Formeleditor von Word, so, wie ich mir das vorstelle, Mal- und Minuszeichen liegen da nicht in meiner Verantwortung.
Sondern in wessen? Die richtigen Zeichen können ja aus meinem Posting in den Formeleditor von Word kopiert werden.
Falsche Zeichen in der Formel – scheißegal? Haupsache, die Wurzelzeichen sind alle gleich groß (obwohl es durchaus üblich ist, dass sie in Brüchen kleiner sind) und das Eingabefeld sitzt pixelgenau? Ich glaube, du setzt die Prioritäten falsch.
🖖 Live long and prosper
Lieber Gunnar, ja, das glaube ich, und ich wäre Euch dankbar, wenn ihr mir Hilfestellung beim Übergang vom Rechner zum Handy geben würdet. Was die Darstellung von Wurzeln angeht, bin ich nicht Deiner Meinung. Freundliche Grüße Joachim.
@@Joachim
ja, das glaube ich, und ich wäre Euch dankbar, wenn ihr mir Hilfestellung beim Übergang vom Rechner zum Handy geben würdet.
Das können wir nicht.
Ich habe nicht grundlos schon vor 2 Stunden gefragt, wie denn dein Versuch bisher aussieht. Und damit ist nicht das Ergebnis „funktioniert nicht“ deines Versuchs gemeint.
🖖 Live long and prosper
Ich habe mathml genauso eingesetzt wie Du, und war davon nicht überzeugt. Deswegen meine Anfrage, ob Ihr einen Alternativweg kennt. Den von Jonathan würde ich gerne einsetzen, wenn ich den responsiven Code hinbekäme. Freundliche Grüße Joachim
@@Joachim
… wenn ich den responsiven Code hinbekäme.
Jemand betritt einen Fahrradladen. „Guten Tag! Ich habe da ein Problem. Also, wenn ich geradeaus fahre, ist alles gut. Bei Linkskurven auch. Nur bei Rechtskurven, da klappert irgendwas. Können Sie das mal bitte in Ordnung bringen?“
„Na, schaun wa mal. Wo ham Se denn ihr gutes Stück?“
„Wie bitte?“
„Ihr Fahrrad! Wo isses denn?“
„Na zuhause, im Schuppen.“
Du erkennst dich in der Geschichte wieder?
🖖 Live long and prosper
Lieber Gunnar,
@@Joachim
Joachim ist @Joachim Fröhlich und will keine Hilfe.
Liebe Grüße
Felix Riesterer
@@Joachim
Und du glaubst jetzt, dass „funktioniert“ und „funktioniert nicht“ ausreichend wäre, um dir weiterzuhelfen?
ja, das glaube ich,
Hm, war der Link zur problematischen Seite schon immer da? Sorry, der geht da oben unter. Besser ist es, den Link im Postingtext nochmal zu erwähnen.
Und jetzt hast du den Inhalt der verlinkten Seite völlig verändert, sodass das Problem nicht mehr erkennbar ist‽
und ich wäre Euch dankbar, wenn ihr mir Hilfestellung beim Übergang vom Rechner zum Handy geben würdet.
Was (auch) nicht funktioniert: <pre>
. Bei schmalem Viewport wird nicht umbrochen, sondern man muss horizontal hin- und herscrollen.
Es gäbe zwar eine Möglichkeit, zusätzliche Zeilenumbrüche zu ermöglichen (white-space: pre-line
), aber gut geht anders.
Was soll das denn überhaupt mit dem vorformatiertem Text? Du willst, dass der Text nicht über die gesamte Bildschirmbreite läuft? Dafür gibt es max-width
.
Du willst, dass kein Zeilenumbruch zwischen Zahl und Einheit erfolgen darf? (Noch so eine rhetorische Frage. Na klar willst du das.) Dafür gibt’s zwei Möglichkeiten:
Zahl mit Einheit ein Element kapseln <span class="no-break">20 cm</span>
und darin Zeilenumbüche verbieten: .no-break { white-space: nowrap }
.
Früher gab’s dafür mal ein <nobr>
-Element, was aber nicht mehr im HTML-Standard ist.
geschützte Leerzeichen zwischen Zahl und Einheit setzen: 20 cm
.
Noch besser: ein schmales geschütztes Leerzeichen: 20 cm
. Wobei das aber oftmals auch so breit dargestellt wird wie das NBSP, meh.
Eine benannte Zeichenreferenz gibt’s dafür nicht. Könnte man in XHTML aber machen. Aber das ist eher was für Nerds wie ThomasM. 😉
🖖 Live long and prosper
@@Gunnar Bittersmann
Was (auch) nicht funktioniert:
<pre>
.
Ebenfalls falsch: <strong>
. Wenn alles hervorgehoben ist, ist nichts hervorgehoben.
Wenn du sämtlichen Text fett haben willst (warum eigentlich?), ist das Sache von CSS
(font-weight: bold
).
🖖 Live long and prosper
Guten Tag allerseits,
danke für die ausführlichen Hinweise.
Was mathml angeht, würde ich es zu gerne einsetzen aber es stößt an seine Grenzen, zumindest was Wurzeln angeht. Beispiel:
.
Das Ergebnis sieht schon am Laptop schwach aus, am Handy ist es nicht zu gebrauchen. Probiert es bitte selbst aus.
Also versuche ich das Problem auf dem eingeschlagenen Weg mit Eurer Hilfe zu lösen.
Wie sieht die Aufgabe 107 eigentlich auf Euren Handys aus? Erträglich?
Vielen Dank auch besonders an Felix für seine wie immer überaus hilfreiche
Stellungnahme.
Freundliche Grüße
Joachim
Hallo Joachim,
Es wäre einfacher gewesen, wenn der Link an dieser Frage aufgetaucht auf die pot5-Seite zeigen würde.
Dieser: https://joafroehlich.github.io/Pot/Pot5.html
Sieht auf Samsung A54 unter Chrome so aus (allerdings kleiner, das Handy hat hohe dpi, entsprechend groß ist das Bild und ich weiß nicht, wie ich dem Forum klar machen kann, es visuell zu vierteln - auf dem Handy ist es 6,5cm breit)
Also immer noch mit falschen Operatoren und ja, das MathML sieht bäh aus.
Rolf
Sorry.Danke für den Hinweis. Freundliche Grüße. Joachim
Danke, der Spaß hält sich in Grenzen. Gibt es denn eine Programmiermöglichkeit, die gleiches Positionieren auf z. Bsp auf Laptop, Iphone und Samsung herstellt? Freundliche Grüße Joachim
@@Joachim
Gibt es denn eine Programmiermöglichkeit, die gleiches Positionieren auf z. Bsp auf Laptop, Iphone und Samsung herstellt?
Nicht nur eine, sondern mehrere. Und sie wurden in diesem Thread schon genannt.
🖖 Live long and prosper
Hi,
Früher gab’s dafür mal ein
<nobr>
-Element, was aber nicht mehr im HTML-Standard ist.
m.W. war das nie im Standard (2.0, 3.2, 4.01 enthalten es nicht - eben nochmal nachgeguckt) - obwohl es ein paar Browser umgesetzt hatten.
cu,
Andreas a/k/a MudGuard
@@MudGuard
Früher gab’s dafür mal ein
<nobr>
-Element, was aber nicht mehr im HTML-Standard ist.m.W. war das nie im Standard (2.0, 3.2, 4.01 enthalten es nicht - eben nochmal nachgeguckt) - obwohl es ein paar Browser umgesetzt hatten.
Oh, dann ist es in guter Gesellschaft mit marquee
(wonach ich im Jubiläumsquiz gefragt hatte).
🖖 Live long and prosper
Hallo Joachim,
Formeleditor von Word ... Mal- und Minuszeichen liegen da nicht in meiner Verantwortung.
Aber natürlich tun sie das. Der Word-Formeleditor ist nach meiner Auffassung zwar ein Krampf und ich musste schon öfter eine Formel komplett löschen und neu anfangen, weil ich ihn einfach nicht zu vernünftiger Darstellung bewegen konnte, aber Operatoren gibt's reichlich wie Eigenschaften im CSS[1]
In der Formel-Menüleiste ist die Symbole-Liste (hier aus Word 365):
Hier hast Du die freie Auswahl, klapp das Ding auf, wähle oben rechts aus dem Dropdown "Operatoren" und du ersäufst darin. Im Screenshot ist das \times Kreuz, und auch der \cdot Punkt. Den darf man aber nicht mit \bullet verwechseln. Was was ist, sagt Dir Word, wenn Du mit der Maus drüber hoverst. Oder Du gibst in der Formel einfach \times bzw. \cdot ein und drückst einmal die Leertaste.
Rolf
früher sagte man „Sand am Meer“, das wäre aber weniger. ↩︎
Danke Rolf, werde darauf achten. Joachim
Hallo zusammen,
Und wenn ein Bild, dann bitte eins mit vernünftigem Malzeichen (‚ב
×
oder ‚·‘ (·
) und vernünftigem Minuszeichen ‚−‘ (&minus
).
Nur mal als etwas abseitigen Hinweis zu diesen benannten Entity-Referenzen. Ich empfehle entweder die Unicode-Zeichen selbst oder die Hex-kodierten, bei × wäre es &x00D7;.
Grundsätzlich haben Browser mit den drei Varianten kein Problem, aber wenn man mal in die Verlegenheit kommt, ein XHTML-Dokument mit z. B. × mittels XSLT zu transformieren (jaja, weltfremd sagen 99.99 % der hier Versammelten ;), hat man ein Problem nicht-deklarierter Zeichenreferenzen. Man könnte das via zusätzlichem DOCTYPE/ENTITY nachrüsten, aber in meinem Spezialfall war das nicht das Mittel der Wahl.
Konkret geht es um eine Software namens Dr.Explain für Zwecke wie Online-Dokumentation. Dort wird pro Dokument jeweils ein nicht mal besonders bemerkbares × ausgeleitet. Um den generierten XHTML-Code in bestimmten Bereichen zu verbessern und funktional zu erweitern, habe ich eine Transformation gebaut, welche alle Dokumente aus einem Input-Verzeichnis in ein Output-Verzeichnis verarbeitet. Die genannte Referenz lässt aber die Transformation scheitern.
Zuvor ändere ich eben × in &x00D7; und zwar mittels PowerShell-Befehl im cmd-Batch-Skript.
Man kann sich das in diesem Screencast anschauen (×, kommt bei ca: 9 Minuten). Ich bringe das hier auch, um mal wieder die Mächtigkeit von XSLT gerade für solche Anforderungen zu betonen. Angesichts der gerade betriebenen Entfernungswelle von XSLT (1.0) aus Browsern durch WHATWG und Browser-Anbietende auch überdenkenswert. Wobei mein Prozess mit XSLT 3.0 lokal abläuft und somit nicht betroffen ist und ich die Online-Nutzung von XSLT auf Basis von SaxonJS betreibe oder XSLT 1.0 serverseitig mittels PHP verwende.
Grüße (und sorry für diesen Einwurf),
Thomas
@@ThomasM
Ich empfehle entweder die Unicode-Zeichen selbst oder die Hex-kodierten, bei × wäre es &x00D7;.
Mit #
: ×
(wobei die führenden Nullen weggelassen werden können).
Ich hatte die benannten Zeichenreferenzen nur angeführt um zu zeigen, dass man in HTML eine Alternative dazu hat, die Zeichen, die auf per Tastatur (nicht oder schwierig) einzugeben sind, irgendwoher zu kopieren. Und benannte Zeichenreferenzen sind besser lesbar als numerische.
aber wenn man mal in die Verlegenheit kommt, ein XHTML-Dokument mit z. B. × mittels XSLT zu transformieren (jaja, weltfremd sagen 99.99 % der hier Versammelten ;)
Eben. Wer tut denn sowas? 😉
hat man ein Problem nicht-deklarierter Zeichenreferenzen.
Hm, ein XSLT-Prozessor kommt mit den in HTML definierten Zeichenreferenzen nicht klar, auch wenn er per XML-Namensraumangabe gesagt bekommt, dass es sich um XHTML handelt?
🖖 Live long and prosper
Hallo Gunnar,
Ich hatte die benannten Zeichenreferenzen nur angeführt um zu zeigen, dass man in HTML eine Alternative dazu hat, die Zeichen, die auf per Tastatur (nicht oder schwierig) einzugeben sind, irgendwoher zu kopieren. Und benannte Zeichenreferenzen sind besser lesbar als numerische.
Klar, mich hat eben dieses × getriggert, da hier ziemlich lange im Weg gewesen. Ich hatte Ansätze mit Suchen/Ersetzen im Editor über Dateien hinweg, aber das war ein kaum zu vermittelnder und fehleranfälliger Aufwand. Die Studis haben dann einfach auf die Anpassungen und Erweiterungen verzichtet.
Erst durch die PowerShell-Verarbeitung ist der Prozess einfach durchführbar und durch die Erläuterungen im Video.
hat man ein Problem nicht-deklarierter Zeichenreferenzen.
Hm, ein XSLT-Prozessor kommt mit den in HTML definierten Zeichenreferenzen nicht klar, auch wenn er per XML-Namensraumangabe gesagt bekommt, dass es sich um XHTML handelt?
XSLT transformiert (und sieht) hier XML-Dokumente und dort sind eben nur die fünf Basisreferenzen amp, apos, gt, lt und quot bekannt.
Man bekommt ansonsten vom Transformator "Error reported by XML parser: Entity "times" wurde referenziert aber nicht deklariert.", was auch ein XML-Editor direkt im Ausgangsdokument bemängelt.
Man müsste im XHTML
<!DOCTYPE html [<!ENTITY times "×">]>
oder
<!DOCTYPE html [<!ENTITY times "×">]>
anpassen (ja, auch ohne 00) oder eben direkt im Markup die Alternativen verwenden.
Grüße,
Thomas
@@ThomasM
Man müsste im XHTML
<!DOCTYPE html [<!ENTITY times "×">]>
Also, um auf der sicheren Seite zu sein, sämliche Zeichenreferenz-Definitionen aus der XHTML-DTD ins Dokument kopieren?
Kleiner Scherz. Mir ist bewusst, dass es keine (X)HTML-DTDs mehr gibt. Oder gibt’s die noch?
🖖 Live long and prosper
Hallo Gunnar,
Kleiner Scherz. Mir ist bewusst, dass es keine (X)HTML-DTDs mehr gibt. Oder gibt’s die noch?
Editoren und Validierer verwenden eigene oder veröffentlichte Schemas, z. B. als RELAX NG kodiert.
Grüße,
Thomas