Twig Typography

This module provides a Twig filter which integrates the PHP Typography library and applies it to strings. An example use case is for protecting against widowed words in titles, or to process straight quotes into curly quotes. This could be applied in the page-title.html.twig template like this:

<h1{{ title_attributes.addClass('page-title') }}>{{ title|typography }}</h1>

The PHP Typography library can do the following transformations:

• Hyphenation — over 50 languages supported
• Space control, including:
  • widow protection
  • gluing values to units
  • forced internal wrapping of long URLs & email addresses
• Intelligent character replacement, including smart handling of:
  • quote marks (‘single’, “double”)
  • dashes ( – )
  • ellipses (…)
  • trademarks, copyright & service marks (™ ©)
  • math symbols (5×5×5=53)
  • fractions (1⁄16)
  • ordinal suffixes (1st, 2nd)
• CSS hooks for styling:
  • ampersands,
  • uppercase words,
  • numbers,
  • initial quotes & guillemets.

For more information on the PHP Typography library visit: https://github.com/mundschenk-at/php-typography

Requirements

This module requires no modules outside of Drupal core.

Installation

Install the Twig Typography module as you would normally install a contributed Drupal module. Visit https://www.drupal.org/node/1897420 for further information.

Configuration

• Navigate to Administration > Extend and enable the module and its dependencies.

Within the module directory there is a file called typography_defaults.example.yml. This file can be copied and renamed to typography_default.yml and placed in the root of your custom theme. You can then modify the YML file to provide your own defaults for the typography filter to use. See class-settings.php for possible options.

Usage

A typography filter is provided and is used on strings with the pipe character:

{{ title|typography }}

The filter can also operate on render arrays and will try to use the page level render() function first (with bubbleable metadata) and fall back to renderPlain() if render isn't allowed.

The typography filter can accept parameters to modify the defaults. For example, to render the page title with typographic enhancements but without the de-widows functionality:

{{ title|typography({'set_dewidow': FALSE}) }}

These inline options are overrides of the defaults and are provided by a Twig hash. You can have multiple overrides in this hash. An alternative is to set your defaults in your theme, see the next section for details.

Configuration

Within the module directory there is a file called typography_defaults.example.yml. This file can be copied and renamed to typography_default.yml and placed in the root of your custom theme. You can then modify the YML file to provide your own defaults for the typography filter to use. See class-settings.php for possible options.

Similar modules

Typogrify: The Typogrify module provides a text format as a way of applying typographic enhancements rather than a Twig based approach. It uses a different 3rd party library.