Drop Caps

From CSS Discuss

Jump to: navigation, search


Using Classes

For the widest support, the Typographic convention of Drop Caps can be implemented by use of a Html Element with a Class Attribute :

Lorem ipsum...

"And so," he said...

p .first-letter { float: left; font-size: 2em; width: 1em; margin: 0.2ex; padding: 0; }

Why name it first-letter? Names should not be based on how an element looks, so a name such as 'drop' will be confusing if at any time it ceases to be a drop-cap. Since we don't want to have to change the code when we change the stylesheet, we use a semantic name. The similarity to the pseudo-element :first-letter is not a coincidence -- that is exactly the meaning the code is trying to convey, for those times when the pseudo-element isn't available. -- Roger Pate

well in this case, we're creating an element and a rule specifically to alter appearance, so I think it's ok to call it "drop". And the concept of pseudo-elements is not always easy for newbs to grasp, hence my idea to keep the names clearly distinct.

Using First-Letter

However, the more elegant solution is to use the First Letter Selector:

p:first-letter { /*...*/ }

The first letter of the content of each P element will be treated as being a pseudo-element: in effect automagically adding the SPAN tags used above.

However, support for First Letter Selector is patchy.


How to neatly align top of the drop cap with top of main text?

The following usually works -- it is a little font-dependent.

p:first-letter { font: 2.5em/80% serif; float: left; padding: 0.2ex 0 0 0.2ex; margin: 0; overflow: visible; }

Known Bugs

If there is a punctuation mark such as a quotation mark before the first letter, the first-letter selector is supposed to select both the punctuation and the character which follows. However, in ((Gecko)) (still as of Mozilla 1.7), if entities such as “ are used, only the punctuation is selected.

Drop Caps

Personal tools