En hel del webbredaktörer snubblar ofta över kvarglömda bindestreck i sina inklistrade texter på webben. De bindestrecken gjorde nytta när texten formgivits för tryck och de gav en snygg satsyta. På webben kan de bindestrecken hamna mitt i en rad och i stället ge ett slarvigt uttryck. Ibland kan bindestrecken också uppkommit då en redaktör försökt anpassa en text så att det skall se bra ut, men glömt att olika webbläsare presenterar texter olika. Ett välplacerat bindestreck i Internet Explorer, hamnar någon helt annanstans i Chrome. Därför är rådet att rensa alla texter på onödiga bindestreck och låta webbplatsen själv bestämma när det behövs en avstavning. Här visar vi hur du ordnar detta automatisk avstavning.
Automatisk avstavning på webben har varit möjlig sedan 2011 och stöds av flera webbläsare. Safari, Firefox och Internet Explorer 9 och uppåt stöder automatisk avstavning, liksom Chrome på Android och MacOS (fortfarande 2019 väntar vi dock fortfarande på stödet för Chrome för Windows och Linux).
Hur du aktiverar automatisk avstavning
Det krävs två steg för att aktivera automatisk avstavning. Det första är att ställa in språket du använder på din webbplats. Detta berättar för webbläsaren vilken ordlista som ska användas så att rätt avstavningsregler för valt språk används. Om du missar detta steg kommer ingen avstavning att ske. Det andra steget är att införa avstavningreglerna i din css-fil.
Steg 1. Ställ in språket
Du anger språkattributet för det språk som används på din webbplats. För svenska anger du och för engelska . Hela listan med landskoder hittar du på w3schools.com.
I WordPress anger du språket i admin under ”Inställningar/Allmänt”, leta upp popupen för ”Webbplatsspråk” eller ”Site Language”.
Så här ska det se ut i HTML-koden efteråt
<html lang="sv-SE">
Steg 2. Slå på automatisk avstavning
Nu har du ställt in ditt språk, du är redo att aktivera automatiska bindestreck i CSS. Den enkla lösningen är att ange…
-ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
Där prefixet riktar sig till Internet Explorer och Edge, prefixet är för Mozilla/Firefox och prefixet är för Safari.
Du har också möjlighet att styra avstavningsreglerna så att det passar dina textstorlekar och spaltbredder och så att inte för korta ord blir avstavade. Du använder då ett attribut som heter för detta. Tre värden anges där det första värdet motsvarar minsta antal tecken i ett ord som skall avstavas, det andra värdet anger minsta antal tecken innan ett bindestreck kan användas och det tredje värdet anger minsta antal tecken efter ett bindestreck.
hyphenate-limit-chars: 6 3 2;
Du kan också ange antalet rader efter varandra som avstavas. Allt för många bindestreck i höger spaltkant kan göra texten svårläst.
Du använder då .
hyphenate-limit-lines: 2;
Om du vill undvika att sista raden avstavas vilket kan ge ett fult slut på ett stycke, använd då .
hyphenate-limit-last: always;
Du kan till och med ange hur stor vityta du vill ha i spaltkanten och få en jämnare högerspalt med . Det bästa sättet att ställa värdet för avstavningszonen är med %, då slipper du göra speciella inställningar för olika skärmbredder.
hyphenate-limit-zone: 8%;
Här är ett exempel på hur det kan se ut för paragraph-taggen…
p {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-webkit-hyphenate-limit-zone: 8%;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: 6 3 3;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-moz-hyphenate-limit-zone: 8%;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 6 3 3;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
-ms-hyphenate-limit-zone: 8%;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}
Vi har infört automatisk avstavning på vår webbplats. Du ser det framför allt i brödtexten och i rubrikerna i sidospalten.