Typografi - textegenskaper

Förutom de rena teckenssnittsegenskaperna finns det även flera egenskaper som hanterar hur texten i sig ska utformas. Vi ska gå igenom några av dessa här.

text-align

Denna egenskap styr hur texten ska justeras. Har du använt en ordbehandlare så vet du säkert att man där kan välja olika typer av textjustering.

Vi ska titta på några av de vanligaste värden som denna egenskap kan sättas till.

left

Texten justeras mot vänster sidan av elementet.

right

Texten justeras mot höger sida av elementet.

center

Texten kommer att centreras mitt i elementet (enbart horisontellt).

justify

Texten kommer att läggas ut så att den fyller upp all yta. Vid behov läggs extra mellanrum till mellan ord, så att raden blir att fyllas ut helt och hållet. Sista raden kommer inte att justeras.

justify-all

Som ovan, men även den sista raden justeras.

start

Texten justeras mot det som anses vara starten på en rad. Vilket detta är beror på vilken direction som är satt för elementet.

end

Texten justeras mot det som anses vara slutet på en rad. Vilket detta är beror på vilken direction som är satt för elementet.

Ett exempel på några typer av textjustering

See the Pen PNpWjw by Patrik Grip-Jansson (@PGJ) on CodePen.

text-decoration

Med text-decoration kan man ange hur texten ska utsmyckas på olika sätt. Detta kan t.ex. innebära att vi sätter text som understruken. Det vanliga beteendet i de flesta webbläsare är att länkar är understrukna. Med hjälp av text-decoration kan vi ändra länkar utseende.

De vanligaste värdena för denna egenskap är som följer:

none

Ingen utsmyckning alls. Detta är defaultvärdet.

underline

Texten blir understruken.

overline

Det visas en linje ovanför texten.

line-through

Texten blir överstruken.

Ett exmpel på hur man kan använda denna egenskap:

See the Pen zqZwdK by Patrik Grip-Jansson (@PGJ) on CodePen.

Nästa aktivitet

Typografi - diverse egenskaper