Text Alignment & Spacing

Video

• J09a- (5:23)

text-indent

• Indents the first line of a paragraph.
• The following uses this code:
  • text-indent: 2em;

text-align

• For horizontal alignment.
• Can only be applied to block level elements.
• Values include:
  • left
  • right
  • center
  • justify
• The following h3 element uses text-align: center;

This h3 element is centered using text-align: center;

• The following paragraph uses text-align: justify; which makes each line of text, except the last, about the same length:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam. In condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

vertical-align

• For vertical alignment.
• It is used for vertically aligning the contents of a table cell.
  • The html valign attribute is now deprecated in html5.
• It can only be used effectively with inline tags (em, a, strong, img, and so forth).
• Useful for superscript and subscript, however for math and science notation it is better to use the html tags <sup> and <sub> because those elements more properly identify the type of information that it is. Those tags can then be style, particularly to make the numbers smaller.
• Read about the various values used to vertically align inline elements relative to each other:
  • vertical-align @W3C
  • html encyclopedia: vertical-align

letter-spacing

• Traditionally called kerning.
• Note the increase in the size of the gap between the letters.
• The following uses this css code:
  • letter-spacing: .2em;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam. In condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

word-spacing

• Traditionally called tracking.
• The following paragraph uses this css code:
  • word-spacing: .75em;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam. In condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

line-height

• Traditionally called leading.
• The following uses this css code:
  • line-height: 1.8em;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam. In condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

white-space

• Similar to the html <pre> tag.
• Unlike the pre tag, it can use any font, not just monospace.

Assignment

• J09b - no video
  1. Create a new html5 file and name it yourlastname_J09.html
  2. Create three paragraphs of Lorem Ipsum text.
  3. Style the paragraphs as follows, each number represents a paragraph from the top of the page downward:
     1. For the first paragraph, use a class named one to apply these properties:
        • Justify it.
        • Letter spacing of 1/2 em.
     2. For the second paragraph, create an id named two to apply the following:
        • Make the space between the rows 125 percent.
        • Center-align the paragraph.
        • Indent the first row 10 pixels.
     3. For the third paragraph:
        • Replace the paragraph tags with div tags.
        • Redefine the div element to have it apply word spacing of 2 ems to the text within it.

---

A Walk Down Memory Lane: Are you as nostalgic about alignment as I am?

Different methods for centering	Result	Status
<center><h1>Test</h1></center>	Test	Deprecated but continues to work
<h1 align=center>Test</h1>	Test	Deprecated but continues to work
<td align=center><h1>Test</h1></td>	Test	Deprecated but continues to work
<h1 style="text-align:center;">Test</h1>	Test	CSS!

© 2014 Dan Hitchcock Vaughan and licensors