* Initial Letter - jQuery Plugin
 * Make drop caps easily, and try out three more basic "initial letter" styles.
 
 	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 con overlap or underlap the body copy. Keep the color and/or opacity light to maintain good readability.
				
 * Examples and documentation at: http://812studio.com/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

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

      <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
      <script src="/initialLetter/jquery.initialLetter-1.0.js" type="text/javascript"></script>

   2. Include CSS file

      <link href="/initialLetter/initialLetter-1.0.css" rel="stylesheet" />

   3. Activate plugin using jQuery selector

      <script type="text/javascript">
        jQuery(function($){
          $("p:eq(0)").initialLetter({
            initialLetter: "dropped"
          });
        });
      </script>

      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/.

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.