Avstavning med mjukt bindestreck på webben

Då och då blir jag vittne till olika former av frustration över felaktiga, eller obefintliga, avstavningar i långa svenska ord på webben. Jag uppmärksammar då om att det finns ett sätt i HTML att infoga det som på engelska kallas "soft hyphen", ett mjukt bindestreck. Om ordet kan avstavas där man sätter ett mjukt bindestreck så gör webbläsaren det. Och det här är förstås till stor hjälp när man jobbar med responsiv bredd på sina webbsidor. Det går helt enkelt till så att man skriver teckenkombinationen "­" där man vill ha ett mjukt bindestreck.

Bokstäverna "shy" står alltså för soft hyphen.

Avstavning innebär att dela upp ett långt ord i i två (ibland fler) delar vid radbrytning. Det sker i slutet av en textrad för att textradernas längd inte ska skilja för mycket. Om ett ord inte avstavas kan det på webben också bli så att hela sidan blir bredare, då ordet fortsätter förbi radlängden när endast det ordet får plats.

Självklart finns det också regler för hur ord bör avstavas som du ska följa. Och bindestreck kan också heta avstavningstecken eller divis, om man är på det humöret.

Så här gör du

När du har ett långt ord, skriv "­" där du vill att ett ord ska kunna avstavas. Jag demonstrerar här med ett långt ord:

Du kan prova att ändra bredden på sidan, eller ändra storlek på texten, för att se hur avstavningen flyttas beroende av när raden tar slut. När jag skriver det här ordet i HTML-koden så ser det ursprungligen ut så här:

spe­cial­ist­sjuk­skö­ter­ske­ut­bild­ning­ar­na

Notera att det alltså är endast när ordet behöver avstavas som ett bindestreck syns. Det här är också ett extremt exempel för att vara övertydlig.

När det inte funkar

Om du arbetar i ett publiceringsverktyg (CMS) så beror det på hur det är byggt om den här tekniken funkar. Du kan prova att skriva "­" rakt in i rubriker och brödtext och se vad som händer.

En av tre sker händer sannolikt:

1. Avstavning fungerar som det ska och som du angett.
2. Teckenkombinationen "­" skrivs ut så att det syns för läsaren, och ingen avstavning sker, vilket förstås blir väldigt förvirrande.
3. Teckenkombinationen skrivs inte ut, men avstavningen fungerar inte heller.

Om det är så att det inte funkar, bör du höra av dig till den som äger eller förvaltar verktyget och be om att denna webbstandard följs. Ibland kan det vara så att man i just det verktyget infogar ett mjukt bindestreck på annat sätt.

Generell inställning för avstavning i CSS

Du som kodar stilmallar (CSS) bör också känna till att det finns ett CSS-attribut som heter hyphens. Värdet kan antingen vara

• off (inga avstavningar tillåts alls)
• manual (ord avstavas endast när ‐ eller ­ finns i koden, vid behov)
• auto (ord avstavas vid behov enligt webbläsarens inbyggda algoritm, om en sådan funktion finns). Den här inställningen innebär dock att svenska skrivregler inte alltid följs, och det funkar inte heller så bra i alla webbläsare - se nedan.

Stödet dåligt för automatisk avstavning

Visst låter det fantastiskt med automatisering. Tyvärr är det här en egenskap som tycks ta lång tid att få stöd i alla webbläsare. Just nu är stödet som bäst på Mac/iPhone och Android, men nästan obefintligt på Windows. Mellan webbläsare är det lika illa, där det bara delvis har stöd i även de mest populära webbläsarna.

Absolut så gäller det först att sätta rätt språk på webbdokumentet, med lang-attributet. Däremot så är den automatiserade avstavningen generellt dåligt testad givet det dåliga stödet, så det finns inga garantier för hur bra avstavningen utförs, om det ens händer.

Givet att det fortfarande är experimentellt så används automatisk avstavning alltså på egen risk. Men vill du ändå ha tips på hur du kan aktivera det delvisa stödet på ett bra sätt så är detta en användbar artikel: A look at CSS hyphenation in 2019.

Jag hoppas jag ändå kunnat bidra till en gnutta minskad frustration när orden i rubrikerna blir för långa för kolumnens bredd. Ett mjukt bindestreck är ofta räddningen. 😊