Silbentrennung und HTML Zeilenumbruch gezielt einsetzen

HTML Zeilenumbruch – HTML Silbentrennung – HTML Leerzeichen – Bindestriche und Leerzeichen im Text verhindern oder gezielt einsetzen

In HTML-Texten erfolgen Silbentrennung und Zeilenumbruch nicht automatisch an den gewünschten Stellen. Eine anständige Silbentrennung und angenehm lesbarer Blocksatz sind Themen, um die sich Browser offensichtlich noch immer zuallerletzt kümmern. Eine optimierte Silbentrennung ist wiederum elementare Grundlage für einen ausgeglichenen Blocksatz und Spaltensatz.

Mit unseren beschriebenen Tipps lassen sich derlei Situationen für Jeden optimal meistern und der Zeilenumbruch und die Silbentrennung erscheinen exakt an der Stelle, an der diese erfolgen sollen. Es lassen sich ein HTML Zeilenumbruch, ein HTML Leerzeichen, das etwa einen Zeilenumbruch verhindert sowie eine Silbentrennung mit Bindestrich und letztlich ein HTML Absatz gezielt einsetzen.

Dass ich klare Strukturen und Ordnung mag, lässt sich vermutlich nicht verbergen. Womöglich bin ich es auch nur aus der Zeit gewohnt, als ich über viele Jahre hinweg, Massen an Büchern las. Denn insbesondere in Büchern findet der Blocksatz Verwendung, um dem Text einen ruhigeren Charakter zu geben.

Infolgedessen ist an vielen Stellen meiner Texte, der Blocksatz text-align:justify; für mich die erste Wahl. Dass dabei der Lesefluss beibehalten werden kann, die Wörter nicht unnötig auseinandergezogen werden, was sich an unschönen und unnötig langen Leerstellen zwischen den einzelnen Wörtern zeigt, macht das Thema: Silbentrennung und HTML Zeilenumbruch und an den passenden Stellen der Einsatz eines gezielten HTML Absatz für mich unabdingbar.

Gleichzeitig sollen eine Silbentrennung und ein Zeilenumbruch nicht immer und überall, auf alle Stellen einer Webseite: automatisch erfolgen, denn es gibt zu viele Beispiele, bei denen genau das dann eher unschön ausschaut. Vermutlich wäre das Leben für uns als Webdesigner dann wiederum viel zu einfach, denn das wäre relativ einfach, mit wenigen Zeilen CSS Code umzusetzen.

Somit versuche und teste und bastle ich seit längerer Zeit, was wohl die optimale Lösung sein kann. Als Spoiler vorweg: Die Allround-Lösung gibt es nicht, genauer gesagt habe ich noch keine derartige gefunden.

Mein Lösungsansatz für HTML Silbentrennung

Daher ist mein Ansatz aktuell folgender: Den gesamten Content, also alles, was unter <p>…</p> fällt, für alle Devices: Desktop, Tablet und Smartphone: die Silbentrennung grundsätzlich zu aktivieren. Damit wären bereits 90 % einer Webseite umfasst und passend.

Der Rest ist Feintuning:

Überschriften (H1) und Unterüberschriften (H2, H3, H4, H5) also tatsächlich Überschriften und Unterüberschriften – schlichtweg Wort für Wort manuell anzupassen. Einen anderen Weg gibt es nicht – kenne ich nicht.

Zwar wäre ein Allheil-Wundermittel wünschenswert … aber entweder gibt es ein solches nicht oder ich habe es noch nicht gefunden. Bei all meinen Ausführungen sei unterstellt, dass eine Deaktivierung des Blocksatzes und zurück umgestellt auf Flattersatz keine Option darstellt. Und ja, ich kenne die Meinungen so einiger: Flattersatz lässt sich leichter lesen und …

Haben Sie bereits Fragen zu diesem Thema?

Dann schreiben Sie mir! Ich freue mich auf Ihre Nachricht.

Ab jetzt wird’s interessant ↓

Silbentrennung und Zeilenumbruch gezielt einsetzen

Wie Silbentrennung und HTML Zeilenumbruch gezielt eingesetzt werden, dazu finden Sie nachfolgend eine Reihe von Beispielen mit dem jeweils passenden HTML-Code:

Silbentrennung für den Content der gesamten Webseite aktivieren

Dazu wurden hier auf www.ICT.design in der style.css nachfolgende Zeilen Code geschrieben, der die Silbentrennung für den gesamten Content <p>…</p> realisiert.

body p {
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

Silbentrennung eines Wortes an bestimmter Stelle mit Bindestrich

Für den Fall, dass ein langes Wort wie „Suchmaschinenoptimierung“ passend und überhaupt in einzelne Silben getrennt wird oder nur an bestimmten Stellen, dafür gibt es den HTML-Code &shy;.

Such&shy;ma&shy;schi&shy;nen&shy;op&shy;ti&shy;mie&shy;rung

Silbentrennung an bestimmter Stelle ohne Bindestrich

Dafür gibt es seit HTML5 den sogenannten <wbr>-Tag. Dieser hat die Funktion, dem Browser einen Vorschlag zu unterbreiten, an welcher Stelle das Wort getrennt und das ohne Bindestrich – werden soll. Wir erinnern uns an ­, das wiederum mit Bindestrich das Wort trennt. Eine gute Verwendung des <wbr>-Tag ist bei der Angabe von langen Webadressen – bei denen unnötige Bindestriche lediglich Verwirrung stiften würden.

Silbentrennung oder Zeilenumbruch eines oder mehrerer Wörter verhindern

Mit diesem HTML Code lässt sich ein Zeilenumbruch verhindern. Dieser Code findet bei uns stellenweise in Überschriften Anwendung, da wir hier nicht wünschen, dass darin Bindestriche vorkommen … und ich liebe diesen Code inzwischen. Die Textstellen, die nicht umgebrochen werden sollen, erhalten mit <span>…</span> eine Eingrenzung.

<span style="white-space:nowrap;">Text und Worte ohne Zeilenumbruch</span>

Zeilenumbruch mit Leerzeichen verhindern

Mit dem geschützten Leerzeichen &nbsp; lassen sich zwei Wörter mit einem festen Leerzeichen und Abstand zusammen halten. Erfolgt hier ein Zeilenumbruch, so erfolgt dieser nach dem zweiten Wort – das erste Wort wird dann mit in die nächste Zeile gezogen.

WortEins&nbsp;WortZwei

Zusammenhängende Darstellung zweier Wörter mit Bindestrich ohne Zeilenumbruch

Soll bei einem Wort mit Bindestrich oder zwei mit einem Bindestrich zusammenhängende Wörter ein Zeilenumbruch verhindert werden, so verwendet man den HTML-Code &#8209;. Dieses HTML-Zeichen wird statt des Bindestriches eingesetzt und verhindert so den Zeilenumbruch und es wird dennoch ein Bindestrich dargestellt.

OnPage&#8209;Analyse

Silbentrennung in Folge

Mit dem Thema: Silbentrennungen in Folge und deren Möglichkeiten befassen wir uns zu einem späteren Zeitpunkt – in einem weiteren Artikel. Wer gern hierzu schon jetzt einen Anreißer hätte, hier bereits ein kleiner Code-Schnipsel dazu.

p {
	hyphenate-limit-chars: auto 5;
	hyphenate-limit-lines: 2;
}

Schlussbemerkungen

Der jeweilige HTML-Code zur Silbentrennung, muss selbstverständlich nicht an allen Stellen, die innerhalb eines Wortes möglich sind, eingesetzt werden; es genügt stellenweise. Aber testen Sie das gern einfach selbst und Sie werden schnell aufs gewünschte Optimum kommen.

Haben Sie Fragen zu diesem Thema?
Habe ich etwas übersehen und eine Möglichkeit der Silbentrennung, eines Zeilenumbruchs, eines HTML Leerzeichen oder einen HTML-Absatz gezielt einsetzen – nicht aufgeführt?

Schreiben Sie mir. Ich freue mich auf Ihre Nachricht.

.

ICT & WebDesign

ICT-Computer-Support in Plauen für
Sachsen · Bayern · Thüringen

Nachricht an uns