- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Common Text Layout Properties
In addition to font styling properties, CSS also has a number of text layout properties for aligning text, specifying line heights, letter spacing, word spacing, and more.
text-align
Text can be aligned left, right, center, or fully justified using the text-align property and one of these four keywords:
- left
- right
- center (only the American spelling may be used)
- justify
Justified text on the web is usually a bad idea, because the justification algorithms in browsers are less sophisticated than those in page layout and word processing software. This leads to a much higher chance of undesirable effects like rivers, in which vertical rivers of whitespace occur when the spaces between words are stretched to fill the full width of the element.
line-height
In CSS, line-height, unsurprisingly, specifies the height of a line of text in an element.
The judicious use of line-height can have a noticeable effect on the appearance of a block of text. The CSS line-height property allows you to specify the line height as a length value, such as 1.4em, a percentage, or (in a rare exception to the rule) a number without units. Numberless units, when used with line-height, specify a multiplying factor rather than a pixel height.
This unusual multiplier allows a new way for elements to inherit line-height values. Before looking at this method, let's consider the way inheritance works with percentage values. If a line-height whose value is specified with a percentage is inherited, the value of the line-height for the element is a percentage of the current font size of the element's parent; child elements inherit this precalculated value, not the percentage itself. Consider the following statement (in which I've used a pixel font-size to simplify the calculations, though this isn't a recommended in actual development):
dd {
font-size: 12px;
line-height: 120%
}
|
In this example, the line-height for our div will be 120% of 12px, which is 14.4px—which will be rounded down to 14px, the nearest whole px value. A paragraph inside this element will inherit a line-height of 14px, even if its font-size is, say, 16px. And any child of that paragraph will also inherit a 14px line-height—which essentially loses the whole point of using a percentage value to begin with.
The multiplier value—a unitless numeric value—is nearly identical but is inherited in a different way. Suppose we specify the very similar statement
div{
font-size: 12px;
line-height: 1.2
}
|
Here, the parent div will have a line-height of 1.2 times 12px, which is 14.4px, again rounded down to 14px. So far it's identical to a percentage line-height. But this time, the children of the div will also have a line-height of 1.2. So if, for example, we have paragraphs inside the div with a font-size of 16px, their line-height will be 16px times 1.2 which is, 16.8px (17px, rounding to the nearest whole pixel value).
Importantly, using a multiplier rather than a percentage means that the line-height of elements doesn't need to be individually specified in individual statements. Instead, the multiplying value is inherited from, for example, the body element. This is the recommended way of specifying line-height.
Incidentally, by default, most browsers use a line-height of 1.0 to 1.2.
Letter and Word Spacing
CSS allows developers to expand or condense the space between letters or words, using the properties letter-spacing and word-spacing. Each of these takes a length value, though not a percentage value. A positive value expands text spacing, and a negative value condenses it. Figure 4.1 shows text with no additional spacing and the same text condensed by .1em using letter-spacing: -.1em, and expanded by .1em using letter-spacing: .1em. We've used ems here, as we will do often in the book because with relative units, when a user zooms text, the proportion of letter spacing will stay the same. If we'd used a pixel-based letter-spacing, at some text sizes the spacing looks fine, while at others, it's unnoticeable, or negatively affects legibility.
)
4.1 Text with no letter-spacing (top), with a letter-spacing of .1em (middle), and with a letter-spacing of –.1em (bottom)
text-indent
Frequently, with blocks of text such as paragraphs, the first line of text is indented or "outdented" to distinguish it from the rest of the block. We can do this easily with the rarely used text-indent property. For example, we could indent the first line by 5em like this:
p {
text-indent: 5em
}
|
We could also "outdent" the first line by using a negative value. Again, we've used em units so that our design will retain its proportions as the text grows and shrinks based on user preferences.
Putting all these properties together, here's the CSS for a paragraph with text-align, line-height, letter-spacing, and text-indent:
p {
line-height: 1.3;
text-align: left;
letter-spacing: .1em;
text-indent: 1em;
}
|
And here's what it looks like in a browser [4.2], along with some extra CSS and even CSS3 properties we'll cover later in the book, just to give you something pretty to look at.
)
4.2 Our styled paragraph as rendered by Safari 4