En av de första funktionerna som alla utvecklare lärde sig om när de fick grepp om ordbehandling var textjustering. Det lilla verktyget har varit avgörande för både professionella sättare och amatördesigners av flygblad. Det är ingen överraskning att CSS har stöd för textjustering när det kommer till webbdesign.
De textjustera egenskapen, tillsammans med en eller två andra, styr hur ett element justerar sin text horisontellt. Utöver grunderna implementerar webbläsare långsamt mer av specifikationerna, men fullt stöd varierar. Lär dig hur du justerar text och vilka funktioner de vanliga webbläsarna stöder idag.
Grunderna för CSS-textjusteringsegenskapen
Justering är en av de mest välkända typografitermerna. I samband med CSS, textjustera hänvisar till horisontell inriktning.
Horisontell textjustering gäller endast blockbehållare. Dessa är element i full bredd som stycken och div. Använda textjustera egenskap på ett inline-element som t.ex em kommer inte att ha någon effekt. Du kan också justera listobjekt och tabellceller:
Som standard, på ett språk från vänster till höger (mer om detta senare), justeras texten till vänster:
I CSS är detta samma sak som:
p { text-align: left; }
Eller:
p { text-align: start; }
Du kan använda andra värden för textjustera egenskap för att ändra horisontell inriktning. De vanligaste värdena är bekanta från ordbehandlingsappar:
text-align: left
text-align: center
text-align: right
Använd Justering för att justera vänster och höger kanter
Ett annat gemensamt värde för textjustera är rättfärdiga. Webbläsare lägger till utrymme till justerad text så att varje rad sträcker sig för att fylla det tillgängliga utrymmet:
När du motiverar text kan den sista raden vara knepig. Eftersom det kan vara väldigt kort (möjligen bara ett enda ord), kan det vara fult att placera det över hela bredden. Som standard kommer även justerad text att justera den sista raden till vänster.
Ibland kanske du vill ha en annan effekt. Webbläsarimplementationer kommer ikapp specen, men två tillvägagångssätt är möjliga.
De motivera-allt värde bör betyda att webbläsare behandlar den sista raden som alla andra och sträcker ut den till full bredd. Men i skrivande stund stöder ingen webbläsare detta värde. Du kan kolla caniuse för att se om de gör det när du läser den här artikeln.
En annan CSS-egenskap, text-justera-sist, är mer flexibel och har bättre stöd. Du kan behandla det mer eller mindre på samma sätt som textjustera, men det gäller bara den sista raden:
Webbläsarstöd för den här egenskapen är bättre, men inte perfekt. Återigen, kontrollera caniuse innan du använder den. Om en webbläsare inte känner igen den här egenskapen kommer den att ignorera den.
Textjustering och läsriktning
Du kanske arbetar med ett språk, som arabiska eller hebreiska, som läser från höger till vänster. CSS använder riktning egenskap för att specificera detta, till exempel:
direction: rtl;
Dessa språk justerar vanligtvis text till höger som standard.
Istället för att behöva specificera vänster/höger, det föredragna sättet att justera text använder värdena Start och slutet. Detta anger om texten ska radas upp i början av varje rad eller slutet. På språk från vänster till höger, Start är ekvivalent med vänster. På ett höger-till-vänster-språk börjar texten till höger och slutar till vänster.
Använder sig av Start eller slutet betyder att justeringen är konsekvent, oavsett textriktning.
Hur element ärver egenskapen för textjustering
Du bör vara medveten om att textjustera egendom ärver. Till exempel, om du ställer in den på kropp element, kommer det att gälla för varje element på sidan. Du kan naturligtvis åsidosätta det på vilket element som helst.
Använda egenskapen för textjustering för att styra layout
Du kan använda textjustera CSS-egenskap för att definiera hur webbläsare lägger ut text horisontellt. De vanligaste värdena är vänster, höger, Centrum, och rättfärdiga. Dessa är dock ganska enkla rättfärdiga introducerar viss komplexitet.
Du bör använda textjustering sparsamt. På skyltar och affischer kan centraljustering vara lämplig, men det kan göra längre textblock svåra att läsa. Motiveringen är vanligtvis mer läsbar när textraderna är längre. Att motivera korta kolumner med text kan skapa fula mellanrum.
De textjustera egenskapen är en av många CSS-egenskaper som ger användbar formatering och grundläggande positionering.
Om författaren
Bobby Jack (65 artiklar publicerade)
Bobby är en teknikentusiast som arbetat som mjukvaruutvecklare under de flesta av två decennier. Han brinner för spel, arbetar som chefredaktör på Switch Player Magazine och är fördjupad i alla aspekter av onlinepublicering och webbutveckling.
Mer från Bobby Jack
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
