Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS3 und Webtypografie: Neue Möglichkeiten für Silbentrennung und Umbrüche

    CSS3 und Webtypografie: Neue Möglichkeiten für Silbentrennung und Umbrüche

Mit CSS3 haben sich die Möglichkeiten, Texte zu formatieren, um einige Eigenschaften erweitert. Mit der Einführung von Silbentrennung und erweiterter Möglichkeiten, Wörter umzubrechen, verbessert sich die Darstellung von Texten – vor allem bei schmalen Textspalten.

Oft kommt es vor, dass Texte aufgrund zu langer Wörter ungünstig umgebrochen werden. Bisher gab es nur begrenzte Möglichkeiten, solche Umbrüche zu verhindern. Ohne manuelles Eingreifen ging es nicht. Dank CSS3 gibt es nun jedoch neue Eigenschaften, mit denen Text vor allem in schmalen Textspalten sehr viel besser dargestellt werden kann.

Silbentrennung mit CSS3

Zwar gibt es mit der HTML-Entity „­“ eine Möglichkeit, innerhalb eines Wortes eine Stelle zu kennzeichnen, an der eine Silbentrennung vorgenommen werden soll; allerdings muss hierbei jede einzelne mögliche Silbentrennung manuell eingefügt werden. Gerade bei dynamischen Spaltenbreiten bietet sich diese Variante an.

Mit der CSS3-Eigenschaft „hyphens“ lässt sich die Silbentrennung für ganze Texte einrichten. Dazu gibt es drei unterschiedliche Werte für diese Eigenschaft:

h1 {
  hyphens: none;
}

p {
  hyphens: auto;
}

Standardmäßig ist die Eigenschaft auf „manual“ gestellt. Das heißt, nur solche Stellen, die mit „­“ gekennzeichnet sind, werden auch getrennt. Der Wert „none“ lässt gar keine Trennungen zu und „auto“ trennt immer dort, wo getrennt werden muss. In diesem Fall entscheidet der Browser also selbst, an welchen Stellen Silbentrennungen vorgenommen werden.

Derzeit funktioniert die Angabe nur über die entsprechenden Vendor-Präfixe, also „-moz-hyphens“, „-webkit-hyphens“ etc. Gecko- und Webkit-Browser unterstützen die Silbentrennung bereits.

Damit der Browser weiß, in welcher Sprache er trennen muss – die Regeln für die Silbentrennung können von Sprache zu Sprache anders sein –, sollte die verwendete Sprache mit dem HTML-Attribut „lang“ jeweils angegeben werden. Dies kann für das gesamte Dokument angegebn werden oder bei mehrsparchigen Texten innerhalb eines Dokumentes über die jeweiligen Elemente, die den Text umschließen:

<p lang="de-DE">Dieser Text ist auf deutsch.</p>
<p lang="en-UK">This Text is in English.</p>

So kann der Browser jeden Text korrekt trennen. Allerdings unterstützen die Browser derzeit nur einige Sprachen, darunter aber Deutsch und Englisch.

Anzeige

Erzwungene Umbrüche mit CSS3

Gerade bei der Darstellung von Benutezreingaben – zum Beispiel Kommentare eines Blogs – kann es passieren, dass Wörter über die eigentliche Spaltenbreite des Textes hinausragen. Auch mit der „hyphens“-Eigenschaft kommt man unter Umständen nicht weiter, wenn beispielsweise eigene Wortschöpfungen oder besonders lange URLs gepostet werden.

Da hilft die CSS3-Eigenschaft „word-wrap“, mit der festgelegt werden kann, dass Wörter grundsätzlich am Ende der Textspalte umgebrochen werden sollen:

p {
  word-wrap: break-word;
}

Die Umbrüche erfolgen ohne Trennzeichen, sodass auch bei getrennten URLs nicht fälschlicherweise ein Trennzeichen als Bestandteil der URL wahrgenommen wird.

Neben dem Wert „break-word“ gibt es nur noch die Standardeinstellung „normal“.

Was denkt ihr über die vorgestellten Möglichkeiten der Textformatierung? Sind das sinnvolle CSS3-Eigenschaften, um Texte besser darzustellen?

Weiterführende Links zum Thema CSS3:

Finde einen Job, den du liebst

Eine Reaktion
typo graf
typo graf

Damals in Latex habe ich Worte mit \- (der & shy ; -Ersatz von TeX) extrahiert und überall substituiert damit ich Worte nur einmal richtig eintragen musste. Die Wortlisten waren (und sind vermutlich) seit eh und jeh ziemlich armselig. Wenn also ein Wort "drüberragte" hat man es eingetragen und es wurde überall sonst dann auch als auf diese Weise trennbar substituiert damit man sich die lästige Arbeit mit diesem Wort nur einmal machen musste und es ab dann immer und überall auf diese Weise trennbar war. Ein gutes Redaktionssystem hätte auch sowas automatisiert... . Gibts keine typo-/wordpress-Plugins und CC-Wortlisten für sowas ?

Dasselbe für HTML wäre nett. D.h. Ergänzungen zum & shy ; um gleiche Worte im gleichen Text automatisch auf diese Weise zu trennen. Oder die Browser sind schlau und organisieren sich das selber.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot