Tuesday, 20 November 2007
Better Hanging Indents in CSS
This is a post I have been meaning to complete for a while: better Hanging Indents in CSS.
A big part of my day job—well, less of it now, but just a short time ago, a big part of my day job—is to take marketing creative and bust it down into HTML (4.01), get it into our source code control (CVS), and integrate it with our backend (JSP/Struts).
The latter two are practiced, scripted processes, but the HTML part is still a hand-crafted element and something that I enjoy a lot. The creative will always contain legal footnotes in “mice type” and referenced with various asterisks, daggers, and markers. Many times, depending on the mood of the graphic artist, these markers will be set in a “hanging indent.”
What exactly is a hanging indent, for the uninitiated?
It is a typographic construct that serves to eliminate any visual interruption of the text alignment. Here is a visual aid:
The ubiquitous method found doing a Google search will be: use a negative text-indent, e.g., text-indent: -.7em;. This method works, but has some visual problems when the markers are doubled-up, or are not the same em width, etc. Another visual aid:
This alignment problem using text-indent has always put me off, so let me get to the point: there is a better way to do a hanging indent that works across most modern browsers (“The A-Grade”) without weird ordered, or unordered, lists, background markers, and “class explosion.”
The Code
#ft p {
position: relative;
}
#ft a {
position: absolute;
top: 0;
left: -2em;
display: block;
width: 1.5em;
text-align: right;
}
The How and Why
Disclaimer: The vast assumption here is that the CSS constructs being used apply to your code. If not, apply as apropos to your code.
The #ft element contains the footnotes (“legalese”) in child p elements. Setting the position:relative of the paragraph prepares child elements for absolute positioning, that is relative (hence the term), to the parent.
The next block does the work. Here, the use of an a element is semantic and intended to allow the developer a way to link the body reference to the footnote. You can use any inline element desired though. Using position:absolute removes the element from the document flow and positions relative to the p element. Setting the left property to a negative em value pulls it out of the p box.
The display:block prepares the element width and text alignment properties. Setting the width is important. The width of the positioned element allows for the right edge alignment of the markers.
Nothing is better than examples to study. The first, using text-indent, and the second, using this new (?), better (?), and more visually appealing (?) method.
Decide for yourself. Comments welcome! ~o)
