An Introduction to Style Sheets: Vertical Text Alignment Controls
|
|
An Introduction to Style Sheets: Vertical Text Alignment Controls |
|
Not every effect will be visible in every browser.
To understand the line-height attribute one needs to understand some basic typography terminology. Each line of text has a basic text height, determined by the font designer. In addition, every line has some leading (pronounced as if it were written ledding ), some space above the highest letter / tallest ascender and below the lowest letter / longest descender. Type is normally displayed in lines that are a few points more than the font size. For example, 12 point text might be displayed on a 14 point high line, usually written 12/14 point. The text is 12 points high, and there is 2 points leading. In traditional typography, leading is added to the top and bottom of each line except above the the first line on a page and below the last line on a page. Half the amount of the leading is placed above and half below. In our 12/14 point example, each line of type has 1 point above and 1 point below. The next effect is to have 2 pt between each line.
In XHTML, line-height refers to the total height of the line, just as 14 pt in our 12/14 pt example refers to the total height of the line. Line-height can use three different ways to tell the browser the total line height. It is important to remember line height is always calculated using the current font size. If no font size is expressed, then the default font size for the HTML tag is used.
If a number is used, either a whole number or a decimal, it is used as a multiplier of the font size. A line-height value of 2 gives the equivalent effect of double spacing. Every line of text will be followed by space equivalent in height to the line of text.
<p style="line-height:2"> If a number is used, either a whole number or a decimal, it is used as a multiplier of the font size. A line-height value of 2 gives the equivalent effect of double spacing. Every line of text will be followed by space equivalent in height to the line of text.
Any of the eight units of measure specified for font sizes can also be used, inch, centimetre, millimetre, point, pica, pixel, em, x-height.
<p style="line-height:1.6em">: Any of the eight units of measure specified for font sizes can also be used, inch, centimetre, millimetre, point, pica, pixel, em, x-height.
Line-height can also be based on a percentage of the font size. Of course, this is essentially identical to using a decimal number: 120% = 1.2 for example.
<p style="line-height:140%"> Line-height can also be based on a percentage of the font size. Of course, this is essentially identical to using a decimal number: 120% = 1.2 for example.
Oh joy, oh joy, another thing to remember. Line height can also be negative. It is possible using negative leading to force a line of text to "invade" the space occupied by the previous line. Well, in reality, the value of line-height cannot be negative. However it can be less than 1, or less than 100%, which is the same thing.
<p style="line-height:80%">For example if point size is 12 and line-height is 1 then point-size = line-height. Text is cramped but usually readable. If line-height is set at less than 1 as it is in this paragraph, then line-height is less than point-size and lines of text should overlap in the browser.
While this is not the generally preferred way to have text overlap, it can be useful in situations where there are only a few words and they use different alignments on the page. For example you may wish to use two h1 tags, one set left and one indented, but have them appear almost side by side horizontally. Normally an h1 tag forces a line break and then a large line break before the next element. By experimenting with line height it is possible to get a different arrangement without having to resort to a table. Here is the normal pattern followed by an adjusted example.
It is at least theoretically possible, even if your browser, or my browser, doesn't want to co-operate.
Font Family | Font Size | Font Style | Text Style | Vertical Spacing | Horizontal Spacing
| Other Possibilities | |
|---|---|
| Start of site | Style Sheet Home |
| Send email | Robert Boardman |