Aug 122008
Sometimes you want to use a font for your headings that isn’t available on other people’s computers so you use a fancy font image instead. But there’s a problem if you do this. People using screen readers/text browsers won’t be able to see the image and therefore the heading text.
Image replacement techniques have been around for years but my preferred method is Mike Rundles from way back in 2003.
This uses the text-indent property of css and seems to work in most situations. Basically, we have the fancy font image as the background image to the element and hide the actual element text with a negative text-indent
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Image Replacement</title> </head> <body> <div id="wrapper"> <h1>My Wonderful Heading Text</h1> </div> </body> </html> |
CSS
1 2 3 4 5 6 | h1 { width:200px; height:100px; background: url(myimage.jpg) 0 0 no-repeat; text-indent:-5000px; } |
What You Said