Warum Leerzeichen böse™ sind.

Auf dieser Seite möchte ich auf einen »beliebten« Anfängerfehler eingehen: Das Formatieren von Texten mit der Leertaste.

Das Leerzeichen

Wer aus der Bürowelt kommt, gar noch mechanische Schreibmaschinen kennt, für den ist die Leertaste, neben der Tabulatortaste, ein ganz normales Gestaltungsmittel beim Erstellen von Texten. Aus Gewohnheit angewandt, um beispielsweise einen Text einzurücken, haben Leerzeichen bei HTML für den Anfänger einen überraschenden Effekt, nämlich überhaupt keinen. Das liegt daran, das HTML keine Leerzeichen kennt. Leerzeichen und Tabulatoren in einer HTML-Quelle werden schlicht ignoriert (wie übrigens auch Zeilenumbrüche), sie dienen nur dazu, den Quelltext selbst zu formatieren und die Wörter darin voneinander zu trennen.
In HTML existiert zwischen zwei Wörtern ein sogenannter Whitespace (Weißer Raum/Leerer Bereich), dessen Ausmaße erst bei der Anzeige vom Browser berechnet werden.

In einem WYSIWYG-Editor wie dem Standardeditor passiert allerdings folgendes: Der Editor setzt für aufeinander­folgende Leerzeichen jeweils ein   ein.   bedeutet non breaking space und hat die Aufgabe eine Leerstelle zu kennzeichnen, an der nicht getrennt werden, also kein Zeilenumbruch erfolgen darf und hat dabei eine feste Breite, abhängig von der verwendeten Schriftart.

Warum funktioniert das nun nicht, um Texte einzurücken? Fünf Leerzeichen bedeuten doch eine Einrückung um eben fünf Zeichen? – Genau, aber wie breit sind fünf Leerzeichen? Das ist das Problem bei der Sache. Zum Zeitpunkt der Erstellung einer Seite steht diese Breite und deren Verhältnis zur Gesamt­breite der Seite noch garnicht fest. Diese Werte ermittelt erst der Browser bei der Anzeige der Seite aus der verwendeten Schriftart und Schriftgröße. Der Autor der Seite hat darauf keinerlei Einfluß. Das obige Beispiel veranschaulicht das einmal, sofern die entsprechenden Schriftarten verfügbar sind.

Wenn man nun beispielweise mittels Leerzeichen eine Überschrift (vermeintlich) in die Mitte gesetzt hat, sieht das bei einem Seitenbesucher mit anderer Auflösung und Schriftart/Font ziemlich seltsam aus.

Dabei ist die Überschrift in beiden Kästchen um die gleiche Anzahl Leerzeichen eingerückt. Der Unterschied ist der verwendete Font und die Breite des Kästchens, also das worauf der Autor keinen Einfluß hat, da er das System des Seitenbesuchers nicht kennt.

Texte formatieren

Zum formatieren von Texten benutzt man in der aktuellen Version von HTML (4.01) CSS. Die ursprünglichen HTML-Tags zur Textformatierung sind mittlerweile als deprecated eingestuft und sollten nicht mehr verwendet werden.

Um nun einen Text zu formatieren werden dessen HTML-Elemente CSS-Eigenschaften hinzugefügt.

Am häufigsten in einem Text sind wohl die Absätze. <p> steht für paragraph. Soll dieser nun zentriert sein, fügt man die CSS-Eigenschaft text-align (Textausrichtung) mit dem Wert center hinzu. Zusammengesetzt sieht das dann so aus: <p style="text-align: center;">Mein Text</p>. Mögliche Werte für text-align sind:

• left   : linksbündig
• right  : rechtsbündig
• center : zentriert
• justify: Blocksatz

Auf die gleiche Weise können so alle Elemente formatiert werden.

Vergrößere/verkleinere einmal Dein Browserfenster und siehe, wie sich der Text in den Boxen automatisch anpasst.

Zum Seitenanfang