So legen Sie mit CSS ausgerichteten Text fest

click fraud protection

Eine der Eigenschaften der Typografie einer Website, die Sie während der Entwicklung einer Website anpassen können, ist die Ausrichtung des Textes der Website. Standardmäßig ist der Website-Text linksbündig und so hinterlassen viele Websites ihren Text. Die einzigen anderen Optionen sind rechtsbündig, was selten vorkommt, oder vollständig gerechtfertigt.

Begründeter Text ist ein Textblock, der sowohl auf der linken als auch auf der rechten Seite ausgerichtet ist, im Gegensatz zu nur einer dieser Seiten (was die Ausrichtung "links" und "rechts" bewirkt). Der doppelte Blocksatz wird erreicht, indem die Wort- und Buchstabenabstände in jeder Textzeile angepasst werden, um sicherzustellen, dass jede Zeile die gleiche Länge hat. Dieser Effekt heißt vollständige Begründung. Richten Sie Text in CSS aus, indem Sie die verwenden Textausrichtung Eigentum.

Wie funktioniert die Begründung?

Der Grund, warum Sie auf der rechten Seite eines Textblocks oft eine ungleichmäßige Kante sehen, ist, dass jede Textzeile nicht die gleiche Länge hat. Einige Zeilen haben mehr Wörter oder längere Wörter, während andere weniger oder kürzere Wörter enthalten. Um diesen Textblock zu rechtfertigen, müssen einigen Zeilen zusätzliche Leerzeichen hinzugefügt werden, um alle Zeilen auszugleichen und konsistent zu machen.

instagram viewer

Jeder Webbrowser hat seinen eigenen Algorithmus zum Anwenden der zusätzlichen Leerzeichen innerhalb einer Zeile. Die Browser prüfen Wortlänge, Silbentrennung und andere Faktoren, um zu bestimmen, wo die Leerzeichen platziert werden sollen. Aus diesem Grund sieht der Blocksatz von einem Browser zum anderen möglicherweise nicht identisch aus. Seien Sie jedoch versichert, dass die Unterstützung großer Browser gut ist, um Text mit CSS zu rechtfertigen.

So rechtfertigen Sie Text

Das Ausrichten von Text mit CSS erfordert einen Textabschnitt zum Ausrichten. Normalerweise verwenden Sie Textabsätze, da große Textkontextblöcke, die sich über mehrere Zeilen erstrecken, mit Absatz-Tags gekennzeichnet werden.

Nachdem Sie einen Textblock ausrichten müssen, müssen Sie nur noch den Stil mit der CSS-Eigenschaft text-align style auf Blocksatz setzen. Wenden Sie diese CSS-Regel auf einen geeigneten Selektor an, damit der Textblock wie beabsichtigt gerendert wird.

Wann ist Text zu rechtfertigen?

Viele Leute mögen das Aussehen von ausgerichtetem Text aus gestalterischer Sicht, hauptsächlich weil es ein sehr konsistentes, gemessenes Aussehen erzeugt, aber es gibt auch Nachteile, wenn Text auf einer Webseite vollständig ausgerichtet wird.

Erstens kann Blocksatz schwer zu lesen sein. Dies liegt daran, dass beim Ausrichten von Text manchmal viel zusätzlicher Platz zwischen einigen Wörtern in der Zeile eingefügt werden kann. Diese inkonsistenten Lücken können die Lesbarkeit des Textes erschweren. Dies ist besonders wichtig auf Webseiten, die aufgrund von Beleuchtung, Auflösung oder anderer Hardwarequalität bereits schwer zu lesen sind. Das Hinzufügen ungewöhnlicher Leerzeichen zum Text kann eine schlechte Situation noch verschlimmern.

Zusätzlich zu den Herausforderungen bei der Lesbarkeit reihen sich die Leerzeichen manchmal aneinander, um "Flüsse" aus weißem Raum in der Mitte des Textes zu erzeugen. Diese großen Lücken an Weißraum können wirklich zu einer unangenehmen Anzeige führen. Darüber hinaus kann die Ausrichtung bei extrem kurzen Zeilen dazu führen, dass Zeilen, die ein Wort enthalten, zusätzliche Leerzeichen zwischen den Buchstaben enthalten.

Wann sollten Sie die Textausrichtung verwenden? Der beste Zeitpunkt, um Text zu rechtfertigen, ist, wenn die Zeilen lang und die Schriftgröße klein ist – etwas, das auf responsiven Websites, auf denen sich die Zeilenlängen je nach Bildschirmgröße ändern, schwer zu gewährleisten ist. Es gibt keine feste Zahl für die Länge der Zeile oder die Größe des Textes; Sie müssen Ihr bestes Urteilsvermögen anwenden.

Nachdem Sie den Textausrichtungsstil zum Ausrichten von Text angewendet haben, testen Sie ihn, um sicherzustellen, dass der Text keine Leerräume enthält – und testen Sie ihn in verschiedenen Größen. Der einfachste Test erfordert nichts Komplizierteres als Ihre eigenen zusammengekniffenen Augen. Die Flüsse heben sich als weiße Flecken in einem ansonsten grauen Textblock ab. Wenn Sie Flüsse sehen, sollten Sie die Textgröße oder die Breite des Textblocks ändern, um den Text umzufließen.

Verwenden Sie die Ausrichtung erst, nachdem Sie sie mit linksbündigem Text verglichen haben. Vielleicht gefällt Ihnen die Konsistenz der vollständigen Ausrichtung, aber der linksbündige Standardtext ist normalerweise besser lesbar. Am Ende sollten Sie Text rechtfertigen, weil Sie sich dafür entschieden haben, den Text zu Designzwecken zu rechtfertigen und bestätigt haben, dass Ihre Website gut lesbar bleibt.

instagram story viewer