dive into mark

Brad Choate: Leadin Macro automates creating lead-ins, where the first letter of a post is capitalized (or a graphic) and the first few words are styled differently. In theory it should be possible to do this with CSS :first-letter and :first-line, but IE5/Win doesn’t support them. (And Netscape 4? Ha!) IE5.5/Win supports them, though. You could use conditional comments to differentiate between them. Or just say Screw it and use the lead-in macro.

The following paragraph is the original version of this post, and is false:

Please be aware that there is an accessibility downside to this. When screen readers like JAWS encounter your marked up lead-in, they will read the drop cap as its own letter, then read the next word as if it were a separate word. So a lead-in paragraph starting with the word This would be read as T, his. Confusing.

Update: Brad Choate was motivated enough to test this with the latest version of JAWS, and lo and behold, it works just fine. Even with an embedded IMG tag for the first letter (with the letter itself as the ALT attribute, which Brad’s macro correctly generates), JAWS reads it as a single word. I have reproduced his results and agree with him. So the accessibility downside is minimal (it still may have problems with an unknown number of older screen readers or other voice browsers).

So feel free to generate marked up lead-ins, if that’s your thing. A pure CSS solution would still be more elegant, if it worked in all browsers, which it doesn’t. This is actually a perfect example of the kind of real world problem that CSS is designed to solve. And, as usual, Microsoft goes and ruins it for everyone. IE 5: the Netscape 4 of the new generation.

§

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)

§