Given the same font, alignment and hyphenation have a definitive impact on the way we read content and how it appears on-screen
[codepen_embed height=”691″ theme_id=”2039″ slug_hash=”XbabOL” default_tab=”result” user=”caraya”]See the Pen Text Alignment Possibilities by Carlos Araya (@caraya) on CodePen.[/codepen_embed]
None of the paragraphs above is hyphenated. Note in particular how the Justified paragraph leaves larger gaps between words to accommodate the justification. It is the same, although not so noticeable, in the other paragraphs.
Although CSS support hyphenation using the hyphens rule the support is inconsistent (it only works in Firefox.) A good alternative is to use libraries such as hyphenator to offer a consistent hyphenation experience.
Some of the Hyphenator’s drawbacks (also from http://mnater.github.io/Hyphenator/):
- Hyphenator.js and the hyphenation patterns are quite large. Good compression and caching is vital.
- Automatic hyphenation can’t be perfect: it may lead to misleading hyphenation like leg-ends (depends on the pattern quality)
- There’s no support for special (aka non-standard) hyphenation (e.g. omaatje->oma-tje)
[codepen_embed height=”689″ theme_id=”2039″ slug_hash=”PqKPvV” default_tab=”result” user=”caraya”]See the Pen Text Alignment Possibilities With Hyphenated Text. by Carlos Araya (@caraya) on CodePen.[/codepen_embed]