Laravel Storyblok Typography Helpers

• Applying typography
• Customising the settings

A packaging to use the power of PHP-Typography to make your content sing and look the best it can.

Install the package using Composer

composer require riclep/laravel-storyblok-typography

To use the typographic features your Block must use the AppliesTypography trait. This exposes a couple of new properties and methods. Add an $applyTypography property to your class with an array of the fields. This will run PHP-Typography over all the chosen fields using some sensible defaults.

<?php

namespace App\Storyblok\Blocks;

use Riclep\Storyblok\Block;
use Riclep\StoryblokTypography\Traits\AppliesTypography;

class TypoCat extends Block
{
    use AppliesTypography;

    // the fields to apply typographic fixes to
    private $applyTypography = ['cats_name', 'biography'];
}

You don’t have to use our settings, you can supply your own. Create a new TypographySettings() instance and apply the settings you want then pass it to the setTypographySettings() method on the Block.

<?php

namespace App\Storyblok\Blocks;

use Riclep\Storyblok\Block;
use Riclep\StoryblokTypography\Traits\AppliesTypography;
use PHP_Typography\Settings as TypographySettings;

class TypoKitten extends Block
{
    use AppliesTypography;

    private $applyTypography = ['cats_name', 'biography'];

    // called after fields have been processed but before the trait is initialised
    public function fieldsProcessed() {
        $settings = new TypographySettings();
        $settings->set_classes_to_ignore('.whiskers');
        $settings->set_hyphenation(true);
        $settings->set_smart_quotes(false);

        $this->setTypographySettings($settings);
    }
}

PHP-Typography supports a range of enhancements and features including:

• 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.

{info} To discover all the possible options check out the PHP-Typography package.