Hyper-Hyper-Hyphenator: Hyphenation in TYPO3
Is everybody on the floor? – When Texts stumble
Long words, generous typography, different viewports: clever hyphenation can be a real challenge, especially in modern CMS projects. Without it, texts literally stumble – ‘fluttering lines’ appear and layouts quickly look ‘out of joint’.
Large, eye-catching headlines have been a design trend for years, driving editors crazy. Long German compound words – just think of the famous Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz (Beef Labelling Monitoring Task Transfer Act) – also make the issue relevant in continuous text. The problem often only becomes apparent in the mobile view.
Editors often notice too late what users are confronted with on different viewports. Manual intervention usually only makes the situation worse because individual special cases are solved. Such approaches are not scalable, are not sustainable – and take up time without improving the result.
I want to ask you something – What exactly does F7 Hyphenator do?
Clean hyphenation is not just a detail for perfectionists. It determines whether texts are easy to read everywhere, whether layouts are effective, and whether a website is perceived as professional overall.
With F7 Hyphenator, we have developed a TYPO3 extension that serves as a technical building block for modern UI designs: automatic, consistent, and editor-friendly.
The extension ensures that texts are separated at appropriate points – depending on the respective responsive viewport. Content remains untouched, and manual separators (soft hyphens) are not necessary. The result: calm text images, better readability and a consistent appearance across all breakpoints.
Editors write as usual – the system takes care of the typography.
We put some energy into this place! – The Solution for clean Hyphenation
Automatic Hyphenation
Texts are automatically hyphenated during rendering. Based on a set of rules stored for each language, all relevant words are marked with optional hyphens.
Project-specific Configuration
Our TYPO3 extension can be configured individually. This allows you to define which elements (e.g. headlines only) and at which thresholds (e.g. words longer than six characters) hyphenation may be applied.
Special cases: Brand names & Co.
Special cases can also be defined so that certain words, such as brand or product names, are not hyphenated or are only hyphenated in specific places.
Uniform appearance
Hyphenation is consistent throughout the entire project. Different spellings or manual workarounds are a thing of the past.
No Interference with existing Content
Our TYPO3 extension can be retrofitted into existing systems. This means that no editorial follow-up work is necessary; the extension can also be removed without leaving any traces.
Are you ready for the sound of Scooter F7 Hyphenator?
The F7 Hyphenator shows its strengths wherever visual requirements and text length come into conflict.
- Corporate websites with high standards of design and typography, especially for large headlines
- Editorial-style pages with a lot of continuous text.
Accessible websites, where good readability plays a central role
Why did we build this? – Why we released the Extension
The same pattern emerged in many projects: hyphenation was ignored or solved ‘poorly’ with a great deal of manual effort. Neither approach met our standards for quality, sustainability and clean systems.
Instead of individual solutions, we opted for a reusable, robust solution – and made it available to the TYPO3 community.
We need the bass drum! Interested?
The extension is publicly available and can be easily used in existing TYPO3 projects (version 12 and above).
If you are interested in the F7 Hyphenator, in using the extension in specific projects, or in our fundamental approach to topics such as UI consistency, accessibility, and developing sustainable solutions for users, editors, and technology, we welcome your questions and feedback.
Come on! Related Links
- What are these strange headlines? Background music for this blog post: https://www.youtube.com/watch?v=FFJIEK17b9M
- F7 Hyphenator in use on https://www.muellergroup.com/
- F7 Hyphenator
- Weitere Extensions von F7
Author
