Styling Text - Beginning CSS3 - page 72

Outlining Text
At the time of this writing, there is no agreed way of adding a stroke to text. The CSS3 Text module proposed a
text-outline property, but it was dropped. WebKit browsers, such as Safari and Chrome, support a nonstandard
-webkit-text-stroke property, but there are currently no signs of it being adopted by the W3C or other
browsers. However, you can fake adding an outline to text by adding a 1px shadow to all four sides like this:
.outline {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
This is a rather clumsy solution, but at least it works in all browsers that support text-shadow . Unfortunately,
using just two shadow definitions ( -1px -1px #000, 1px 1px #000 ) doesn't produce quite as good a result. You
can compare the different effects in outline.html. The difference is subtle, but noticeable.
Using Multiple Shadows for a More Intense Effect
The last two examples in text-shadow multi.html demonstrate a surprising feature of the text-shadow
property. If shadow definition uses a blur radius, repeating the same definition multiple times intensifies the
effect. The last two examples use the following styles:
.glow {
text-shadow: 0 0 0.4em #6F9;
}
.intense-glow {
text-shadow: 0 0 0.4em #6F9, 0 0 0.4em #6F9, 0 0 0.4em #6F9;
}
he glow class creates a green text shadow with no offsets and a 0.4em blur radius. The intense-glow class
simply repeats the same definition three times, resulting in a more intense effect (see Figure 4-16 ).
Summary
CSS gives you an impressive toolbox to style and format text, and more features are being added by browsers as
CSS3 evolves. Browsers depend on the fonts available to them, so you need to create a font stack to offer a choice
of fonts with similar characteristics, finishing with a generic font family. In addition to choosing fonts, font-
related properties allow you to control the size and whether the font should be displayed as bold, italic, or small
caps.
As well as setting fonts, you have many formatting options, such as changing the horizontal space between
individual characters and words using letter-spacing and word-spacing . You can also change the vertical
space between lines of text with line-height ; draw lines under, over, and through text with text-decoration ;
indent the first lines of text with text-indent ; control whitespace and overflow text with white-space and
text-overflow ; and add multiple effects with text-shadow .
In the next chapter, you'll learn how to increase the range of font options using embedded fonts and related
properties.