Automatische Links in iOS entfernen - Guru 2.0
Automatische Links in iOS entfernen

Automatische Links in iOS entfernen

Einsam im Louvre von Paris, Bild: microble.eu

Einsam im Louvre von Paris, Bild: microble.eu

Diese automatischen Links im iOS haben mich in den letzten Tagen ziemlich ins Grübeln gebracht. Da ist der Newsletter mit perfektem Layout und responsiv, funktioniert überall und dann das!
Eigentlich sind die automatischen Links von Apples mobilen System, dem iOS, ja ganz praktisch. Schnell auf die Adresse geklickt und schon findest Du den Weg. Oder auf das Datum getappt und schon ist der Kalender offen. Aber oft passen sie einfach nicht ins Layout, diese blauen unterstrichenen Fragmente.

Prinzipiell gibt es mehr oder weniger sinnvolle Lösungen, um iOS dieses Verhalten abzugewöhnen. Und ausserdem achte darauf, dass du es vielleicht doch brauchst. Denn deine AnwernderInnen sind diese Unterstüzung auf ihren Geräten gewöhnt.

Einen Style für die Apple-Links festlegen

Eine sehr einfache Lösung ist das Verwenden der von Apple definierten a-Elemente neu zu formatieren. Dies funktioniert zwar nicht bei allen Newsletter-Systemen, aber Du brauchst dafür nur die folgenden Zeilen in dein Stylesheet einfügen.

Mit diesen Stilen werden die a-Elemente einfach als normaler Text dargestellt, jedoch bleibt die automatische Verlinkung (wenn auch unsichtbar) erhalten. Dabei kannst Du aber die Stile so verändern, dass deine AnwenderInnen die Links sehen und es zu deinem Design passt.

Die Erkennung mit meta-Elementen abschalten

Wenn Du Zugriff auf das head-Elemente hast, auch das bieten nicht alle Newsletter-Systeme an, kannst du die automatische Erkennung sehr gezielt beeinflussen. Du kannst dazu die folgenden meta-Elemente verwenden. Je nach content-Attribut wird die entsprechende automatische Erkennung deaktiviert und die Links nicht mehr blau und unterstrichen dargestellt.

Das funktioniert auch ganz gut, aber es hat halt den Nachteil, dass wirklich die Verlinkung abgeschaltet wird.

Mit Pseudoelementen arbeiten

Ein netter Workaround ist das Pseudoelement. Seit HTML-5 gibt es ja keine festgelegten Elemente mehr. Du kannst dir jederzeit neue Elemente einfallen lassen und diese verwenden. Der Browser darf sie weder entfernen, noch formatieren oder sonst etwas damit anstellen. Das kannst Du dir zu nutze machen und die entsprechenden Infos, wie Datum, Adresse oder Zeit, in ein unbekanntes Element setzen. Dadurch funktioniert der Automatismus von iOS nicht mehr, das klappt aber nicht immer.

Eine HTML-Entität einsetzen

Mit dem Element Zero-Width-Non-Joiner kannst du iOS austricksen. Die automatische Formatierung der Links funktioniert nur, wenn die Schreibweise einer bestimmten Norm nicht entspricht. Dies kannst du entweder umgehen, indem du bewusst “falsch” schreibst oder eben diese unsichtbare HTML-Entität mitten in den Text setzt.
Das funktioniert auf iOS-Geräten ganz gut, aber auf Android 2.3 sieht es mies aus, da ein Pipe-Zeichen dargestellt wird.

Eigene Element-Stile einführen

Eine sehr gute Methode, welche eigentlich immer und überall funktioniert, ist das span-Element. Die schreibst die entsprechenden Infos (Datum, Adresse, Zeiten, …) innerhalb eines span-Element mit einer Klasse. Diese kannst du perfekt im style-Element formatieren und auch noch variieren. Damit werden die Links perfekt in dein Design eingepasst.

Nun kannst Du die Stile auch in deinem HTML verwenden.

Mich hat das fast zur Verzweiflung getrieben. Aber mit den eigenen Stilen und den meta-Elementen funktioniert es jetzt ganz gut. Hast Du auch einen Tipp dazu oder einen Trick? Dann schreib einen Kommentar zu diesem Post.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.