Like Lettering.js, but in Twig
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Lettering plugin for Craft CMS 3.x

Like Lettering.js, but in Twig


This plugin requires Craft CMS 3.0.0-beta.23 or later.


To install the plugin, follow these instructions.

  1. Open your terminal and go to your Craft project:

     cd /path/to/project
  2. Then tell Composer to load the plugin:

     composer require mmikkel/lettering
  3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Lettering.

Lettering Overview

Lettering is a port of Lettering.js, for Craft CMS.

Looking for the Craft 2 version? It's right here!

Using Lettering

Split on characters

{% set text %}
    <p>Foo bar</p>
{% endset %}

{{ text|lettering }}


<p aria-label="Foo bar">
    <span class="char1" aria-hidden="true">F</span>
    <span class="char2" aria-hidden="true">o</span>
    <span class="char3" aria-hidden="true">o</span>
    <span class="char4" aria-hidden="true"> </span>
    <span class="char5" aria-hidden="true">b</span>
    <span class="char6" aria-hidden="true">a</span>
    <span class="char7" aria-hidden="true">r</span>

Split on words

{% set text %}
    <p>Foo bar baz</p>
{% endset %}

{{ text|lettering('words') }}  


<p aria-label="Foo bar">
    <span class="word1" aria-hidden="true">Foo</span>
    <span class="word2" aria-hidden="true">bar</span>
    <span class="word3" aria-hidden="true">baz</span>

Split on lines

{% set text %}
        bar baz</p>
{% endset %}

{{ text|lettering('lines') }}  


<p aria-label="Foo bar baz">
    <span class="line1" aria-hidden="true">Foo bar</span>
    <span class="line2" aria-hidden="true">baz</span>

Tag pair usage

{% filter lettering('words') %}  
    <h1>{{ entry.title }}</h1>  
{% endfilter %}

Extract aria label and chars/words/lines

{% set lettering = craft.lettering.chars('Sanctimonious Variable Lettering') %}  

<h1 {{ lettering.ariaLabel }}>{{ lettering.chars }}</h1>


This plugin is provided free of charge and you can do whatever you want with it. Lettering is unlikely to mess up your stuff, but just to be clear: the author is not responsible for data loss or any other problems resulting from the use of this plugin.

Please report any bugs, feature requests or other issues here. Note that this is a hobby project and no promises are made regarding response time, feature implementations or bug fixes.

Pull requests are extremely welcome

Brought to you by Fred Carlsen + Mats Mikkel Rummelhoff

Plugin icon: L shape by Lluisa Iborra from the Noun Project