Neue Website?
Kostenlose Online Offerte

Bei der Umsetzung eines Designs mussten wir für die spezielle Darstellung von Text das SVG Element einsetzen um mehrere Textzeilen darzustellen. Der SVG Text sollte dabei Versal dargestellt werden, was wir mit einem einfachen <div> und entsprechender Klasse als Parent-Element vom SVG realisiert haben.

Das Code-Snippet vereinfacht:

Erhaltene Anzeige in sämtlichen Browsern ausser Safari – Alles perfekt!

browserold1

Erhaltene Anzeige in Safari (inkl. iOS) – Letzter Buchstaben wird umgebrochen!
browserold2

Kurz vor’m Durchdrehen weil keine Lösung in Sicht und kein entsprechender Bug gemeldet ist, bin ich nach dem Ausschluss-Verfahren vorgegangen und siehe da, das «text-transform» der Klasse vom Parent-Element war schuld. Also dieses direkt dem <tspan> zugewiesen:

Anschliessend die neue Anzeige im Safari – Alles perfekt, juhuii!

browsernew2

Nicole Strebel

Über Nicole Strebel

Arbeitet im Bereich Web&Apps als Entwicklerin und Webdesignerin. Ist unter anderem Spezialistin in JQuery, HTML5/CSS3, VB.Net & SQL. Freizeittechnisch beschäftigen sie aktuell Cupcakes, Geocaching und Büssli fahren.
Kommentar schreiben

*