If you need a greater degree of typographical control over a portion of text, such as the
site’s main heading, there is an option that enables you to include an image and also
enable the text to remain in place, which is useful for users surfing the Web with screen
readers. This is generally known as image replacement. Note that the technique should be
used with care and sparingly—even from a basic practical standpoint, it doesn’t make a
great deal of sense to set all of your headings as images, simply because it takes time to
create and export each one.
Of the techniques available for replacing images, the most common is to assign the relevant
piece of text (usually a heading) a class value in HTML, and also add a dummy span
element before its content:
<h1 class="aFancyHeading"><span></span>A fancy heading</h1>
In an image editor, an image-based version of the heading is created and saved, and its
dimensions measured. Example files for this are a-fancy-heading.gif, image-replacement.
css, and image-replacement.html, located in the chapter 3 folder. In the CSS file, you’ll
see rules created to define the dimensions of the heading (.aFancyHeading) and span
(.aFancyHeading span). The heading’s position value is set to relative, and the span element
is then positioned in an absolute fashion, which ensures that it sits over the textbased
heading’s content. The width and height values ensure that the span (and therefore
its background image) expands to fill its container. (Note that when used in conjunction
with links, it’s useful to also set display: block within the CSS rule so that the entire area
becomes clickable and the cursor becomes a pointer—this is because some versions of
Internet Explorer use the arrow pointer instead of the usual finger pointer. Alternatively,
set cursor to pointer in CSS.) The overflow: hidden property/value pair ensures text
doesn’t peek out from behind the image—an issue that sometimes occurs in Internet
Explorer or when text is resized. To deal with zoomed text in IE 7, it may also be necessary
to set a pixel font-size value for the heading that’s smaller than the height of the image
site’s main heading, there is an option that enables you to include an image and also
enable the text to remain in place, which is useful for users surfing the Web with screen
readers. This is generally known as image replacement. Note that the technique should be
used with care and sparingly—even from a basic practical standpoint, it doesn’t make a
great deal of sense to set all of your headings as images, simply because it takes time to
create and export each one.
Of the techniques available for replacing images, the most common is to assign the relevant
piece of text (usually a heading) a class value in HTML, and also add a dummy span
element before its content:
<h1 class="aFancyHeading"><span></span>A fancy heading</h1>
In an image editor, an image-based version of the heading is created and saved, and its
dimensions measured. Example files for this are a-fancy-heading.gif, image-replacement.
css, and image-replacement.html, located in the chapter 3 folder. In the CSS file, you’ll
see rules created to define the dimensions of the heading (.aFancyHeading) and span
(.aFancyHeading span). The heading’s position value is set to relative, and the span element
is then positioned in an absolute fashion, which ensures that it sits over the textbased
heading’s content. The width and height values ensure that the span (and therefore
its background image) expands to fill its container. (Note that when used in conjunction
with links, it’s useful to also set display: block within the CSS rule so that the entire area
becomes clickable and the cursor becomes a pointer—this is because some versions of
Internet Explorer use the arrow pointer instead of the usual finger pointer. Alternatively,
set cursor to pointer in CSS.) The overflow: hidden property/value pair ensures text
doesn’t peek out from behind the image—an issue that sometimes occurs in Internet
Explorer or when text is resized. To deal with zoomed text in IE 7, it may also be necessary
to set a pixel font-size value for the heading that’s smaller than the height of the image
**Setting overflow to hidden can be an issue when this technique is used in conjunction
with linked replaced elements, such as linked mastheads and logos. When tabbing
through links, replaced elements that have an overflow setting of hidden will become
displaced on receiving the focus, revealing the underlying text as well as the image
overlaying it. Caution needs to be used here.
with linked replaced elements, such as linked mastheads and logos. When tabbing
through links, replaced elements that have an overflow setting of hidden will become
displaced on receiving the focus, revealing the underlying text as well as the image
overlaying it. Caution needs to be used here.
The following image shows a page using this technique with and without CSS.
Some methods focus on hiding the text by setting display to none in CSS, but that can
cause problems for screen readers, so avoid doing this. Others use text-indent to shift
the text off of the page, although using absolute positioning with negative top and left
coordinates is better—this prevents vertical space being taken up by the offset text, which
is quite often noticeable, especially if margins haven’t been controlled.
cause problems for screen readers, so avoid doing this. Others use text-indent to shift
the text off of the page, although using absolute positioning with negative top and left
coordinates is better—this prevents vertical space being taken up by the offset text, which
is quite often noticeable, especially if margins haven’t been controlled.
**Scalable Inman Flash Replacement (sIFR) is an alternative to replacing text with GIF
images. Instead, is uses a combination of CSS, Flash, and JavaScript to switch out a
block of text. Note that although this provides a great deal of typographic flexibility, it
should still be used sparingly—pages where too much text is switched out using sIFR
tend to be extremely sluggish. See sIFR Beauty (www.alvit.de/sifrbeauty/
sifr-resources.php) for resources and Mike Davidson’s site (www.mikeindustries.
com/sifr/) for further information.
images. Instead, is uses a combination of CSS, Flash, and JavaScript to switch out a
block of text. Note that although this provides a great deal of typographic flexibility, it
should still be used sparingly—pages where too much text is switched out using sIFR
tend to be extremely sluggish. See sIFR Beauty (www.alvit.de/sifrbeauty/
sifr-resources.php) for resources and Mike Davidson’s site (www.mikeindustries.
com/sifr/) for further information.
No comments:
Post a Comment