Results 1 to 2 of 2

Thread: How to make the first letter in a paragraph drop (initial, drop cap)

  1. #1
    Join Date
    Apr 2009
    Thanked 0 Times in 0 Posts

    Default How to make the first letter in a paragraph drop (initial, drop cap)

    Hello Friends,
    Sorry i didn't know how to explain more in the title.
    Anyway here is an image show what i ment

    As you can see the 1st letter ( it isn't image, it is text ) is big just like news aricles, so how can i make it like this .

    thanks in advance
    Last edited by egturnkey; 05-04-2009 at 10:27 PM. Reason: thanks very much for helping

  2. #2
    Join Date
    Oct 2008
    Thanked 319 Times in 318 Posts
    Blog Entries


    That is called an initial. There are different types of initials and the one that you have in your picture is called a drop cap or drop initial. The most common way to achieve a drop cap in web design is to wrap the first letter of the text with a span:
    HTML Code:
    <p><span class="drop">S</span>nookerman is awesome! Pellentesque habitant morbi tristique 
    senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
    ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean 
    ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien 
    ullamcorper pharetra.</p>
    Then you float the span and change the font-size, line-height and position:
    span.drop {
    float: left;
    font-size: 4em;
    line-height: 0.7;
    This takes some testing, so play around with the position, the margins and the padding until you are happy with the result.

    Good luck!

  3. The Following User Says Thank You to Snookerman For This Useful Post:

    egturnkey (05-04-2009)

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts