CSS text-indent

The text-indent CSS property specifies the length of the indentation applied to the first line of text in block elements. Indenting paragraphs is not usual but the property is still common for image replacement and link hiding.

%pxptemvw...
text-indent: length
text-indent: 2em;
text-indent: 10px;
text-indent: 5%;     /* relative to parent's width */

each-line and hanging are two additional values described in the CSS3 Specification (Working Draft) which had no browser support at the time of writing.

Browser Support: Full, except for the hanging and each-line values. See the Mozilla Developer Network doc for more information.

Indenting the first line

Use em units for indentation length to scale with font-size and percentages to scale with container width. Keep in mind that text-indent will be inherited by children block elements.

There's full support for first line indentation using text-align.

p.indented {
text-indent: 5em;
}

The first line of this paragraph is indented by text-align. You may also indent all lines except the first one (see next sections).

Negative text-indent

Use a negative value to "outdent" the first line. The text is outdented without altering the container but it may overflow unless it has the overflow: hidden rule.

p.outdented {
padding-left: 5em; text-indent: -5em;
}

The first line of this paragraph is outdented. This technique is used to hide text as explained in the next section.

Hiding Link Text

When text-indent takes a large value, the text is visually removed but still accesible to screen readers. This technique is used to hide text for accesibilty purporses, "Skip Navigation" links, for example (which enable screen reader users to avoid the navigation section).

a.invisible-link {
text-indent: 100%; overflow: hidden;
}

text-indent for Image Replacement

The same technique used for accesibility links can be used to swap text for an image, in the site title, for example. This way the title remains in the markup for search engines but users see a nice logo.

<h1 class="site-logo">codeitdown.com</h1>
h1.site-logo{
width: 120px; /*Image width & height*/ height: 120px; background: url(http://codeitdown.com/images/codeitdown.png); text-indent: 100%; overflow: hidden;
}

codeitdown.com

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>