Exercise 12: Drop Caps

I think that drop caps, while very old school, are elegant, very cool, and add a bit of interest to an otherwise boring page of text. This is a rather simple effect to create using a bit of HTML code that is wrapped around the first character typed on this page. In order to demonstrate the full effect of drop-caps to the younger students of HTML who might not have seen this use in digital print media, I need to compose an entire paragraph that spans below the bottom of my first character. There, I think I have done it!

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, your text here...</p>

 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 Links to an external site.).

Anatomy of Code Snippet

Anatomy_of_Drop_Cap_Code-1.png

 

How to Make This Happen

  • Select and copy the code snippet above,
  • Because drop-caps are typically only used one at the top of a page, or maybe for the start of a new section of a page, create a new Content page, go to Edit mode and switch to the HTML Editor,
  • Paste the code at the top of the page,
  • Modify the code, by replacing the green highlighted "I" with the first letter of your first sentence, then
  • Replace the pink highlighted text with the start the remainder of that first sentence. This will act as a placeholder for when you return to the RCE and finish adding content to your page.