Websiteentwicklung: CSS: Textausrichtung
Mit der Eigenschaft text-align kann die horizontale Ausrichtung von inzeiligen Inhalten einer Block-Box beeinflußt werden.
Die möglichen Werte lauten:
- 'inherit' geerbt
- 'left' linksbündig
- 'right' rechtsbündig
- 'center' mittig
- 'justify' Blocksatz
Der Initialwert hängt von der normalen Textlaufrichtung ab (etwa festgelegt mit der Eigenschaft direction oder einer entsprechenden Methode). Ist die Textlaufrichtung von links nach rechts, ist 'left' der Initialwert. Ist die Textlaufrichtung von rechts nach links, ist 'right' der Initialwert.
Die Eigenschaft wird vererbt und ist anwendbar auf Block-Container bei visuellen Medien. Die Eigenschaft hat allerdings keine Wirkung, wenn die Eigenschaft white-space den Wert 'pre' oder 'pre-wrap' hat.
Die meisten Darstellungsprogramme nehmen bei der Aufteilung von Text auf Zeilen keine Silbentrennung vor. Reicht der verfügbare Platz nicht mehr für das nächste Wort aus, so wird bei 'left', 'right' und 'center' das nächste Wort als Zeilenanfang der nächsten Zeile verwendet. Ist das Wort länger als die Zeile, steht das Wort über. So nimmt der Text einer Zeile also zumeist weniger Platz ein, als verfügbar ist, manchmal auch mehr. Bei der nicht bündigen Seite entsteht so also leerer Raum oder Text steht über den Rand der Box über. Bei der mittigen Anordnung wird dann entsprechend nach beiden Seiten gleichviel Platz gelassen oder die Wörter stehen gleichviel über.
Bei 'justify' wird das erste Wort entsprechend bündig am Zeilenanfang angeordnet, das letzte bündig zum Zeilenende, jedenfalls sofern es sich nicht um die letzte Zeile handelt oder ein manueller Zeilenumbruch angegeben ist. Besonders durch Variation der Breite der Leerzeichen zwischen den Wörtern, optional auch durch Stauchung der Glyphen oder der Abstände zwischen den Glyphen verteilt das Darstellungsprogramm dann die Wörter mit gleichen Leerzeichenbreiten über die Zeile. Besonders wenn die Breite einer Zeile gering ist und darin nur wenige Wörter stehen, kann dies die Lesbarkeit beeinträchtigen, was zur Ermüdung des Lesers beitragen kann.
'justify' eignet sich daher besser für breite Blöcke, in welchen alle Wörter viel kürzer sind als die Breite des Blockes. Unter diesen Umständen ist auch bei den anderen Ausrichtungen der variable Leerraum auf der nicht bündigen Seite weniger störend als bei Blöcken mit geringer Breite, woraus sich ganz allgemein schließen läßt, dass Autoren geringe Zeilenbreiten vermeiden sollten, gleich welche Anordnung sie bevorzugen. Ist eine kleine Breite hingegen unvermeidlich, gibt es vermutlich bei 'justify' die größeren Beeinträchtigungen hinsichtlich der Lesbarkeit.
Beispiele:
p {
text-align: center
}
Dies zentriert den damit formatierten Text.
Das wird unter anderem gerne für Überschriften verwendet.
Aber auch bei Gedichten, wo festgelegte Zeilen eine strukturelle Bedeutung haben, ist die Zentrierung eine klassische Anordnungsmethode, auch weil hier die Zeilen oft nicht den gesamten verfügbaren Platz benötigen.
Bei normaler Prosa, wie diesem Absatz hingegen, schränkt die Zentrierung die Lesbarkeit wieder deutlich ein.
Aufeinanderfolgende längere Komposita wie Textanalysesanleitungswerkverzeichnisstrukturkommission zur Sekundarstufenschülerkleinstgruppenbildungseignungsermittlung können hier interessante Strukturen hervorrufen, wie bei den anderen Anordnungen auch.
p {
text-align: right
}
Auch eine rechtsbündige Anordung ist für längere Texte, bei denen die Leserichtung von links nach rechts geht, eher problematisch für die Lesbarkeit. Allerdings bei Listen mit kurzen Einträgen oder Navigationsmenüs, insbesondere wenn letztere rechts vom Inhalt angeordnet sind, kann diese zu interessanten Effekten führen. Man achte bei der Anordnung rechts neben dem Inhalt auch darauf, dass überstehende Inhalte unangenehm überlappen können, etwa bei langen Wörtern: 'Desoxyribonukleinsäureanalyseanordnungsbedienungsanleitung'.
p {
text-align: justify
}
Dies gibt den damit formatierten Text im Blocksatz aus. Um einen Eindruck zu bekommen, wie dies wirkt, ist zusätzlich die Breite der Box eingeschränkt. Zum Ausprobieren sollte man ruhig einmal den Anzeigebereich so weit verkleinern, dass der verfügbare Platz nochmals verkleinert wird. Wörter wie 'Donaudampfschiffahrtskapitänsanwärterpatentverfahrensvorschriften' können bei allen Anordnungen zu unansehnlichen Ergebnissen führen, wenn die Breite der Box nicht ausreicht.
Als kleine Hilfe sei hier noch angemerkt, dass man bei langen Wörtern wie Komposita den Darstellungsprogrammen bei der Trennung des Wortes helfen kann, indem man einen bedingten Trennstrich an geeigneten Stellen einfügt, dies ist das Zeichen
­. Bei älteren Programmen kann dies Zeichen allerdings auch fehlinterpretiert werden, weswegen man sich überlegen muß, ob die Fehlinterpretation bei alten Programmen der schlimmere Effekt ist oder das zu lange Wort bei allen Programmen. Zum Test: 'Donaudampfschiffahrtskapitänsanwärterpatentverfahrensvorschriften'.