Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » css » Drop Caps in CSS

Drop Caps in CSS

Apply printing styled Drop Caps to your site using CSS.

View an Example of this article before you get started.

The following tutorial was submitted to Scriptplayground from pneal

Lets start off with the HTML used in this example, this is just basic code not much to explain. :)

<p class="dropcap">Epsum factorial non deposit quid pro quo hic escorol. 
Olypian quarrels et gorilla congolium sic ad nauseum. 
Souvlaki ignitus carborundum e pluribus unum. 
Defacto lingo est igpay atinlay. Marquee selec</p>

Now we get to the CSS all commented for you viewing pleasure.

p.dropcap:first-letter {
	float: left; /* Make the text flow around the letter */
	font-family: Times, Times New Roman, Serif; /* Use whatever font fits your site */
	color: #00FF00; /* Color of the font */
	font-size: 2em; /* Makes the letter twice the size of the rest of the text */
	font-weight: bold; /* Don't need it, but looks good */
	line-height: 1em; /* Adjustment for IE. Otherwise it doesn't line up correctly */
	padding-right: 0.15em; /* If it's getting crowded - adjust */
}

That is all it takes to create really cool Drop Caps for your site.

This effect has been tested in the following browsers

  • Mozilla
  • Firefox
  • Opera
  • IE 6
  • NS 7, 8

It has not been tested on the Macintosh platform so if you use that please comment on the results. :)

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Drop Caps in CSS

 Seth  Sun Jun 8, 2008 8:39 am  
Interesting to see this widely used in books font effect transferred to the web, the CSS is nice and clean as well, plus I'm actually quite impressed that IE only requires a line-height to behave itself (not surprising that it needs the line height fixed though, typical its not smart enough to work out that even though the container loses its own physical dimensions by being floated that that shouldn't effect any line-heights or margins of descendant elements.

A few things to note on this technique, (not that I can actually think of any logical reason why you'd want to given how this effect has been applied throughout... well history in general) on the off chance someone for some reason I cant think of, wants to use consecutive paragraphs with this drop cap first letter, then you could POTENTIALLY experience some issues (i emphasise potentially as I haven't actually tested this, I'm just making note of this as it came to mind based of past experiences with how browsers (particularly wannabe "browser" IE).

I would imagine that excluding any "damage factors" (see below), standards compliants browsers like Firefox etc, probably wont have any problems, however of course we STILL have to accomodate for that so-called "browser" Internet Exploder (or Exploiter if you prefer they equally underscore just how pathetic IE is), IE is in general pretty retarded when it comes to handling floats (hence the need for the line-height rule), especially with the "damage factors" mentioned before, the damage factors in this situation are:

* Width of

element that contains the drop cap and regular text.
* The amount of text within the

element that follows the drop cap.
* Height declarations on the

element.
* Other unknown variables.

Other unknown variables is just how I refer to anything that's specific to your own site, i.e. you can be 99.99% certain that without even checking I have built my websites different to the way you've built yours, however minor (prime example - IE7 still is subject to the same dumb problem that IE5 has, requiring pointless empty / single whitespace containers or literally a basic HTML comment like ), e.g. other styles that are applied to the elements via cascade from a parent element, etc.

Width, height and text within the

element(s) can all be summed up in one - The first letter is floated, which takes it out the normal document flow, so if you have your

elements with a set width and or height, you could get some issues with the first letter possibly breaking outside the boundaries of its container, particularly when the text size is adjusted through the user's browser menus, the CTRL + Mousewheel combo, etc. The amount of text within the

element will also be a factor depending on how your site works, e.g. if you have your site width based on percentages and you have a paragraph with this text effect, different resolutions will change how many lines the text will require, if the drop cap letter becomes taller than the height of your text in higher resolutions the character might start to break outside its container.

In the event you do get these types of problems then you could also combine this technique with the 21st century clearing from Position is Everything:

p.dropcap:after {
height: 0;
clear: left;
content: ".";
display: block;
visibility: hidden;
}

That'll sort the standards compliant browsers, now we have IE which doesn't do generated content, it does however have an auto clearing feature that kicks in when an element has hasLayout = true. Within an IE stylesheet:

p.dropcap {
display: inline-block;
}

* html p.dropcap {
height: 1px;
}

Star-HTML i imagine is globally recognised as the IE6 and lower hack, the display-inline block does the hasLayout triggering for IE7 (and IE6 as well), however I have experienced some random results with the inline-block display applied to different elements, particularly, if IE7 decides to throw it's toys out the pram with display: inline-block; then swap this out for min-height: 1px;

IEs wrong handling of height was fixed in IE7 so using height: 1px will do more harm than good in IE7, min-height however also triggers has layout and is the same thing as what IE6 and lower do (incorrectly) already.

 Paris Hilton  Fri Jun 27, 2008 9:41 am  
css Font examples , Properties , Attribute - - //
http://www.css-lessons.ucoz.com/font-css-examples.htm
 Non Reciprocal  Sat Jul 5, 2008 9:39 am  
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
 Busby SEO Challenge  Sun Aug 3, 2008 12:46 am  
You need an HTML editor which uses WYSWIG which means what you see is what you get. There are some basic HTML tutorials on the internet for making a website. Search for it using google and you can find answer to your questions. Good Luck!
 Jim Pohl  Sat Dec 13, 2008 12:16 pm  
Hi, I am using word to My code works for IE but nothing Else.
Help? Jim Pohl soq84Jim@citcom.net

.drop {
float:left; color:#000;
font-family: arial;
margin-top: 4px;
margin-right: 6px;
font-size: 19px;
line-height: 100%;
text-decoration: underline;
font-weight: bold;
padding-top:0px;
padding-bottom: 0px;
padding-right: 0.5em;
}

.drop1 {
float:left; color:#000;
margin-top: -4px;
margin-right: 1em;
font-size: 20px;
font-weight: normal;
margin-bottom: 0px;
line-height: 140%;
text-decoration: none;
height:24px;
padding-top:4px;
padding-bottom: 0px;
padding-right: 0em;
font-family: arial;
} What a mess?
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles