fbpx
Wikipedia

CSS image replacement

CSS image replacement is a Web design technique that uses Cascading Style Sheets to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles. Also named Fahrner image replacement for Todd Fahrner, one of the persons originally credited with the idea of image replacement in 2003.[1]

With the introduction of CSS web font support in all major web browsers, CSS image replacement is now little used.

Motivation edit

The typical method of inserting an image in an HTML document is via the <img> tag. This method has its drawbacks with regards to accessibility and flexibility, however:

  • While the alt attribute is designed for providing a textual representation of the image content, this precludes the use of HTML markup in the textual representation and causes problems[example needed] with some search robots.
  • Using the <img> tag to show text is presentational; many Web designers argue that presentational elements should be separated from HTML content by placing the former in a CSS style sheet.
  • Images referenced using an <img> tag cannot be easily changed via CSS, causing problems with alternative stylesheets.

Fahrner image replacement was devised to rectify these issues.

Implementations edit

The original Image Replacement implementation[1] described by Douglas Bowman used a heading, inside of which was a <span> element containing the text of the heading:

<h3 id="firHeader"><span>Sample Headline</span></h3> 

Through style sheets, the heading was then given a background containing the desired image, and the <span> hidden by setting its display CSS property to none:

#firHeader {  width: 300px;  height: 50px;  background: #fff url(firHeader.gif) top left no-repeat; } #firHeader span {  display: none; } 

It was soon discovered, however, that this method caused some screen readers to skip over the heading entirely, as they would not read any text that had a display property of none. The later Phark method, developed by Mike Rundle in 2003, instead used the text-indent property to push the text out of the image's area, addressing this issue:

#firHeader {  width: 300px;  height: 50px;  text-indent: -5000px; /* ← Phark */ } 

The Phark method had its own problems, however; in visual browsers where CSS was on but images off, nothing would display.

Also in 2003, Dave Shea's eponymous Shea method solves both of the issues earlier mentioned, at the cost of an extra <span>:

<h3 id="header"><span></span>Revised Image Replacement</h3> 

By absolutely positioning an empty <span> over the text element, the text is effectively hidden. If the image fails to load, the text behind it is still displayed. For this reason, images with transparency cannot be used with the Shea method.

#header {  width: 329px;  height: 25px;  position: relative; } #header span {  background: url(firHeader.gif) no-repeat;  position: absolute;  width: 100%;  height: 100%; } 

Over a dozen different methods has since been developed with varying degree of compatibility and complexity.[2]

References edit

  1. ^ a b Bowman, Douglas (2003-03-07). "Using background image to replace text". Stopdesign. Retrieved 2011-04-05.
  2. ^ Mosley, Marie (2015-11-03). "The Image Replacement Museum". CSS-Tricks. Retrieved 30 March 2019.

External links edit

  • Revised Image Replacement – an overview of the various FIR techniques by Dave Shea
  • Ultimate Image Replacement – a comprehensive image replacement technique by Jesse Schoberg

image, replacement, design, technique, that, uses, cascading, style, sheets, replace, text, page, with, image, containing, that, text, intended, keep, page, accessible, users, screen, readers, text, only, browsers, other, browsers, where, support, images, styl. CSS image replacement is a Web design technique that uses Cascading Style Sheets to replace text on a Web page with an image containing that text It is intended to keep the page accessible to users of screen readers text only web browsers or other browsers where support for images or style sheets is either disabled or nonexistent while allowing the image to differ between styles Also named Fahrner image replacement for Todd Fahrner one of the persons originally credited with the idea of image replacement in 2003 1 With the introduction of CSS web font support in all major web browsers CSS image replacement is now little used Contents 1 Motivation 2 Implementations 3 References 4 External linksMotivation editThe typical method of inserting an image in an HTML document is via the lt img gt tag This method has its drawbacks with regards to accessibility and flexibility however While the alt attribute is designed for providing a textual representation of the image content this precludes the use of HTML markup in the textual representation and causes problems example needed with some search robots Using the lt img gt tag to show text is presentational many Web designers argue that presentational elements should be separated from HTML content by placing the former in a CSS style sheet Images referenced using an lt img gt tag cannot be easily changed via CSS causing problems with alternative stylesheets Fahrner image replacement was devised to rectify these issues Implementations editThe original Image Replacement implementation 1 described by Douglas Bowman used a heading inside of which was a lt span gt element containing the text of the heading lt h3 id firHeader gt lt span gt Sample Headline lt span gt lt h3 gt Through style sheets the heading was then given a background containing the desired image and the lt span gt hidden by setting its display CSS property to none firHeader width 300 px height 50 px background fff url firHeader gif top left no repeat firHeader span display none It was soon discovered however that this method caused some screen readers to skip over the heading entirely as they would not read any text that had a display property of none The later Phark method developed by Mike Rundle in 2003 instead used the text indent property to push the text out of the image s area addressing this issue firHeader width 300 px height 50 px text indent 5000 px Phark The Phark method had its own problems however in visual browsers where CSS was on but images off nothing would display Also in 2003 Dave Shea s eponymous Shea method solves both of the issues earlier mentioned at the cost of an extra lt span gt lt h3 id header gt lt span gt lt span gt Revised Image Replacement lt h3 gt By absolutely positioning an empty lt span gt over the text element the text is effectively hidden If the image fails to load the text behind it is still displayed For this reason images with transparency cannot be used with the Shea method header width 329 px height 25 px position relative header span background url firHeader gif no repeat position absolute width 100 height 100 Over a dozen different methods has since been developed with varying degree of compatibility and complexity 2 References edit a b Bowman Douglas 2003 03 07 Using background image to replace text Stopdesign Retrieved 2011 04 05 Mosley Marie 2015 11 03 The Image Replacement Museum CSS Tricks Retrieved 30 March 2019 External links editRevised Image Replacement an overview of the various FIR techniques by Dave Shea Ultimate Image Replacement a comprehensive image replacement technique by Jesse Schoberg Retrieved from https en wikipedia org w index php title CSS image replacement amp oldid 1187788918, wikipedia, wiki, book, books, library,

article

, read, download, free, free download, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, picture, music, song, movie, book, game, games.