812studio

Initial Letter: A jQuery plugin for making drop caps and more

Initial Letter is a jQuery plugin designed to make the implementation of initial letter styles (drop caps, raised caps, etc.) easy and consistent between browsers.

Check it out

Demo
Download

Features

Create four types of initial letters easily.

1. Dropped – The baseline of the initial letter is below the baseline of the body text
2. Raised – The top of the initial letter is above the height of the body text
3. Reversed – The initial letter has a background
4. Overlapped – The initial cap actually overlaps the body copy. Keep the color and/or tint light enough so readability isn’t impaired.

Usage

Download and unzip the Initial Letter file. Drop it in your site’s root directory. You can place the files anywhere you would like. Just refer to them correctly.

1. Include JS files

2. Include CSS file

3. Activate plugin using jQuery selector

   The code above is an example. You will need to use the jQuery selector appropriate for your project to identify the first letter of the text you want to alter. If you need help understanding selectors, use this jQuery selectors resource.

4. Options
   You have these four initial letter style options to work with: dropped, raised, reversed and overlapped.

   initialLetter: "dropped"

   initialLetter: "raised"

   initialLetter: "reversed"

   initialLetter: "overlapped"

   You can also create your own initial letter styles. The name you choose then becomes the class name for the span tag that wraps around the first letter of selected text.

   initialLetter: "createYourOwn"

   The above setting would generate this html

   <span class="createYourOwn">L</span>orem ipsum dolor sit...

Disclaimer

Although the plugin will make the process of making initial letters easy, you will probably still need to adjust the Initial Letter CSS file to fit the typographic settings of your site. Initial Letter uses typographic settings generated from http://lamb.cc/typograph/.

Cross-browser compatibility

Firefox – No issues
Safari, Chrome (Webkit), Opera – Sight difference in line-height of initial letters.
IE 8, 7 and 6 – No issues

Giving Credit

Although I wrote this simple plugin, I hacked code provided by Hamish Campbell for finding the first alphanumeric character of any body of text selected using jQuery.

Fork it!

If you are a Githubber and you would like to fork or clone this plugin, you can do so here.