| Previous | Table of Contents | Next |
In this lesson, you learn how to modify the size of the spaces between letters, words, and lines of text.
Graphic designers and desktop publishers develop a keen eye for the details of how text is laid out on a page. Professional-quality page layout programs can often adjust page elements by increments as small as a thousandth of an inch. You can imagine the degree of frustration that results when these people are faced with the restraints imposed by HTML. HTML styles return some of these features to the hands of the web page author.
In past lessons, you learned how styles can return to the author control of functions that are normally set only in the browser software. In this lesson, you learn how to adjust settings that are unalterable by any other means, even at the browser level.
The amount of white space that is visible on a web page can be controlled with margin settings, as you have seen in Lesson 12. You can also use styles to control the white space within a block of text. The CSS1 standard includes properties that can modify the amount of space that is left between lines of text, between words, and between letters.
In publishing circles, the space between lines of text is called leading (rhymes with bedding). The term originated during the days of manual typesetting when blanks made of lead were inserted between the lines of type to increase the space between them. Leading should not be confused with the line spacing feature of typewriters and word processors that allows you to double space your text (although it can be used for that purpose). Leading usually refers to much finer adjustments, and the control provided by the line-height property permits you to specify leading measurements in any of the scales supported by the CSS1 standard, including:
The line-height property would typically appear in a rule as follows:
P {line-height: 16pt}
You can only apply line-height to a block element (not to an inline element). The measurement specified as the value for the line-height property indicates the distance between the baselines of a text block. The baseline is the invisible horizontal rule on which a line of text rests (see Figure 13.1). A value of zero causes all of the lines of text in the block to be placed on one rule, stacked on top of one another. Therefore, the value of the line height element should, at a minimum, be the same as the font-size of the text, to avoid overlapping. Negative values are not permitted.
)
Figure 13.1 The line height of
a block of text is the distance between baselines.
The line-height value can also be expressed using relative measurements. A value of 100% causes a line-height equal to the current font size. The CSS1 standard also defines the use of numerical values without any indication of the measurement scale (such as a percent sign or a unit abbreviation). In this case, the value represents a ratio to the current font size. A rule that appears as follows:
){kind=link}
P {line-height: 1.5}
would therefore result in a line-height of 1.5 times the current font size. Line-height is an inherited property, but the relative values behave in a slightly different manner. If you specify a percentage as the value for the line-height property, the actual value of the current element is passed down to the child elements. This is typical inheritance behavior as defined by the CSS1 standard. If you specify a ratio as the value, however, it is the ratio that is passed down to the element’s children, not the actual value.
Explorer Support Internet Explorer 3.0 does not support the use of ratio values in the line-height property as defined in the CSS1 standard. Numerical values without a unit of measurement are incorrectly interpreted as pixel values.
If you specify a line-height value of 150% on an element using a 12-point font, the children of that element inherit a line-height value of 18 points, whatever their font size. If you specify a value of 1.5, the line-height value of the child elements is 1.5 times their current font size.
To see the effect that leading can have on a text element, modify the <STYLE> block of the SAMPLE2.HTML file that you created in Lesson 12 by adding the line-height property to the declarations for the three class selectors called .first, .second, and .third, as shown:
<STYLE>
<!--
BODY {font-size: 11pt;
background: white}
H2 {font-size: 24pt;
font-family: Arial;
text-align: center;
color: red}
P {font-family: Verdana;
margin-left: .1in;
margin-right: .1in;
color: darkblue}
.first {margin-right: 50%;
line-height: 24pt;
text-align: right}
.second {margin-left: 50%;
line-height: 16pt;
text-align: left}
.third {margin-left: 25%;
margin-right: 25%;
line-height: 12pt;
text-align: center}-->
</STYLE>
The result of the three different values is quite a different look for each of the paragraphs (see Figure 13.2). Increasing the leading causes a small block of text to attract more attention without an increase in its size. You can also use leading to adjust the amount of space occupied by a block of text, allowing you to even up columns or create paragraphs that exactly correlate in size to a graphic element.
)
Figure 13.2 Minor changes in
the line-height value can have a noticeable effect on the
appearance of a text block.
Explorer Support You may notice that in Figure 13.2, the application of the line-height property has improperly caused the white space before and after each paragraph to be enlarged. Leading values should be applied only between two lines of text. This, plus the failure of the vertical margins to collapse properly (see Lesson 11), can cause excessively large inter-paragraph spaces. Until these issues are addressed, you can compensate for the problem by applying a smaller or negative value for the margin-top property.
The publishing term that refers to the spacing between words and letters is tracking. Most desktop publishing software allows you to set a factor that adjusts the overall length of a line by spreading the letters slightly farther apart. The CSS1 standard, however, separates this function, and lets you adjust the spacing between words independently from the spacing between letters.
Just as the line-height property affects the distance between lines of text, the word-spacing property affects the distance between words. The line-height property can be applied to both block and inline text elements. A value can be specified by using any of the scales listed earlier in this lesson. The value corresponds to a distance that is added to the default space between each two words in the selected text. Percentage values are not permitted, but negative values are, to allow the reduction of space between words.
The typical values you would supply for the word-spacing property are very small. Too much space between words will make text more difficult to read. You can use larger values for display text, such as headlines, that can be made to match other architectural elements of your page in length without increasing the font size.
Explorer Support The word-spacing property is not supported by Internet Explorer 3.0.
You can adjust the distance between the letters within a word with the letter-spacing property. The concept should not be confused with kerning. Kerning is the adjustment of the space between individual pairs of letters to accommodate the design of a particular font. The letter-spacing property adjusts the spacing between all of the adjacent letters in a block of text by a specified amount, regardless of the font used or the letter pair. Theoretically, the letter-spacing property could be used to adjust kerning, but you would have to apply a style to each phonetic pair of letters in the document.
letter-spacing values are subject to the same restrictions as those for word-spacing. Any measurement scale can be used except percentages, and negative values are acceptable. Remember that the value you assign to the letter-spacing property is added to the default space between letters. If you are using a relatively large value for the word-spacing property, letter-spacing can also be applied to lessen what may be a jarring amount of space between words.
Explorer Support The letter-spacing property is not supported by Internet Explorer 3.0.
The letter-spacing and word-spacing properties would typically appear in a rule as follows:
){kind=link}
H1 {letter-spacing: 2pt;
word-spacing: 4pt}
In this lesson, you learned how to adjust the spacing between lines, words, and letters. In the next lesson, you learn how to group style properties to save keystrokes and make your code easier to read and maintain .
 |
 |
 |