Prevent Widow Words

Add a prevent-widows attribute on any HTML tag to prevent widow words by adding a   between the last two words inside it.

emails/example.html
      <x-main>
  <div prevent-widows>
    <p>The quick brown fox jumped over the lazy dog.</p>
  </div>
</x-main>

    

The prevent-widows attribute will be removed and the HTML will be transformed to:

      <div>
  <p>The quick brown fox jumped over the lazy&nbsp;dog.</p>
</div>

    

Configuration

You may configure the transformer through the widowWords key in your config.js:

config.js
      export default {
  widowWords: {
    attributes: ['fix-widows'],
    // ...options for string-remove-widows
  },
}

    

attrName

Type: String
Default: ['prevent-widows', 'no-widows']

A list of attribute names that will trigger the transformer.

Only tags that have this attribute will be processed.

minWords

Type: Number
Default: 3

The minimum amount of words in a target string, in order to trigger the transformer.

You may set it to 0 or false to disable it.

createWidows

Type: Boolean
Default: false

Set this to true if you want the opposite of preventing widow words: it will replace all widow word nbsp; locations with a single space.

ignore

Type: Array<Record<string, string>>
Default: custom array

Start/end pairs of strings that will prevent the transformer from removing widow words inside of them. Maizzle will ignore the following common templating language start and end delimiters:

  • {{ }} - Handlebars, Liquid, Nunjucks, Twig, Jinja2, Mustache
  • {% %} - Liquid, Nunjucks, Twig, Jinja2
  • <%= %> - EJS, ERB
  • <% %> - EJS, ERB
  • {$ } - Smarty
  • <?php ?> - PHP
  • <?= ?> - PHP
  • #{ } - Pug

Any new pairs that you add will be merged on top of the default ones.

config.js
      export default {
  widowWords: {
    ignore: [
      {
        start: '[[',
        end: ']]'
      },
    ],
  },
}

    

Undo Widows

You can use the transformer the other way around, too.

config.js
      export default {
  widowWords: {
    createWidows: true,
    attributes: ['create-widows'],
  },
}

    

Input:

emails/example.html
      <x-main>
  <div create-widows>
    <p>The quick brown fox jumped over the lazy&nbsp;dog.</p>
  </div>
</x-main>

    

Output:

emails/example.html
      <div>
  <p>The quick brown fox jumped over the lazy dog.</p>
</div>

    

API

app.js
      import { preventWidows } from '@maizzle/framework'

const html = await preventWidows(
  '<p prevent-widows>the quick brown fox</p>',
  {
    minWords: 4,
  }
)

    
Copyright © 2025 Maizzle SRLBrand policy
Edit this page on GitHub