Verschobene Punkte über Umlauten

Heute haben wir eine kleine Kuriosität aus unserem Weballtag zum Thema. Auf der Website eines Kunden kam es auf unterschiedlichen Systemen zu verrutschten Umlautzeichen. Die Punkte über ä oder ü waren in einem Textabschnitt immer ein Stück nach Rechts gerückt wie hier veranschaulicht:

Das Problem trat beispielsweise auf Windows mit IE11 oder auch auf Mac in Safari auf.

Schrift falsch gerendert?

Ein erster Gedanke war, dass die verwendete Schriftart Gotham Book einfach nicht korrekt gerendert wird. Dagegen sprach allerdings, dass in einem weiteren Abschnitt die selbe Schrift mit exakt identischem Styling (font-size und font-weight) normal dargestellt war:

Ein Austauschen der Schrift hat hier nicht direkt Klarheit schaffen können. In einigen Schriften war blieb das Problem bestehen, in Standard-Fonts wie sans-serif jedoch war das Problem behoben.

Falsche Zeichen verwendet?

Im HTML Quellcode waren keine Sonderzeichen zu erkennen. Auch im Editor im Backend sah alles normal aus, selbst in der Code-Ansicht. Der Text konnte in verschiedene Texteditoren (Notepad, Sublime etc.) kopiert werden und wurde immer gleich, ohne Fehler dargestellt. Auffällig war jedoch, dass beim Löschen eines Umlautes zuerst nur das Umlautzeichen verschwand und erst beim zweiten Backspace der Buchstabe selbst gelöscht wurde:

Das Problem konnte gelöst werden, indem die falsch dargestellten Umlaute einfach aus dem Text gelöscht und neu eingefügt wurden.

Sonderzeichen erzeugen den Umlaut

Um dem Problem genauer auf den Grund zu gehen, haben wir den ASCII Code für einen der fehlerhaften Umlaute mit dem ASCII Value Tool untersucht. Das Ergebnis war wenig überraschend ein und ein zusätzliches Sonderzeichen, genauer gesagt das Umlautzeichen selbst, welches in unserem Text als ASCII Code hinterlegt war. 

Das Umlautzeichen oder im Englischen Combining Diaeresis kann auf verschiedene Arten eingefügt werden. Im HTML funktioniert das Zeichen ̈, in Windows sollte es eigentlich über Alt+0308 eingegeben werden können, was bei unseren Systemen allerdings nicht funktioniert hat. Wie die Zeichen in den Blogpost unseres Kunden gelangten bleibt ein Rätsel, aber wir gehen davon aus dass hier ein Text aus einem PDF via Copy/Paste eingefügt wurde.

Darstellungstest

Hier haben wir unseren Dummy Text noch einmal mit dem Sonderzeichen eingesetzt. Wie wird es in IE dargestellt?

Kis of olebumör ukravom, mit cunons polelifünom ol, gesagolsöd vüdolsöd ans äl. Ye egivom-li padakipön zif. Din lo edunomöv piklänedon plökön, cüg otroivon volut no. Ona funi ledutoti nosükön ba.

Vielleicht wird dieser Artikel dem ein oder anderen die Fehlersuche in Zukunft ersparen. Bei Fragen oder Hinweisen freuen wir uns wie immer über einen Kommentar.