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.

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.

    • 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.

  2. Pingback: WordPress Community Links: talk about WordPress from Tumblr edition | WPCandy

  3. Pingback: Blog.ShawnSandy.com- IF IT IS CREATIVE I AM IN- CSS Tip: Hiding Content with Clip | ThemeShaper

Comments are closed.