[WSG] An alternative to FIR (Fahrner Image replacement)?
Hi all, I think I may have found a new way to enhance the original idea: The demo (scalable image): http://www.TJKDesign.com/articles/tip_5.asp The article: http://www.TJKDesign.com/articles/tip.asp Please report any error you may find. -- Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] An alternative to FIR (Fahrner Image replacement)?
Thierry Koblentz I think I may have found a new way to enhance the original idea: The demo (scalable image): http://www.TJKDesign.com/articles/tip_5.asp The article: http://www.TJKDesign.com/articles/tip.asp Maybe I'm missing the point here, but...have we just come full circle? If you're already adding IMG to the markup, what's the point of doing h1img src=/img/helloworld.gif alt= /Hello World/h1 and applying lots of CSS to hide the text, if a simple h1img src=/img/helloworld.gif alt=Hello World //h1 will do? Another idea behind the IR techniques is the flexibility of defining your images in the CSS, so that you can change them easily later by simply editing your stylesheet. Your technique hardcodes the images in, offering no such benefit (if the image's filename changes, you'll have to go back to all your HTML pages, rather than just editing your CSS). To make it flexible, you could use a dummy placeholder image in the HTML img src=/img/trans.gif / and use CSS background image for the real image, but then you may as well use any other element (such as a SPAN in...whatever IR technique I'm thinking of). Nice writeup, but this seems like 2 steps back, rather than a step forward, unless I'm missing something fundamental here... Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
Well, I don't fancy it much, I don't like the idea of presentational image in HTML... I personally use own solution[1], based partly on Dynatext[2]. Now I'm playing with Anatoly's DIR[3] [1] Can be seen on http://www.janbrasna.com/ or http://www.bonsoir.cz/ [2] http://alistapart.com/articles/dynatext [3] http://fecklessmind.com/main/5/definitive-solution-to-image-replacement -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
Jan Brasna wrote: Well, I don't fancy it much, I don't like the idea of presentational image in HTML... I personally use own solution[1], based partly on Dynatext[2]. Now I'm playing with Anatoly's DIR[3] http://fecklessmind.com/main/5/definitive-solution-to-image-replacement If the user browses with images disabled and large text-size, the heading is cut-off because of the overflow declaration. Don't get me wrong, I'm not saying this method (that I mention at the bottom of the article as well as sIFR) is not one of the very best, I'm just saying that it has atleast this issue regarding accessibility. Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
Patrick Lauke wrote: Maybe I'm missing the point here, but...have we just come full circle? If you're already adding IMG to the markup, what's the point of doing h1img src=/img/helloworld.gif alt= /Hello World/h1 and applying lots of CSS to hide the text, if a simple h1img src=/img/helloworld.gif alt=Hello World //h1 will do? You mean even if images are disabled? That's true with some browsers, but not all. I believe FF and Safari do not show the alt attribute value at all when images are disabled. And in MSIE, this value is not displayed in relation to the user's settings regarding text-size. Another idea behind the IR techniques is the flexibility of defining your images in the CSS, so that you can change them easily later by simply editing your stylesheet. Your technique hardcodes the images in, offering no such benefit (if the image's filename changes, you'll have to go back to all your HTML pages, rather than just editing your CSS). To make it flexible, you could use a dummy placeholder image in the HTML img src=/img/trans.gif / and use CSS background image for the real image, but then you may as well use any other element (such as a SPAN in...whatever IR technique I'm thinking of). You're too quick to criticize the method ;-) Read the article and you'll see that's the way I do it already. The last example, the one I've posted, is only to show the scalable part (that would be rarely needed because of type face). BTW, what would be the advantage of using a span rather than an img element? And then using CSS declarations that may have SEO implications or, worst, create accessibility/usability issues? Nice writeup, but this seems like 2 steps back, rather than a step forward, unless I'm missing something fundamental here... I'm not saying it's fundamental, but I was after a fully accessible solution. ;-) Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
On 5/31/05, Thierry Koblentz [EMAIL PROTECTED] wrote: You mean even if images are disabled? That's true with some browsers, but not all. I believe FF and Safari do not show the alt attribute value at all when images are disabled. And in MSIE, this value is not displayed in relation to the user's settings regarding text-size. They do, they just don't show alt text pop up as a tooltip (because it was never meant to be implemented this way). pix http://www.pixeldiva.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
pixeldiva wrote:
You mean even if images are disabled?
That's true with some browsers, but not all. I believe FF and Safari
do not show the alt attribute value at all when images are disabled.
And in MSIE, this value is not displayed in relation to the user's
settings regarding text-size.
They do, they just don't show alt text pop up as a tooltip (because it
was never meant to be implemented this way).
Who's talking about tooltip? :-)
If I disable images in FF and Safari I do not get anything. Do you?
Regarding MSIE, what I meant is that the alt attribute value does not match
the text-size in relation to the heading.
And I'm not even talking about people using their own styles sheet, that
could include:
img {display:none}
What do you think these people would get?
Thierry | http://www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] An alternative to FIR (Fahrner Image replacement)?
Thierry Koblentz If I disable images in FF and Safari I do not get anything. Do you? If you disable images in FF through something like the WebDev extension, no. However, if you disable them the normal way (the way a user who doesn't want/need images would) via Tools Options Web Features Load Images, the ALT is displayed as intended. The same goes for broken images. And yes, in both cases the ALT is displayed in the correct text size. Unless I'm mistaken, the WebDev extension does a fairly brutal remove images from the DOM. A far more accurate test (if you don't want to change your global options) is to choose WebDev's Images Replace Images with Alt Attributes option. Can't vouch for Safari, but if it doesn't behave the way FF does, it's going against the spec and against User Agent Accessibility Guidelines. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
On 5/31/05, Thierry Koblentz [EMAIL PROTECTED] wrote:
Who's talking about tooltip? :-)
If I disable images in FF and Safari I do not get anything. Do you?
Yes. I do. I get the alt text where it's been applied.
Regarding MSIE, what I meant is that the alt attribute value does not match
the text-size in relation to the heading.
Agreed. I wasn't remarking on MSIE at all.
And I'm not even talking about people using their own styles sheet, that
could include:
img {display:none}
What do you think these people would get?
That would depend which technology they use to browse.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
Patrick Lauke wrote: Unless I'm mistaken, the WebDev extension does a fairly brutal remove images from the DOM. A far more accurate test (if you don't want to change your global options) is to choose WebDev's Images Replace Images with Alt Attributes option. Can't vouch for Safari, but if it doesn't behave the way FF does, it's going against the spec and against User Agent Accessibility Guidelines. You're right I was not using FF Web Features, but the WebDev toolbar. So it's true that people who would use the built-in feature would get the alt attribute value. But still! What about Safari and MSIE users? All UAs have flaws. IMO, our business is to deal with them rather than using the specs as an excuse for not implementing the most accessible solutions. Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
pixeldiva wrote:
Yes. I do. I get the alt text where it's been applied.
As Patrick pointed out, you must be using the built-in function of FF, but
it does not work that way in Safari (atleast in v.1.2.4).
Regarding MSIE, what I meant is that the alt attribute value does
not match the text-size in relation to the heading.
Agreed. I wasn't remarking on MSIE at all.
We're talking about accessibility (at least I am), so I'd say that leaving
some UAs out of the discussion is kind of a problem ;-)
And I'm not even talking about people using their own styles sheet,
that could include:
img {display:none}
What do you think these people would get?
That would depend which technology they use to browse.
I don't understand what you mean by technology.
I'm talking about using a simple style sheet to set one's own preferences to
take over the author's styles. Most of the time, I'd say it is to hide
images, enlarge text-size, add contrast to the documents, etc.
Thierry | http://www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
Thierry Koblentz wrote: Patrick Lauke wrote: img src=/img/trans.gif / and use CSS background image for the real image, but then you may as well use any other element (such as a SPAN in...whatever IR technique I'm thinking of). BTW, what would be the advantage of using a span rather than an img element? And then using CSS declarations that may have SEO implications or, worst, create accessibility/usability issues? Ok, the IR technique I was referring to (now that I've checked) was the Gilder/Levin method http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin which uses a span, and my point was: if you're using CSS to scale and apply background to what is essentially an empty/transparent image (a 1x1 transparent gif or whatever), then why use an image at all and not settle for a completely empty, neutral element like a SPAN (as happens in the Gilder/Levin technique)? Either way, you're adding extra markup to your HTML, so you may as well use something empty. -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
Patrick H. Lauke wrote: Ok, the IR technique I was referring to (now that I've checked) was the Gilder/Levin method http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin Believe it or not, but I didn't know about that one ;-) Identical approach in term of CSS, but - as you know - very different regarding markup. which uses a span, and my point was: if you're using CSS to scale and apply background to what is essentially an empty/transparent image (a 1x1 transparent gif or whatever), then why use an image at all and not How do you make the background image of this neutral element scale? settle for a completely empty, neutral element like a SPAN (as happens in the Gilder/Levin technique)? Either way, you're adding extra markup to your HTML, so you may as well use something empty. The Gilder/Levin method relies only on CSS to display the image, if there is a need to show both elements in the heading the solution fails if the document is unstyled. Also, an empty span is nothing more than an empty span. I believe an image with meaningful title and alt attributes may be of better use. Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
On 1 Jun 2005, at 12:32 am, Thierry Koblentz wrote: If I disable images in FF and Safari I do not get anything. Do you? The answer for Firefox was already given. For Safari (using 1.3), with images disabled, I get a grey outline where the image should be, and **sometimes** the alt text displayed. Like: if it fixes inside the bounding box for the image. If the text is too long, (ie a long long alt text) on a 20px by 20px image, the alt text is not displayed. Not Good. When the alt text is displayed, it takes size and font-style from the context. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] An alternative to FIR (Fahrner Image replacement)?
Philippe Wittenbergh wrote: For Safari (using 1.3), with images disabled, I get a grey outline where the image should be, and **sometimes** the alt text displayed. Like: if it fixes inside the bounding box for the image. If the text is too long, (ie a long long alt text) on a 20px by 20px image, the alt text is not displayed. Not Good. Thanks for the info Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
