Automatisk avstavning

CSS

En enkel variant är att sköta detta automatisk med CSS, dock är inte Svenska avstavningsregler 100% korrekta i alla browsers ännu och man har inte full kontroll över när avstavningen kickar igång, men det duger nog i de flesta fall.

<ul>
  <li>
    <h2>En lång rubrik med ordet realisationsvinstbeskattning</h2>
    <p>...</p>
  </li>
  <li>
    <h2>En annan rubrik</h2>
    <p>...</p>
  </li>
</ul>

h2 {
  hyphens: auto;
}

Bredd

Realisationsvinstbeskattning

Läs mer på MDN

JavaScript

Vill man ha mer kontroll kan man använda biblioteket hypher som fungerar på serversidan i Sitevision. Då behöver man själv läsa in avstavningregler för de språk man behöver stödja, här finns en lista över tillgängliga regler.

Exempel: Bara svenska

npm i hypher hyphenation.sv

hyphenate.js

import Hypher from 'hypher';
import sv from 'hyphenation.sv';

export default function hyphenate(text) {
  const hypher = new Hypher({ ...sv, leftmin: 5, rightmin: 5 });
  return hypher.hyphenateText(text);
}

index.js

import hyphenate from './api/hyphenate';
// returnerar 'Reali|sa|tions|vinst|be|skattning' där `|` är ett mjukt bindestreck.
const text = hyphenate('Realisationsvinstbeskattning');

Exempel: Svenska och engelska

npm i hypher hyphenation.sv hyphenation.en-gb

hyphenate.js

import app from '@sitevision/api/common/app';

import Hypher from 'hypher';
import sv from 'hyphenation.sv';
import en from 'hyphenation.en-gb';

const pattern = { en, sv }[app.locale];

export default function hyphenate(text) {
  if (pattern) {
    const hypher = new Hypher({ ...pattern, leftmin: 5, rightmin: 5 });
    return hypher.hyphenateText(text);
  }
  return text;
}

index.js

import hyphenate from './api/hyphenate';
// returnerar 'Reali|sa|tions|vinst|be|skattning' där `|` är ett mjukt bindestreck.
const text = hyphenate('Realisationsvinstbeskattning');