Så gör du mjuka avstavningar på webben
Långa ord ställer ofta till det på webben, särskilt i rubriker där de riskerar att sträcka sig utanför skärmen. Med ett osynligt avstavningstecken kan du själv styra var ordet får delas, utan att något syns i vanliga fall.
Osynligt avstavningstecken – vad är det?
Det mjuka avstavningstecknet talar om för webbläsaren var ett ord får delas om det inte ryms på raden.
I källkoden skrivs det som ­ och i publicerat läge är det osynligt, men om ordet behöver delas visas ett vanligt bindestreck (-) precis där tecknet ligger.
Hur använder jag tecknet?
Placera helst tecknet direkt i källkoden, till exempel: <h1>Ordleds­principen</h1>
I publicerat läge visas det som:
Ordledsprincipen
Om vyn är för smal så delas ordet upp till:
Ordleds-
principen
Jag kommer inte åt källkoden
Om du inte kan skriva in ­ i källkoden, som t.ex. i Optimizelys rubriksfält, kan du i stället klistra in det osynliga tecknet direkt i texten.
Du ser det inte, men du kan bekräfta att det finns genom att flytta markören med piltangenterna – tecknet tar upp ett osynligt steg mellan bokstäverna.
Det osynliga tecknet kan du få fram genom att:
- Kopiera någonstans ifrån, t.ex. kodblocket i denna artikel
- Windows: Använd ett numerisk tangentbord, håll Alt och skriv 0173
- Mac: Aktivera Unicode Hex Input i systeminställningar > tangentbord > inmatningskällor och aktivera att se det i menyraden. Byt till det, håll nere Option och skriv 00AD.
Kopiera det osynliga tecknet ­ – klicka på "COPY CODE"
Att tänka på
- Dela mellan ordled, inte mitt i ett ordled
- Använd max 2 mjuka avstavningar per ord, t.ex. Projekt­lednings­utbildning
- Använd inte på länkar eller knappar
En liten detalj med stor effekt
Mjuka avstavningar förbättrar både läsbarhet och layout, särskilt i rubriker och långa sammansatta ord.
Går det inte att avstava automatiskt?
Jo, det går... men resultatet blir sällan bra. Orden delas utan hänsyn till ordled, och läsbarheten blir därför lidande.
Det kan kännas lite omständligt att lägga in tecknet manuellt, men just nu är det det enda tillförlitliga sättet att få kontroll över hur orden bryts.
En dag kommer säkert en smartare lösning – men tills dess är det här det bästa alternativet.
Tips! Spara denna artikel till framtida tillfällen 💡
Då slipper du leta reda på tecknet – kopiera bara från kodblocket.
