Text-Indent: Indented

css text-indent
Intial Idea was of Scott Kellum
Promoted by Zeldman

We all are very much familiar with the -9999px image replacement technique has been popular for the best part of a decade. To replace a text element with an image, you use the following code:

The element’s background is displayed and it’s text is moved off-screen so it doesn’t get in the way. Simple and effective. It was often adopted to show graphical titles — now it’s rarely necessary due to the availability of webfonts, but we’ll still find it used all over the web, now.

Until now.

A new technique has been discovered by Scott Kellum and promoted at Zeldman.com:

The Process
The code indents the text beyond the width of its container but it won’t wrap and the overflow is hidden.

While it’s a little longer and more difficult to remember, performance can be improved because the browser’s no longer drawing a 9,999px box behind the scenes. It will also prevent the weird left-extended outlines you’ll see around links using hidden text.

The Illness
This method, particularly the image replacement method has some issues at SEO stage since it does not have an alt text for the image.

My Story
The reason I posted this is because it interested me at first shot. Actually, I was looking for something else and this topic caught my attention and thought of trying out for myself and it did work smoothly; but as I noted, it has few issue on SEO aspects.
P.S. I’ve not given a demo link as i thought this to be very simple with few lines of code.

Thanks for reading this post and as usual, I’m open to suggestion and critics (positive of course).
Do comment on!


Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.
  • Blanche

    thanks for sharing such a lovely stuff…

  • Alena

    very interesting stuff.