dropcap.js - Beautiful CSS drop caps made easy

dropcap.js makes beautiful drop caps easy for the web.

Why

Though drop caps are very common in magazines and books, they remain rare on the web. We believe this is because doing it right simply and reliably is too difficult. A simple CSS float:left on a ::first-letter pseudo-element is not enough, as this tumblr shows.

The CSS Working Group is currently specifying a new property for drop cap layout. Until this makes it into all our favorite browsers we wanted to make it work with today's platform.

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: github.com

1. INCLUDE JS FILE

<script src="../dropcap.min.js"></script>

2. HTML

<p>
    <span class="dropcap">T</span>HE Quick Brown Fox...
</p

This is required because the CSS Object Model does not expose write access to the styling of pseudo-elements like ::first-letter; until then, explicit markup is preferred in this version.

3. JAVASCRIPT

The script defines the window.Dropcap.layout method; you call it like so:

window.Dropcap.layout(dropcapRef, heightInLines, baselinePos);

4. OPTIONS

Dropcap.layout(dropcapRef, heightInLines, baselinePos)

dropcapRef

The dropcapRef parameter may be one of:

• An individual HTMLElement object
• A NodeList e.g. obtained from querySelectorAll() or a property such as Node.childNodes

For instance:

    <script src='./dropcap.min.js'></script>
    <script>
        var dropcaps = document.querySelectorAll(".dropcap");
        window.Dropcap.layout(dropcaps, 3);
    </script>

The specified element(s) will be floated, sized and positioned based on the values you specify for baselinePos and heightInLines.

heightInLines

The heightInLines parameter must have a value of 1 or higher. It specifies the height of the drop cap as a number of lines of the adjoining paragraph.

baselinePos (optional)

The baselinePos parameter is optional; when specified, its value should be 1 or higher. It defines which baseline of its parent element the drop cap's own baseline must align with. For instance, a value of 4 means 'align the drop cap's baseline with the baseline of the paragraph's fourth line'. By default, baselinePos is the same as heightInLines, which makes the drop cap extend from the baseline of the baselinePos-th line to the cap line of the first line. (This is the most common use-case). When baselinePos is smaller than heightInLines, the result is that of a 'raised cap' as the top of the drop cap will be a number of lines above the first line of the paragraph.