Marginal drop caps with jQuery and CSS

by gabrieleromanato

HTML

<p class="indent">
   Marginal Drop Cap. 
   The marginal drop cap indents the text to the right and uses absolute 
   positioning to move the drop cap into the margin created by the indent. All 
   text stays to the right of the drop cap. In other words, text does not wrap 
     back under the drop cap when it extends below the drop cap.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p class="indent">Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.</p>

<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>

<p><a href="http://www.cssdesignpatterns.com">by Michael Bowers</a>, improved by jQuery</p>

CSS

body {
    margin: 2em auto;
    width: 85%;
    font: 85%/1.5 Arial, sans-serif;
}

p {
    margin-bottom: 1em;
    padding-left: 2em;
}

.indent {
    position: relative;
}

.marginal-dropcap {
    font: 2em/0.8 Georgia, serif;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var createMarginalDropCaps = function() {
    if ($('p.indent').length) {

        $('p.indent').each(function() {

            var $p = $(this);
            var text = $.trim($p.text());
            var firstLetter = text[0];
            var marginalDropCap = '<span class="marginal-dropcap">' + firstLetter + '</span>';

            $p.html(text.replace(firstLetter, marginalDropCap));

        });

    }
};

createMarginalDropCaps();