Die scheue Silbentrennung

Kennen Sie das? Die Ansicht Ihrer Website auf Desktop Geräten und Tablets macht große Freude, aber auf Mobilgeräten (Smartphones) brechen lange Worte einfach irgendwo um, wenn es sich mit der Bildschirmbreite nicht mehr ausgeht.

Der Grund ist, dass der Browser einfach nicht weiß, wo entsprechend der Grammatikregeln umzubrechen ist. Aber ein weiches Trennzeichen (Soft Hyphen) an der richtigen Stelle in langen Worten platziert macht genau das.

Inhaltsverzeichnis

Worum es geht

Ohne weiches Trennzeichen

Ohne Silbentrennung

Mit weichem Trennzeichen

Mit Silbentrennung

So können Sie das weiche Trennzeichen zur Silbentrennung einsetzen

Das Problem dabei ist, das Zeichen ist unsichtbar, Sie finden es auch nicht auf Ihrer Tastatur vor.

HTML-Sonderzeichen

Das weiche Trennzeichen gibt es auch als HTML-Sonderzeichen. Es lautet:

­

Oder alternativ:

­

Aber das können Sie in einem WordPress Editor nicht einfach so in Text- oder Überschriftblöcken verwenden. Dieser Code wird nicht interpretiert, sondern in der Seite exakt so ausgegeben:

Inhalts­verzeichnis

bzw.

Inhalts­verzeichnis

WordPress kann gnadenlos sein, das ist also keine Lösung.

Alternativ können Sie Ihre Überschriften natürlich in einem HTML-Block ausgeben, dabei würde das Zeichnen unsichtbar im Hintergrund wirken.

<h2>Inhalts&shy;verzeichnis</h2>
<h2>Inhalts&#173;verzeichnis</h2>

Allerdings müssten Sie sich mit HTML-Anweisungen herumschlagen, und diese Zeiten sollten langsam vorbei sein.

Ein unsichtbares Zeichen kopieren

Der Trick ist also, das Zeichen irgendwie in den Zwischenspeicher des Computers zu bekommen, damit Sie es an passender Stelle, in dem Fall zwischen den Wortteilen Inhalts und verzeichnis einsetzen können.

Sie erhalten dieses unsichtbare Zeichen zum Beispiel hier: https://unicode-explorer.com/c/00AD

Unter “Copy” werden Sie zwar kein Zeichen sehen, aber klicken Sie dennoch auf den Button. Dann suchen Sie das lange Wort in Ihrer Website, und fügen das Zeichen dort ein, wo eine Silbentrennung grammatikalisch korrekt ist.

Donau­­dampfschiff­fahrts­­elektrizitäten­­hauptbetriebs­werk­bau­unter­beamten­­gesellschaft

Ja, testen Sie einfach sofort, indem Sie dieses lange Wort auf der Seite am Smartphone ansehen, oder das Browserfenster schmal machen.

Viel Spaß.

Umbruch mit CSS

Wer vor der Nutzung von CSS-Anweisungen nicht zurückschreckt, der kann auch diese benutzen.

h1, h2, h3, h4, h5, h6, p, li { 
  word-break: break-word; 
  -webkit-hyphens: auto; 
  -moz-hyphens: auto; 
  -ms-hyphens: auto; 
  -o-hyphens: auto; 
  hyphens: auto;
}

In diesem Fall würden automatisch weiche Umbrüche erfolgen für alle Überschriften, Absätze und Texte in Listen.

Wenn Ihr Browser Lust darauf hat.

Für die Weiterempfehlung:

Möchten Sie über neue Artikel und mehr rasch informiert werden?

Dann empfehlen wir Ihnen die Anmeldung zu unserem Newsletter "Online-Marketing News der E-Werkstatt".


Heinz Duschanek
Heinz Duschanek

Heinz Duschanek hat 2003 die Online-Marketing Agentur E-Werkstatt gegründet. Da er vorher auch beim Radio gearbeitet hatte (Radio CD International, Ö1, Ö3), freut er sich jetzt ganz besonders über die Richtung, die das Online-Marketing nimmt. Denn das liefert einen Vorwand dafür, viele elektrischen Geräte und Gadgets rund um Audio und Video anzuschaffen.

Daneben interessiert sich Heinz auch für Tango Argentino (seit 2009), Lindy Hop, Wing-Tsun, Boxen, (Jazz-/Blues-)Gitarre.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert