spacer
spacerwebwriting-magazin.despacer Newsletterspacer Forumspacerspacer Kontaktspacer
spacer
spacer spacer Zur Startseite Webwriting: Text, Design, Usability.... Tipps, Tricks, Tutorials Lob, Kritik, Rezensionen Was das Netz bewegt... Software, Tools Für Euch gelesen Surftipps, Knowhow-Quellen spacer
Logo
*
Webwriting News
- der Newsletter des Webwriting-Magazins meldet neue Beiträge und Interessantes rund ums Webpublishing - was wir halt so finden in den unendlichen Weiten.

zum BestellfensterAnfordern ?

spacer


*

Mehr über CSS:

Alleskönner mit Schönheitsfehlern
- Kleine Einführung in die Geheimnisse der CSS
 
Was Betriebssystem und Browser alles mit Schriften anstellen

*www.w3.org/Style/
- Die offizielle Website des W3C für alle Fragen rund um CSS.
 

*
*
Webwriting-Magazin > So geht's


Erste Schritte mit CSS

Gleiches Schriftbild in (fast) allen Browsern

Unsere Augen sind verwöhnt. Wer Aufmerksamkeit erringen will, muß ihnen schon einiges bieten - und zwar mehr, als standardmäßiges HTML zu bieten hat. HTML beschränkt sich bewußt darauf, die logische Gliederung von Dokumenten zu markieren - die Darstellung selbst bleibt dem jeweiligen Ausgabegerät überlassen. Damit ist sichergestellt, daß ordentlich gebaute HTML-Seiten auf den verschiedensten Ausgabegeräten wiedergegeben werden können - und daß sie auf allen gleich unattraktiv aussehen.
 
Für Anbieter gesuchter Informationen ist mangelnde Attraktivität des Layouts kein Problem - auf *http://www.w3.org/TR/WCAG20/ ist beispielhaft zu sehen, wie Dokumente aussehen (können), die keine Leser werben müssen, weil sie als Pflichtlektüre gelten. Aber sonst? HTML kann zwar nicht nur Gliederungspunkte bzw. Überschriften in verschiedenen Größen darstellen (ueberschriften.htm), sondern hat im Lauf der Zeit gelernt, auch *Lauftext zu formatieren - aber einmal sind diese Abstufungen ziemlich grob, und dann gehören sie seit HTML 4 auch nicht mehr zum guten Ton. Die entsprechenden Tags funktionieren zwar nach wie vor in allen Browsern, aber Ihr Gebrauch wird vom W3C "mißbilligt". Und außerdem gibt es einen Ersatz: Cascaded Stylesheets CSS.

Alleskönner mit Schönheitsfehlern

Die gute Nachricht: CSS können fast alles - im Prinzip. Eine kleine Einführung in die Geheimnisse der CSS, die andeutet, was sie alles können und warum man sich auf sie einlassen sollte, habe ich *hier ausgelagert.
 
Die schlechte Nachricht: So gut die CSS im Prinzip sind, so zickig verhalten sie sich im Browser. Oder besser gesagt, so zickig verhalten sich die Browser, wenn sie es mit CSS zu tun bekommen. Vieles von dem, was CSS "im Prinzip" können, wird von keinem derzeit erhältlichen Browser dargestellt. Anderes nur in einigen Browsern oder in verschiedenen Browsern auf verschiedene Weise - ausführlich aufgezählt auf *Mastergrid.
 
Ein paar Auszeichnungen werden tatsächlich sogar in allen Browsern gleich dargestellt. Leider gehört selbst etwas so Elementares wie die Einstellung von Schriftgrößen nicht dazu. Während die (vom Standard missbilligte) Formatierung mit (font size=x) immerhin von meinen Testbrowsern weitgehend Screenshotgleich dargestellt werden, führt die theoretisch gleichwertige und standardgemäße Auszeichnung mit (style="font-size:x") auf meinem System zu Screenshoterheblichen Unterschieden.
 
Die Einschränkung "auf meinem System" ist wichtig - deshalb sind hier auch gleich die Screenshots mitgeliefert. Die jeweils im Browser dargestellten Dateien kann man sich gerne herunterladen und für Tests im eigenen System verwenden. Wahrscheinlich sehen die Ergebnisse überall anders aus - wer will schon sagen, was da "richtig" wäre.
Diese Abweichungen haben eine ganze Reihe von Ursachen - wer mehr darüber wissen will, findet Informationen und Links Screenshothier.

"Pixelgenau" bleibt eine Illusion

Nach alledem ist klar, daß ein "pixelgenaues Layout" für Webtexte bestenfalls dann zu erreichen ist, wenn man seine Seiten komplett aus Grafiken aufbaut. Das macht doch keiner? Nicht mit Gifs oder JPEGs vielleicht, aber leider immer wieder in Flash. Und dann wundern sich die Macher, daß die Suchmaschinen nichts von ihnen wissen wollen. Und die User, sofern sie nicht gerade an TDSL oder T1 hängen, auch nicht.
 
Die Arbeit mit Schriften kann also nicht das Ziel haben, auf allen Browsern und allen Systemen das exakt gleiche Schriftbild zu produzieren - es geht alleine darum, Schrift so zu gestalten, daß sie das Verständnis erleichtert und den verwöhnten Anforderungen der Augenmenschen des audiovisuellen Zeitalters entgegenkommt.
 
Auf vielen Seiten wird zu diesem Zweck mit festen Schriftgrößen z.B. durch Formatierung mit px oder pt gearbeitet. Damit kann man zwar relativ leicht ein einheitliches Schriftbild erzielen. Wenn man dann auch noch feste Tabellenbreiten verwendet, kommt man zu Seiten, die immer gleich aussehen - und sich weder der von mir gewählten Breite des Browserfensters, noch der Auflösung des Bildschirms, noch der Sehstärke meiner Augen anpassen lassen. Auf *www.stern.de oder *www.computerwoche.de kommt man da mit hoher Auflösung ganz schön ins Schwitzen.

Das Kreuz mit den starren Designs

Auch das sehr aufs Platzsparen ausgelegte Design vieler Portalseiten, bei dem man möglichst viel Text auf einen Bildschirm quetscht, erscheint wenig sinnvoll. Je mehr Textschnipsel man mir auf einmal vorsetzt, desto weniger spontanen Durchblick habe ich als Leser. Und bei längeren Texten - wie oft auf dem WWM - ist es erst recht wichtig, ein augenfreundliches Schriftbild zu präsentieren - selbst wenn der Leser dann einmal öfter scrollen muß. Dem Besucher die Wahl der Schriftgröße im Zweifelsfall selbst zu überlassen, bietet da eine gute Kompromisslösung. *www.spiegel.de und *www.heise.de zeigen, wie man es richtig macht.
 
"Friß oder stirb" als Design-Richtlinie geht an Sinn und Zielsetzung des WWW gründlich vorbei. Ich gehöre nicht zu den Puristen, die meinen, jeder in Web gestellte Content müsse auf jeder "device" darstellbar sein. Das Webwriting-Magazin wird nicht für das Handy-Display geschrieben - punktum. Aber "normale" Seite sollten auf "normalen" Geräten wie Laptop und PC ohne Abstriche angesehen werden können, und zwar zu den Einstellungen des Browserfensters und der Schriftgröße, mit der denen der User normalerweise arbeitet, und das, ohne daß das Layout sich total auflöst.

Wie es funktioniert

Um das Konzept der CSS etwas anschaulicher darzustellen und eine Einstiegsmöglichkeit zu bieten, auch einmal selbst mit dem Mechanismus herumzuexperimentieren, habe ich ein Miniprojekt konzipiert, das gleichzeitig auch Antwort auf eine oft gestellte Frage gibt: Wie kann man Texte so formatieren, daß sich plattformübergreifend ein einheitliches Schriftbild ergibt?
 
Die Lösung sollte insgesamt drei Bedingungen erfüllen:

  • Die Darstellung soll in allen bedeutenden Browsern auf allen bedeutenden Betriebssystemen in etwa gleich ausfallen - damit ist Wiedererkennbarkeit und CI gewährleistet;
     
  • Nicht nur Schriftgrößen und -stärken, sondern auch die Zeilenabstände sollen in relativ feiner Abstufung variabel sein - so können Textelemente unterschiedlicher Bedeutung differenziert dargestellt werden;
     
  • Die von MS-Explorer und Netscape gebotene Möglichkeit zur Skalierung der Schriftgröße soll erhalten bleiben - das erlaubt dem Besucher, den Browser an seine persönliche Situation anzupassen.

Leider stehen diese Anforderungen in einem sehr spannungsvollen Verhältnis zueinander. Die erste entspricht zwar den Sehgewohnhgeiten vieler Surfer, widerspricht aber dem "reinen Geist" von HTML. Allerdings ist dieser "reine Geist" mit sich selbst nicht ganz im reinen, weil ausgerechnet das Formatierungselement "font size", das zuverlässig browserübergreifend funktioniert, in der Zukunft von HTML keine Rolle mehr spielen soll. Die statt dessen nun offiziell empfohlenen CSS bieten Formatierungsmöglichkeiten, die weit über das ursprüngliche HTML hinausgehen - dazu gehört auch die in der zweiten Anforderung genannte Möglichkeit zur Variation von Zeilenabständen. Aber bloß weil eine Formatierung in CSS definiert ist, ist noch lange nicht gesagt, daß die Browser sie auch darstellen können. Ältere Browser (MSIE. NS und Opera bis Version 3 einschließlich), geben bestenfalls einen kleinen Teil des Umfangs von CSS 1 aus dem Jahr 1996 wieder.

Der Ausreißer: NS 4.7

Ein Fall für sich ist der Netscape Navigator 4.7, der leider immer noch nicht von den Desktops der User verschwinden will - erst kürzlich ist unter der Nummer 4.79 eine neue Version herausgekommen, die zwar einige weniger wichtige Bugs beseitigt, die Hauptmängel dieses Browsers, der CSS nur auf dem Umweg über Jacvascript ausführt, aber unangetastet läßt.
 
Die anderen aktuellen Browser, MSIE ab 5.5, Navigator 6, Mozilla und Opera 5, reagieren auf sauberes HTML und ordentliche CSS zunehmend gleichartig - obwohl sie alle noch weit davon entfernt sind, die Möglichkeiten von Stylesheets wirklich auszuschöpfen. Sie beherrschen zwar den größten Teil von CSS 1 und einige weniger interessante Möglichkeiten von CSS 2 - aber noch in diesem Jahr soll CSS 3 verabschiedet werden.

Die DM geht, das EM kommt

Zur Formatierung der Schriftgröße stellt CSS eine ganze Reihe von *Maßeinheiten zur Verfügung. Welche Unterschiede sich bei ihrer Anwendung in den beiden meistgebrauchten Browsern MSIE 5.x und NS 4.7 im einzelnen ergeben, habe ich hier *komplett aufgelistet.
 
Für die Zielsetzung meines Miniprojektes empfehlen sich unter diesen Umständen nur die Formatierung mit EM und EX. Ich habe mich hier für EM entschieden, weil diese Einheit nach den Empfehlung des W3C wohl in Zukunft die größte Rolle spielen wird.

Lore im Chaosland

Der Versuch, eine Textseite mit der schönen Geschichte von *Lorem Ipsum über Styleangaben mit EM zu formatieren, scheint allerdings zunächst geradewegs ins ScreenshotChaos zu führen. Und die Anreicherung des Stylesheets durch die ohnehin geplante Angabe für einen etwas großzügigeren Zeilenabstand reduziert dieses Chaos nur unwesentlich. Allerdings nicht, wenn man die Formatierung als Attribut von "body" vornimmt - das führt zu einem unter dem Gesichtspunkt der browserübergreifenden Darstellung Screenshotwenig zufriedenstellenden Ergebnis und kann bei einem kleinen Fehler im Code (Komma statt Punkt in der Angabe 1.5 em für den Zeilenabstand) zu einem höchst Screenshotmerkwürdigen Verhalten führen.
 
Besser wird es erst, wenn man die line-height so, wie es sich gehört, im jeweiligen Absatzformat bestimmt: Nun erhält man kleineren Zeilenabstand bei kleineren, und größeren Zeilenabstand bei größeren Schriften. Wie zu erwarten, stimmt Screenshotdas Ergebnis für MSIE 5.5, NN6 und Mozilla weitgehend überein - nur der NS 4.7 tanzt aus der Reihe. Die Buchstabenhöhen weichen zwar nur in einem erträglichen Maß ab, aber die Zeilenabstände sind nicht zu gebrauchen: Der NN 4.7 bezieht das Format für den Zeilenabstand offenbar nicht auf den jeweiligen Absatz, sondern auf das Ausgangsformat.

Eine Extrawurst für NS 4.7

Das einzige Mittel, hier Abhilfe zu schaffen, besteht darin, für den NN 4.7 ein eigenes Stylesheet zu schreiben, das dann über eine Browserweiche zugeordnet wird. Mit ein bißchen Probieren läßt sich so eine Darstellung erreichen, bei der Zeichengröße und Zeilenabstand weitgehend Screenshotübereinstimmen. Nur bei den Abständen zwischen den Absätzen gibt es noch einen sichtbaren Unterschied, der sich aber bei den praktisch verwendbaren Formaten im Rahmen hält.
 
Durch Anwendung weiterer Eigenschaften von CSS läßt sich auch diese Abweichung Screenshotbeseitigen.
 
Das Beispiel dient jedoch eher der Demonstration und wird nur begrenzt zur praktischen Nachahmung empfohlen, weil durch den Einsatz von "padding" im Style unerwünschte Nebenwirkungen auftreten können. Ebenfalls eher der Demonstration dient die Datei *blindtext_merker.htm mit ihren Stylesheets - bei ihr wurden die CSS so ausgelegt, daß der Name des jeweils von der Browserweiche genutzten Stylesheets in der Überschrift hervorgehoben wird. In der Testphase von CSS und Browserweichen ist das ausgesprochen praktisch. Aber nicht solche Tricks sind das Entscheidende, sondern folgende Tatsache: Um die Macken des NN 4.7 auszubügeln, muß man nicht die ganze HTML-Seite eigens auslegen - es reicht, wenn man ein und derselben Seite per Browserweiche jeweil das passende CSS zuweist.
   
Die hier skizzierte Lösung hat bis jetzt noch zwei Schwachpunkte: Der eine ist die Browserweiche. Sie setzt Javascript voraus - und wer Javascript deaktiviert hat, bekommt das Stylesheet erst gar nicht zu sehen. Zumindest partielle Abhilfe verschafft hier ein vor der Browserweiche fest codierter Aufruf eines Standars-Stylesheets - das gilt dann für alle, die kein Javascript benutzen. Außer für die Benutzer von Netscape 4.7. Da dieser Unglücksbrowser auch CSS generell über Javascript interpretiert, gehen ohne JS prinzipiell auch keine CSS. Da kann man halt nichts machen.

Noch mehr Extrawürste

Der zweite Schwachpunkt besteht darin, daß bis jetzt nur die Unterschiede zwischen den Windows-Browsern berücksichtigt sind - Anwender von Mac oder Unix sehen mit den für Windows "richtigen Einstellungen" unter Umständen eine erheblich zu kleine Schrift. Nun läßt sich eine Browserweiche nachgerade beliebig verfeinern und erweitern - inwieweit das nötig ist, muß jeder Anbieter selbst überlegen. Eine Kompromisslösung, die wenigstens einem bedeutenden Teil der Anwender von Non-Windows-BS eine größere Schrift gönnt, könnte darin bestehen, den Browsern, die bei der Abfrage auf MSIE, NN 4.7 und NN 6 durch das Sieb gefallen sind, gemeinsam ein Stylesheet mit größerer Schriftauszeichnung zuzuweisen. Ich habe das hier mal versuchsweise gemacht und bin sehr daran interessiert zu hören, was die Anwender von Non-Windows-BS beim Aufruf von blindtext_weiche.htm zu sehen bekommen. (Bitte gleich ins mailto: schreiben.)

Happy End

Mit der in diesem kleinen Projekt eingesetzten Browserweiche und den entsprechenden Stylesheets (download, Anwendung und Weiterentwicklung sind ausdrücklich erwünscht, die wesentlichen Dateien zu einem Zip verpackt gibt es hier) sind Seiten zu bauen, die bei den meisten Normalusern weitgehend gleich dargestellt werden. Kenner und Könner, die exotische Software einsetzen oder ihren Opera mit einer individuellen Kennung auf die Reise schicken, werden weiterhin das Vergnügen haben, auf vielen Seiten mit unvorhersehbaren Effekten konfrontiert zu werden.
 
So bekommt jeder, was er haben möchte.

Michael Charlier

gelber Punkt Diesen Beitrag kommentieren?
Spacer Hier geht's ins Forum »»»

Webwriting-Magazinspacer
*
spacer spacer zur Startseite Webwriting: Text, Design, Usability.... Tipps, Tricke, Tutorials Lob, Kritik, Rezensionen Was das Netz bewegt... Software, Tools Für Euch gelesen Surftipps, Knowhow-Quellen spacer
spacer
spacerwebwriting-magazin.despacer Newsletterspacer Forumspacerspacer Kontaktspacer
spacer