hyphenate-limit-chars: Automatische Silbentrennung feinsteuern

1. Das Problem: automatische Silbentrennung ohne Feinsteuerung

Sobald hyphens: auto aktiv ist, sucht der Browser bei jedem Zeilenumbruch nach einer gültigen Trennstelle innerhalb eines Wortes, um den Blocksatz oder linksbündigen Text möglichst gleichmäßig zu füllen. Ohne weitere Einschränkung akzeptiert der Browser dabei auch Trennstellen, die typografisch unschön wirken, etwa wenn nur ein einzelnes Zeichen wie bei a- vor dem Trennstrich in der Zeile verbleibt.

Solche Kurz-Trennungen sind nicht nur ästhetisch störend, sie kosten auch Lesbarkeit, weil das menschliche Auge ein derart kurzes Fragment kaum als sinnvollen Wortbestandteil erkennt und dadurch der Lesefluss unterbrochen wird. Gerade bei deutschen Komposita mit vielen möglichen Trennstellen tritt dieses Problem regelmäßig auf, wenn die Silbentrennung dem Browser komplett ohne Grenzwerte überlassen wird.

2. Grundlage: hyphens: auto und die Pflicht zum lang-Attribut

Die Property hyphens: auto aktiviert die sprachabhängige automatische Silbentrennung des Browsers, benötigt dafür aber zwingend ein korrekt gesetztes lang-Attribut auf dem Dokument oder dem betroffenen Element. Ohne dieses Attribut weiß der Browser nicht, welches Trennwörterbuch er verwenden soll, und lässt Text unverändert ungetrennt, selbst wenn hyphens: auto gesetzt ist.

Bei mehrsprachigen Seiten muss deshalb jeder Sprachwechsel im Markup mit einem eigenen lang-Attribut auf dem jeweiligen Container gekennzeichnet werden, sonst wendet der Browser die Trennregeln der Hauptsprache auch auf fremdsprachigen Text an, was zu grammatikalisch falschen Trennstellen führt. Diese Voraussetzung wird in der Praxis überraschend häufig übersehen.

3. Die Syntax von hyphenate-limit-chars

hyphenate-limit-chars nimmt bis zu drei Werte entgegen: die Mindestlänge des Wortes insgesamt, die Mindestanzahl an Zeichen vor der Trennstelle und die Mindestanzahl an Zeichen nach der Trennstelle. Mit hyphenate-limit-chars: 6 3 3 wird ein Wort nur getrennt, wenn es mindestens sechs Zeichen lang ist und dabei mindestens drei Zeichen vor und drei Zeichen nach dem Trennstrich stehen bleiben.

Wird nur ein Wert angegeben, gilt er für die Mindestwortlänge, während vor und nach der Trennstelle jeweils ein sinnvoller Standardwert des Browsers greift. Zwei Werte legen Wortlänge und die vor der Trennstelle nötige Zeichenzahl fest, wobei der Wert danach dann übernommen wird. Diese Abstufung erlaubt es, mit minimalem Code genau die Grenzwerte zu setzen, die für das jeweilige Projekt wichtig sind.

p {
  hyphens: auto;
  /* Wort mindestens 6 Zeichen, je 3 Zeichen vor und nach dem Strich */
  hyphenate-limit-chars: 6 3 3;
}

/* Grosszuegigere Variante fuer kleine Spaltenbreiten,
   wo mehr Trennstellen noetig sind */
.narrow-column p {
  hyphens: auto;
  hyphenate-limit-chars: 5 2 2;
}

4. hyphenate-limit-lines: aufeinanderfolgende Trennungen begrenzen

Auch wenn jede einzelne Trennung für sich betrachtet sauber aussieht, wirkt ein Absatz unruhig, wenn drei oder vier Zeilen hintereinander jeweils mit einem Trennstrich enden. Die Property hyphenate-limit-lines begrenzt genau das, indem sie festlegt, wie viele aufeinanderfolgende Zeilen maximal mit einer Silbentrennung enden dürfen, bevor der Browser eine Zeile lieber ohne Trennung, aber mit größerem Weißraum umbricht.

In der klassischen Print-Typografie gilt eine Faustregel von maximal zwei aufeinanderfolgenden Trennungen, bevor der Lesefluss spürbar leidet. hyphenate-limit-lines: 2 setzt genau diese Regel im Browser um und verhindert, dass ein langer Absatz optisch wie eine Reihe abgehackter Zeilenenden wirkt.

article p {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2; /* max. 2 Trennungen in Folge */
}

5. hyphenate-limit-last: Trennung am Absatz- oder Seitenende vermeiden

Eine Trennung ausgerechnet in der letzten Zeile eines Absatzes oder am Ende einer gedruckten Seite ist typografisch besonders unerwünscht, weil der abgetrennte Wortrest optisch verloren wirkt und beim Weiterlesen leicht übersehen wird. hyphenate-limit-last erlaubt es, Trennungen gezielt für diese Positionen auszuschließen, mit Werten wie always-end für das Absatzende oder page für das Seitenende in gedrucktem oder paginiertem Content.

Für responsive Weblayouts ist vor allem always-end relevant, weil die letzte Zeile eines Absatzes optisch häufig kürzer ist als die übrigen Zeilen und eine Trennung dort besonders unruhig wirkt. Für gedruckte Stylesheets oder PDF-Export über @page-Regeln lohnt sich zusätzlich der Wert page, um Trennungen am Seitenumbruch zu vermeiden.

article p {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always-end; /* letzte Zeile nie trennen */
}

@media print {
  article p {
    hyphenate-limit-last: always-page;
  }
}

6. Grenzen der automatischen Trennung: wann ein manuelles Soft-Hyphen nötig ist

So gut die automatischen Limit-Properties auch kalibriert sind, das eingebaute Trennwörterbuch des Browsers kennt nicht jedes Fachwort, jeden Produktnamen oder jede Wortneuschöpfung, die in redaktionellem Content vorkommt. Bei solchen Wörtern trennt der Browser entweder gar nicht, obwohl eine Trennung sinnvoll wäre, oder er verzichtet komplett auf eine Trennstelle mangels Eintrag im Wörterbuch, was bei sehr langen zusammengesetzten Begriffen zu breiten Lücken im Blocksatz führen kann.

Für genau diese Ausnahmefälle existiert das weiche Trennzeichen ­ (Soft Hyphen), das direkt im HTML-Text an der gewünschten Stelle eingefügt wird und nur dann sichtbar wird und einen Trennstrich erzeugt, wenn an dieser Stelle tatsächlich ein Zeilenumbruch nötig ist. Anders als ein normaler Bindestrich bleibt das weiche Trennzeichen unsichtbar, solange das Wort komplett in eine Zeile passt, und ergänzt damit hyphens: auto gezielt dort, wo das automatische Wörterbuch an seine Grenzen stößt.

<p>
  Die Materialbezeichnung
  <span lang="de">Kohle­faser­verstärkter­Kunststoff</span>
  wird nur an den markierten Stellen getrennt, wenn noetig.
</p>

7. Zusammenspiel mit responsiven Spaltenbreiten

Je schmaler eine Textspalte ist, desto häufiger muss der Browser überhaupt eine Trennstelle finden, um Blocksatz gleichmäßig zu füllen, gleichzeitig wird jede einzelne Trennung dort optisch dominanter, weil weniger Zeichen pro Zeile zur Verfügung stehen. Für schmale mobile Layouts kann es daher sinnvoll sein, die Grenzwerte von hyphenate-limit-chars etwas großzügiger zu setzen als für breite Desktop-Spalten.

Umgekehrt lohnt sich bei sehr breiten Spalten oft, die Silbentrennung ganz zu deaktivieren, weil dort genug Platz vorhanden ist, um Wörter unzertrennt in die nächste Zeile zu verschieben, ohne dass der Blocksatz sichtbar auseinanderreißt. Eine gezielte Media-Query-Abstufung der Trennregeln passt die Feinabstimmung an die tatsächliche Spaltenbreite an, statt eine feste Regel für alle Bildschirmgrößen zu erzwingen.

8. Praxisbeispiel: Produktbeschreibungen im Onlineshop

Produktbeschreibungen in einem deutschsprachigen Onlineshop enthalten oft lange Komposita wie Materialbezeichnungen oder technische Fachbegriffe, die ohne Silbentrennung in schmalen Sidebar- oder Mobile-Layouts unschön über den Container hinausragen oder riesige Lücken im Blocksatz erzeugen. Eine sauber konfigurierte automatische Trennung verbessert hier direkt die Lesbarkeit, ohne dass Redakteure jedes Wort manuell mit weichen Trennzeichen versehen müssen.

Gleichzeitig sollten Produktnamen und Markenbezeichnungen von der automatischen Trennung ausgenommen werden, weil eine Trennung mitten im Markennamen unprofessionell wirkt. Dafür eignet sich hyphens: none gezielt auf der entsprechenden Produktname-Klasse, während der restliche Beschreibungstext weiterhin von hyphens: auto profitiert.

.product-description {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
}

.product-name,
.brand-name {
  hyphens: none; /* Markennamen niemals trennen */
}

9. Browser-Support und historische Alternativen

Die unpräfixierten Properties hyphenate-limit-chars, hyphenate-limit-lines und hyphenate-limit-last stammen aus der CSS Text Level 4 Spezifikation und sind noch nicht in jedem Browser flächendeckend implementiert. Historisch existierten herstellerspezifische Vorgänger wie -webkit-hyphenate-limit-before, -webkit-hyphenate-limit-after und -ms-hyphenate-limit-chars, die in älteren Safari- und Edge-Versionen ähnliche Feinsteuerung ermöglichten.

Für produktive Projekte empfiehlt sich, hyphens: auto und ein sinnvolles lang-Attribut als Basis in jedem Fall zu setzen, weil diese Grundlage bereits breit unterstützt wird, und die Limit-Properties als progressive Verbesserung obendrauf zu legen. Fehlt die Unterstützung für die Limit-Properties, trennt der Browser weiterhin automatisch, nur mit den eigenen, meist bereits vernünftigen Standardgrenzwerten.

10. Zusammenfassung

11. FAQ: hyphenate-limit-chars: Das Wichtigste auf einen Blick