Chapter 51. Controlling Indents
| The standard solution to creating an indent with HTML is the blockquote tag, which doesn't make the standards police very happy. Strictly speaking, the purpose of the blockquote tag is to offset a chunk of display text like the quote at the beginning of a scholarly essay, as in Figure 51.1. But you'd be hard pressed to find a more practical, results-oriented bunch than Web designers under deadline constraints. In the fog of rapid production, they drafted the blockquote tag early on to jury-rig page indents, as in Figure 51.2. Figure 51.1. The blockquote tag is supposed to offset chunks of display text, like this. Figure 51.2. In the hands of crafty designers, the blockquote tag became the de-facto method for creating page indents, much to the dismay of standards-conscious Web heads. In both cases, the HTML coding is the same. Simply place blockquote tags around the content that you want to indent, like so: <blockquote> <p>This paragraph is indented.</p> <p>This paragraph is indented.</p> <p>This paragraph is indented.</p> </blockquote> You can also nest blockquote tags to increase the amount of indentation: <blockquote> <blockquote> <blockquote> <p>This paragraph is very indented.</p> <p>This paragraph is very indented.</p> <p>This paragraph is very indented.</p> </blockquote> </blockquote> </blockquote> Notice, though, that you can't control the precise amount of indentation. For each blockquote tag, the browser just pushes the text some distance to the right according to a default setting. A better solution overall is to use CSS. The margin-left attribute does the job handily, and it gives you the added flexibility of adjusting the precise amount of indentation, as Figure 51.3 shows. Listing 51.1. View Source for Figure 51.3. <head> <style type="text/css"> p { margin-left: 50px; } </style> </head> <body> <h1>Blah blah headline</h1> <p>Blah blah blah....</p> <p>Blah blah blah....</p> </body> Figure 51.3. You're better off creating indents with CSS. This way, you can specify the precise amount of indentation. CSS does you one better, too. It allows you to specify additional indentation for the first line of any text element, be it a paragraph, a heading, or what have you. The attribute responsible is text-indent, and it works as in Figure 51.4. Listing 51.2. View Source for Figure 51.4. <head> <style type="text/css"> p { text-indent: 30px; } </style> </head> <body> <h1>Blah blah headline</h1> <p>Blah blah blah....</p> </body> Figure 51.4. Use the text-indent attribute to indent the first line of any text element. Notice that the second and subsequent lines of text fall along the left margin of the element. The text-indent attribute only affects the first line of text. In the View Source for Figure 51.4, the value of 30 pixels is 30 pixels of additional indentation. So, if the style rule for a paragraph had been: p { margin-left: 50px; text-indent: 30px; } the total actual indentation in the first line of type is 80 pixels, or 50 + 30. In the second and subsequent lines of type, the indentation jumps back to 50 pixels.
Which segues nicely into an interesting CSS trick: creating a hanging indent. A hanging indent is like a paragraph indent in reverse: The first line of type pushes out to the left from a block of text, not in to the right. The first line seems to hang in midair beyond the left border of the block of type, hence the name. To create a hanging indent, first set the left margin of the text element to some value, say 50 pixels. Then set the text indent to a negative value, like 30 pixels. See Figure 51.5 for the results. The first line of type shoots 30 pixels further left than the standard left margin of 50 pixels. Listing 51.3. View Source for Figure 51.5. <head> <style type="text/css"> p { margin-left: 50px; text-indent: -30px; } </style> </head> <body> <p>Blah blah blah...</p> <p>Blah blah blah....</p> </body> Figure 51.5. To create a hanging indent, establish a standard left margin for the block of text, and then set the text-indent attribute to a negative value.
|
