31. März 2023

Nur bestimmte Wörter trennen

Die CSS-Silbentrennung (hyphens: auto) ist gleichzeitig Fluch & Segen. Einerseits ist es praktisch und vermeidet, gerade bei schmalen Textspalten, größere Lücken im Text, andererseits entstehen oft sehr merkwürdige Trennungen.

Inzwischen deaktiviere ich auf vielen Websites schon wieder die automatische Silbentrennung, da viele Kunden die Trennungen als störend empfinden. In manchen Situationen, besonders bei großen Headlines mit langen Wörtern, ist es aber unumgänglich, das ein oder andere Wort doch zu trennen.

Während man auf einer statischen Website einfach ein „­“ im Wort platzieren kann, geht das auf WordPress-Sites nicht so einfach. In diesem Fall setze ich folgendes folgendes CSS und JavaScript ein.

<style>
h1{ hyphens:manual; }
</style>

<script>
const wordsToReplace = [
  { word: 'Kartoffelsalat', replacement: 'Kartoffel&shy;salat' },
  { word: 'Blumenkohl', replacement: 'Blumen&shy;kohl' },
  { word: 'Nudelsalat', replacement: 'Nudel&shy;salat' },
];

const h1Elements = document.getElementsByTagName('h1');

for (let i = 0; i < h1Elements.length; i++) {
  const text = h1Elements[i].textContent;
  const replacedText = wordsToReplace.reduce((acc, cur) => {
  return acc.replace(new RegExp(cur.word, 'gi'), cur.replacement);
  }, text);
  h1Elements[i].textContent = replacedText;
}
</script>