mmikkel/lettering

Like Lettering.js, but in Twig

Lettering plugin for Craft CMS 3.x

Like Lettering.js, but in Twig, _(*1)

Requirements

This plugin requires Craft CMS 3.0.0-beta.23 or later., _(*2)

Installation

To install the plugin, follow these instructions., _(*3)

1. Open your terminal and go to your Craft project:, _(*4)

   cd /path/to/project

2. Then tell Composer to load the plugin:, _(*5)

   composer require mmikkel/lettering

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Lettering., _(*6)

Lettering Overview

Lettering is a port of Lettering.js, for Craft CMS., _(*7)

Looking for the Craft 2 version? It's right here!, _(*8)

Using Lettering

Split on characters

{% set text %}


Foo bar, (*9)


{% endset %}

{{ text|lettering }}

Output:, _(*10)

<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>
</p>

Split on words

{% set text %}


Foo bar baz, (*11)


{% endset %}

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

Output:, _(*12)

<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>
</p>

Split on lines

{% set text %}


Foo
        bar baz, (*13)


{% endset %}

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

Output:, _(*14)

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

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') %}  



{{ lettering.chars }}

Disclaimer

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., _(*15)

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., _(*16)

Pull requests are extremely welcome, _(*17)

Brought to you by Fred Carlsen + Mats Mikkel Rummelhoff, _(*18)

Plugin icon: L shape by Lluisa Iborra from the Noun Project, _(*19)