Liquid tip: Drop cap the first letter of an article

Drop caps have been used in printed media for a long time to add styling to the first letter of the first paragraph of piece of content.

There are many ways to add this effect to web page content – Javascript, the CSS pseudo :first-letter (which is not fully supported yet), but here’s a simple method using Liquid and basic CSS.

{% assign first_word = article.content | split: ' ' | first %}
{% assign first_letter = first_word | slice: 0 %}
{% capture first_letter_tag %}<span class="dropcap">{{ first_letter }}</span>{% endcapture %}
{% assign first_word_dropcap = first_word | replace_first: first_letter, first_letter_tag %}

<p>{{ article.content | replace_first: first_word, first_word_dropcap }}</p>

You can then style span.dropcap as you see fit.