Open-Source Web-Design

Schnitt für Schnitt — Silbentrennung ist lesefreundlich

/ von Karsten Reincke | Kommentar schreiben

Geschnittene Paprika und das scharfe Messer

Je klei­ner der Bild­schirm, des­to wahr­schein­li­cher, dass lan­ge Wör­ter das Lese­bild ver­un­stal­ten. Denn das ergibt dann weni­ge, aber lan­ge Wort­ab­stän­de. Je grö­ßer die Zwi­schen­räu­me, des­to unru­hi­ger das Schrift­bild. Ohne Sil­ben­tren­nung wird es also auf Smart­phones fiz­ze­lig. Wenn eine bootS­core-basier­te Site — dem Respon­si­ve Design gemäß — die Les­bar­keit durch Umstel­lung der Text­ele­men­te auch bei klei­nen Bild­schir­men erhal­ten will, dann kann sie auf eine auto­ma­ti­sier­te Sil­ben­tren­nung nicht ver­zich­ten — schon der Schön­heit wegen:

[ de | en ]

Lösung

  • Instal­lie­re das Word­Press Plug­in wp-Typography
  • Stel­le unter Settings/wp-typography auf Dei­ne Spra­che um.

Hintergrund

Frü­her gab es bei HTML kei­ne Sil­ben­tren­nung. Der Flat­ter­rand war die Norm. Je klei­ner der Bild­schirm, umso unru­hi­ger also Text­bild. Dann kam HTML‑5 und lies die Brow­ser auch offi­zi­ell tun, was sie unter der Hand eh schon taten, näm­lich die Wör­ter auto­ma­ti­siert nach Sil­ben tren­nen — jeweils gemäß Sprach­spe­zi­fi­ka­ti­on im Hea­der. Das ergab — ins­be­son­de­re bei klei­nen Smart­phones — wie­der einen gleich­mä­ßi­ge­ren Grau­wert des Tex­tes. Aller­dings wur­de der Text jeweils etwas ver­zö­gert ange­zeigt. Denn nun gehör­te zum Ren­dern der Sei­te auch die Berech­nung der rich­ti­gen Sil­ben­tren­nun­gen. Sei­ten­au­toren konn­ten die Sil­ben­tren­nung per CSS3 ein­zu­schal­ten1 :

body {
  -ms-hyphens: auto; /* ab IE10 */
  -moz-hyphens: auto; /* seit Firefox 6 */
  -webkit-hyphens: auto; /* seit Safari 5.1 (OS X), Safari 4.1 (iOS) */
  hyphens: auto;
}

Dane­ben gab es bald auch eine Sil­ben­tren­nung im Backend. Hier rech­ne­te ein Plug­in die Tren­nungs­punk­te vor­ab aus und trug sie mit­tels ­ in den Text hin­ein. Auch dies Ver­fah­ren ging mit­hin von HTML‑5 aus. Und kos­te­te eben­falls Zeit. Denn vor jeder Aus­lie­fe­rung der Sei­te muss­ten die Tren­nungs­punk­te ja berech­net und ein­ge­fügt wer­den.

Wel­che Metho­de soll­te frau also nut­zen? Nun, ich­be­vor­zu­ge die Plug­in-Lösung: wp-Typo­gra­phy wird aktu­ell gepflegt — auch auf Git­Hub — und ist unter der GPL‑2.0 lizen­ziert. Die Ver­zö­ge­rung durch zusätz­li­chen Rechen­auf­wand fan­ge ich nach­her durch ein Caching-Plug­in wie­der ein. Und damit habe ich die Gewiss­heit, dass mei­ne Tex­te durch­ge­hend an den­sel­ben rich­ti­gen oder fal­schen Stel­len getrennt wer­den. Für mei­ne Lese­rin mache ich die Feh­ler kon­sis­tent. Das ist doch auch schon was.

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun: Muss eine Web-Desi­gne­rin ihr bis­he­ri­ges Word­Press-The­me auf­ge­ben, braucht sie Ersatz. Ein frei­es The­me von der Stan­ge wird sie per­so­na­li­sie­ren wol­len. Zuerst etwas kos­me­tisch, dann in Sachen Grau­wert, Mehr­spra­chig­keit und inne­rer Ver­weis­tech­nik und Ver­lin­kung. Schließ­lich wird sie beson­de­re Foo­ter akti­vie­ren, ein Zweit­me­nü oder einen Copy­right-Hin­weis, bevor sie die ‘SEO-zität’ über­prüft. Die­sen Weg unter­stützt auch die­ser Post.

Im Übri­gen: Män­ner sind mit­ge­meint.

  1. In unse­rem Fall hät­ten sie den Code in die Datei scss/_bscore_custom.scss ein­fü­gen müs­sen [↩]
To top