Astro Typograf Integration

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

Works with Astro v6 (tested on 6.1.4).

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.