I care way too much about how text looks.
If I see straight quotes instead of proper ones, random hyphens where a dash should be, no non-breaking spaces, slightly broken English next to slightly broken anything else — my brain immediately switches from «reading content» to «spot the typo game». And once you notice this stuff in a CMS, you start seeing it everywhere.
We use Directus a lot, and at some point it became obvious:
if the text is stored «ugly» in the admin panel, it will stay ugly everywhere it goes — website, emails, mobile app, PDFs, whatever. Nothing magically fixes it on the way.
So I stopped complaining and wrote a tiny extension.
What I built
The project is called directus-extension-typograf.
It’s a custom interface for Directus that behaves almost like a normal text field, but with one extra thing: a small «typography» button next to it.
You type your content.
You click the button.
The extension runs the value through Typograf using language-specific rules and puts the cleaned-up text back into the same field.
No magic behind the scenes, no hidden pipeline — you see exactly what changed before you hit «Save».
The interface supports different use cases:
- single-line input for titles,
- multiline textarea for longer copy,
- Markdown,
- WYSIWYG with HTML.
The important part: HTML/Markdown structure is preserved, only the text nodes are touched.
Why typography in the CMS, not on the frontend
We did try the usual «fix it on render» approach before.
Add a frontend helper, or a filter, or a nice higher-order component, pipe all visible text through it, and call it a day. On paper this sounds fine. In reality it turns into:
- one project uses the helper, another one doesn’t;
- emails and PDFs get the raw text;
- someone copies content straight from Directus into a presentation;
- the same field looks different depending on where it’s rendered.
Typography is deterministic. If you run it once at the source of truth — the CMS — you can stop thinking about it later. For editors the mental model is very simple:
«I wrote a paragraph, pressed the button, checked the result, saved it. This is now the final version.»
That’s the whole idea.
What the button actually fixes
Under the hood the extension relies on Typograf, which has rules for a bunch of languages (Russian, English, German and many others).
You can either hard-code a language in the field settings or let the interface pick it automatically from a language code field in your translations.
On the text level it does the things editors usually do manually:
- converts straight quotes to proper ones, depending on the language;
- turns hyphens into dashes where it makes sense;
- adds non-breaking spaces in places that often break layouts;
- removes extra spaces and other small garbage.
It’s not trying to be smart about meaning. It just removes the boring mechanical work that doesn’t really deserve human attention.
How it feels for editors
From an editor’s point of view, nothing dramatic changes.
They still see a familiar field, they still type the same way. The only difference is that, from time to time, they hit a small icon, watch the text tidy itself up, maybe tweak a word or two, and then save.
There is no «mysterious backend process» silently rewriting their content later. Everything happens in front of them, at the moment they’re already focused on that text.
For me that was important: the extension should not fight for control, it should just help.
If you want to try it
The code and more details live here:
👉 https://github.com/antonko/directus-extension-typograf
If you’re using Directus, work with multilingual content and get slightly annoyed by crooked quotes and weird spaces — you’ll probably enjoy having a «make it pretty» button right inside the CMS.
And if you run into odd edge cases, especially with Markdown or specific languages, I’m always happy to hear about them and improve the extension.
Top comments (0)