Typografi - textegenskaper

Från Webbling
Hoppa till: navigering, sök

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