Image replacement for a single letter?

[Alan Silver]

Hello,

I am trying to do a simple (ha ha) bit of image replacement, so that the
'v' in a string of text inside an <h3> is replaced with an image of a
tick that looks like a 'v' to fit with a company logo (imagine
"Ferretweave" with the 'v' replaced by a tick instead of the letter).

I have tried various things, but have not had any success yet, mainly
because all of the IR techniques I have seen seem to depend on the
element that contains the text being a block-level one, which isn't the
case here.

I have HTML like this...

<h3>Welcome to Ferretwea<span>v</span>e</h3>

where I put the 'v' in a <span> in an attempt to apply a background
image to it. I cna apply the image, but not hide the letter. Any ideas?

Haven't got an URL to show as I don't have anything more than this bit
of HTML to show so far ;-(

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

[Jim Moe]

Alan Silver wrote:

I have HTML like this...
<h3>Welcome to Ferretwea<span>v</span>e</h3>

where I put the 'v' in a <span> in an attempt to apply a background
image to it. I cna apply the image, but not hide the letter. Any ideas?

In the span ruleset make the foreground color the same as the
background. Or change the foreground color to transparent. Or set the
font-size to 0.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan Silver]

In article <G_******************************@giganews.com>, Jim Moe
<jm***************@sohnen-moe.com> writes

Alan Silver wrote:

I have HTML like this...
<h3>Welcome to Ferretwea<span>v</span>e</h3>

where I put the 'v' in a <span> in an attempt to apply a background
image to it. I cna apply the image, but not hide the letter. Any ideas?
In the span ruleset make the foreground color the same as the
background.

Then you end up with background-coloured text over the background image.
Or change the foreground color to transparent.
The text was displayed in black (not sure why black) in at least one of
the browsers
Or set the
font-size to 0.

Trouble is that this shrinks the width of the <span> down to zero, and
as it's an inline element, I can't set a width on it, so the image
doesn't appear.

Thanks anyway. Any other ideas?

--
Alan Silver
(anything added below this line is nothing to do with me)

[Neredbojias]

To further the education of mankind, Alan Silver <alan-
si****@nospam.thanx.invalid> vouchsafed:

Hello,

I am trying to do a simple (ha ha) bit of image replacement, so that the
'v' in a string of text inside an <h3> is replaced with an image of a
tick that looks like a 'v' to fit with a company logo (imagine
"Ferretweave" with the 'v' replaced by a tick instead of the letter).

I have tried various things, but have not had any success yet, mainly
because all of the IR techniques I have seen seem to depend on the
element that contains the text being a block-level one, which isn't the
case here.

I have HTML like this...

<h3>Welcome to Ferretwea<span>v</span>e</h3>

where I put the 'v' in a <span> in an attempt to apply a background
image to it. I cna apply the image, but not hide the letter. Any ideas?

Haven't got an URL to show as I don't have anything more than this bit
of HTML to show so far ;-(

I ain't tried this but maybe insert another span inside the original span
and style the new span transparent.

--
Neredbojias
Infinity has its limits.

[Mark Parnell]

Deciding to do something for the good of humanity, Alan Silver
<al*********@nospam.thanx.invalid> declared in
comp.infosystems.www.authoring.stylesheets:

where I put the 'v' in a <span> in an attempt to apply a background
image to it. I cna apply the image, but not hide the letter. Any ideas?

Interesting question. Neredbojias' suggestion of nested spans seems to
work here - set visibility: hidden; on the inner span, and the
background image on the outer span. Tested in FF1.5, Opera8.5 and IE6.

I can't help thinking you'd be better off using an image for the whole
header though, as the image won't scale with font size so your tick
could look really small (or big) depending on your visitor's preferred
font size.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

[Alan Silver]

In article <1e****************@markparnell.com.au>, Mark Parnell
<we*******@clarkecomputers.com.au> writes

Deciding to do something for the good of humanity, Alan Silver
<al*********@nospam.thanx.invalid> declared in
comp.infosystems.www.authoring.stylesheets:

where I put the 'v' in a <span> in an attempt to apply a background
image to it. I cna apply the image, but not hide the letter. Any ideas?
Interesting question. Neredbojias' suggestion of nested spans seems to
work here - set visibility: hidden; on the inner span, and the
background image on the outer span. Tested in FF1.5, Opera8.5 and IE6.

OK, it's an idea. I'll see how it works.
I can't help thinking you'd be better off using an image for the whole
header though, as the image won't scale with font size so your tick
could look really small (or big) depending on your visitor's preferred
font size.

That's not such a problem as the tick looks OK at a reasonably wide
range of font sizes. I kind of assume that anyone using extreme font
sizes is going to see so many pages that are painfully distorted, that a
small issue like the tick being the wrong size is hardly going to be a
problem!!

Having said that, I was coming to the conclusion that replacing the
whole word is probably going to be the safest way to go. Shame, I was
trying to replace as little as possible.

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan J. Flavell]

On Wed, 14 Jun 2006, Alan Silver wrote:

That's not such a problem as the tick looks OK at a reasonably wide
range of font sizes.
If you make your image with smooth edges (typically in jpeg format)
you can size it in em units so that it scales with the text.

In practice, if you try this, you probably want to make the image
rather larger than "natural size"[1], and scale it down to fit. That
way, the defects of scaling are less evident, over a fair range of
sizes.

Don't try this with hard edges and gifs (or indexed PNG), as the
rescaling will produce horrible "jaggies" in many cases.

None of U+2611, U+2713 or U+2714 are in MS WGL4, so the prospects for
getting them displayed even on properly set-up MesSIEs is not good.

But you could write alt="✓" on your image, for the benefit of
more advanced browsers like Lynx (SCNR).

[1] It's got to be your judgment as to what px size is "natural", I'm
afraid ;-)
I kind of assume that anyone using extreme font sizes is going to
see so many pages that are painfully distorted, that a small issue
like the tick being the wrong size is hardly going to be a problem!!

I wouldn't be quite so pessimistic.

Here's a rough and ready example: I'm sure it could be improved
http://ppewww.ph.gla.ac.uk/~flavell/tests/ferret.html

Try text zoom to see it in action.

cheers

[Alan Silver]

In article <Pi*******************************@ppepc20.ph.gla. ac.uk>,
Alan J. Flavell <fl*****@physics.gla.ac.uk> writes

On Wed, 14 Jun 2006, Alan Silver wrote:

That's not such a problem as the tick looks OK at a reasonably wide
range of font sizes.

If you make your image with smooth edges (typically in jpeg format)
you can size it in em units so that it scales with the text.

<snip>

That's a good idea, thanks.

I kind of assume that anyone using extreme font sizes is going to
see so many pages that are painfully distorted, that a small issue
like the tick being the wrong size is hardly going to be a problem!!

I wouldn't be quite so pessimistic.

Here's a rough and ready example: I'm sure it could be improved
http://ppewww.ph.gla.ac.uk/~flavell/tests/ferret.html

Try text zoom to see it in action.

Looks very good, certainly good enough for my needs.

Now, if you only had a way of doing this in CSS rather than using an
<img> tag I would be even happier ;-)

Thanks for the reply

--
Alan Silver
(anything added below this line is nothing to do with me)

[Andy Mabbett]

In message <Pi*******************************@ppepc20.ph.gla. ac.uk>,
Alan J. Flavell <fl*****@physics.gla.ac.ukwrites

>Here's a rough and ready example: I'm sure it could be improved
http://ppewww.ph.gla.ac.uk/~flavell/tests/ferret.html

[belated response]

Alan, I'm surprised at you!

How will that read in an aural browser? Or be indexed by a search
engine, or found by a page search? Or cut & paste into someone's text
programme? Or look when enlarged greatly?

There are so many reasons why it's not a good idea.
--
Andy Mabbett
Say "NO!" to compulsory ID Cards: <http://www.no2id.net/>

Free Our Data: <http://www.freeourdata.org.uk>

[Chris F.A. Johnson]

On 2006-07-11, Andy Mabbett wrote:

In message <Pi*******************************@ppepc20.ph.gla. ac.uk>,
Alan J. Flavell <fl*****@physics.gla.ac.ukwrites

>>Here's a rough and ready example: I'm sure it could be improved
http://ppewww.ph.gla.ac.uk/~flavell/tests/ferret.html

[belated response]

Alan, I'm surprised at you!

How will that read in an aural browser?

It sounds all right, but could be improved with a different alt
attribute.

Or be indexed by a search engine, or found by a page search?

Heaven forbid! ;)

Or cut & paste into someone's text programme?

No problem.

Or look when enlarged greatly?

It scales as it should (<img ... height: 1em;).

There are so many reasons why it's not a good idea.

Name one.

--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

[Alan J. Flavell]

On Tue, 11 Jul 2006, Andy Mabbett wrote belatedly:

Alan J. Flavell <fl*****@physics.gla.ac.ukwrites

Here's a rough and ready example: I'm sure it could be improved
http://ppewww.ph.gla.ac.uk/~flavell/tests/ferret.html

Alan, I'm surprised at you!

To the best of my recollection, the thread had already discussed
some of the negative implications of this approach...

It's in my /tests/ directory, for the purpose of discussion and
criticism. So go right ahead, feel free.

How will that read in an aural browser?

Badly. It depends what you want to achieve, I guess. I was
illustrating how the visual gag could be made to work in a text
browser.

But I've now added a mark 2 heading with the alt text set to "v".

Either of them, though, will upset speaking browsers - which could, in
theory, be dealt with by aural CSS. In fact, I now know how to do
that for Opera - since the simple way shown in the spec seems to be
failing, I'm using a technique that isn't the simplest, but does seem
to be specification-conforming as well as getting Opera into gear.
I've just modified the test file accordingly, if you want to try it
with Opera voice. WFM, anyway.

Or be indexed by a search engine, or found by a page search?

Indeed; you'd have to sneak a copy of the actual word, without the
graffito, into the page somewhere to get it indexed. Supplying it as
a title attribute is probably not enough to get it into search
engines in general.

Or cut & paste into someone's text programme?

Interesting question. If I try the version where the alt text is "v",
I get:

Opera - Ferretweae
Mozilla - Ferretweave
MesSIE - Ferretweae

So, it seems Mozilla copies the alt text, but the others don't.

Or look when enlarged greatly?

I'm sorry - I was careless with the image, and it shows an unwanted
thin line at the bottom, which gets quite annoying at large sizes.
I think jpegs need to be made at a size which is some multiple of
(is it 8? or 16? px) to avoid this happening.

But, other than that, I viewed the thing at e.g 500% , which is a
massive magnification for text, and it worked fine for me. CSS
support is of course necessary for this to work.

There are so many reasons why it's not a good idea.

Oh, as a casual decoration for a page, provided the various issues
are addressed in their different ways, I think it would be excusable.

In my defence, there are millions of web pages out there which are
*far, far* worse than this little bit of fun, yet their authors are
blissfully unaware of just how bad they are.

But no-one should copy such an example without being aware of the
implications! Does that pacify you a little bit?

[Andy Mabbett]

In message <Pi*******************************@ppepc87.ph.gla. ac.uk>,
Alan J. Flavell <fl*****@physics.gla.ac.ukwrites

>On Tue, 11 Jul 2006, Andy Mabbett wrote belatedly:

>http://ppewww.ph.gla.ac.uk/~flavell/tests/ferret.html

Alan, I'm surprised at you!

To the best of my recollection, the thread had already discussed
some of the negative implications of this approach...

Not those I mention; or at least not most of them.

>It's in my /tests/ directory, for the purpose of discussion and
criticism. So go right ahead, feel free.

>How will that read in an aural browser?

Badly. It depends what you want to achieve, I guess.

Accessibility.

I was
illustrating how the visual gag could be made to work in a text
browser.

But I've now added a mark 2 heading with the alt text set to "v".

<h1and <h3>, but no <h2!

Still, at least you now have a DOCTYPE declaration...

>Either of them, though, will upset speaking browsers - which could, in
theory, be dealt with by aural CSS. In fact, I now know how to do
that for Opera - since the simple way shown in the spec seems to be
failing, I'm using a technique that isn't the simplest, but does seem
to be specification-conforming as well as getting Opera into gear.
I've just modified the test file accordingly, if you want to try it
with Opera voice. WFM, anyway.

Very clever, but, oddly, it doesn't seem to work if I only select
(sweeping the mouse from right to left) up to the letter "f", or if I
double-click on the word.

>Or be indexed by a search engine, or found by a page search?

Indeed; you'd have to sneak a copy of the actual word, without the
graffito, into the page somewhere to get it indexed. Supplying it as
a title attribute is probably not enough to get it into search
engines in general.

Indeed - and doing so elsewhere on the page may surely result in a lower
ranking than having it in the H1?

>Or cut & paste into someone's text programme?

Interesting question. If I try the version where the alt text is "v",
I get:

Opera - Ferretweae
Mozilla - Ferretweave
MesSIE - Ferretweae

So, it seems Mozilla copies the alt text, but the others don't.

That is interesting.

>There are so many reasons why it's not a good idea.

Oh, as a casual decoration for a page, provided the various issues
are addressed in their different ways, I think it would be excusable.

Perhaps: but an <H3tag (per the OP) is hardly a casual decoration, is
it?

>In my defence, there are millions of web pages out there which are
*far, far* worse than this little bit of fun, yet their authors are
blissfully unaware of just how bad they are.

Which might also be said in justification for not having valid markup,
or good alt attributes, or relying on CSS, or...

>But no-one should copy such an example without being aware of the
implications! Does that pacify you a little bit?

I'm perfectly, er, pacific, just surprised at your apparent abandonment
of your usual purism. You are Alan J. Flavell, and not an impostor,
aren't you? ;-)
--
Andy Mabbett
Say "NO!" to compulsory ID Cards: <http://www.no2id.net/>

Free Our Data: <http://www.freeourdata.org.uk>

[Alan J. Flavell]

On Wed, 12 Jul 2006, Andy Mabbett wrote:

<h1and <h3>, but no <h2!

Would Sir like that with caviar on a gold plate?

It was (originally) only a quick test, thrown together merely to show
what I meant. I left out all the usual furniture.

Still, at least you now have a DOCTYPE declaration...

Only because I decided it was growing out of proportion to its
original aim, and I wanted to be able to validate it.

(I'll give you an <h2up the bracket if you like...)

cheers

[Wes Groleau]

Alan J. Flavell wrote:

But no-one should copy such an example without being aware of the
implications! Does that pacify you a little bit?

One of the principles of technical writing:

Given a clear, simple, concise, accurate, unambiguous,
and correct exposition of the correct form or procedure,
accompanied by a sloppy or incorrect example, the majority
will follow the example.

--
Wes Groleau

Truth often suffers more from the heat of its defenders
than from the arguments of its opposers.
-- William Penn

[Alan J. Flavell]

On Thu, 13 Jul 2006, Wes Groleau wrote:

Alan J. Flavell wrote:

But no-one should copy such an example without being aware of the
implications! Does that pacify you a little bit?

One of the principles of technical writing:

Welcome to Usenet!

Given a clear, simple, concise, accurate, unambiguous,
and correct exposition of the correct form or procedure,

And you're sure that all of your own usenet postings are in full
conformance with that principle?

accompanied by a sloppy or incorrect example, the majority
will follow the example.

Usenet was ever a source of potentially misleading clues. Follow the
resulting discussion and peer-review, and you may learn something.
Take a single specimen out of context, and you may ultimately regret
it. I think that's a fair assessment.

Mind you, considering the average quality of usenet postings, I guess
I should take it as a compliment that you were prepared to take mine
seriously :-}

a.t.b

[Wes Groleau]

Alan J. Flavell wrote:

And you're sure that all of your own usenet postings are in full
conformance with that principle?

Of course not! When in Rome ....

:-)

--
Wes Groleau
-----------
Curmudgeon's Complaints on Courtesy:
http://www.onlinenetiquette.com/courtesy1.html
(Not necessarily my opinion, but worth reading)