User:Bartlett/15
./ ADD NAME=CH15.HTML
Hour 15. Alignment
What You'll Learn in This Hour:
Control over text formatting enables you to replace many HTML tags with CSS rules. Effects that were previously available only as presentational markup attributes are part of the Cascading Style Sheets specification and can help you separate presentation from content. |
./ ADD NAME=CH15LEV1SEC1.HTML
Aligning and Indenting Text
wax ka badalThe alignment of text defines the way in which the text lines up with the left or right margins. Most things you read (including this book) are left aligned; left-aligned text is generally easier to read. Centered text is often used on headlines, but it is rarely used on blocks of text because both margins are irregular and jagged, and experienced designers usually reserve right-aligned text for special text effects.
An indent is the extra space at the start of a line that lets you know you're on a new paragraph. In web design, new paragraphs are more commonly indicated by extra spacing than by indented text, although you are free to combine both if it suits your needs.
CSS properties enable you to control both the alignment and the indentation, setting them to whatever values you like on HTML block elements.
The text-align Property
Alignment of text inside a block property is controlled by the text-align property. This property has meaning only on block boxes; the content of inline boxes has no alignment, although the inline boxes themselves are aligned within the surrounding box. The block box itself is not actually positioned; only the content inside the box is aligned. To position the box itself, rather than its content, use either the margin properties you'll learn in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16], "Borders and Boxes," or the positioning properties you'll learn in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19], "Absolute and Fixed Positioning."
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15table01 Table 15.1] shows the values you can assign to the text-align property; the default value is left. The text-align property is inherited, so you can use a single
| Value | Effect |
| center | Center the content. |
| justify | Justify text on both sides. |
| left | Align content on the left. |
| right | Align content on the right. |
| inherit | Use the value of text-align from the containing box. |
Text that is justified is printed so that both the left and right sides line up; browsers accomplish this by adding extra spaces between words and letters. The last line of a justified paragraph is usually left aligned, if it's too short to fill an entire line by itself.
A simple HTML page with embedded style sheet that uses text-align is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15ex01 Listing 15.1]; the style rules result in the effects shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15fig01 Figure 15.1]. Borders have been added to the paragraph boxes to make it easier to see how the text aligns with the edges of the boxes.
Listing 15.1. CSS for Alignment
<!-- imgtip-15.1.html --><br /><html><br /><head><br /><title>Image Accessibility</title><br /><style type="text/css"><br />body { font-family: Arial, sans-serif; }<br />p { border: 1px solid #333333;<br />padding: 0.5em; }<br />p#a { text-align: left; }<br />p#b { text-align: justify; }<br />p#c { text-align: center; }<br />p#d { text-align: right; }<br /></style><br /></head><br /><body><br /><p id="a"><br />Always include an <tt>alt</tt> attribute on your<br /><tt><img></tt> tag.<br />The <tt>alt</tt> attribute should contain a short<br />replacement for the graphic, in text. If the image<br />itself has text, list that in <tt>alt</tt>.<br />If the image is purely decorative and doesn't convey<br />any additional information, use <tt>alt=""</tt>.<br />If there is more information in the graphic than you<br />can convey in a short <tt>alt</tt> attribute, such<br />as the information in a graph or chart, then use<br />the <tt>longdesc</tt> attribute to give the URL of<br />a page that describes the graphic in text.<br /></p><br /><p id="b"><br />...<br /><!-- repeat of the previous paragraph --><br /></p><br /><p id="c"><br />...<br /></p><br /><p id="d"><br />...<br /></p><br /></body><br /></html><br /> |
The text-indent PropertyAlthough it's most commonly used on
tags, the text-indent property can be set on any block element in HTML. (It has no effect if applied to an inline tag.) The effect produced by this property is indentation of the first line of the element, resulting from an added blank space. This blank space is treated similarly to the padding of the displayed box: It is inside the margin and border of the box, and it is colored with the same background-color as the element content. The values for text-indent are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15table02 Table 15.2]; in summary, you can either give a measurement value, such as 3em and 10px, or a percentage value based on the size of the containing box. The default indentation is 0px. The value of text-indent is inherited by all children elements, but keep in mind that it has no effect on inline elements, only block elements that inherit the value.
| Value | Effect |
| measurement | Sets an indent. |
| negative measurement | Sets a hanging indent. |
| percentage | Sets an indent based on a fraction of the containing box. |
| inherit | Use the value of text-indent from the containing box. |
The simplest indentations are the most straightforward; here's a rule to indent all paragraphs by 3ems:
p { text-indent: 3em; }
It gets a little trickier if you want to make a hanging indentone where the first line is not actually indented but the other lines of the text are indented. To do this, you can give a negative measurement, but it then flows off the left side of the element's box, which means it may not be visible or may overwrite other content.
The best solution is to add a margin to the box, which indents all the text except for that initial line, which subtracts its value from the margin. Here's an example, which creates a 2.8em hanging indent:
p { text-indent: -2.8em;
margin-left: 3em; }
Listing 15.2. Style Sheet with Several Different text-indent Values
body { font-family: Arial, sans-serif; }<br />p { border: 1px solid #333333;<br />padding: 0.5em; }<br />p#a { text-indent: 25px; }<br />p#b { text-indent: 75%; }<br />p#c { text-indent: 3em; }<br />p#d { text-indent: -3em;<br />margin-left: 3em; }<br /> |
The vertical-align Property
The property vertical-align is used to adjust vertical alignment within an inline box. This can be used to make text appear higher or lower compared with the rest of the text on the line; it's most useful for creating superscripts or subscripts. Superscripts are bits of text with the baseline above the surrounding text; subscripts have baselines lower than the surrounding text.
The types of values that can be set for the vertical-align property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15table03 Table 15.3]. The default value is baseline, and any values set on containing boxes are not inherited.
| Value | Effect |
| baseline | Align with the surrounding text. |
| bottom | Align the bottom with bottom of line. |
| middle | Align with the middle of the surrounding text. |
| sub | Lower to subscript level. |
| super | Raise to superscript level. |
| text-top | Align with the top of surrounding text. |
| text-bottom | Align with the bottom of surrounding text. |
| top | Align the top with top of line. |
| measurement | Raise above surrounding text. |
| negative measurement | Lower below surrounding text. |
| percentage | Raise as a percentage of the line-height. |
| negative percentage | Lower as a percentage of the line-height. |
Several of these values require further explanation. The middle value aligns the middle of the text with a height that's 0.5ex above the baseline of the surrounding text. An ex is a unit of measure equal to the height of a lowercase letter, usually about half the font-size. Percentages are based on the value of the line-height, which is usually equal to the font-size. The top and bottom values align with the highest and lowest parts of the line, whereas text-top and text-bottom are based only on the containing box's font-size values.
To create superscripts or subscripts, you use the vertical-align property, probably in combination with font-size; the vertical-align property doesn't affect the size of text, but most subscripts or superscripts are smaller than the surrounding text. Here are some example rules:
.atoms { vertical-align: -0.4em;
font-size: smaller; }
.power { vertical-align: super;
font-size: smaller; }
You'd use these style rules in HTML by setting class attributes, like this:
H<span class="atoms">2</span>0 x<span class="power">2</span> - 1 = 63
The effects of these styles can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15fig03 Figure 15.3]. You could also use the HTML Transitional elements and for the same effects, but CSS affords you more control over the specific presentation details.
File:15fig03.jpg
./ ADD NAME=CH15LEV1SEC2.HTML
Floating Content
wax ka badalAnother way to align content is to float it. Floating boxes move to one side or another according to the value of the float property, and any following content flows around them in a liquid fashion. The clear property can be used to indicate when the rest of the content should stop flowing around the floating box.
This effect should be familiar to experienced HTML developers who have used the align attribute on <img> or tags to position floating content on either side of the page layout. The clear attribute on thetag has been used to control when the floating should end. The CSS properties float and clear can be used on any HTML elements and therefore greatly extend the types of content that can be set to float or to stop flowing. An example of floating content can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15fig04 Figure 15.4]; the pull quote is positioned on the left, and the subsequent text content wraps around it on the right side and then flows back out to the full width when the quote ends.
Floating content is especially useful for pictures (with or without captions), pull quotes, and sidebar text.
The float Property
The values for the float property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15table04 Table 15.4]; the default value is none, meaning that the box and subsequent content are laid out according to the normal flow.
| Value | Effect |
| left | The box moves to the left, and text flows around the right side. |
| none | The box doesn't move, and text is not flowed around it. |
| right | The box moves to the right, and text flows around the left side. |
| inherit | Use the float value of the containing box. |
When a box is floated, it is positioned within its containing box's content section. The floating box remains within the margin, border, and padding of its containing box; it simply moves to the right or left side as appropriate. Any subsequent content is placed alongside the floating box for the length of that box.
The source for the page in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15fig04 Figure 15.4] is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15ex03 Listing 15.3].
Listing 15.3. An HTML File with a Pull Quote That Will Be Floated
<!-- pullquote-15.3.html --><br /><html><br /><head><br /><title>Accessibility of Color</title><br /><style type="text/css"><br />h1 { font-family: Verdana, sans-serif; }<br />p { font-size: large;<br />font-family: Arial, sans-serif;<br />line-spacing: 1.25; }<br />.pullquote<br />{ float: left;<br />font-family: Verdana, sans-serif;<br />text-indent: 0;<br />border: 5px solid black;<br />padding: 0.5em;<br />margin: 0.75em;<br />background-color: silver; }<br />.pullquote p<br />{ margin: 0; padding: 0; }<br />.pullquote blockquote<br />{ font-style: italic;<br />padding: 0; margin: 0; }<br />.pullquote img { float: left; }<br /></style><br /></head><br /><body><br /><h1>Don't <em>Rely</em> on Color Alone</h1><br /><p> Some web users may be unable to see color -- they may<br />be blind (and use a screen reader program); they may<br />be color-blind and unable to easily distinguish colors;<br />or they could be using an access device, such as a cell<br />phone, which does not display color. For this reason,<br />the W3C's Web Accessibility Initiative recommends that<br />you not <em>rely</em> upon color as the <em>only</em><br />way of conveying information.</p><br /><div class="pullquote"><br /><img src="k.gif" alt=""> <!-- decorative only --><br /><p>Kynn says:</p><br /><blockquote><br /><p>"Color is very<br><br />useful to those<br><br />who can see it"</p><br /></blockquote><br /></div><br /><p> This doesn't mean "don't use color" -- on the contrary,<br />color is very useful to those who can see it, and will<br />help make your page understandable. What it does mean<br />is that color (and other presentational effects) should<br />not be the only way you make something special. For<br />example, rather than use a <span> and a color<br />style to make something stand out, use the <strong><br />tag (which you can also style) so browsers that<br />can't use the visual CSS color rule can at least know<br />to emphasize that section -- perhaps by increasing the<br />volume when reading the text out loud, for example.</p><br /></body><br /></html><br /> |
The rule that makes the content move to the side is float: left. To place the pull-quote on the right side of the text, you can simply change that rule to read float: right instead. This is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15fig05 Figure 15.5].
In addition to the pull quote itself, there's an additional piece of floating content in this examplethe graphic symbol within the pull-quote is also floating. This was set by the following rule in the embedded style sheet:
.pullquote img { float: left; }
The clear Property
To stop subsequent text from flowing around a floating element, you can set the clear property on the first element you don't want to flow. This moves that element down far enough so that it doesn't wrap around the floating box. This effectively increases the top margin of the element with the clear property on it by an amount calculated by the browser to provide enough space to reach past the floating box.
The values for clear are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15table05 Table 15.5]; naturally, the default value is none. Other values specify whether the content should stop the flow around all floating boxes or only boxes on either the left or right side.
| Value | Effect |
| both | Move this box down enough so it doesn't flow around floating boxes. |
| left | Move this box down enough so it doesn't flow around left-floating boxes. |
| none | Don't move this box; allow it to flow normally. |
| right | Move this box down enough so it doesn't flow around right-floating boxes. |
| inherit | Use the clear value of the containing box. |
To use this property with the pull quote example from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15ex03 Listing 15.3] requires only adding a rule such as this to the embedded style sheet:
blockquote { clear: left; }
element is found, stop flowing the text around floated elements, and move down far enough to get past any that are present. The
in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15ex03 Listing 15.3] would normally flow around the floating image next to "Kynn says:", but as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15fig06 Figure 15.6], the clear rule stops the flow of text.
Figure 15.6. Clearing the float at the blockquote. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/15fig06_alt.jpg [View full size image]]File:15fig06.jpgDid you Know?Sometimes, if you float multiple boxes of content, you get a staggered effect down the page, where one box is positioned against the lower right corner of another. This happens because floated content tries to locate itself as high as possible, in addition to moving to the left or right. To avoid this problem, set a clear property on your floating content, like this:
div#sidebar { float: right; clear: right; }Thumbnail Galleries
A common use for the float property is in creating a gallery of thumbnail images that link to larger pictures, for displaying photographs or artwork on a website. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15ex04 Listing 15.4] is an HTML page with embedded style sheet that employs float in this manner.
Listing 15.4. A Simple Photo Gallery Page
<!-- gallery-15.4.html --><br /><html><br /><head><br /><title>Desert Museum Pictures</title><br /><style type="text/css"><br />body { font-family: Verdana, sans-serif; }<br />#gallery<br />{ border: 3px solid gray;<br />margin: 1em;<br />padding: 0.75em; }<br />#gallery h2 { margin: 0; }<br />#gallery div<br />{ border: 1px solid black;<br />margin: 10px;<br />padding: 10px;<br />width: 100px;<br />font-size: small;<br />float: left;<br />text-align: center; }<br />#gallery h2<br />{ clear: left; }<br />#credits { clear: both; }<br /></style><br /></head><br /><body><br /><h1>Desert Museum</h1><br /><p>Here are some pictures I took at the<br />Arizona-Sonora Desert Museum in Tucson:</p><br /><div id="gallery"><br /><h2>Mammals:</h2><br /><div><br /><a href="pics/coyote-001.jpg"><img<br />src="pics/thumb/coyote-001_thumb.jpg"<br />border="Thumbnail"></a><br><br />A Coyote<br /></div><br /><div><br /><a href="pics/coyote-002.jpg"><img<br />src="pics/thumb/coyote-002_thumb.jpg"<br />border="Thumbnail"></a><br><br />Another Coyote<br /></div><br />... <!-- more like these --><br /><h2>Birds:</h2><br />...<br /><p id="credits"><br />Pictures taken by<br /><a href="http://kynn.com/">Kynn Bartlett</a>.<br /></p><br /></div><br /></body><br /></html><br />
By the Way The picture gallery here uses the width property, which you'll learn about in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18.html#ch18 Hour 18], "Box Sizing and Offset." The width property forces all the images and their captions to take up the same horizontal space.[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15fig07 Figure 15.7] shows the results of displaying this page in a browser. When the browser window changesbecause of different screen resolution or simply shrinking the size of the browser application's windowthe pictures continue to line up. The extra pictures just get pushed down to the next available space.
Figure 15.7. Thumbnail gallery displayed in a browser. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/15fig07_alt.jpg [View full size image]]File:15fig07.jpg
Try it Yourself: Create an Image Gallery Use CSS to display your own pictures as in this example. Follow these steps:
> > ./ ADD NAME=CH15LEV1SEC3.HTML Summary
Several CSS properties allow you to adjust the appearance of text when displayed by the browsers, altering the alignment, indentation, and flow of content.
The text-align property specifies whether the text should be lined up on the left side, the right side, or both sides, or in the center. The text-indent property lets you set a paragraph indent or other indent, although hanging indents are somewhat unreliable across browsers. The vertical-align property lets you specify how text is aligned within an inline box and can create subscripts or superscripts.
The normal flow of the page can be affected by the float property, which positions a display box on either the right or left side of its containing box's content area. Subsequent text then flows around the floating box, wrapping around the outer margin. The clear property can be used to move content down the page until it no longer flows.
./ ADD NAME=CH15LEV1SEC4.HTML Workshop
The workshop contains a Q&A section, quiz questions, and exercises to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
> > [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15qa1q1a1 Q.] The text-align property works only on inline content. So how do I align a block element? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15qa1q1 A.] You can align a block element in two ways: with margin properties and float. To place a block element on the left side of its containing block, use the margin-right property with a value of auto, and to align it on the right, use a margin-left value of auto. To center it, set both margin-left and margin-right to auto. You'll learn more about the right and left margins in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16]. Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15qa2q1a1 1.] Which of these rules sets a paragraph indent equal to 300% of the font-size? #p { text-indent: 300%; }
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15qa2q2a2 2.] Part of your web page consists of an image followed by text; the next section begins with an tag. You want the image to be located on the left and the text to flow around it, but you don't want the next section's header to be placed next to the image. What CSS rules would you write to do this?
Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15qa2q1 1.] Rule (c) is the correct answer. 1em equals the font-size measurement; if the font-size is 12pt, 3em is 36 points. Percentages in text-indent, such as rule (a), are based on the containing block's size; so text-indent: 300% means to have a first line indent that is three times larger than the box holding the paragraph! A more reasonable value would be between 0% and 50%. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch15qa2q2 2.] Here's an example of the type of rules you would write; in practice you'd probably use class or id selectors to make these more specific: img { float: left; }<br />h3 { clear: left; }<br />
Exercises
Your own experiments with the properties in this hour will help you master how to use them to style your text and float content. Try the following to expand your understanding:
- Using vertical-align: super, create some links that are anchors to footnotes at the bottom of the page. What makes a good-looking footnote reference? Experiment with smaller font size and adding or removing underlines.
- Try some text styles for your paragraphs, including line spacing (from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10], "Text Colors and Effects") coupled with text-indent. Printed text has often used indentation for paragraph text, whereas web browsers simply use vertical space (created by margins) between paragraphs. Test it out yourself to see how indenting paragraphs changes the feel of your page.
- The float property can be used to position menus on the sides of your web pages. Create some pages that use float to provide simple layout. You'll learn more about using float in layout in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch20.html#ch20 Hour 20], "Page Layout in CSS," but for now you have a useful tool for styling your pages.
./ ADD NAME=CH16.HTML
