Skip to content

For my tutorials I rely on hyphenation by hand, e. g. to split long directory specifications in a neat way. Not every browser currently supports the CSS property hyphen and I also want more control over linebreaks.

The shy entity inserts a hyphen when breaking words, whereas the HTML element <wbr> does not. That makes the latter usable for strings where an added character could be misdirecting. I'm thinking about the mentioned above directories, but also longer URLs or email adresses.

  • shy: Pneumono­ultramicroscopic­silico­volcano­coniosis
  • <wbr>: typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Audio.html

With TYPO3 v8 a new rich text editor appeared. As it seems that there was no CKEditor plugin yet which enables these hyphens for editors, I took a closer look at this new RTE and its plugins. The result can now be found on GitHub.

Because the shy entity is completely invisible inside the rich text editor (not even a space is shown), the provided button adds a wrapping span element. With its styling this element shows an hyphen–highlighted blue–to the editor. lib.parseFunc_RTE can be used to fully remove this wrap in the frontend.

In general this plugin is more suitable for technically adept editors, who are capable of switching to the RTE's source code and remove the hyphens if needed.

The attached README also contains an instruction of how to integrate the plugin into the rte_ckeditor of TYPO3 v8.

Back to news list