| Previous | Table of Contents | Next |
In this lesson, you learn how to indent and justify your text elements.
Indentation and justification are two more common desktop publishing functions that have thus far been difficult for web page authors. Styles now make them simple.
Indentation affects only the first line of a text block and moves its starting point inward a specified distance from the left margin. Justification is the selection of how text should be aligned, that is, how the words on a given line of text should be arranged in relation to the spaces between them.
The properties that control indentation and justification are text-indent and text-align, respectively. Both can be applied only to block elements and have no affect on inline tags such as <I> and <EM>. The value for the text-indent property is an absolute or relative measurement, while text-align takes keywords.
Both of these properties produce effects that are relatively subtle when compared to margin or font adjustments. However, they can lend an air of professionalism to a document and greatly increase its readability.
The text-indent property requires a value which indicates the distance that the first line of text is to be indented. The measurement can be in any of the scales that are typically supported by the CSS1 standard, such as:
A typical text-indent rule appears as follows:
P {text-indent: .5in}
Relative values, in the form of percentages, can also be used with the text-indent property. The percentage is measured against the width of the parent element. If the parent has a substantially greater width than the child (due to the values of the child’s margin properties, for example), you may have to apply a very small percentage to achieve the desired effect.
To demonstrate the effects of the text-indent property, create a file containing the following HTML code and name it SAMPLE2.HTML.
<HTML>
<HEAD>
<STYLE>
<!--
BODY {font-size: 11pt;
margin-left: 0in;
background: white}
H2 {font-size: 24pt;
font-family: Arial;
margin-left: .5in;
color: red}
P {font-family: Verdana;
margin-left: 1in;
margin-right: 1in;
color: darkblue}
.first {text-indent: .5in}
.second {text-indent: 36pt;
margin-top: -.3in}
.third {text-indent: 1.26cm;
margin-top: -.3in}
-->
</STYLE>
</HEAD>
<BODY>
<H2>HTML Style Sheets</H2>
<P CLASS=first>HTML style sheets are innovative primarily
in that they allow various different styles to be applied
to web pages by the author. Indeed, it could be said that
all web browsers already use a style to display text.</P>
<P CLASS=second>A style is simply a collection of text
and layout attributes that can be selectively applied to
all or part of a document. The idea of grouping them
into a style allows the author to easily apply the same
collection of attributes to many different parts of a
document.</P>
<P CLASS=third>The HTML styles</SPAN> in Microsoft's
Internet Explorer 3.0 are based on a draft standard being
developed by the World Wide Web Consortium (W3C).</P>
</BODY>
<HTML>
You can see that the text-indent values for the three class selectors: .first, .second, and .third, all result in the same effect for the three paragraphs. Indents typically take small values, rarely more than an inch. Too great an indent is distracting and hampers readability. Indents are also inherited by the children of the elements to which they are applied.
Normally, the <P> tag forces a line break that clearly delineates paragraphs, but by applying negative margin-top values, you can create a continuous text block that uses indents to indicate the beginnings of the paragraphs, as shown in Figure 12.1.
)
Figure 12.1 Indents can be used
to break long streams of text into clearly visible paragraphs.
TIP: Paragraph Breaks Indents are only applied when paragraphs are broken by the application of separate <P> tags. A new paragraph that is the result of an inline break (such as when the <BR> tag is used) will not be indented by the text-align property.
Indents can also have negative values, producing an outdent or a hanging indent. Adding a negative sign to the values of the three class selectors’ text-indent properties produces the results shown in Figure 12.2.
)
Figure 12.2 A hanging indent is
when the first line of a paragraph extends to the left, beyond the margin.
Use the text-align property to control the justification of a text block. Its value must be one of four keywords:
Explorer Support Internet Explorer 3.0 does not support the justify value for the text-align property.
When text is streamed between two margins, each line is filled until there is no room left to add another word. Because word lengths vary, there is usually a number of spaces left over between the last word and the margin.
Left justification places all of the leftover spaces at the right margin. Each line begins at the left margin and ends somewhere before the right margin. This is also known in the publishing trade as ragged right, due to the uneven edges at the right side of the page.
When those extra spaces are placed at the left margin, allowing the end of each line to touch the right margin, you have right justification. Center justification divides the extra spaces evenly at both ends of the line. Neither side meets the margin and the text is symmetrical through a center axis. Right and center justification should not be used for long text streams. The irregular left margin makes it difficult for the eye to find the beginning of each line.
Most printed books and periodicals use full justification, represented by the justify value. Fully justified text distributes the extra spaces as evenly as possible between the words on each line.
Full justification is not supported by Internet Explorer 3.0. Although this may seem like a serious shortcoming, you must realize that making fully justified text both attractive and readable is a difficult undertaking. Depending on the length of the lines and the lengths of the words, you can end up with a lot of empty space on each line, forcing you to leave large breaks between words.
This is why fully justified text is extremely reliant on good hyphenation. Hyphenating words allows more of the empty spaces on each line to be filled with parts of words. Desktop publishing programs usually have hyphenation dictionaries that are used to determine where hyphens can be correctly placed in particular words. Because web pages must adjust to fit a browser window and because there are no hyphenating tools for browsers, you are actually better off using left-justified text for long paragraphs.
For decorative use and for smaller blocks of text such as headlines, the use of right and center justification can be a powerful tool. By making a few modifications to the margin and text-align properties in the SAMPLE2.HTML file from Lesson 11 and removing the text-indent properties, the following <STYLE> block results, and you get a document that looks like Figure 12.3.
){kind=link}
){kind=link}
<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%;
text-align: right}
.second {margin-top: -.3in;
margin-left: 50%;
text-align: left}
.third {margin-top: -.3in;
margin-left: 25%;
margin-right: 25%;
text-align: center}
-->
</STYLE>
)
Figure 12.3 Varying text
justification breaks up a page and can be used to create interesting
layout effects.
In this lesson, you learned how to alter the appearance of text blocks using indents and justification. In the next lesson, you will learn to control the spaces between letters, words, and lines.
 |
 |
 |
){kind=link}