The white-space Property

The white-space property specifies with the way the browser should handle whitespace.

The space character, the carriage return, the line feed character and the tab character are the whitespace characters that are affected by the white-space property. The following whitespace characters are not affected by the white-space property: non-breaking space ( ), em space ( ), en space ( ) and thin space ( ).

The white-space property can be applied to any element. It takes any one of the following values: normal, pre, nowrap, pre-wrap, pre-line, and inherit. The inital value is normal. white-space is an inherited property.

white-space:normal

This is the initial value of the property and therefore specifies the default whitespace handling of the browser.

By default, the browser handles whitespace characters found within an element (whose contents are displayed as text) in this way:

• Single or multiple space characters are displayed as a single space.
• Single or multiple tab characters are displayed as a single space.
• Single or multiple carriage return characters are displayed as a single space.
• Single or multiple line feed characters are displayed as a single space.
• Any combination of the above mentioned characters — space, tab, carriage return, and line feed, are displayed as a single space.
• The following whitespace character entities are displayed as many times as they appear in the element:  ,  ,   and  . That is, the browser does not reduce multiple instances of these character entities into a single space.
• Spaces in the text that would appear at the end and at the beginning of lines are not displayed.

The white-space:normal declaration is used to restore the default whitespace handling in an element when a different white-space declaration was either specified or inherited.

Example 1: <div style="font-family:'Times New Roman';font-size:35px;white-space:pre"><p style="white-space:normal">the five boxing wizards jump quickly the quick</p></div>

 

white-space:pre

This declaration causes the browser to "preserve" the whitespace in an element and to prevent automatic line wrapping. That is, with this declaration, all the whitespace characters are displayed as many times as they appear in the element and only carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>) cause the browser to start new lines.

Note: In Firefox 3, Firefox 3.5, Safari 4, Chrome 3 and Opera 10, with white-space:pre, every line that is displayed ends with either a carriage return character, a  line feed character or a carriage return - line feed pair. However in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, with white-space:pre, if the text in an element starts with a newline character or character sequence, the browser does not display the blank line. This is a bug.

Example 2: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre"> the five boxing <span>wizards jump</span> quickly<br> over </p>

 

white-space:nowrap

This declaration prevents the automatic wrapping of lines. However, line break tags (<br>) still create new lines. This declaration does not alter the way white space is handled.

Example 3: <p style="font-family:'Times New Roman';font-size:35px;white-space:nowrap"> the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

 

white-space:pre-wrap

This declaration causes the browser to "preserve" the whitespace in an element and, unlike white-space:pre, does not prevent automatic line wrapping. That is, with this declaration, all the whitespace characters are displayed as many times as they appear in the element, the browser automatically wraps lines, and carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>) cause the browser to start new lines.

Example 4: <p style=" style="font-family:'Times New Roman';font-size:35px;white-space:pre-wrap">the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

Note: Internet Explorer 6 and Internet Explorer 7 ignore the white-space:pre-wrap declaration.

white-space:pre-line

This declaration causes the browser to automatically wraps lines, and start new lines with carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>). Unlike white-space:pre however, space characters and tab characters are handled according to the browser's default whitespace handling rules.

Example 5: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre-line">the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

 

Note: Firefox 3, Internet Explorer 6 and Internet Explorer 7 ignore the white-space:pre-line declaration.

white-space inheritance

white-space is an inherited property, all descendants of an element inherit its white-space declaration.

Example 6: <div style="white-space:pre"><p style="font-family:'Times New Roman';font-size:35px"> the five boxing <span>wizards jump quickly</span> the quick</p></div>

white-space:inherit

This declaration is used to override another white-space declaration that is applied to an element and to restore the default behavior of inheriting the ancestor elements' white-space declaration.

Note: Internet Explorer 6 and Internet Explorer 7 ignore white-space:inherit declarations.

Concluding Notes

white-space:pre-wrap and white-space:inherit must be avoided because Internet Explorer 6 and Internet Explorer 7 ignore these declarations.

white-space:pre-line must be avoided because Firefox 3, Internet Explorer 6 and Internet Explorer 7 ignore it.

If the text in an element that has the declaration white-space:pre, starts with a newline character or character sequence, Internet Explorer 8 and below do not display the blank line. Therefore, elements that have white-space:pre should not start with a newline character or character sequence.

The text-shadow Property

This property specifies text shadows that appear with the text of an element.

The text-shadow property can be applied to any element. It is an inherited property (according to CSS 3). Its inital value is none. Its syntax is as follows:

text-shadow: color1 horizontal_offset1 vertical_offset1 blur_radius1, color2 horizontal_offset2 vertical_offset2 blur_radius2,...

The color value specifies the color of the shadow. The horizontal offset is a length value that specifies the distance to the left or right of the text that the shadow has to be rendered. A positive value renders the shadow text to the right, a negative value renders it to the left. The vertical offset is a length value that specifies the vertical distance from the text that the shadow has to be rendered. The blur radius, a length value, controls the blurriness of the shadow.

More than one shadow can be specified — each set of values are separated by a comma.

Note: text shadows have no effect on the size of the line box

Example: <p style="font-family:'Times New Roman';font-size:35px;text-shadow: green 15px 15px 0, gray -15px -15px 0">the five boxing wizards</p>

In the above example, the text has two shadows — one below and the other above. Firefox 3 and Internet Explorer 8 and below ignore the text-shadow property. Firefox 3.5, Safari 4, Chrome 3 and Opera 10 display the text shadows as shown in the picture.

Conclusion

Since the text-shadow property is ignored by Firefox 3 and Internet Explorer 8 and below, this property cannot be used.

The text-decoration Property

The text-decoration property produces the following text effects: underline, overline, line-through, and blink.

The text-decoration property can be applied to any element. It is not an inherited property. Its initial value is none. The following keywords can be its values: underline, overline, line-through, blink, none and inherit. The following keywords can be used together to combine their effects: underline, overline, line-through, and blink.

The text-decoration property does not affect the line-height of an element.

text-decoration:underline

The text-decoration:underline declaration produces a line under the text (and any spaces) of an element. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the thickness of the line depends on the font size of the element. In Internet Explorer 6 and Internet Explorer 7, the line is always one pixel thick. The line is drawn below the baseline.

In Firefox 3 and Firefox 3.5, if text-decoration:underline is applied to a <p> containing a span, the underline is covered by the span's background color or background image. However, if the span does not have a background-color or background-image specified, then the underline is visible. In Internet Explorer however, the underline is visible even when the span has a background color or image.

In Firefox 3 and Firefox 3.5, underlines are drawn below images too. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, underlines are not drawn below images.

Example 1: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:underline">the five boxing wizards @&Acirc;</p>

<

In the above example, the underline is 2px thick and at a height of 2px from the bottom of the content area. In Internet Explorer 6 and Internet Explorer 7, the underline is 1px thick and 3px from the bottom of the content area.

text-decoration:overline

The text-decoration:overline declaration produces a line above the text (and any space characters) of an element. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the thickness of the line depends on the font size of the element. In Internet Explorer 6 and Internet Explorer 7, the line is always one pixel thick. The line is drawn at the top of the content area.

In Firefox 3 and Firefox 3.5, if text-decoration:overline is applied to a <p> containing a span, the overline is covered by the span's background color or background image. However, if the span does not have a background color or background image specified, then the overline is visible. In Internet Explorer however, the overline is visible even when the span has a background color or image.

In Firefox 3 and Firefox 3.5, overlines are drawn above images too. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, overlines are not drawn above images. In Firefox 3 and Firefox 3.5, tall images may cover an overline.

Example 2: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:overline">the five boxing wizards @&Acirc;</p>

 

In the above example, the overline is 2px thick and is at the top of the content area. In Internet Explorer 6 and 7, the overline is 1px thick.

text-decoration:line-through

The text-decoration:line-through declaration produces a line through the middle of the text in an element. In Firefox 3, Firefox 3.5, Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the thickness of the line depends on the font size of the element. However, these browsers don't all draw a line of the same thickness for a give font size.

In Firefox 3 and Firefox 3.5, unlike for underline and overline, with line-through, the line is visible even through spans that have a background color or background image specified. In Internet Explorer 6, Internet Explorer 7 and in Internet Explorer 8, just like for underline and overline, the line is visible in spans that have a background color or image.

In Firefox 3 and Firefox 3.5, unlike for underline and overline, with line-through, the line is drawn over images. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the line is not drawn through images.

Example 3: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:line-through">the five boxing wizards @&Acirc;</p>

 

In the above example, the line is 2px thick and at a height of 15px in Firefox 3, Firefox 3.5 and Internet Explorer 8. In Internet Explorer 6 and Internet Explorer 7, the line is 4px thick and at a height of 15px.

text-decoration:blink

The text-decoration:overline declaration causes the text of the element to blink. Firefox 3 and Firefox 3.5 support the blink feature, but not Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8.

In Firefox 3 and Firefox 3.5, only text blinks, not images.

Example 4: <p style="text-decoration:blink">the five boxing wizards @&Acirc;</p>

text-decoration and descendant elements

According to the w3.org CSS specification, text-decoration is not an inherited property. However, text-decoration overlines, underlines and line-throughs that are applied to an inline-level or block-level elements also appear over descendant elements.

The color of the text-decoration line depends on the value of the color property of the element that the text-decoration declaration was directly applied to, and the line remains the same color in descendant elements.

In Firefox 3 and Firefox 3.5, the thickness of the text-decoration line depends on the font size of the element that the text-decoration declaration was applied to. However, in Internet Explorer 8 thickness of the text-decoration underline and overline depends on the font-size of the tallest em box on the line in which the text-decoration line appears. However, the thickness of the line-through depends on the font-size of the text in which the line-through appears. In Internet Explorer 6 and Internet Explorer 7, the text-decoration underline and overline is always 1px thick, but the thickness of the line-through depends on the font size of the text in which the line-through appears.

In Firefox 3 and Firefox 3.5 the position of the text-decoration line is dependent on the font size of the element that the text-decoration declaration was applied to. In Internet Explorer 8 and below, the position of the text-decoration line is dependent on the tallest em box in the element.

Example 5: <p style="font-family:'Times New Roman';font-size:55px;color:black;text-decoration: line-through"><span style="font-size:25px;color:red">the five boxing wizards jump </span><span style="font-size:35px">quickly</span></p>

 

The picture above shows how the example code is rendered in Firefox 3 and Firefox 3.5. In those browsers, the line-through is at a height appropriate for 55px text even though the element does not contain a single glyph that is of 55px. The color of the line is black because the value of the color property for the <p> is black. The thickness of the line-through is based upon the font size of the <p>. In Internet Explorer 6 and Internet Explorer 7, and Internet Explorer 8 there are two separate line-throughs, one for each span and of different thickness, based on the font size of each span. The color of the line-through is black, based on the color declaration on the <p>.

text-decoration:inherit

The text-decoration:inherit declaration prevents the parent element's text-decoration declaration from having any effect on an element and causes the element to inherit the parent element's text-decoration declaration as its own.

Internet Explorer 6 and Internet Explorer 7 ignore the text-decoration:inherit declaration.

text-decoration:none

The initial value of text-decoration is none. Therefore, the declaration text-decoration:none is useful in overriding another text-decoration declaration that has been applied to an element.

Multiple text-decoration values in a declaration

The text-decoration property can have more than one of the following values: underline, overline, line-through, and blink. Each value is separated from the next by a space. When the property has more than one value, the effect of each value is combined.

Example 6: <p style="text-decoration:underline overline ">the five boxing wizards @&Acirc;</p>

In the above example, the text of the <p> will have both an underline and overline.

Concluding Notes

The text-decoration property should be used with caution on elements that have descendants. This is because the text decoration that was specified on the parent also appears in the descendants. In such a situation, there is no way to remove the text decoration from the descendant elements.

The text-decoration declaration should not be used on elements on that contain images because of differences in rendering between Firefox and Internet Explorer 8 and below.

text-decoration:blink is not supported in Internet Explorer 8 and below.

For consistent rendering in all browsers, one should avoid using text-decoration on an element that contains text of different font-sizes.

The text-transform Property

The text-transform property affects the capitalization or the case of the letters in an element. This property can transform all the letters in an element into capitals or into lowercase letters, or it can capitalize the first letter of every word.

The text-transform property can be applied to any element. Its values can be any one of these: uppercase, lowercase, capitalize, none, or inherit. The initial value is none.

text-transform:uppercase

The text-transform:uppercase declaration transforms all the letters in an element (and its descendants) to uppercase.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';text-transform:uppercase">the quick brown fox 123</p>

In the above example, though all the letters in the <p> are lowercase, the text-transform:uppercase declaration transforms all the letters to uppercase.

text-transform:lowercase

The text-transform:uppercase declaration transforms all the letters in an element (and its descendants) to lowercase.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';text-transform:lowercase">The QuicK brown FOX 123</p>

 

In the above example, though all the letters in the <p> are a mix of lowercase and uppercase, the text-transform:lowercase declaration transforms all the letters to lowercase.

text-transform:capitalize

The text-transform:capitalize declaration transforms the first letters of all the words in an element (and its descendants) to uppercase, that is, it capitalizes all the words.

Note: In Firefox 3 and Firefox 3.5 only the first letter of a hyphenated word is capitalized. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the first letter and the letter after the hyphen are capitalized.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';text-transform:capitalize">the quick-brown fox jumps over</p>

 

In the above example, the first letter of each word is capitalized.

text-transform:none

The text-transform:none declaration restores the default browser behavior of displaying letters in the same case as they are in the element. This declaration is useful to override another inherited text-transform declaration on an element. 

Example 4: <div style="text-transform:uppercase"><p style="font-size:35px;font-family:'Times New Roman';text-transform:none">The Quick Brown Fox Jumps</p></div>

In the above example, the text-transform:none declaration overrides the inherited text-transform:uppercase declaration inherited from the div. Therefore, the text in the <p> is not transformed to uppercase.

text-transform:inherit

text-transform:inherit is used to override another text-transform declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's text-transform declaration.

Internet Explorer 6 and Internet Explorer 7 do not support text-transform:inherit, they ignore the declaration.

Conclusion

The text-transform:inherit declaration should be avoided because Internet Explorer 6 and Internet Explorer 7 ignore it.

With the text-transform:capitalize declaration, Internet Explorer capitalizes the first letter and the letter after the hyphen in hyphenated words. However, Firefox 3 and Firefox 3.5 only capitalizes the first letter of hyphenated words. Therefore, text-transform:capitalize should not be used on elements that contain hyphenated words.

The text-align Property

The text-align property specifies the alignment of text and images within the content area of a line. It can align the em boxes of text (and image content boxes) to the left side of the line box or to the right side of the line box; it can center the string of em boxes (along with image content boxes) on the line, and it can justify text. To justify text, the word spacing is increased so that the beginning and ending of the text (or images) on each line is aligned to the left and right side.

The text-align property can be applied to block-level elements and table cells. It can take the keywords left, center, right, justify and inherit. It is an inherited property. In all major browsers for English, text is left-aligned by default.

Note: The text-align property cannot be directly applied to inline elements.

text-align:left

text-align:left on an element aligns the last em box's (or image box's) left edge to the left edge of the content area on each line, without changing the word spacing of the line. All the remaining em boxes (and image boxes) on the line are positioned with their left edge against the right edge of the previously positioned em box. Since text in English is already aligned to the left by default, in English web pages, text-align:left is only useful to override another text-align declaration on an element.

Example 1: <div style="text-align:right"><p class="test" style="text-align:left"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p></div>

In the above example, the text-align declaration on the <p> overrides the text-align declaration on the div and left-aligns the text in <p>.

text-align:right

text-align:right on an element aligns the last em box's (or image box's) right edge to the right edge of the content area on each line, without changing the word spacing of the line. All the remaining em boxes (and image boxes) on the line are positioned with their right edge against the left edge of the previously positioned em box.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';text-align:right"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p>

 

In the above example, the right edge of the last em box of each line is aligned to the right edge of the content area. The word spacing is not altered.

text-align:center

text-align:center adjusts the postion of the em boxes (and image boxes), without changing the word spacing, in such a way that the amount of space between the left edge of the first em box (or image box) and the left edge of the content area is equal to the amount of space between the right edge of the last em box (or image box) and the right edge of the content area.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';text-align:center"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p>

 

In the above example, the string of em boxes of each line is centered on the line with equal space to the left and the right.

text-align:justify

text-align:justify on an element aligns the first em box's (or image box's) left edge to the left edge of the content area and the last em box's (or image box's) right edge to the right edge of the content area on each line by equally increasing the word spacing of the text on the line (if necessary).

All major browsers justify text by increasing the word spacing, they do not alter the letter spacing.

All major browsers justify the text in an element only when the text (and images) span more than one line.

If an element has both a word-spacing length declaration and word-spacing:justify, then the browser ignores the word-spacing declaration and increases the word spacing (if necessary) in order to justify the text.

Note that the actual amount of additional word spacing between individual pairs of words (or images) may differ between browsers, but the sum of the added spacing is the same for a particular line of text, for a particular width of the content area.

Example 4: <p class="test" style="text-align:justify"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p>

 

In the above example, the word spacing between words is increased such that there is no space between the left and right edges of the content area and the first and last em boxes (or image boxes) of each line.

text-align:inherit

text-align:inherit is used to override another text-align declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's text alignment.

Internet Explorer 6 and Internet Explorer 7 do not support text-align:inherit, they ignore the declaration.

Conclusion

The text-align:inherit declaration should be avoided because Internet Explorer 6 and Internet Explorer 7 ignore it.

All the other keywords of text-align are fully supported in all major browsers.

The letter-spacing Property

The letter-spacing property is used to adjust the space between letters. The letter-spacing property reduces or increases the width of the em boxes of letters. Note that this property does not change the distance between the em boxes, which is always zero.

The letter-spacing property can be applied to any element. It can take length values and the keywords normal and inherit. It is an inherited property. The initial values is normal. A length of 0 is equivalent to normal. Negative values are allowed; they reduce the width of em boxes.

Note 1: The em box is the box that a glyph occupies.

Note 2: The letter-spacing property does not take percentage values.

Note 3: When the letter-spacing property has a length value, the letter spacing of the text cannot be changed by the text-align property.

letter-spacing with px values

The number of px declared in the letter-spacing declaration is the number of extra pixels of width added to the em boxes it is applied to.

Example 1a): <p style="font-family:'Times New Roman';font-size: 35px"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

 

In the above example, there is no letter-spacing declaration, therefore the em boxes are of default width. The default em box sizes for the letter is "t" is 10px, "h" is 18px, and "e" is 15px.

Example 1b): <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: 10px"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

In the above example, the width of the em boxes of the <p> and its descendants have been increased by 10px. Therefore, the width of the em boxes are: "t" 20px, "h" 28px, and "e" 25px.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: -3px">the <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

In the above example, the letter-spacing value is negative. This results in the following em box widths: "t" 7px, "h" 15px, and "e" 12px.

letter-spacing with em values

When letter spacing is declared in em, the em value is multiplied with the font-size to give the number of pixels that are added to the width of the em boxes in the element.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: 0.5em"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span></p>

In the above example, the declared em value (0.5em) is multiplied with the font-size to give 17.5px (0.5 * 35). This is added to the width of the em box. This results in the following em box widths: "t" 28px, "h" 36px, and "e" 33px.

However, Internet Explorer 6 and Internet Explorer 7, calculate em letter-spacing declarations to a much smaller value due to a bug.

letter-spacing:normal

letter-spacing:normal restores the em box width to the default sizes. Since letter-spacing is an inherited property, the normal keyword can be used to restore the default letter spacing in an element that has inherited a modified letter spacing declaration.

letter-spacing:inherit

letter-spacing:inherit is used to override another letter-spacing declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's letter spacing.

Internet Explorer 6 and Internet Explorer 7 do not support letter-spacing:inherit, they ignore it.

Conclusion

For consistent results in all browsers, letter-spacing with em values should be avoided (Internet Explorer 6 and Internet Explorer 7 calculate them incorrectly).

letter-spacing:inherit should also be avoided because Internet Explorer 6 and Internet Explorer 7 do not support it.

letter-spacing declarations in px are supported in all browsers and is therefore the recommended way of using the property.