Divide and Beautify!

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. If a bootScore-based site — accord­ing to Respon­sive Design — wants to main­tain read­abil­i­ty by rear­rang­ing the text ele­ments, then it can­not do that with­out auto­mat­ed hyphen­ation.

[ 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­lyalso 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.

  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. []

Leave a Comment

Your email address will not be published. Required fields are marked *

To top