Drop Caps Without HTML Markup With jQuery Plugin or CSS3

Drop Caps is the larger initial letter effect at the beginning of a word, a chapter, or a paragraph. Without HTML markup, we can add Drop Caps effect. Historically, Drop Caps with images had initials inside them. With time the image part largely went away and Drop Caps became a Typographical element. 3 years ago, we published a guide to create an inferior version of Drop Caps with inline CSS – Drop caps – large capital letter like magazine with CSS. In these 3 years, there has been a huge improvement in web Typography, including Icon-Font and various ways to implement proper display of Fonts evenly.

 

Drop Caps Without HTML Markup : The Technical Importance

 

Most of the busy website runs a content management system (CMS) now, in most cases WordPress is used, although technically WordPress is a blogging software, with time; due to the flexibilities offered by WordPress, it is practically WordPress what is as equivalent to typical CMS. The importance is that, we really can not modify the HTML markups of previously published articles. It is possible, but does not deserve the time investment behind it.

Most importantly, one might not like Drop Caps in near future or just after implementation.  So, the most flexible way to implement Drop Caps should be some way that can be reversed on production website quite faster.

 

Drop Caps Without HTML Markup With CSS3

 

The key is first-child:first-letter, it was on CSS 2 as well, a typical example would be :

Obviously, the line-height, padding, font size depends on what font is in use. Appending it to the Post Content’s CSS property will do the work fine. Basically this is the best method in terms of accessibility. One must test and calibrate for responsive design.
In case you want to add image, :after or :before pseudo class can define the background image. You can check W3Schools for better examples and small-caps CSS property too.

 

Drop Caps Without HTML Markup With jQuery plugin

 

Personally, I prefer this method as we can fiddle more with jQuery and the result should be logically right. We found two ready made solutions :

Another quite old but good article is here :

Well documented and good resource who want to code.

Obviously, we will use WP Enqueue Script to inject the javascript and put it to footer.

This Article Has Been Shared 376 Times!

Facebook Twitter Pinterest