# 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.

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

```css
h2 {
  hyphens: auto;
}
```

[Läs mer på MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)

## JavaScript

Vill man ha mer kontroll kan man använda biblioteket [hypher](https://www.npmjs.com/package/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](https://github.com/bramstein/hyphenation-patterns/tree/master/patterns).

### Exempel: Bara svenska

```sh
npm i hypher hyphenation.sv
```

**hyphenate.js**

```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**

```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

```sh
npm i hypher hyphenation.sv hyphenation.en-gb
```

**hyphenate.js**

```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**

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