Рассматриваемый пример создания эффекта побуквенного оформления текста демонстрирует возможности использования Twig и CSS при разработке шаблонов оформления для Grav CMS и других систем управления контентом, использующих в качестве шаблонизатора Twig.

В общем виде, стоящая задача, сводится к разделению слова или строки на отдельные символы или части, с последующим их выводом в виде HTML кода, позволяющего применить к каждому отдельному символу или части необходимые для задания стиля оформления CSS атрибуты.

Для разбиения исходного текста на отдельные символы применяется фильтр Twig split. Используя параметры фильтра, можно добиться различных вариантов разбивки текста в соответствии с целями и задачей достижения определённого визуального эффекта. Для возможности стилизации каждого отдельного символа или части исходного текста, они должны быть обрамлены HTML тегами, например, <span></span>. Визуальный эффект оформления достигается путём применения требуемых CSS свойств к обрамляющим тегам.

Пример кода Twig и CSS для создания оформленного текста

<style type="text/css">
    .splitup {
        background-color: darkseagreen;
        font-size: 1em;
        font: Verdana;
        line-height: 2.5em;
        padding: 1em;
        text-align: center;
        text-transform: uppercase;
    }
    @media (min-width: 576px) {
        .splitup {
            font-size: 2em;
        }
    }
    .splitup span {
        box-shadow: .1em .1em .1em black;
        color: white;
        font-weight: 600;
        margin: .1em;
        padding: .5em;
    }
    .splitup span:nth-child(odd) {
        background-color: darkgreen;
    }
    .splitup span:nth-child(even) {
        background-color: darkred;
    }
</style>

{% set string = 'Split it Up!' %}
{% set out = '' %}
{% for char in string|split('') -%}
  {% set out = out ~ ((char != ' ') ? '<span>' ~ char ~ '</span>' : char) %}
{% endfor %}

<div class="splitup">{{ out }}</div>

В приведённом коде производится разбиение строки, заданной в переменной string. При желании использовать эффект в шаблоне оформления Grav CMS, например, для вывода заголовка страницы, переменной string должно быть присвоено соответствующее значение:

{% set string = page.title %}

Для удобства и возможности многократного использования, приведённый код Twig, может использоваться в виде макроса:

{% macro splitup(string, tag) %}
  {% set out = '' %}
  {% set tag = tag|default('span') %}
  {% for char in string|split('') %}
    {% set out = out ~ ((char != ' ') ? '<' ~ tag ~ '>' ~ char ~ '</' ~ tag ~ '>' : char) %}
  {% endfor %}
  {{ out }}
{% endmacro splitup %}

Кроме исходной строки макрос позволяет задать HTML тег для обрамления её элементов. Если HTML тег не задан, то используется тег <span></span>.