Web-Design

Cut by Cut — Hyphenation & Readability

/ by Karsten Reincke | Leave a comment

Sliced paprika and the sharp knife

The small­er the screen, the greater the risk that long words destroy the read­ing image. With­out hyphen­ation, it becomes chop­py or fizzy on smart­phones. bootScore-based sites use an embed­ded Respon­sive Design. So, an auto­mat­ed hyphen­ation improves read­abil­i­ty and sup­ports bootScore to rearrange the text ele­ments:

[ en | de ]

Solution

Background

In the past, there was no hyphen­ation in HTML. The flut­ter mar­gin was the norm. The small­er the screen, the more frayed the text image. Then HTML‑5 came along and offi­cial­ly let browsers do what they did any­way under the table: Auto­mat­i­cal­ly sep­a­rate words by syl­la­bles — accord­ing to the lan­guage spec­i­fi­ca­tion in the head­er. Espe­cial­ly on small­er smart­phones, this pro­ce­dure caused a more uni­form gray val­ue of the text again. How­ev­er, the page was dis­played some­what delayed as a result. Hyphen­ations also need­ed to be ren­dered cor­rect­ly. Page authors could turn on hyphen­ation via CSS31:

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;
}

In addi­tion, hyphen­ation was soon pro­vid­ed in the back­end. Here, a plu­g­in cal­cu­lat­ed the hyphen­ation points in advance and inte­grat­ed them into the text using the tag ­ This method also required HTML‑5 / CSS3. And it also cost time. Because before each deliv­ery of the page, the sep­a­ra­tion points had to be cal­cu­lat­ed and incor­po­rat­ed.

Which method should you use? Well, I pre­fer the plu­g­in method. wp-Typog­ra­phy is main­tained active­ly — also on GitHub — and is licensed under the GPL.2 I will recov­er the extra time lat­er by using a caching plu­g­in. And with that, I have the cer­tain­ty that my texts are con­sis­tent­ly sep­a­rat­ed at the same right or wrong places. For my read­er, I make the mis­takes con­sis­tent­ly. That’s an advan­tage, too.

And how does this …

… sup­port our migra­tion to bootScore? Well, if a web design­er must aban­don her cur­rent Word­Press theme, she needs a replace­ment. A free ‘off-the-shelf’ theme, she prob­a­bly wants to per­son­al­ize. First a bit cos­met­i­cal­ly, then in terms of the gray val­ue of her pages, mul­ti­lin­gual­ism and inter­nal ref­er­ence tech­niques and link­ing. Final­ly, she per­haps enables spe­cial foot­ers, a sec­ondary menu or a copy­right notice before check­ing the SEO fea­tures of the select­ed theme. This is a way that this post sup­ports too.

  1. In our case they would have to insert the code into the file scss/_bs_customer.scss [↩]
  2. Yes, its author does not say under which ver­sion of the license, but it is suf­fi­cient­ly clear, what he means. [↩]
To top