Safari und Ligaturen mit Minus-Zeichen

draupnir · 02.03.2023

Wie war das? Wer seltene Fehler findet, darf sie behalten? Ich habe da was seltenes/seltsames in Apple Safari 15 und 16 gefunden.
Wenn ich Ligaturen benutze, die ein Minus-Zeichen enthalten, dann nimmt das erstellte Symbol nicht die Breite des Symbols, sondern wohl die Breite des Ligaturnamens ein. Dazu folgender Screenshot:

Die Ligatur im Beispiel wird per Text »(E-Book-Erstellen

« aufgerufen und in das Symbol in Zeile 4 umgewandelt. Nur in Safari erscheint ein Riesenabstand zum nächsten Wort auf, hier stolze 113px.
In Firefox, Edge oder Apple Bücher (als ePub) ist alles in Ordnung.
Ich habe weder bei Google noch im Bing-AI-Chat einen Hinweis oder gar eine Lösung zu dem Problem gefunden.
Hat jemand das auch schon beobachtet und vorallem, gibt es ein Mittel dagegen?
- j.

greatblock · 03.03.2023

Wie läuft's bei Chrome?

Hast du mal dein CSS resettet?


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

Ein gewöhnlicher CSS-Reset wird an den Anfang des CSS-Dokuments gesetzt und dient dazu generell alle HTML-Eigenschaften auf Null zu setzen. Somit gelten für alle Browser erstmal die selben Grundvoraussetzungen.

draupnir · 03.03.2023

Danke für den Tipp. Safari hält nix davon, siehe Screenshot. Und mit dem Zurücksetzen handle ich mir neue Prpobleem im CSS ein, die ich dann beseitigen müßte.

Im aktuellen Chrome auch ohne Zurücksetzen wie in Firefox und Edge: kein Problem.

greatblock · 04.03.2023

draupnir schrieb:
handle ich mir neue Prpobleem im CSS ein, die ich dann beseitigen müßte.

Richtig. Das ist ganz normal. Drum fügt man das Reset als erstes hinzu und fängt dann langsam an zu coden.

draupnir · 04.03.2023

ja, bekannt, nur hilft es in diesem Fall wie gesehen nichts. :-(

greatblock · 04.03.2023

Okay, das Zauberwort heißt: Browser detection
https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browsers

Edit:
Dann müsstest du eine separate CSS Datei anlegen, nur für Safari

draupnir · 05.03.2023

Guten Morgen und Danke für den Hinweis.
Eine Browserweiche löst ja nicht das Problem, denn es geht darum, das nur Safari die Breite der Ligaturen falsch berechnet. Ein Trick dafür wird gesucht. Selbst ein <span width = "10px"> wird von Safari ignoriert.

Schönen Sonntag,
– j.

greatblock · 06.03.2023

Hat sich inzwischen was bewegt?

Ich wette ich kriegs hin, aber nur mit einer separaten Safari CSS Datei, weil dein Code vermutlich nicht "clean" ist.

draupnir · 06.03.2023

Nein, ich habe bisher keine Lösung. Du kannst gerne Dein Glück versuchen.

Eine Ligatur mit Minus-Zeichen lautet » (E-Book

« (Mit Klammern und Doppelpunkt). Diese findest Du im Zeichensatz TimeSaver Two: https://www.computergrafik-know-how.de/symbol-font-timesaver-two/

Viel Erfolg, bin gespannt,
– j.

greatblock · 06.03.2023

https://css-tricks.com/snippets/css/browser-specific-hacks/

draupnir · 06.03.2023

danke für den Link. Die Browser-Weichen alleine helfen ja nicht weiter, wenn ich den Safari nicht überreden kann, meine Ligaturen in der korrekten Breite und nicht in der Breite des Ligaturnames darzustellen, siehe oben #1.

greatblock · 07.03.2023

draupnir schrieb:
danke für den Link. Die Browser-Weichen alleine helfen ja nicht weiter, wenn ich den Safari nicht überreden kann, meine Ligaturen in der korrekten Breite und nicht in der Breite des Ligaturnames darzustellen, siehe oben #1.

Das klingt fast schon als wärst du fest davon überzeugt, dass man es mit Safari nicht lösen kann.

Welche Safari Version für Windows soll ich installieren? Coding ist manchmal wie ein Rätsel lösen.

draupnir · 07.03.2023

Safari läuft nur unter macOS, nix Windows. Ja, ich habe keine Ahnung, wie man das Problem lösen könnte, da es ja ein Bug in der Darstellung ist. Das Problem ist, dass Apple Fehler in älteren Programmen selten bereinigt.
Das Programm tritt nicht in Apple Pages und nicht in Apple Books (e-Book-Reader) auf. Es ist eben nur auf Safari beschränkt.

greatblock · 07.03.2023

Ich hab's gerade installiert. Aber die Geschwindigkeit ist eine Katastrophe. Gleich in den Müll damit.

Hast du überlegt die Ligaturen zu floaten? Versuch's mal mit "float:left" und deine <p> & <span> Tags bitte auch.

Ich hab hier noch ein MacBookPro rumliegen, ich schau's mir gleich an.

draupnir · 07.03.2023

ein span habe ich sowie um die Ligatur herum. Ein Float bringt nichts, auch kein width oder max-width in diesem Zusammenhang. Wenn ich es jedoch durch visible: hidden abschneide, dann erscheint der Originaltext, also (E-Book

statt der Ligatur. :-(

greatblock schrieb:
Ich hab hier noch ein MacBookPro rumliegen

... wenn's bei Dir nur rumliegt, kannst Du es mir ja schenken ;-)

greatblock · 16.03.2023

draupnir schrieb:
... wenn's bei Dir nur rumliegt, kannst Du es mir ja schenken ;-)

Ich kann's dir verkaufen. Ist nagelneu.