Lesefortschritt:

Bedingte Silbentrennung in HTML – so geht’s

13. Januar 2021 | HTML, WordPress

Dieser Beitrag beinhaltet 560 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Jedes Sonderzeichen, jeder Umlaut kann in HTML mit der Tastatur erstellt werden – oder aber mit der entsprechenden HTML-Entity. Aus ä wird so ein ä, ‰ ergibt ‰ und © gibt das © aus. Mein Favorit ist und bleibt aber ­. Diese Entität ermöglicht die bedingte Silbentrennung.

Ich hole mir zur Veranschalichung ein paar Wortungetüme aus dem Duden und reihe sie hintereinander:
Hyperaktivitätsstörung Haftpflichtversicherung Dampfschifffahrtsgesellschaft Arbeiterunfallversicherungsgesetz Bundesausbildungsförderungsgesetz Finanzdienstleistungsunternehmen Finanzmarktstabilisierungsgesetz Veranstaltungsinformationsdienst

Dies ergibt folgende Darstellung auf der Website:

Hyperaktivitätsstörung Haftpflichtversicherung Dampfschifffahrtsgesellschaft Arbeiterunfallversicherungsgesetz Bundesausbildungsförderungsgesetz Finanzdienstleistungsunternehmen Finanzmarktstabilisierungsgesetz Veranstaltungsinformationsdienst

Man sieht schon: die (zugegebenermassen unrealistische) Häufung von langen Wörtern stört die Darstellung. Ganz besonders auf mobilen Geräten.

Doch mit der HTML-Entity ­ lassen sich die Wörter bedingt (also bei Bedarf) an geeigneter Stelle trennen. Der Code sieht dann so aus:

Hy­per­ak­ti­vi­täts­stö­rung Haft­pflicht­ver­si­che­rung Dampf­schiff­fahrts­ge­sell­schaft Ar­bei­ter­un­fall­ver­si­che­rungs­ge­setz Bun­des­aus­bil­dungs­för­de­rungs­ge­setz Fi­nanz­dienst­leis­tungs­un­ter­neh­men Fi­nanz­markt­sta­bi­li­sie­rungs­ge­setz Ver­an­stal­tungs­in­for­ma­tions­dienst

Wie gesagt: Das Beispiel ist reichlich überdreht. Der obige Code ergibt aber folgendes Bild:

Hy­per­ak­ti­vi­täts­stö­rung Haft­pflicht­ver­si­che­rung Dampf­schiff­fahrts­ge­sell­schaft Ar­bei­ter­un­fall­ver­si­che­rungs­ge­setz Bun­des­aus­bil­dungsför­­de­rungs­ge­setz Fi­nanz­dienst­leis­tungs­un­ter­neh­men Fi­nanz­markt­sta­bi­li­sie­rungs­ge­setz Ver­an­stal­tungs­in­for­ma­tions­dienst

Man beachte die nun funktionierende Silbentrennung. Vor allem auf kleinen Anzeigen und Bildschirmen ist das enorm hilfreich.

Wichtig: Die ­ müssen im HTML-Editor eingefügt werden. Im Visual-Editor würde dies nicht funktionieren.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This