Core CSS: 2nd Edition, from Prentice Hall. | 11

Core CSS: Chapter 11: Text Properties: Extensions

TEXT-ALIGN-LAST PROPERTY

The text-align-last property is an Internet Explorer-only property, and is designed to alter the way the very last line of text in a given paragraph is formatted. It is meant to be used in conjunction with the text-align property, but it overrules its behavior when it comes to the final line of a paragraph.

The text-align-last property has a total of six values: the five belonging to text-align -- left, right, center, justify and inherit -- and the additional auto value. This last value is the default, setting the final line of text to whatever value has been set for text-align.

It should be noted that the default layout for the last line of text in a paragraph in Internet Explorer -- even when the text is set to text-align: justify -- is to align the text the left. The example code seen in Listing 11-14 contains three paragraphs which are all set to text-align: justify, but the latter two use the additional text-align-last property. You can see its effect in Figure 11-14.

Listing 11-14 text-align-last Example Code 

<html>
<head>
<title>text-align-last Example</title>
<style>
body {font-size: 18pt}
</style>
</head>
<body>
<p style="text-align: justify">
This line contains justified text. To ensure you can really see the effect of this, we need a few sentences so that the effect can easily be seen. Despite the fact that the <code>text-align-last</code> property is not being used, the default behavior is that the last line is <em>not</em> justified.
</p>
<p style="text-align: justify; text-align-last: center">
This line contains justified text. To ensure you can really see the effect of this, we need a few sentences so that the effect can easily be seen. This paragraph uses <code>text-align-last</code> set to <code>center</code>, so the last line is centered. 
</p>
<p style="text-align: justify; text-align-last: right">
This line contains justified text. To ensure you can really see the effect of this, we need a few sentences so that the effect can easily be seen. This paragraph uses <code>text-align-last</code> set to <code>right</code>, so the last line is right-aligned. 
</p>
</body>
</html>

Figure 11-14: The effects of the text-align-last value as seen in the last two paragraphs of this Web page as seen in Internet Explorer 6.0.

BROWSER COMPATIBILITY

At the moment the text-align-last property is an Internet Explorer-only property. It was first implemented in version 5.5 of the browser.

CSS3 and text-align-last

The text-align-last property has been adopted within the text module of CSS3, but names of some the values assigned to it are different than those used by Internet Explorer. Internet Explorer uses the values auto, left, right, center, justify and inherit. The CSS3 equivalent values for this property are instead: auto, start, end, center, justify, inherit, initial and size. In this case Internet Explorer's left and right values are the same as CSS3's start and end. The initial value is CSS3's way of specifying the default value for a given property (which in this case is also auto), but the size value is something new.

When text-align-last is set to size, the browser is supposed to scale the content on the last line to fit across the whole of the line -- which means that the font size for the text in the final line may be changed in order to help make the text stretch across it. In order to set constraints on how much (or how little) the browser should scale the size of the font, CSS3 also introduces the min-font-size and max-font-size properties to set minimum and maximum font size to be applied in this case. (For more information on these two properties, see Chapter 10, "Text Properties").

Created: March 27, 2003
Revised: August 19, 2003

URL: http://webreference.com/programming/corecss/2