August 07, 2003

Gilder Image Transform technique

There have been a lot of discussions about replacing text in documents with CSS flying about recently, and every day someone seems to come up with a nastier hack. The entire idea is a hack in the first place really (mostly down to deficiencies in CSS or the lack of <object> support in IE), and one which is insanely over-used. Authors seem to forget about alt sometimes.

The easiest way of replacing images without extra elements whilst being friendly to broken screen reader that I've seen is this:

.replace {
  text-indent: -10000em;
  background: url(...) no-repeat;
  width: 300px;
  height: 100px;
}

...only time that causes problems is for users using a browser with CSS support, but images disabled, as they'll see nothing. If you want to cope for all, then there's this:

.replace {
  width: 300px;
  height: 100px;
  position: relative;
}

.replace span {
  background: url(...) no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

<div><span></span>Text</div>

...which seems to work pretty well in IE5win/IE6win/IE5mac/Safari/Opera7/Gecko. Ideally I'd put overflow:auto in the first rule incase the text was larger than the image dimensions, but that seems to make Gecko go funny.

16:11 GMT: Just to give proper credit, the first time I read of that text-indent technique is from Aaron Smith on this WAI Interest Group post.

Posted by tom at 04:04 PM | Comments (10) | TrackBack

Blog Tools

Recent Entries

September 2003

S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

Archives

Syndicate: RSS 1, RSS 2
Designed by Shell Design
Powered by Movable Type