jquery.dropj.js

jQuery.dropJ API

About

dropJ is a jQuery plugin to add drop caps—large floated initial capital letters—to (X)HTML content. dropJ is easy to use, just like jQuery, portable, working purely on text, robust, with targeted currying to find the right character(s) to make into a drop cap, and universal, working on languages which are usually displayed in utf-8 text like Chinese.

Project pages: in Google Code, on jQuery.com.

Download: jquery.dropj.js (most recent version is almost always what you want).

Options

Features that are grayed out are either highly experimental or being considered for future release. Arguments are listed after attributes. Arguments in bold are the default.

class
dropj · You may specify a different class. You might want to do this if you already have a drop cap style of your own.
clear
true|false · This controls the clear of the drop cap’s container.
factor
true|1|2|3|[4..10] · How big the drop cap will be. Nota bene: the factor is not based on fontSize but on lineHeight. E.g., a tiny font size with triple spacing and a factor of 3 would result in a very large drop cap, much larger than a font twice as big with normal line height. You will get better drop caps if line-height is specified in your page’s CSS for the element (usually a paragraph) in which the drop cap will be.
true is a special experimental factor which attempts to make the drop cap the same height as the containing element. Doing this, however, is guaranteed to change the height of the element…
element
span · You may specify another element to wrap the drop cap but unless you have a good reason, you probably shouldn’t.
css
The default CSS looks like this–
 opacity:0.7           // Big chars appear darker.
,float:"left"          // Other text should flow around it.
,fontStyle:"normal"    // Italics would be bad here.
,fontWeight:"bold"     // Bold will be good.
,overflow:"visible"    // Bottom margin can clip.
,textDecoration:"none" // When drop cap is a link.
You can try to set lineHeight, fontSize, margin, and padding but they may be ignored. The CSS (jQuery syntax) you might want to set yourself includes color, opacity, background, and fontFamily.
mode
ascii|extended|cjk|unified
unified may become the default but for now the character set it not well enough defined in the code so we use ascii as the default.
keepCase
true|false · Set to false to apply toUpperCase() on the drop cap.
hang
false|[0.1 .. 1] · The cap will hang off and outside the paragraph entirely. This may wreck certain kinds of layouts and CSS schemes where overflow is hidden.
dir
ltr · This does nothing yet. In future versions we will try to support setting this explicitly and autodiscovery for languages rended rtl like Arabic and Hebrew.
toggleFamily
false|true · If the target node has “sans-serif” in its font-style, the drop cap will be “serif” and vice versa.
tolerance
1 · How many leading non-letter matches are allowed.

Author

Ashley Pond V · ashley at cpan · org.

dropJ demos and tests

dropJ. Your jQuery drop cap plugin. The “d” in “dropJ” should be a capital “D” drop cap.

“Proceres mei et vos populi deputati, cum bellum Britannicum instituissem per locumtenentem meum gerendum, allocutus sum vos per cancellarium meum.”

“Proceres mei et vos populi deputati, cum bellum Britannicum instituissem per locumtenentem meum gerendum, allocutus sum vos per cancellarium meum.”

由于危害太大,我一直都不太敢发布,相信国内也有人知道的。只是不公开而已。经过再三考虑还是决定发布了,希望大家掌握了以后,不要对国内的站点做任何具有破坏性的操作。谢谢合作!

 뿌리가 깊은 나무는 / 바람에도 흔들리지 아니하므로 / 꽃이 좋고 / 열매도 많으니. / 샘이 깊은 물은 / 뭄에도 그치지 않고 솟아나므로, / 내가 되어서 / 바다에 이르니.

Þá steig Drottinn niður til þess að sjá borgina og turninn, sem mannanna synir voru að byggja.

或日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。

jQuery, starts with a lowercase letter and we’d usually prefer to respect that.

¿Que pajo? Mi gusta: «Retirado en la paz de estos desiertos, con pocos pero doctos libros juntos, vivo en conversacion con los difuntos y escucho con mis ojos a los muertos.»

由于危害太大,我一直都不太敢发布,相信国内也有人知道的。只是不公开而已。经过再三考虑还是决定发布了,希望大家掌握了以后,不要对国内的站点做任何具有破坏性的操作。谢谢合作!

由于危害太大,我一直都不太敢发布,相信国内也有人知道的。只是不公开而已。经过再三考虑还是决定发布了,希望大家掌握了以后,不要对国内的站点做任何具有破坏性的操作。谢谢合作!

A Fox one day thought of a plan to amuse himself at the expense of a Stork, at whose odd appearance he was always laughing.

A Fox one day thought of a plan to amuse himself at the expense of a Stork, at whose odd appearance he was always laughing.

My, my, what a nice test of such a nice plugin for such a great library. This has the factor set to true.

My, my, what a nice test of such a nice plugin for such a great library. This has the factor set to true.

My, my, what a nice test of such a nice plugin for such a great library. This has the factor set to true.

My, my, what a nice test of such a nice plugin for such a great library. This has the factor set to true.

Code examples

<script src="/local/path/to/jquery.js" type="text/javascript"></script>
<script src="/local/path/to/jquery.dropj.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
jQuery(function($){
  $("p:first").dropJ();
});
//]]></script>

HTML where this is the first paragraph

<p style="line-height:15px; width: 50%;">
You will always get a decent drop cap from <b>dropJ</b> but you get the most predictable and best aligned drop caps when your line height is well defined in your CSS hierarchy.
</p>

Script code

$("p:first").dropJ();

Yields

You will always get a decent drop cap from dropJ but you get the most predictable and best aligned drop caps when your line height is well defined in your CSS hierarchy.

More coming soon!

Compatibility, versions, and changes

jquery.dropj v0.0.4; 20081010

  • Fixed entirely broken behavior in IE.
  • Browsers–
    • Firefox 2: Yes.
    • Firefox 3: Yes.
    • Safari 2: Untested
    • Safari 3: Yes
    • IE 6: Yes but shaky (overflow looks poor, sometimes clipped, etc)
    • Opera, Konqueror, et cetera: Not tested!

jquery.dropj v0.0.3; 20080223

  • Fixed naïve node re-insertion order bug.
  • Added hang.
  • Tweaks to factor multiples against line heights.
  • Browsers–
    • Firefox 2: Yes.
    • Safari 2: Untested
    • Safari 3: Yes
    • IE, Opera, Konqueror, et cetera: Not tested!

jquery.dropj v0.0.2; 20080223

  • Added keepCase.
  • Bug in node re-insertion order.
  • Browsers–
    • Firefox 2: Yes.
    • Safari 2: Untested
    • Safari 3: Fixed
    • IE, Opera, Konqueror, et cetera: Not tested!

jquery.dropj v0.0.1; 20080222

  • Browsers–
    • Firefox 2: Yes.
    • Safari 2: Untested
    • Safari 3: Broken!
    • IE, Opera, Konqueror, et cetera: Not tested!

Bugs

There are no known bugs but that is not particularly meaningful because I’m not currently testing on IE. I am extremely grateful for any feedback, suggestions, screenshots of problems if you find any. Please be as specific as possible with reports and include the code you are trying to run along with a description or screenshot of the problem. You can get me here—ashley at cpan · org.

0.0.1–0.0.3 are completely broken in IE (6 and 7 at least). IE refuses to mix units like ems and pixels under the covers. This is semi-fixed in 0.0.4 though, as usual, IE still looks pretty crappy and I'm not sure how well the utf8 stuff is working.

To do

  • Check that the drop cap has not already been applied? This would be best as a cache referencing the nodes, I think.
  • Wrap tests and loading up in try blocks with reporting.
  • Get this page into Yesh (this site’s CMS).
  • There should be an “elevation” argument which is the vertical equivalent of “hang.”

Acknowledgements

  • John Resig · creator of jQuery.
  • The jQuery team for everything, including the great tabs running this page.
  • Mike Alsup for his really nice Plugin Development Pattern article.
  • Eduardo Alejandro da Cruz Malpeli for pointing out that I had never finished the IE patch I started and that my addled brain put a non-existant overflow value into the defaults.
  • Don’t you want to see your name and link here?
    • Help me make dropJ a better plugin!
    • Write with feedback, bug reports, or feature requests — ashley at cpan · org.

Resources