WEB STANDARDS CREATIVITY

Creating the illusion of vertical text
The headings that should be vertical are all static. Since they don’t need to be regularly updated, I can use images rendered
in Photoshop. The vertical text effect isn’t easy to reproduce any other way. I could do it with Flash, but it’s easier with this
method, as the sIFR approach (discussed next) doesn’t support rotated text, and Flash items can be more difficult to position.
I could just use the CSS background-image property to assign each image to a container , but there’s no actual
heading within the HTML file, and that’s not an ideal situation if the markup is to be accessible, even if on a basic level.
The good news is that it’s just as easy to make an HTML heading (, , and so on) do exactly what I want, and for
somewhat obvious reasons, this approach is called image replacement. There are about as many ways to handle image
replacement as there are versions of Internet Explorer with weird CSS bugs, but I prefer a method devised by Mike Rundle
dubbed the Phark method (after his personal site, http://phark.net). Let’s use one of our sidebar headings (wrapped in a
module ) as an example:
videos
For more on image replacement techniques, Dave Shea has compiled a nice comparison for you to bookmark
and reference: http://mezzoblue.com/tests/revised-image-replacement/.
Without any specific styling, this heading will display just as you would expect. But the idea is to hide the default text output
and replace it with the text image created in a graphics editor, and the following CSS rule is all I need:
#sidebar .module h3 {
background:url(i/header_module_events.gif) no-repeat;
width:18px;
height:58px;
margin:0;
text-indent:-5000px;
}
This rule handles the following:
Set the background image and instruct the browser to not tile the image.
Define the dimensions (set here to equal the width and height of the background image).
Kill the margins. It’s a good idea to zero your margins when replacing headings, and then position them as needed.
And, finally, the slick part: indent the text –5000 pixels
to the left of the heading’s position. This is
important, because otherwise the heading’s text
would still display above the rendered background
image.
Figure 2-7 shows the heading before, during, and after
applying the CSS rule.
So that takes care of the vertical text, which at first glance,
may seem like the more challenging of the two replacement
cases. However, the reality is that the second case—using a
specific typeface for text that must remain editable—is
actually more of a challenge, as you’ll see next.
Figure 2-7. The heading in its default state (left), after the
background image is applied (middle), and after setting
text-indent:-5000px; (right)
chapter 2 Taming a Wild CMS with CSS, Flash, and JavaScript
41