ein neues Projekt beginnen ——- hello@arnerahn.de

Bessere Typographie –
Silbentrennung mit CSS

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

Heute geht es mal in die Abteilung CSS (Cascadind Style Sheets). Wie schon öfter angesprochen, kann ich WordPress an vielen Stellen manipulieren und an meine eigenen Bedürfnissen anpassen. Einer dieser Orte ist das Custom CSS. Eine Datei, in der ich bestehende CSS-Befehle überschreiben oder auch neue Anweisungen hinterlegen kann. Ein öfter mal auftretendes Problem sind zu lange Wörter, die unter Umständen in der Desctop-Variante noch in das Textfeld passen, allerdings bei Tablet und Mobil aus dem Sichtfeld laufen würden. Dies ist nicht nur unschön anzusehen sondern spricht auch gegen das Responsive Design. Für derartige Fälle hält CSS einige Befehle zur Silbentrennung bereit. Grundsätzlich gibt es zwei Möglichkeiten, dass Problem anzugehen.

Wir definieren eine globale Silbentrennung auf Basis der Seitensprache

Für die Globale Variante definierst Du mit der CSS-Eigenschaft -hyphens- ein umfassende Silbentrennung nach den Trennregeln deiner eingestellten Seitensprache in WordPress. In der Custom-CSS trägst Du dazu folgenden Code ein:

body { 
	-ms-hyphens: auto;  /* Edge, Internetexplorer */  
	-webkit-hyphens: auto; /* Safari */   
	hyphens: auto;
}

Da die Eigenschaft -hyphens- derzeit (Stand: Januar 2019) noch nicht in alle aktuellen Browser implementiert ist, sollte man Sie als proprietäre Eigenschaften verwenden.

Weitere Informationen unter caniuse.com

Wir nehmen uns die “Problemwörter” einzeln vor

Bei der manuellen Variante bietet Dir CSS mehrere Möglichkeiten. Die jeweilige Anweisung platzierst Du direkt dort, wo eine Trennung (oder auch keine) im Wort erfolgen soll. Zum einen gibt es den „Soft Hyphen&shy(;)*“. Hierbei erfolgt eine Trennung mit Trennstrich. Beim „Word Break<wbr>“ dagegen erfolgt die Trennung ohne Trennstrich. In manchen Fällen möchte man auch eine Trennung vermeiden, z. Bsp. bei Eigennahmen. Dafür benötigst Du das geschützte Leerzeichen, den sogenannten „Non Breaking Space&nbsp(;)* “.
Nachstehen habe ich einmal die drei o.g. Varianten in wirklich heftige Wortungetüme eingebaut. Schau Dir an was passiert, wenn Du das Browserfenster verkleinerst!

*Beim schreiben im Wort die Klammern weg lassen. Soll an dieser Stelle nur für die Sichtbarkeit sorgen.


Grundstücksverkehrszuständigkeitsübertragungsverordnung

In diesem Beispiel wird das Wort an zwei Stellen durch den Word Break sauber getrennt.

Tennisballaufschlags­­geschwindigkeitsmessmaschinen

Die “Tennisballmaschine” hab ich einmal mit dem “Soft Hyphen” getrennt.

Eierschalensollbruchstellenverursacher

Die “Eierschale” habe ich in seiner Urform belassen. Spätestens bei der mobilen Ansicht wird das Wort aus dem Sichtfeld laufen.

Restmülltütenverschlusssicherundsdraht 2.0

Der “Tütendraht 2.0” bricht nach den üblichen Trennregel um, allerdings wird das “2.0” hinter dem Wort gehalten und nicht seperat umbrochen.


Fazit

Bei aller technischen Raffinesse heutzutage aber der Teufel steckt immer noch im Detail! Es sind immer die kleinen und unscheinbaren Sachen, die den Unterschied machen. In diesem Sinne…

Schreibe einen Kommentar

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