Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    How to Make Drop Caps

    by Steven Moseley

    Drop caps are when the first character of a section of text is made slightly larger than the rest, in a stylized font, and dropped down to the next line or two. Every section of this book begins with a drop cap. Drop caps do not increase legibility of the text, yet they are proven to increase readership, making them a handy little tool. The most likely reason for increased readership is that drop caps convey a sense of importance about the text. It's not haphazardly thrown down on the page, but designed carefully and with attention to detail.

    This technique is used to a great extent in magazine and newspaper articles, and in texts (denoting the beginning of a chapter). For that reason, many advertisers have adopted the technique in ads, with proven results.

    The technique has not been perpetuated to the web for a few reasons:
    1. There is no font formatting technique for drop caps.
    2. If the font is simply made larger for the first character, it will rise above the first line rather than dropping down.
    3. Even if there were a property to set for drop caps, the stylistic fonts used in drop caps aren't widely supported by browsers.

    Despite all of these problems, it is possible to make drop caps using images. For 10-12 pt. font (size="2") text on your site, I suggest making a series of drop caps - one for each letter of the alphabet, each number, and one quote - in 24 to 36 pt. text in a graphics software (the resulting image should be about 35 to 50 pixels high, and varying width).

    Load all of the images into a subdirectory of your images folder called "letters" and use them like this:
    Code:
    <p>
        <img src="./letters/D.gif" align="left" hspace="5" vspace="0">
        rop caps are a powerful tool for increasing readership.
    </p>

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Anyone try this out? Drop caps can make your content look really nice. Anyhow, I found a cool alternate way of creating drop caps using CSS2. Supposedly, it's supported by IE5.5+ and NS6+

    Here it is !!

    Code:
    <style>
    p {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 10pt;
        color: #000000;
    }
    p:first-letter {
        font-family: Times, Times New Roman, Tahoma;
        font-size: 36pt;
        float: left;
    }
    </style>
    Try it out!

  4. #3
    Junior Member
    Join Date
    Dec 2003
    Posts
    6
    Member #
    4240
    IIRC, the pseudo-class :first-letter isn't supported by ie, however it is supported by "real" browsers such as Firefox/Mozilla


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:23 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com