Textlängen und Umbrüche in verschiedenen Browsern

Das Problem ist so alt wie das Internet und jeder Webdesigner kennt es. Texte haben in verschiedenen Browsern unterschiedliche Längen und brechen bisweilen anders um. Selbst ein und dieselbe Browserversion zeigt deutliche Unterschiede auf unterschiedlichen Plattformen wie zum Beispiel Firefox Windows oder Mac. Dies hat sich auch mit den Browserversionen IE9 und Firefox 4 unter Windows noch einmal deutlich gezeigt, da diese Brower auf aktueller Hardware mit einem neuen Textrendering auf Basis des Grafikprozessors arbeiten und nicht mehr über die Rechner-CPU.

Dies führt auch bei meinen Kunden regelmäßig zu Verwirrungen. Speziell wenn der Kunde selber über ein CMS auf seiner Website Texte eingeben und ändern kann. Zwar wird auf Schulungen immer darauf hingewiesen, dass tunlichst keine manuellen Umbrüche im Absatz genutzt werden sollen, aber wenn das technische Verständnis zur Problematik fehlt, ist das auch schnell wieder vergessen. Der Anwender sieht zunächst mal nur das Ergebnis in seinem Browser und alles scheint in Ordnung.

Hier mal ein paar Screenshots eines einfachen Textes mit font-size: 12px in verschiedenen Browsern und Betriebssystemen (Quelle: Adobe Browserlab).

Übersicht (Achtung: 6.255 x 719 Pixel)

Vergleich IE8 mit IE9

Firefox 3.6 OSX <-> Windows

Gründe für dieses Verhalten

  • Verschiedene Verfahren des Textrenderings.
  • Unterschiedliche Berücksichtigung von Font-Informationen wie Spacing, Kerning und Hinting.
  • Abweichende Interpretation von CSS-Anweisungen.
  • Bildschirmauflösung Windows = 96 dpi (dot per Inch = Punkte per Zoll) / Mac = 72 dpi.

Lösungen

Zunächst mal muss jeder Screendesigner und Webdesginer lernen, dass der Browser kein abgeschlossenes Blatt Papier mit einer festen Größe ist. Eine normale Website hat in der Regel mehr oder weniger festgelegte Spaltenbreiten und ist in der Höhe flexibel. Der Webdesigner kann nur erahnen, wieviel Text eine bestimmte Textbox später in der Praxis haben wird. Hier werden die Kunden meist sehr Kreativ. Das Weblayout muss also für Textrahmen flexibel gestaltet sein.

Bedingter Trennstrich

Wie man an den Screenshots schön erkennen kann, machen manuelle Umbrüche auch keinen Sinn. Allerdings gibt es auch schon seit den Anfangstagen des WWW den bedingten Trennstrich &shy; (= soft hyphen = bedingter Trennstrich). Damit kann man speziell bei sehr langen Wörtern dem Browser einen Vorschlag zur Trennung machen. Steht das Wort mitten im Fließtext passiert gar nichts, das Zeichen ist nicht sichtbar. Steht das Wort am Ende eines Textrahmens, erfolgt an der Sollbruchstelle durch den Browser ein Umbruch und ein Trennstrich wird eingefügt.

CSS-Angaben im Stylesheet

Auch bei der Angabe der Schriftgröße im Stylesheet kann man schon einiges falsch machen. Zu diesem Thema könnte man ganze Bücher füllen. Hier ein Verweis zur Einführung: Das Windows/Mac font-size-Problem. In der Praxis benutze ich für kleine Webprojekte meistens die schnelle Variante der Angabe in Pixeln. Der oft angemerkte Nachteil bei der Skalierung durch den Anwender ist nicht mehr gültig, da alle modernen Browser auch Pixel-Angaben richtig skalieren können. Bei größeren Projekten Arbeite ich gerne mit prozentualen Größenangaben. Hierzu werden vorher per CSS alle Angaben auf einen einheitlichen Wert von 13px gebracht. Dann kann man zum Beispiel über font-size: 116% eine Schriftgröße von 15px erzielen. Weitere Infos dazu gibt es zum Beispiel bei YUI 2: Fonts CSS.

Textersetzung durch Grafiken/Flash

Und wenn man sich dann doch mal auf eine 100% korrekte Darstellung eines Textrahmens verlassen muss? Auch dazu gibt es einige Möglichkeiten. Letztlich wird der Text dann als Grafik oder Flash in die Website eingebaut. Hierbei sollte man aber darauf achten, dass der dargestellte Text weiterhin als solcher im Quelltext der Website steht, damit Google & Co. glücklich sind. Die Technik dazu nennt sich Image-Replacement und eine Übersicht der gängigen Umsetzungen findet man zum Beispiel bei Jens Meiert oder auch bei css-tricks.com. Das sollte aber eine absolute Ausnahme sein, wenn es wirklich nicht mehr anders geht.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: