Drop Caps: code-snippet

[G_Petruzella]

Yeah, I know - who uses drop-caps anymore? But I like their panache. And it's a win when you can build an elegant - and accessible - drop-caps styled paragraph with a tiny tweak.

To add a fancy, elegant visual style to your paragraphs (while keeping your text and design accessible!), frame the first letter within your <p> with a <span> tag, as below:

<p><span style="float: left; width: 0.7em; font-size: 400%; font-family: algerian, courier; line-height: 80%;">I</span>n 65, Seneca was caught...</p>

In 65, Seneca was caught up in the aftermath of the Pisonian conspiracy, a plot to kill Nero. Although it is unlikely that he conspired, he was ordered by Nero to kill himself. He followed tradition by severing several veins in order to bleed to death, and his wife Pompeia Paulina attempted to share his fate. Tacitus (writing in Book XV, Chapters 60 through 64 of his Annals of Imperial Rome, a generation later, after the Julio-Claudian emperors) gives an account of the suicide, perhaps, in light of Tacitus's Republican sympathies, somewhat romanticized. According to it, Nero ordered Seneca's wife to be saved. Her wounds were bound up and she made no further attempt to kill herself. As for Seneca himself, his age and diet were blamed for slow loss of blood, and extended pain rather than a quick death; taking poison was also not fatal. After dictating his last words to a scribe, and with a circle of friends attending him in his home, he immersed himself in a warm bath, which was expected to speed blood flow and ease his pain. Tacitus writes: “He was then carried into a bath, with the steam of which he was suffocated, and he was burnt without any of the usual funeral rites. So he had directed in a codicil of his will, even when in the height of his wealth and power he was thinking of life’s close.”

Encasing the initial "I" inside the <span> tag doesn't upset the apple cart for screen readers - it's still just the first letter of the word, and it'll be read as such. (Tested with Chrome Speak.)

(Note for the knowledgeable: yes, I know, it'd be much better to write the style parameters into the CSS rather than singly in each instance of the HTML where it's desired. This is just a quick hack, OK?? 🙂