Begrenzung der Textbreite und automatische Silbentrennung in Onlinedokumentation

Stehen zu viele Zeichen in einer Zeile, ist ein längerer Text nur schwer lesbar. Für das menschliche Auge ist es dann schwierig, zielsicher den Beginn der richtigen nächsten Zeile zu finden.

Um zu verhindern, dass auf modernen breiten Bildschirmen die Zeilenlänge astronomische Werte erreicht, macht es Sinn, die maximale Breite des Inhaltsbereichs (der „Content Area“) einer Onlinedokumentation zu begrenzen. Dazu genügen schon zwei kleine HTML-Schnipsel in der Seitenvorlage.

Moderne Browser unterstützen sogar eine automatische Silbentrennung an den Zeilenenden. Je schmaler die Textbreite, desto nützlicher ist diese Funktion. Insbesondere auf Mobilgeräten und in schmalen Tabellenspalten kann eine automatische Silbentrennung die Darstellung und Lesbarkeit deutlich verbessern.

Beispiel

In den folgenden Absätzen ist die Breite auf 500 Pixel begrenzt und die automatische Silbentrennung des Browsers aktiviert. Versuchen Sie einmal, das Browserfenster noch schmaler zu machen, und beobachten Sie dabei die sich dynamisch ändernde Silbentrennung!

In den folgenden Beispielabsätzen erklärt ChatGPT, warum die automatische Silbentrennung die Lesbarkeit verbessern kann:

„Die automatische Silbentrennung ist eine Funktion, die in vielen Textverarbeitungsprogrammen verfügbar ist und die Lesbarkeit eines Dokuments erheblich verbessern kann. Durch das automatische Einfügen von Trennstrichen an geeigneten Stellen kann die Software dazu beitragen, lange Wörter aufzulockern, den Lesefluss zu verbessern und die Übersichtlichkeit zu erhöhen.

Einer der wichtigsten Vorteile der automatischen Silbentrennung besteht darin, dass sie dazu beitragen kann, den Leerraum auf einer Seite zu verringern. Wenn Wörter mit Silbentrennung versehen werden, lassen sie sich leichter in eine Textzeile einfügen, wodurch die Seite übersichtlicher und weniger unübersichtlich wirkt. Dadurch wird der Text leichter lesbar und für den Leser optisch ansprechender.

Ein weiterer Vorteil der automatischen Silbentrennung ist, dass sie dazu beitragen kann, Unstimmigkeiten bei der Silbentrennung zu beseitigen. Wenn ein Dokument von mehreren Autoren verfasst wurde oder wenn verschiedene Abschnitte zu unterschiedlichen Zeiten geschrieben wurden, kann es schwierig sein, eine einheitliche Silbentrennung im gesamten Text zu gewährleisten. Die automatische Silbentrennung beseitigt dieses Problem, indem sie sicherstellt, dass alle Wörter im gesamten Dokument auf die gleiche Weise getrennt werden.

Die automatische Silbentrennung kann auch bei Dokumenten mit einem engen oder spezifischen Format besonders hilfreich sein. Akademische Arbeiten können beispielsweise strenge Richtlinien für Ränder, Abstände und Schriftgröße haben. In diesen Fällen kann die automatische Silbentrennung dazu beitragen, dass der Text in das vorgegebene Format passt und gleichzeitig lesbar bleibt.“

Nun, lassen wir das einmal so stehen… Für Demozwecke reicht es.

Implementierung

Schritt 1: Setzen Sie an den Beginn des in seiner Breite zu beschränkenden Bereichs folgendes Code-Schnipsel. Passen Sie darin die Angaben zu Breite und Sprache wie gewünscht an.


<div style="max-width: 500px; hyphens: auto;" lang="de">

Wichtig ist die Angabe der richtigen Sprache, damit die Silbentrennungen korrekt erfolgen. Noch funktionieren nicht in allen Browsern alle Sprachen. An welchen Stellen welche Wörter getrennt werden, entscheidet der vom Nutzer verwendete Browser. Bei Bedarf können Sie lediglich bedingte Trennstriche in den Text einzubauen (Unicode U+00AD oder HTML-Code  oder Mnemonik ).

Schritt 2: Setzen Sie an das Ende des in seiner Breite beschränkten Bereichs folgendes Code-Schnipsel als Abschluss:


</div>

Automatische Silbentrennung nur in Tabellen

Steht in einem wie vorstehend beschrieben ausgezeichneten Bereich eine Tabelle, gilt die Silbentrennung für den Inhalt in dieser Tabelle ebenfalls. In diesem Fall brauchen Sie nichts weiter zu tun.

Vielleicht möchten Sie aber im normalen Fließtext überhaupt keine Silbentrennung, sondern ausschließlich in Tabellen? In diesem Fall lassen Sie im Code für die Breitenbegrenzung die Angaben zu hyphens und lang weg. Das sieht dann so aus:


<div style="max-width: 500px;">

Um jedoch in Tabellen (und nur dort) eine Silbentrennung zu aktivieren, ergänzen Sie in der verwendeten CSS-Datei oder im Head-Abschnitt des Topics folgende Angabe speziell für Tabellen:


 table {
  hyphens: auto; 
  lang="de"; 
 }

Damit ist pauschal für alle Tabellen eine automatische Silbentrennung aktiviert, im Beispiel für die Sprache Deutsch.