Astro Typograf Integration

A small library that adds typography fixes using the typograf library to your Astro project.

Works with Astro v5 (tested on 5.13.5).

Setup

Using Astro CLI

npx astro add astro-typograf

Manual

Before you start using it, install the library.

npm install astro-typograf --save

Then put the integration in the Astro configuration file.

// astro.config.mjs
import { defineConfig } from 'astro/config'
import typograf from 'astro-typograf'

export default defineConfig({
  integrations: [
    typograf()
  ],
})

Additional options:

// astro.config.mjs
import { defineConfig } from 'astro/config'
import typograf from 'astro-typograf'

export default defineConfig({
  integrations: [
    typograf({
      selector: 'p, h1, h2, h3', // CSS selectors to apply Typograf
      typografOptions: { // Typograf constructor options
        locale: ['ru', 'en-US'],
        htmlEntity: { type: 'name' }
      },
      // Rule-specific settings passed to Typograf#setSetting
      // Equivalent to: tp.setSetting('common/nbsp/afterShortWord', 'lengthShortWord', 3)
      typografSettings: {
        'common/nbsp/afterShortWord': { lengthShortWord: 3 }
      }
    })
  ],
})

Compatibility

• Astro: v5.x (tested on 5.13.5)
• Node: 18+

If you need support for older Astro versions, use a 2.x release of this package.