JoliTypo

https://github.com/jolicode/jolitypo
Admin
JoliTypo is a PHP library that fixes microtypography in HTML and text, handling smart quotes,...
Tokens:21,525
Snippets:158
Trust Score:10
License:MIT
Update:15 hours ago
Show doc for...
Tokens:
Raw
### Serve the demo locally with castor website:serve

Source: https://github.com/jolicode/jolitypo/blob/main/website/README.md

Starts a local server to test the built demo after running website:wasm:build.

```bash
castor website:serve
```

--------------------------------

### Installation via Composer

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Installs JoliTypo using Composer. Requires PHP 8.4 or higher with dom, libxml, and mbstring extensions; intl is optional but recommended.

```bash
composer require jolicode/jolitypo
```

--------------------------------

### Build the WebAssembly demo with castor website:wasm:build

Source: https://github.com/jolicode/jolitypo/blob/main/website/README.md

Installs dependencies and builds PHP as WebAssembly using lyrixx/php-wasm-builder (requires Docker), embedding src/ and vendor/ as /app in public/build/. Also downloads the JoliCode footer to public/joli-footer.html; run again after library changes to re-run only the last build step.

```bash
castor website:wasm:build
```

--------------------------------

### SmartQuotes with CurlyQuote fixer example

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Shows how to use SmartQuotes fixer before CurlyQuote to correctly handle quotes and apostrophes. Must be placed before CurlyQuote to avoid misinterpreting closing single quotes as apostrophes. Output demonstrates correct smart quotes.

```php
$fixer = new Fixer(['SmartQuotes', 'CurlyQuote']);
$fixer->setLocale('en_GB');
echo $fixer->fix('<p>"This \'magic\' piece of code fixes quotes and apostrophes, doesn\'t it?"</p>');
// <p>“This ‘magic’ piece of code fixes quotes and apostrophes, doesn’t it?”</p>
```

--------------------------------

### en_GB Locale Fixer Configuration

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Configures a Fixer with a set of rules for the en_GB locale. Use this as a starting point for English (Great Britain) typography fixes.

```php
$fixer = new Fixer(['UnicodeNormalization', 'Ellipsis', 'Dimension', 'Unit', 'Dash', 'SmartQuotes', 'NoSpaceBeforeComma', 'Emoji', 'CurlyQuote', 'Hyphen', 'Trademark']);
$fixer->setLocale('en_GB');
```

--------------------------------

### fixString() for non-HTML content

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Uses the fixString() method to fix plain text (non-HTML) content. The example shows the input and the expected output in a comment.

```php
use JoliTypo\Fixer;

$fixer = new Fixer(["Trademark", "SmartQuotes"]);
$fixedContent = $fixer->fixString('Here is a "protip(c)"!'); // Here is a “protip©”!
```

--------------------------------

### Check the WebAssembly build with castor website:wasm:check

Source: https://github.com/jolicode/jolitypo/blob/main/website/README.md

Runs tests/page.test.mjs to verify the PHP build boots with its version and extensions, and tests public/js/php.js as loaded by the page. No browser needed; used in CI on pull requests and before deployment.

```bash
castor website:wasm:check
```

--------------------------------

### Run smoke test with castor website:smoke

Source: https://github.com/jolicode/jolitypo/blob/main/website/README.md

Uses headless Chrome to load the demo, submit the form, and check the result. Requires Node 22+ and Chrome/Chromium; set CHROME to point to another binary if needed.

```bash
castor website:smoke
```

--------------------------------

### Define Your Own Fixer

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Shows how to add custom fixers by FQN or instance. Implement JoliTypo\FixerInterface and pass the class name or an instance to the Fixer constructor.

```php
// by FQN
$fixer = new Fixer([
    'Ellipsis', 
    'Acme\\YourOwn\\TypoFixer'
]);
$fixedContent = $fixer->fix("<p>Content fixed by the 2 fixers.</p>");

// or instances, or both
$fixer = new Fixer([
    'Ellipsis', 
    'Acme\\YourOwn\\TypoFixer', 
    new Acme\\YourOwn\\PonyFixer("Some parameter")
]);
$fixedContent = $fixer->fix("<p>Content fixed by the 3 fixers.</p>");
```

--------------------------------

### Define fixers presets in joli_typo.yaml

Source: https://github.com/jolicode/jolitypo/blob/main/src/JoliTypo/Bridge/Symfony/README.md

Configure presets for French and English with specific fixers and locales. Place in config/packages/joli_typo.yaml or app/config/config.yml.

```yaml
joli_typo:
    presets:
        fr:
            fixers: [ Ellipsis, Dimension, Dash, SmartQuotes, FrenchNoBreakSpace, CurlyQuote, Trademark ]
            locale: fr_FR
        en:
            fixers: [ Ellipsis, Dimension, Dash, SmartQuotes, CurlyQuote, Trademark ]
            locale: en_GB
```

--------------------------------

### Configure Protected Tags

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Sets a list of HTML tags that the DOM parser must avoid; content inside those tags will not be fixed.

```php
$fixer        = new Fixer(['Ellipsis']);
$fixer->setProtectedTags(['pre', 'a']);
$fixedContent = $fixer->fix("<p>Fixed...</p> <pre>Not fixed...</pre> <p>Fixed... <a>Not Fixed...</a>.</p>");
```

--------------------------------

### Quick usage with SmartQuotes and SpaceBeforePunctuation (fr_FR)

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Configures the Fixer with a locale and fixes an HTML fragment. The locale is set to 'fr_FR' and the fixer applies SmartQuotes and SpaceBeforePunctuation.

```php
use JoliTypo\Fixer;

$fixer = new Fixer(['SmartQuotes', 'SpaceBeforePunctuation']);
$fixer->setLocale('fr_FR');

$fixedContent = $fixer->fix('<p>Je suis "très content" de t\'avoir invité sur <a href="http://jolicode.com/">Jolicode.com</a> !</p>');
```

--------------------------------

### de_DE Locale Fixer Configuration

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Configures a Fixer with rules for the de_DE locale, based on Typefacts and Wikipedia references.

```php
$fixer = new Fixer(['UnicodeNormalization', 'Ellipsis', 'Dimension', 'Unit', 'Dash', 'SmartQuotes', 'NoSpaceBeforeComma', 'Emoji', 'CurlyQuote', 'Hyphen', 'Trademark']  );
$fixer->setLocale('de_DE');
```

--------------------------------

### Hyphen fixer with custom options

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Configure the Hyphen fixer with custom hyphenation options by passing an instance instead of its name. Requires a locale to be set (defaults to en_GB). Options leftMin, rightMin, and wordMin control hyphenation behavior.

```php
use JoliTypo\Fixer;
use JoliTypo\Fixer\Hyphen;

$fixer = new Fixer(['Ellipsis', new Hyphen('fr_FR', leftMin: 3, rightMin: 3, wordMin: 8)]);
```

--------------------------------

### fr_FR Locale Fixer Configuration

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Configures a Fixer with rules for the fr_FR locale, following the 'Abrégé du code typographique à l'usage de la presse' (ISBN: 9782351130667). Includes SpaceBeforePunctuation rule.

```php
$fixer = new Fixer(['UnicodeNormalization', 'Ellipsis', 'Dimension', 'Unit', 'Dash', 'SmartQuotes', 'SpaceBeforePunctuation', 'NoSpaceBeforeComma', 'Emoji', 'CurlyQuote', 'Hyphen', 'Trademark']);
$fixer->setLocale('fr_FR');
```

--------------------------------

### Custom quotation marks with SmartQuotes fixer

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Demonstrates setting custom quotation marks for German locale using setOpening(), setClosing(), setNestedOpening(), and setNestedClosing(). Note that calling setLocale() on the Fixer resets quotation marks to defaults.

```php
use JoliTypo\Fixer;

$smartQuotes = new Fixer\SmartQuotes('de_DE');
$smartQuotes->setOpening('»');
$smartQuotes->setClosing('«');
$smartQuotes->setNestedOpening('›');
$smartQuotes->setNestedClosing('‹');

$fixer = new Fixer(['Ellipsis', 'Dash', $smartQuotes, 'CurlyQuote']);
echo $fixer->fix('<p>And this is an "example with another \'single quote\' inside".</p>');
// <p>And this is an »example with another ›single quote‹ inside«.</p>
```

--------------------------------

### Basic Fixer usage with Ellipsis, Dash, SmartQuotes, CurlyQuote, Hyphen

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Creates a Fixer with a list of fixers and applies them to an HTML fragment. The output is plain UTF-8, not HTML entities; the Hyphen fixer inserts a soft hyphen (invisible character) as shown in the output.

```php
use JoliTypo\Fixer;

// Create a Fixer, specify the fixes
$fixer = new Fixer(['Ellipsis', 'Dash', 'SmartQuotes', 'CurlyQuote', 'Hyphen']);

// Get HTML content with correct microtypography
$fixedContent = $fixer->fix(
    '<p>"Tell me Mr. Anderson... what good is a phone call... if you\'re unable to speak?" -- Agent Smith, <em>Matrix</em>.</p>'
);
```

```html
<p>“Tell me Mr. Anderson… what good is a phone call… if you’re unable to speak?”—Agent Smith, <em>Matrix</em>.</p>
```

--------------------------------

### Register JoliTypoBundle in kernel

Source: https://github.com/jolicode/jolitypo/blob/main/src/JoliTypo/Bridge/Symfony/README.md

Register the bundle manually when not using Symfony Flex. Add this line to your kernel's registerBundles method.

```php
  new JoliTypo\Bridge\Symfony\JoliTypoBundle(),
```

--------------------------------

### fr_CA Locale Fixer Configuration

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Configures a Fixer with rules for the fr_CA locale. Similar to fr_FR but without mandatory space before punctuation.

```php
$fixer = new Fixer(['UnicodeNormalization', 'Ellipsis', 'Dimension', 'Unit', 'Dash', 'SmartQuotes', 'NoSpaceBeforeComma', 'Emoji', 'CurlyQuote', 'Hyphen', 'Trademark']);
$fixer->setLocale('fr_CA');
```

--------------------------------

### Default Fixer Usage

Source: https://github.com/jolicode/jolitypo/blob/main/README.md

Shows basic usage of the Fixer: creating with default rules, fixing content, changing rules, and setting locale for hyphenation and smart quotes.

```php
$fixer        = new Fixer(['Ellipsis', 'Dimension', 'Dash', 'SmartQuotes', 'CurlyQuote', 'Hyphen']);
$fixedContent = $fixer->fix("<p>Some user contributed HTML which does not use proper glyphs.</p>");

$fixer->setRules(['CurlyQuote']);
$fixedContent = $fixer->fix("<p>I'm only replacing single quotes.</p>");

$fixer->setRules(['Hyphen']);
$fixer->setLocale('en_GB'); // I tell which locale to use for Hyphenation and SmartQuotes
$fixedContent = $fixer->fix("<p>Very long words like Antidisestablishmentarianism.</p>");
```

--------------------------------

### Apply jolitypo to a whole block

Source: https://github.com/jolicode/jolitypo/blob/main/src/JoliTypo/Bridge/Symfony/README.md

Pass a whole block to jolitypo by using block('real_content') inside another block. This allows fixing dynamic content.

```twig
{% block content %}
    {{ jolitypo(block('real_content'), 'fr') | raw }}
{% endblock %}

{% block real_content %}
    <h2>My whole dynamic page</h2>
{% endblock %}
```

--------------------------------

### Fix large HTML with apply tag (Twig >= 2.8)

Source: https://github.com/jolicode/jolitypo/blob/main/src/JoliTypo/Bridge/Symfony/README.md

Use the apply tag to apply jolitypo to a block of HTML. This is for Twig version 2.8 and later.

```twig
{# Twig >= 2.8 #}
{% apply jolitypo('fr') %}
    <p>Je suis "très content" de t'avoir invité sur <a href="http://jolicode.com/">Jolicode.com</a> !</p>
    <p>12 x 6 = 72</p>
    <p>(r), (c), (TM)</p>
    <p>"Tell me Mr. Anderson... what good is a phone call... if you're unable to speak?" -- Agent Smith,<em>Matrix</em>.</p>
{% endapply %}
```

--------------------------------

### Use jolitypo Twig filter and function

Source: https://github.com/jolicode/jolitypo/blob/main/src/JoliTypo/Bridge/Symfony/README.md

Apply the jolitypo filter to fix HTML content. The function takes HTML and preset name; the filter can be used as a filter or function. Output is marked raw.

```twig
{{ jolitypo('<p>Hi folk!</p>', 'fr') | raw }}

{# or #}

{{ '<p>Hi folk!</p>' | jolitypo('fr') }}
```

--------------------------------

### Fix large HTML with filter tag (Twig < 2.8)

Source: https://github.com/jolicode/jolitypo/blob/main/src/JoliTypo/Bridge/Symfony/README.md

Use the filter tag to apply jolitypo to a block of HTML. This is for Twig versions before 2.8.

```twig
{# Twig < 2.8 #}
{% filter jolitypo('fr') %}
    <p>Je suis "très content" de t'avoir invité sur <a href="http://jolicode.com/">Jolicode.com</a> !</p>
    <p>12 x 6 = 72</p>
    <p>(r), (c), (TM)</p>
    <p>"Tell me Mr. Anderson... what good is a phone call... if you're unable to speak?" -- Agent Smith,<em>Matrix</em>.</p>
{% endfilter %}
```
Tokens:
Raw