I came across the jQuery Miniature plugin over the weekend as I was building out a print-like design template.

jQuery Miniature is a simple plugin that applies an inline span tag with a couple of classes to the first character of the selected item or items. The result is a super easy to use highly customized solution for developing those pesky print designs that don’t easily conform to the web.

You can download the latest version of the plugin on the jQuery Miniture plugin page

Once you have linked the plugin in your code you can use by calling “.miniture();”.

//applies to the first letter of ALL paragraphs.
jQuery('p').miniature();

//applies to the first letter of the first paragraph.
jQuery('p').first().miniature();

Screenshot of the code as rendered by the browser:

Coupled with the following CSS

.-jquery-miniature{
	float: left;
	font: normal 143px/116px Georgia;
	margin: 0 5px 5px;
}

Results in the following:

One of the nice things about this plugin is the second class placed on the span tag includes the character it contains. This opens the door to an even higher level of customization as one could place separate images for each character.

Using WordPress?

In order to get this plugin to work on the WordPress platform I had to find and replace the shortcut “$” with “jQuery”.