Hur man ställer in motiverad text med CSS

click fraud protection

En av egenskaperna för en webbplats typografi som du kan välja att justera under webbplatsens utveckling är hur webbplatsens text är motiverad. Som standard lämnas webbplatstext motiverad och det är så många webbplatser som lämnar sin text. De enda andra alternativen är rätt motiverade, vilket är sällsynt eller helt motiverat.

Motiverad text är ett textblock som justeras på både vänster och höger sida, i motsats till bara en av dessa sidor (vilket är vad "vänster" och "höger" rättfärdigande gör). Den dubbelt motiverade effekten uppnås genom att justera ord- och bokstavsytorna i varje textrad för att säkerställa att varje rad har samma längd. Denna effekt kallas fullständig motivering. Motivera text i CSS med hjälp av textjustera fast egendom.

Hur fungerar rättfärdigande?

Anledningen till att du ofta ser en ojämn kant på höger sida av ett textblock är att varje textrad inte har samma längd. Vissa rader har fler ord eller längre ord medan andra har färre eller kortare ord. För att motivera detta textblock måste extra mellanslag läggas till i vissa rader för att jämna ut alla rader och göra dem konsekventa.

instagram viewer

Varje webbläsare har sin egen algoritm för att använda de extra utrymmena inom en rad. Webbläsarna tittar på ordlängd, bindestreck och andra faktorer för att avgöra var platserna ska placeras. Som ett resultat kanske motiverad text inte ser identisk ut från en webbläsare till en annan. Var dock säker på att större webbläsarstöd är bra för att motivera text med CSS.

Hur man rättfärdigar text

Att rättfärdiga text med CSS kräver att en textavsnitt motiveras. Vanligtvis använder du stycken text eftersom stora block av textkontext som sträcker sig över flera rader kommer att markeras med stycktaggar.

När du har ett block för att motivera är det bara att ställa in stilen motiverad med CSS textjustera stilegenskap. Tillämpa denna CSS-regel på en lämplig väljare för att få textblocket att återges som avsett.

När ska jag motivera text

Många gillar utseendet på motiverad text ur en designperspektiv, till stor del för att det skapar ett mycket konsekvent, uppmätt utseende, men det finns nackdelar med att helt motivera text på en webbsida.

För det första kan motiverad text vara svår att läsa. Detta beror på att när du motiverar text kan det ibland läggas till mycket extra utrymme mellan några ord på raden. Dessa inkonsekventa luckor kan göra texten svårare att läsa. Detta är särskilt viktigt på webbsidor, vilket kan vara svårt att läsa redan på grund av belysning, upplösning eller annan hårdvarukvalitet. Att lägga till ovanliga mellanslag i texten kan göra en dålig situation ännu värre.

Förutom läsbarhetsutmaningar stämmer de tomma utrymmen ibland upp med varandra för att skapa "floder" med vitt utrymme mitt i texten. De stora luckorna i vitt utrymme kan verkligen ge en besvärlig skärm. Dessutom kan motiveringen på extremt korta rader orsaka rader som innehåller ett ord med extra mellanslag mellan bokstäverna.

Så när ska du använda textjustering? Den bästa tiden att motivera text inträffar när raderna är långa och teckensnittsstorleken är liten - något som är svårt att säkerställa på lyhörda webbplatser där radlängder ändras baserat på skärmstorlekar. Det finns inget hårt och snabbt nummer för längden på raden eller storleken på texten. du måste använda ditt bästa omdöme.

När du har tillämpat textjusteringsstilen för att motivera text, testa den för att se till att texten inte har floder med vitt utrymme - och testa den i olika storlekar. Det enklaste testet kräver inget mer komplicerat än dina egna ögon. Floderna sticker ut som vita fläckar i ett annars grått textblock. Om du ser floder bör du göra ändringar i textstorleken eller bredden på textblocket för att återflöta texten.

Använd bara motivering efter att du har jämfört den med vänsterjusterad text. Du kanske gillar konsekvensen av fullständig motivering, men den vanliga vänsterjusterade texten är vanligtvis mer läsbar. I slutändan bör du motivera text eftersom du har valt att motivera texten för designändamål och har bekräftat att din webbplats är lätt att läsa.

instagram story viewer