Mic-Drop Your Caps

Mic-Drop! Erm...Drop Cap?

O

n the twenty first day of the ninth month, you may recall, a passionate emotion was causing those who only appeared to be who they said they were to think differently. At the same time, condensed water vapor in the upper atmosphere was removed, which caused the circulatory systems of a group I was part of to make a bell-like noise using the same musical scale that the animating force of our bodies used to make music. Throughout the period of time that our area of the globe faced away from the sun, that same group was collectively making ritual movements indicating pleasant feeling. Anyway, does that sound familiar? Distant, bright heavenly objects took the entire period of revolution that was out of direct sunlight, even though it did not belong to them.

You Were Wondering How Those Crazy Monks Did It

The drop-cap has been around since long before the Internet, so it's no surprise that CSS would catch up eventually. I guess this "web" thing might be more than a fad after all. So, how can we make it work? The simplest method is to make a custom container for that first letter, bump it up in size, and let everything flow around it. So yes, you must be a Grandmaster or higher.

Mark-up: Dirt Simple

Why should dirt be simple? Anyway, just put a container around your first letter:

[container:drop-me]O[/container]n the twenty first day of the ninth month...

• Don't put any space between the end of the container and the next letter
• Just continue your text as normal

Some CSS for Your Trouble

The CSS is fairly simple as well. This snippet uses the Grenze Gotisch font from Google, but clearly (hopefully it's clear) you can use any font you like here that you have already declared.

.user-css .drop-me {
  float: left;
  font-size: 4em;
  line-height: 1.1em;
  margin-top: -0.2em;
  font-family: Grenze Gotisch;
}

But U51, dude, is that really all there is to it?
I'm so glad you asked. No, not really. You have to tweak those ems for the font you are using. Getting the line height big enough for the size of drop cap you want and then pulling that cap up to be flush with the line top is a trial-and-error process. You can keep your CSS box open in one tab and your article open in another so that you can tweak and adjust, or you can use something like Chrome Dev Tools to muss with the values until you are happy, then edit your CSS once for all.

Why Wouldn't I Just Use the dc Tag?

Well, because I didn't know we had one. Headdesk.