CSS Tip: Hiding Content with Clip

In our themes on WordPress.com we often hide text from screen display but still want it to remain for screen readers. Typical techniques like text-indent and absolute positioning work fine until you try to add RTL support to the theme. After adding RTL styles those techniques cause layout issues; most commonly a huge horizontal scrollbar in certain flavors of IE.

Here’s a technique I came across on Adaptive Themes (Professional Drupal themes and design services) that works really well for this situation.

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

In our testing it seems to work great across all our target browsers.

See the full post on the Adaptive Themes site: Using CSS clip as an Accessible Method of Hiding Content.

Author: Lance Willett

By day Lance is a software quality tester and bug triager at Automattic, and by night he is Launcelot du Lac, Knight of the Round Table.

6 thoughts on “CSS Tip: Hiding Content with Clip”

  1. Good trick. Thanks for sharing! And the linked write-up is very informative.

    It is interesting how having to account for both LTR and RTL helps you learn new things and understand better how user agents work.

    1. Agreed. Accounting for RTL and proper internationalization not only make your work better for everyone, but as you say, teaches you a lot about how CSS and browsers work.

Comments are closed.