Av-stav-ning på webben – våra bästa workarounds

Vad är avstavning?

När ett ord är långt och inte riktigt får plats mot slutet på raden, kan ordet delas och föras ner på nästa rad. Det kallas avstavning och är lika gammalt som det skrivna språket.

Avstavning i datorprogram

Ordbehandlingsprogram har fint stöd för avstavning, så även layoutprogram (eller program för desktop publishing, som det hette en gång i tiden).

Avstavning på webben

Förväntningarna är höga på webbläsare som många tror ska klara avstavningar utan problem. Det gör de inte.

Den tidiga webben hade långa rader och breda skärmar. Då fanns det inte något direkt behov av avstavning. Problemen kom när vi började titta på smala skärmar (telefoner) och placera text i smala kolumner. Standard­inställningen för HTML är att ord inte avstavas alls, vilket gör att ord hamnar utanför kanterna eller försvinner utanför skärmens bildyta.

Bindestreck

Det fungerar att skriva in ett vanligt bindestreck i ord för att de ska avstavas. Men bindestrecket blir då synligt oavsett om ordet behöver avstavas eller inte vilket inte är önskvärt. Innan de smarta telefonernas intåg gick det oftast att avstava med hårda bindestreck då det gick att avgöra var ord behövde avstavas. När webben blev responsiv fungerade detta inte längre eftersom antalet ord som får plats på en rad skiljer sig beroende på skärmens bredd.

Behovet av avstavning är stort

Många användare har behov av att förstora texten på sin skärm vilket ytterligare ökar kraven på avstavning. Enligt kraven på digital tillgänglighet ska det gå att förstora text och avstånd utan att funktionalitet försvinner eller att layouten "går sönder". WCAG-riktlinje 1.4.4 säger att det måste gå att öka till dubbel teckenstorlek och riktlinje 1.4.12 säger att det ska gå att öka avstånden mellan tecken, ord, rader och stycken till viss grad. Det finns även krav i standarden EN301549 som säger att digitala tjänster ska respektera användarens inställningar av exempelvis teckenstorlek.

Eftersom allt fler sektorer av samhället berörs av lagkrav på tillgänglighets­området är det alltså inte bara användarnas behov som gör att vi behöver bli bättre på avstavning på webben, utan även juridiken.

Detta löser man väl med lite CSS och HTML?

Word-break

Egenskapen word-break i CSS kan radbryta ord. Det är väl bra? Nej, inte särskilt. Ord bryts, men utan bindestreck. Dessutom bryts ord alltid mot slutet, helt utan tanke på avstavnings­regler.

Kodexempel word-break:

Nåväl. Det finns kanske andra metoder?

Hyphens

MDN Web Docs (Mozilla) skriver följande: "Egenskapen hyphens beskriver hur ord ska avstavas när text spänner över flera rader".

Det låter mycket lovande, men tyvärr är vi inte nära en bra lösning ännu. Inte för svenska i alla fall. För att automatisk avstavning ska fungera så måste webbläsaren ha information om alla avstavnings­regler för språket. Om det ska fungera automatiskt för alla språk så måste webbläsaren ha information om alla regler för alla språk som finns i världen. Det blir mycket information det! Med det sagt finns det inte stöd för alla språk ännu. För engelska fungerar det helt ok.

Kodexempel hyphens:

Mjuka bindestreck

Ett "mjukt bindestreck" är ett bindestreck som används och visas när det behövs, annars är det osynligt. Extremt fiffigt. På engelska heter det "soft hyphen", vilket förkortas "shy". I HTML kan mjuka bindestreck användas genom att skriva koden ­. Genom att använda denna kod kan webbläsaren själv avgöra om det är lämpligt att avstava texten eller ej.

Kodexempel "shy":

Hur löser vi avstavning då?

Eftersom automatisk avstavning inte fungerar i alla webbläsare ännu blir avstavning ett manuellt arbete. Om du är kunnig i HTML kan du som sagt skriva in ­ i koden. Men det blir snabbt ett omständligt arbete. Är du inte kunnig i HTML finns det risker. Trasig HTML kan ta sönder en sida.

Lösning 1: En knapp för "shy"

De flesta webbplatser är kopplade till ett CMS. En av anledningarna till att använda ett CMS är att redaktörer inte ska behöva skriva kod, utan att de kan skriva innehåll med en text-editor liknande hur du arbetar i ett ordbehandlings­program.

En lösning vi har tagit fram är en knapp för en sådan editor. Redaktören kan då trycka på knappen för att lägga in mjuka bindestreck i texten. Fördelen med detta är att det ligger redaktören nära till hands när de skriver texter och de slipper skriva krånglig kod. Det bör också finnas en knapp för att visa osynliga tecken som mjuka radbryt så att det går att se tecknen och radera dem.

Beroende på hur stor webbplatsen är, hur många redaktörer som jobbar med den och redaktörernas kunskapsnivå kan detta vara en bra lösning eller ej. Samma ord på olika sidor måste radbrytas om och om igen, det är kanske inte optimalt.

Lösning 2: Automatisk avstavning via särskild lista

En annan lösning vi har tagit fram är en lista i CMS:et där det går att skriva de ord som behöver avstavas. Det här kan vara en bra lösning för stora webbplatser med många redaktörer. En administratör eller huvudredaktör kan hantera denna lista och skriver in ord med mjuka radbryt. Redaktörerna som skriver innehåll behöver inte tänka på att avstava ord. Om orden finns med i listan avstavas de automatiskt när texten skrivs ut på webbsidan. Koden sköter att ­ skjuts in på rätt ställen.

En utmaning med denna lösning kan vara att det blir en del komplex kod för att hantera ersättningen av ord. Ersättningen hanterar inte ord som är snarlika eller böjningar utan alla varianter måste skrivas i listan. Det kan tänkas bli en lång lista med många ord och det kan vara svårt att hantera. Vidare kan det vara en utmaning att hålla reda på när nya ord behöver läggas till i listan.

Är det verkligen "lösningar"?

Den enda och riktiga lösningen är att alla webbläsare inkluderar alla språk och ordlistor, så att avstavningsregler finns tillgängliga direkt i browsern. Egentligen ska inte redaktörer behöva arbeta manuellt med detta. Men fram tills dess att webbläsarna "gör sitt jobb" ordentligt, arbetar vi fram dessa så kallade workarounds.

Hur gör du?

Har du stött på det här problemet på er webbplats? Och hur har du hittills gjort för att hantera det? Hör gärna av dig till oss om du har ett eget tips eller är intresserad av våra lösningar.