Wrong Hyphen and a solution?

Plone Support Add-on Development
1

CSS hyphen is a good thing, until it isn’t. Some words are cut wrongly. If I search the web, the overall proposed solution is to put a span around the word with class=”nohyphen” or alike and style it to not break.

Now I would like to have a Javascript loading a list of words (like stored in a control panel in the registry or alike) and let it replace all this words with the word with a span around.

Question: Is there such an add-on for Volto already or do I need to write it?

2

Text block text can be modified by config.settings.slate.leafs

I modify text block text to show glossary tooltips in @rohberg/volto-slate-glossary with

  config.settings.slate.leafs = {
    text: ({ children }) => TextWithGlossaryTooltips({ text: children }),
  };

For modifying also text of teaser, accordion, title, etc, see our add-on.

1 Like
3

Off topic, but maybe of interest anyway.

  • If a field (for example the title) hyphens wrong, it is possible to add a softhypen in html-text and copy past the word into the title field.

So you want to have ‘someverylongword’ as part of the title (h1) of a page. You write the word in (TinyMCE or similar) editor and in html you change it to

 some­­very­­­­­­­long­­word

After that, you copy / paste it to the ‘Title’ field (as html).

In desktop apps, I prevent the hyphenation of words by putting a soft hypen in front of the word (after the word does basically the same).

 ­donthyphenthisword­­­

. For browsers, though, you might sometimes end up with the hypen actully showing. I am not sure if that can be preventet with adding a zero with space or something similar.

4

FYI

With GitHub - mnater/Hyphenopoly: Hyphenation for node and Polyfill for client-side hyphenation. The result is usually good enough. Hyphens are set correctly. So there is no need to undo the hyphenation.