Text-decoration, eller hur kunde texten bli så snygg?
I alla de produktområden jag har arbetat med som frontendutvecklare har vi fokuserat mycket på design av layout, knappar och andra visuella komponenter men sällan har huvudfokus legat på designen av själva texten.
Liksom världen av javascript så utvecklas CSS i snabb takt, men den får till skillnad från sin kusin inte lika mycket uppmärksamhet. Det händer dock en hel del även här, inte minst med variabla fonter som öppnar upp för andra möjligheter. En ny upptäckt för mig är att vi inte heller ska underskatta vad text-decorations kan göra för helheten. I CSS har vi länge kunnat göra text med linjer under, men det finns mer än så vi kan göra för att få dessa linjer att bli mer intressanta.
Nyfiken som jag är började jag därför experimentera för att undersöka vad vi kan och inte kan göra med text-decorations. Några funktioner som double-line, wavy-line och att kunna skippa linje vid vissa ord ser du nedan. Känner du igen dem? Dessa har vi haft länge och har bra browserstöd för.
Men mycket vill ha mer. Tycker du som jag att det alltid är kul med fler möjligheter för färg och form? Då kan vi tillsammans glädjas åt att vi i år har fått tre nya funktioner för text-decorations. Dessa funktioner låter oss designa med fler möjligheter att styra linjernas utseende och placering.
Offset - Möjligheten att bestämma hur långt från texten linjen ska ligga. Helt klart ett lyft för läsbarheten.
Thickness - Hur tjock vill du att linjen ska vara. Bra funktion om du använder dig av en ljusare färg som behöver bli mer synlig.
Ink - Möjlighet att få linjen att gå "igenom" bokstäver som y och p stället för som tidigare ett mellanrum när bokstäver går under raden.
Jag kan helt klart konstatera att det finns mer att göra än jag visste om. Efter det här experimentet blir jag sugen på att bita tag i de texter och länkar vi har på squeed.com. Kanske blir ett av nyårslöftena för 2020, vem vet. :)
Bäst browserstöd för de sistnämnda hittar du än så länge i Safari och Firefox. Men det finns alldeles ypperlig fallback för Chrome, IE och Edge så tveka inte att experimentera för att se om du kan lyfta helheten till en ny nivå.
För kodexempel på alla olika varianter eller för att testa och fördjupa dig mer hittar du alla mina exempel på codepen.