Search Engine Optimization > Webmaster World > Resizable images? It appears possible.
Resizable images? It appears possible.
Posted by Norman L. DeForest on October 7th, 2005


Several times I have seen people in this newsgroup and a couple of
comp.infosystems.www.authoring.* newsgroups write words to the effect:
"Don't use images for text because I can resize text to make it larger if
I have poor vision but I can't resize the images."

It almost became a cliché.

I got to wondering about that (I don't always believe clichés) so I did
some experimenting.

It appears that both Firefox and Opera *can* resize images if you specify
the image size using em instead of px. That may mean that using images
for text to get an exact font or shape you want can still allow the text
to be magnified if necessary (although still not read by a screen-reader
-- but that's what alt text is for, isn't it?).

Here's a really horrible joke (but based on a real T-shirt I recently saw
a Newfoundlander wearing) with the answer to the riddle in two formats,
one using Unicode character entities for the playing card suit symbols and
one using images for the playing card suit symbols (with the entities as
alt text). Both the Unicode entities and the images are resizable along
with the other text in both Firefox and Opera.

http://www.chebucto.ns.ca/~af380/ts1.htm

The secret was to specify the image size in em as in:

.shirtsymbol { height: .8em;
width: 1em;
color: red}

and the image as in:

<img src="heart.gif" alt="♥" title="Heart" class="shirtsymbol">

The image version has the slight advantage that a title attribute can be
used to describe the image for those whose systems can't display (or
speak) the character entities.

Comments?

(Reminder to self: Experiment to find out for sure whether the "color"
attribute in the style will be used for the alt text or whether I will
have to wrap the image in <span...> </span> tags to specify a colour for
the alt text if image-loading is off?)

--
``Why don't you find a more appropiate newsgroup to post this tripe into?
This is a meeting place for a totally differnt kind of "vision impairment".
Catch my drift?'' -- "jim" in alt.disability.blind.social regarding an
off-topic religious/political post, March 28, 2005

Posted by mbstevens on October 7th, 2005

Norman L. DeForest wrote:

You still have one or two orders of magnitude greater download
size. If you give it hover properties with a swapped image you
can multiply that by two.

Anchors, spans, captions, paragraphs, headers, pre, etc. can
have title attributes. Lynx doesn't display the title
attribute, IIRC.





Posted by Norman L. DeForest on October 7th, 2005


On Fri, 7 Oct 2005, mbstevens wrote:

Agreed. However, for special effects such as simulating illuminated text
with paragraph capital letters such as this 'A':
http://www.chebucto.ns.ca/~af380/temp/a_florentine.gif
there is no way to do that with plain CSS. There may be other reasons for
avoiding images with text in most situations. I was just pointing out
that an alleged inability to re-size (especially enlarge for those with
poor vision) the images is *not* one of those reasons. (I just checked
with IE. It can resize the images along with the text in the example
files too.)

Lynx does display only the alt text (if present). It can use the title
attribute for client-side imagemap labels when you follow the [USEMAP]
link if a title but no alt text is specified for each link. On the other
hand, a graphical browser *can* display the title when the mouse hovers
over it and still display the alt text if image-loading is off. (A
screen-reader may not be able to speak a Unicode character but may still
be able to speak the title attribute when the mouse hovers over an image.
That may *increase* accessibility.

Which is preferable?

This?

<img src="heart.gif" alt="♥" title="Heart" class="shirtsymbol">

or this?



What about a situation where you know that a Unicode character is not
supported by all browsers? If I want to use the XOR symbol[1], which is
better, this:

<img src="xor.gif" alt="⊕" title="XOR" class="logicsymbol">

which can display in IE, Firefox, or Opera *and* can be made resizable
by specifying the image's size in 'em's or this:



which displays correctly with Firefox and Opera on my machine but is
still displayed as a little box (indicating an unknown character) with
Internet Explorer?

[1] To be uploaded as soon as I finish making this post:
http://www.chebucto.ns.ca/~af380/temp/xor.gif
--
``Why don't you find a more appropiate newsgroup to post this tripe into?
This is a meeting place for a totally differnt kind of "vision impairment".
Catch my drift?'' -- "jim" in alt.disability.blind.social regarding an
off-topic religious/political post, March 28, 2005


Posted by Charles Sweeney on October 7th, 2005

Norman L. DeForest wrote

I don't always believe cliches either!

In Opera you can simply zoom the image.

Generally, I think using images for text is a very bad idea. All the
usual reasons apply, but my biggest concerns are the size of the image
compared to text, and the lack of text if viewing with images turned
off.

--
Charles Sweeney
http://CharlesSweeney.com

Posted by Matt Probert on October 7th, 2005

On 7 Oct 2005 09:14:52 GMT, Charles Sweeney <me@charlessweeney.com>
wrote:

The term 'dominant ideology' may be more accurate. When a notion is
popularly spread, so that eventually most people believe it (eg:
formerly, 'that the world is flat') that notion becomes known as a
'dominant ideology'. It's not the same as an axiom - though the
existence of any axioms may be a topic for philosphical debate among
physicists, do infinite parallel lines indeed never converge, ever?

Matt


--
Over 16,000 searchable slang definitions from around
the 'English' speaking world.

http://www.probertencyclopaedia.com/slang.htm

Posted by mbstevens on October 7th, 2005

Norman L. DeForest wrote:

If this were displayed as, for instance, a large leading letter
in a paragraph, I doubt if anyone except those pesky straw
people would object. But then you would not need to be worried
about being able to resize to a larger image anyway.

If you were suggesting, instead, using this kind of type for
writing whole words in small type in the middle of a paragraph,
you would need a really good reason to do it.

But again, here you're displaying a single character for a
specific purpose. This is different from the usual objection to
image as text that you see in the group. In the usual case,
an image is used to replace normal anchor text. Again, I think
you're jousting at straw men.

Posted by Blinky the Shark on October 8th, 2005

Norman L. DeForest wrote:
Opera already zooms images with pixel sizes as text is zoomed.[1]
Ctl-wheel. It's a true zoom -- whole page, not just text.

[1]Not new feature; been doing that for years.


--
Blinky Linux Registered User 297263
Killing All Posts from GG: http://blinkynet.net/comp/uip5.html

Posted by Norman L. DeForest on October 8th, 2005


On 8 Oct 2005, Blinky the Shark wrote:

Yes, and that is a nice feature. However, using 'em's for specifying
image size apparently also allows Firefox and IE to resize images along
with the text. While there may be other valid objections to using images
for text, the inability to resize them for limited-vision users is
apparently not one of the valid objections if 'em's are used.

Here and elsewhere (c.i.w.a.*) I have seen lots of answers that
effectively inaccurately say something like:
"Don't use images with text in them as users with poor vision can't
resize them to make them more readable as you can with plain text."
and never seen the more accurate answer:
"Don't specify the size of images with text in them in
pixels as you can't resize them as you can with plain text.
Specify the size in 'em's instead if you *must* use such
images and that way they can be resized. Oh, and here are
some other reasons why using plain text is usually better
than using images...."

One example that came to me last night where it may be appropriate
to use images for text is when quoting from a book that uses different
typefaces for the words of different characters and you want to duplicate
the look-and-feel of the quoted passage as much as possible. You can't be
sure that a visitor has the typface you want so images of the text with
the same text in the alt attribute may be appropriate.

Terry Pratchett's _Feet_of_Clay_ comes to mind, where the words spoken
by the golem, Dorfl are written in Latin characters with a Hebrew look.
http://www.chebucto.ns.ca/~af380/temp/tinse.gif
is an approximation (except that Dorfl's words are capitalized like
"That Is Not Self Evident." but the font I have available has only
upper-case). (Image availability not guaranteed after a week from now.)
Making a large-print version of the image and then having the browser
scale it down to the regular text size would allow it to be readable even
after increasing text size. (Using a separate image for each word would
even enable the browser to appropriately wrap the "text" when needed.)

--
``Why don't you find a more appropiate newsgroup to post this tripe into?
This is a meeting place for a totally differnt kind of "vision impairment".
Catch my drift?'' -- "jim" in alt.disability.blind.social regarding an
off-topic religious/political post, March 28, 2005


Funbolt.com - Entertainment portal, wallpapers, sexy celebs