|
ImageReplacementModule
Notes on the Image Replacement Module
Image Replacement ModuleLocation/stylesheets/modules/image-replacement.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/image-replacement.css SummaryThere is a limited number of web-safe fonts used on the web. This is because you can never be sure which fonts a user will have installed on their machine. If you want to use fancier fonts, or logos, then you can use these image replacement texts to replace the text in an element with an image (that contains the same information). HTML Design PatternThe text in any element can be replaced with an image. The example given is to replace the main heading of the page: <h1>Another Boring Blog</h1> DescriptionThis stylesheet uses the Phark method of image replacement (discovered by Mike Rundle, see http://phark.typepad.com/phark/2003/08/accessible_imag.html) to replace elements of text with an image. Why It's BulletproofThe text is still there in the markup (and hopefully marked up correctly with MeaningfulMarkup, so will still be accessible to screen readers. There is no need for any extra, redundant markup. How It WorksThe image is applied as a background. The element is set to the same dimensions as the image. The text is then moved off the screen using the text-indent property and setting it to a large negative value (-1000em). This throws the text off the screen, leaving just the image displayed. IE FixesNone needed, alpha transparencies for png images are not supported in IE6 or below. IssuesIn the unlikely case that a user has images turned off, but CSS turned on, then they won't see an image or the text. In all likelihood, this would usually only be mobile browsers and this could be addressed by using a separate stylesheet for mobile devices. Further Readinghttp://phark.typepad.com/phark/2003/08/accessible_imag.html See http://www.mezzoblue.com/tests/revised-image-replacement/ for alternative methods of image replacement Other Modules
|
Sign in to add a comment
