CSS property for printing alternative text?

[Markus Ernst]

Hi

I have a title with a title gif:

<h1><img src="mytitle.gif" alt="This is my title"></h1>

So this is text-based browser and search-engine friendly and can be easily
formatted with a style sheet.

Now I have a separate stylesheet for media="print". As the title gif does
not look very good when printed it would be very nice to have a CSS property
that outputs the text in the alt attribute.

display:none makes the image disappear without a replacement. I could
duplicate the h1 tag and give both instances class names that can be defined
as display:none in the appropriate style sheet, but that would confuse
non-CSS browsers of all kinds. I would love something like display:alttext.

Is there a way to do that?

Thanks for every hint.

Markus

[Spartanicus]

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:

Now I have a separate stylesheet for media="print". As the title gif does
not look very good when printed it would be very nice to have a CSS property
that outputs the text in the alt attribute.

img:after{display:block;content:attr(alt)}

Won't work in IE.

--
Spartanicus

[Andreas Prilop]

On Thu, 26 Feb 2004, Markus Ernst wrote:

I have a title with a title gif:

<h1><img src="mytitle.gif" alt="This is my title"></h1>

So this is text-based browser and search-engine friendly

No, it isn't. <h1> is empty for search engines.

[Neal]

On Thu, 26 Feb 2004 18:21:09 +0100, Markus Ernst <derernst@NO#SP#AMgmx.ch>
wrote:

Hi

I have a title with a title gif:

<h1><img src="mytitle.gif" alt="This is my title"></h1>

So this is text-based browser and search-engine friendly and can be
easily
formatted with a style sheet.

Now I have a separate stylesheet for media="print". As the title gif does
not look very good when printed it would be very nice to have a CSS
property
that outputs the text in the alt attribute.

Messy, but it works.

<h1 class="noscreen">This is my title</h1>
<h1 class="noprint"><img src="mytitle.gif" alt="This is my title"></h1>

And the style is obviously noscreen {display:none;} in the screen css and
noprint {display:none;} in the print css.

[David Dorward]

Andreas Prilop wrote:

<h1><img src="mytitle.gif" alt="This is my title"></h1>

<h1> is empty for search engines.

Only very badly written search engines which ignore alt text. Google
certainly supports this.

--
David Dorward <http://dorward.me.uk/>

[Andreas Prilop]

David Dorward <do*****@yahoo.com> wrote:

Only very badly written search engines which ignore alt text.
Then all search engines are very badly written. But I don't agree.
ALT texts would then be misused for search engine spamming.
Google certainly supports this.

No. More exactly:
www.google.com indexes ALT text only inside <A HREF>.
images.google.com indexes ALT text always.

--
Top-posting.
What's the most irritating thing on Usenet?

[David Dorward]

Andreas Prilop wrote:

David Dorward <do*****@yahoo.com> wrote:

Only very badly written search engines which ignore alt text. Then all search engines are very badly written. But I don't agree.
ALT texts would then be misused for search engine spamming.

Just becuase a feature can be abused, doesn't mean that it always is, and I
imagine search engines have routines that attempt to deal with it.
Google certainly supports this.

No. More exactly:
www.google.com indexes ALT text only inside <A HREF>.
images.google.com indexes ALT text always.

OK... the google routine to do this sucks. (My previous test to see this
only considered an image which was also a link, there are very few images
on my site which are not links)

--
David Dorward <http://dorward.me.uk/>

[Michael Wilcox]

Markus Ernst <derernst@NO#SP#AMgmx.ch> wrote:

<h1><img src="mytitle.gif" alt="This is my title"></h1>

So this is text-based browser and search-engine friendly and can be
easily formatted with a style sheet.
Not entirely, but for the most part the point will get across.
Is there a way to do that?

http://www.stopdesign.com/also/articles/replace_text/ provides a more
structurally correct method.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com

[Karl Smith]

Spartanicus <[e-mail]> wrote:

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:

Now I have a separate stylesheet for media="print". As the title gif does
not look very good when printed it would be very nice to have a CSS property
that outputs the text in the alt attribute.

img:after{display:block;content:attr(alt)}

Won't work in IE.

Should not work in any browser. A Mozilla bug that has been warmly
greeted as an "advanced CSS feature".

Is of no use to the OP as it won't hide the image. Adding:

img {dislay: none}

- also removes the img:after, of course.

[Karl Smith]

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:

<h1><img src="mytitle.gif" alt="This is my title"></h1> .... Now I have a separate stylesheet for media="print". As the title gif does
not look very good when printed it would be very nice to have a CSS property
that outputs the text in the alt attribute.

display:none makes the image disappear without a replacement. I could
duplicate the h1 tag and give both instances class names that can be defined
as display:none in the appropriate style sheet, but that would confuse
non-CSS browsers of all kinds. I would love something like display:alttext.

Is there a way to do that?

h1 img {
content: attr(alt); /* Only works in Opera 7 */
}

Unlike the Mozilla img:after bug, this really is an advanced (CSS3
proposal) feature.

--
Karl Smith.

[Michael Wilcox]

Karl Smith <go************@kjsmith.com> wrote:

Should not work in any browser. A Mozilla bug that has been warmly
greeted as an "advanced CSS feature".

This is a valid CSS3 construct. Mozilla correctly interprets it.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com

[Steve Pugh]

go************@kjsmith.com (Karl Smith) wrote:

img {dislay: none}

- also removes the img:after, of course.

I can't find the dislay property in the CSS spec. Is it new?

;-)

Just getting you back for "publically published", though I'm still not
sure if it's the erroneous/variant (according to m-w.com, my OED
doesn't list it) spelling or the tautology that you were pointing out,
or both.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Nick Theodorakis]

On Thu, 26 Feb 2004 18:21:09 +0100, "Markus Ernst"
<derernst@NO#SP#AMgmx.ch> wrote:

Hi

I have a title with a title gif:

<h1><img src="mytitle.gif" alt="This is my title"></h1>

So this is text-based browser and search-engine friendly and can be easily
formatted with a style sheet.

Now I have a separate stylesheet for media="print". As the title gif does
not look very good when printed it would be very nice to have a CSS property
that outputs the text in the alt attribute.

display:none makes the image disappear without a replacement. I could
duplicate the h1 tag and give both instances class names that can be defined
as display:none in the appropriate style sheet, but that would confuse
non-CSS browsers of all kinds. I would love something like display:alttext.

Is there a way to do that?

I guess you could use the Fahrner image replacement technique:

<h1><span>This is my title</span></h1>

then in your screen stylesheet:

h1
{
background: #ffffff url(mytitle.gif) no-repeat;
height: 100px;
/*or whatever dimension you need*/
}
h1 span
{
display: none;
}

That part seems to work in IE5.5, Mozilla 1.4, and Opera 7.1 when I
made an example page.

Then you could use a print stylesheet to suggest the appropriate
rendering for printing.

BTW, the scuttlebut is that some screen readers won't read your <h1>
styled this way, though.

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Karl Smith]

Steve Pugh <st***@pugh.net> wrote:

go************@kjsmith.com (Karl Smith) wrote:

img {dislay: none}

- also removes the img:after, of course.
I can't find the dislay property in the CSS spec. Is it new?

No, but my keyboard is. It's not nearly as good as the one I attempted
to wash. :-(

Just getting you back for "publically published", though I'm still not
sure if it's the erroneous/variant (according to m-w.com, my OED
doesn't list it) spelling or the tautology that you were pointing out,
or both.

Both. I first wrote, "Never mind that it's repetatively tautologous, I
fear it's also misspelled." Then I got nervous about
missplet/misspelled. Then I wondered about "repetatively" (still am).
So I thought being vague was the best way to hide my ignorance.

--
Karl Smith.

[Karl Smith]

"Michael Wilcox" wrote:

This is a valid CSS3 construct.
It's a valid CSS2 construct, it does not follow that:
Mozilla correctly interprets it.

Correct by what definition? CSS2, CSS2.1, or a CSS3 proposal.

[jake]

In message <40***************@netnews.worldnet.att.net>, Nick
Theodorakis <ni**************@hotmail.com> writes

On Thu, 26 Feb 2004 18:21:09 +0100, "Markus Ernst"
<derernst@NO#SP#AMgmx.ch> wrote:

Hi

I have a title with a title gif:

<h1><img src="mytitle.gif" alt="This is my title"></h1>

So this is text-based browser and search-engine friendly and can be easily
formatted with a style sheet.

Now I have a separate stylesheet for media="print". As the title gif does
not look very good when printed it would be very nice to have a CSS property
that outputs the text in the alt attribute.

display:none makes the image disappear without a replacement. I could
duplicate the h1 tag and give both instances class names that can be defined
as display:none in the appropriate style sheet, but that would confuse
non-CSS browsers of all kinds. I would love something like display:alttext.

Is there a way to do that?

I guess you could use the Fahrner image replacement technique:

<h1><span>This is my title</span></h1>

then in your screen stylesheet:

h1
{
background: #ffffff url(mytitle.gif) no-repeat;
height: 100px;
/*or whatever dimension you need*/
}
h1 span
{
display: none;
}

That part seems to work in IE5.5, Mozilla 1.4, and Opera 7.1 when I
made an example page.

Then you could use a print stylesheet to suggest the appropriate
rendering for printing.

BTW, the scuttlebut is that some screen readers won't read your <h1>
styled this way, though.

Fahrner image replacement technique:
Every one -- except for the very latest update to JAWS, so far as I
understand it.
Nick

--
Jake

[Markus Ernst]

Thank you all for the interesting discussion, specially those who pointed me
to the Fahrner replacement method and the article on stopdesign which I like
very much.

The screen reader downside will hopefully disappear as screen readers could
check if a website or other document is coded accessibly and then prefer the
original code to the screen version. Actually I did not know about screen
readers before; it is interesting that an accessibility improvement on one
side can worsen accessibility on an other side.

BTW does somebody know how search engines handle text in elements with a
display:none or visibility:hidden property? As they started to ignore
"invisible text" already years ago they might have extended this to CSS
hiding techniques.

--
Markus

[Ben Shimmin]

Karl Smith <go************@kjsmith.com>:

[...]

Both. I first wrote, "Never mind that it's repetatively tautologous, I
fear it's also misspelled." Then I got nervous about
missplet/misspelled. Then I wondered about "repetatively" (still am).

`repet*i*tively tautologous' is, in itself, tautologous!

b.

[Karl Smith]

Ben Shimmin <ba*@monster.buffster.org.uk> wrote:

`repet*i*tively tautologous' is, in itself, tautologous!

"...is, in itself," is, in itself, inherently tautologously
repetitive. And I meant "tautologously repetitive," of course -
"repetitively tautologous," would require two tautologies.

(Unnecessary repetition was, of course, the problem the OP was trying
to avoid. Should anyone accuse me of being off-topic.)

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society

[Nick Theodorakis]

On Fri, 27 Feb 2004 14:53:22 +0100, "Markus Ernst"
<derernst@NO#SP#AMgmx.ch> wrote:

[...]

BTW does somebody know how search engines handle text in elements with a
display:none or visibility:hidden property? As they started to ignore
"invisible text" already years ago they might have extended this to CSS
hiding techniques.

The last time I scanned my raw logs after a googlebot crawl, ISTR that
it did not request the style sheet, so that technique should be safe
for now. But if you do hide text by style sheets, perhaps you should
keep an eye on your logs to see if googlebot starts requesting style
sheets. Or maybe disallow those files in your robots.txt document.

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Jukka K. Korpela]

Under Subject: Re: CSS property for printing alternative text?
Andreas Prilop <nh******@rrzn-user.uni-hannover.de> wrote:

David Dorward <do*****@yahoo.com> wrote:

Only very badly written search engines which ignore alt text.

Then all search engines are very badly written. But I don't agree.
ALT texts would then be misused for search engine spamming.

They could be misused, but I don't think it would be wrong to treat
<h1><img ... alt="foo"></h1> as equivalent to <h1>foo</h1> for the
purposes of indexing. That would very much correspond to the defined
meaning of the alt attribute. Abuse should be treated at a different
level.

Google certainly supports this.

No. More exactly:
www.google.com indexes ALT text only inside <A HREF>.
images.google.com indexes ALT text always.

Sounds interesting - and relatively natural. Is there any statement
from Google itself, or a report of an experimental study, that would
confirm this?

(Moving to c.i.w.a.misc suggested in message headers.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

go************@kjsmith.com (Karl Smith) wrote:

img:after{display:block;content:attr(alt)}

Won't work in IE.
Should not work in any browser. A Mozilla bug that has been warmly
greeted as an "advanced CSS feature".

Please explain.
Is of no use to the OP as it won't hide the image.

Are you referring to this, or do you mean that the rule proposed should
not work in the sense of producing the presentation of the img
element's alt attribute value as a text block after the image (or its
alternate presentation, the alt text!)? Why?

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Spartanicus]

go************@kjsmith.com (Karl Smith) wrote:

>Now I have a separate stylesheet for media="print". As the title gif does
>not look very good when printed it would be very nice to have a CSS property
>that outputs the text in the alt attribute.

img:after{display:block;content:attr(alt)}

Won't work in IE.

Is of no use to the OP as it won't hide the image. Adding:

img {dislay: none}

- also removes the img:after, of course.

I opened an old stylesheet and copied the code from there, it contained
further code, unfortunately I had forgotten what it was for so I deleted
part of it before posting, this is the full code:

body>h1.title img{visibility:hidden;width:0;height:0}
body>h1.title
img:after{display:block;visibility:visible;content :attr(alt)}

Watch the wrap.

--
Spartanicus

[Spartanicus]

Spartanicus <[e-mail]> wrote:

body>h1.title img{visibility:hidden;width:0;height:0}
body>h1.title
img:after{display:block;visibility:visible;conten t:attr(alt)}

I need to inspect code before posting it (the above contains code
specific to my site.

This may work:

body>img{visibility:hidden;width:0;height:0}
body>img:after{display:block;visibility:visible;co ntent:attr(alt)}

But as I can't remember for sure what it was for, it may also not work
:)

I presume that I added the "body>" to hide it from IE, no idea why I
needed it though :)

Looking at the code it could trip up in Opera <7.5 as it contains a
nested visibility bug (fixed in 7.5).

--
Spartanicus

[Markus Ernst]

"Nick Theodorakis" <ni**************@hotmail.com> schrieb im Newsbeitrag
news:40***************@netnews.worldnet.att.net...

On Fri, 27 Feb 2004 14:53:22 +0100, "Markus Ernst"
<derernst@NO#SP#AMgmx.ch> wrote:

[...]

BTW does somebody know how search engines handle text in elements with a
display:none or visibility:hidden property? As they started to ignore
"invisible text" already years ago they might have extended this to CSS
hiding techniques.

The last time I scanned my raw logs after a googlebot crawl, ISTR that
it did not request the style sheet, so that technique should be safe
for now. But if you do hide text by style sheets, perhaps you should
keep an eye on your logs to see if googlebot starts requesting style
sheets. Or maybe disallow those files in your robots.txt document.

Good idea. Anyway I try to avoid anything that spiders _could_ interpret as
an attempt to spam them, as I would not like to change all my clients'
websites everytime Google changes it's criteria. Imagine techniques like
that would be used widely to cheat spiders, then the reaction of search
engines would be for sure to stop respecting robots.txt files or at least
the lines regarding style sheets.

But OTOH - if spiders get clever enough to detect all css related cheating
techniques, they could also be clever enough to distinguish wether a hidden
element is in a relation with the visible content or not, so we are on the
safe side again.

--
Markus