C H A P T E R 12
Aligning Content
This chapter discusses design patterns that align text and content horizontally and vertically to their
containing blocks. These alignment patterns work in the normal flow without using absolute or relative
positioning.
The first three design patterns align content horizontally. The next three design patterns align
content vertically. The last design pattern and the example at the end of the chapter are quite esoteric
and have little practical application. I have included them to demonstrate the powerful capabilities built
into the inline formatting context.
- Text Indent shows how to indent the first line of text.
- Hanging Indent shows how to create a hanging indent.
- Horizontal-Aligned Content shows how to align text and inline content to the
left, right, or center. It also shows how to justify text and inline content. - Vertical-Aligned Content shows how to vertically align an inline element to its
parent’s fontlines. These fontlines define an alignment context. - Vertical-Offset Content shows how to vertically offset an inline element from its
parent’s baseline. - Subscript and Superscript shows how to create subscript and superscript text,
and how to make it look consistent across all browsers. - Nested Alignment shows how to nest alignment contexts.
- Advanced Alignment Example is not a design pattern, but a fun example
showing off how alignment and relative positioning can create sophisticated
inline layouts.