HTML and CSS Reference
In-Depth Information
FIGURE 3.14
text-align: justify
usually results in lots of
nasty big gaps in your text.
CONTROLLING HYPHENATION
Hyphenation has long been a sore point on the web. If you want a body of text
to sit neatly in a containing box, the obvious solution in print would be to justify
the text and hyphenate words as required to make the column work without too
many long gaps. This is standard fayre, especially in newspapers and magazines.
But on the web, this treatment is di
cult to achieve: You can't just hyphenate
words and add line breaks as needed unless you can control the exact copy, font-
size, font, containing box, and so forth. And this will almost never be the case; it
just isn't how the web works! Instead, you have to settle for left, right, or centred
text;
text-align: justify
usually looks terrible, especially if you have lots of big
words in your copy.
Figure 3.14
illustrates this perfectly.
CSS3 comes to the rescue with the
hyphens
property. The three possible values
include:
none
. No hyphenation occurs. This could be used to turn off inherited
hyphenation set on a parent element.
manual
. Words are hyphenated onto separate lines, only there are line-
breaking characters present within them (like a hyphen character or a soft
hyphen—for example,
­
).
auto
. Words are automatically broken at appropriate hyphenation points.
To w o r k s u cce s s f u l l y, b ro ws e rs n e e d t o re co g n i z e t h e l a n g u a g e t o b e hy p h e n -
ated. Therefore,
hyphens
only works on markup with a correct language
declared on a parent element via the
lang
attribute.
