Pro HTML5 and CSS3 Design Patterns

CHAPTER 10 ■ STYLING TEXT

Invisible Text

Problem You want to hide the text in a terminal block element without hiding the element itself. You
don’t want to insert any extra markup into the document. You want the text to be read by a
screen reader. You want to set the height and width so you can display a background image
instead of the text.

Solution Use text-indent:-9999px to move the text off the screen so it isn’t visible.^

Use text-align:left to ensure that the block doesn’t inherit another value for text-align.

This is important because text-indent works properly only when text is aligned to the left.

Use width and height to size the element to display the background image.

Use text-align to move the text to the left or right side—further out of the way of a

background image.

Pattern TERMINAL_BLOCK_SELECTOR { text-indent:-9999px; text-align:left; width:+VALUE;
height:+VALUE; background-image:url("FILE.EXT"); background-repeat:VALUE;
background-position:H V; }

Location This pattern applies to any terminal block element.

Limitations This design pattern only works on terminal block elements, like the paragraph. It doesn’t work
on inline elements. If the browser can’t display the background image, the user doesn’t see
anything.

Tip If you can insert a tiny bit of extra markup, the Text Replacement design pattern is much better.

Related to Text Replacement; Text Indent, Hanging Indent (Chapter 12)