Hvordan sette berettiget tekst med CSS

click fraud protection

En av egenskapene til typografien til et nettsted som du kan velge å justere under utvikling av et nettsted, er hvordan nettstedets tekst er berettiget. Nettstedstekst er som standard begrunnet, og dette er hvor mange nettsteder legger igjen teksten. De eneste andre alternativene er rettferdiggjort, noe som er sjeldent eller fullstendig begrunnet.

Begrunnet tekst er en tekstblokk som justeres på både venstre og høyre side, i motsetning til bare en av disse sidene (det er hva "venstre" og "høyre" begrunnelse gjør). Den dobbelt begrunnede effekten oppnås ved å justere ord- og bokstavene i hver tekstlinje for å sikre at hver linje er like lang. Denne effekten kalles full begrunnelse. Begrunn tekst i CSS ved å bruke tekstjustering eiendom.

Hvordan fungerer begrunnelse?

Årsaken til at du ofte ser en ujevn kant på høyre side av en tekstblokk, er at hver tekstlinje ikke er like lang. Noen linjer har flere ord eller lengre ord, mens andre har færre eller kortere ord. For å rettferdiggjøre den tekstblokken, må det legges til ekstra mellomrom i noen linjer for å utjevne alle linjene og gjøre dem konsistente.

instagram viewer

Hver nettleser har sin egen algoritme for å bruke ekstra mellomrom innenfor en linje. Nettleserne ser på ordlengde, orddeling og andre faktorer for å bestemme hvor mellomrommene skal plasseres. Som et resultat kan det hende at berettiget tekst ikke ser identisk ut fra en nettleser til den neste. Vær imidlertid trygg på at stor nettleserstøtte er bra for å rettferdiggjøre tekst med CSS.

Hvordan rettferdiggjøre tekst

Å rettferdiggjøre tekst med CSS krever en tekstdel for å rettferdiggjøre. Vanligvis vil du bruke avsnitt av tekst fordi store blokker av tekstkontekst som strekker seg over flere linjer, blir markert med avsnittstagger.

Etter at du har en tekstblokk for å rettferdiggjøre, er det bare å sette stilen til rettferdiggjort med CSS-tekstjusterende stilegenskap. Bruk denne CSS-regelen på en passende velger for å få tekstblokken til å gjengis som beregnet.

Når skal du rettferdiggjøre tekst

Mange liker utseendet på berettiget tekst fra et designperspektiv, hovedsakelig fordi det skaper et veldig konsistent, målt utseende, men det er ulemper med å fullstendig rettferdiggjøre tekst på en webside.

For det første kan begrunnet tekst være vanskelig å lese. Dette er fordi når du rettferdiggjør tekst, kan det ofte legges til mye ekstra mellomrom mellom noen ord på linjen. Disse inkonsekvente hullene kan gjøre teksten vanskeligere å lese. Dette er spesielt viktig på nettsider, som kan være vanskelig å lese allerede på grunn av belysning, oppløsning eller annen maskinvarekvalitet. Å legge til uvanlige mellomrom i teksten kan gjøre en dårlig situasjon enda verre.

I tillegg til lesbarhetsutfordringer, stiller de blanke mellomrommene noen ganger opp med hverandre for å skape "elver" med hvite mellomrom midt i teksten. De store hullene på det hvite rommet kan virkelig gi en vanskelig visning. I tillegg kan begrunnelse på ekstremt korte linjer føre til linjer som inneholder ett ord med ekstra mellomrom mellom bokstavene selv.

Så når skal du bruke tekstbegrunnelse? Den beste tiden å rettferdiggjøre tekst oppstår når linjene er lange og skriftstørrelsen er liten - noe som er vanskelig å sikre på responsive nettsteder der linjelengder endres basert på skjermstørrelser. Det er ikke noe hardt og raskt tall for lengden på linjen eller størrelsen på teksten; du må bruke ditt beste skjønn.

Når du har brukt tekstjusteringsstilen for å rettferdiggjøre tekst, kan du teste den for å sikre at teksten ikke har elver med hvitt mellomrom - og teste den i en rekke størrelser. Den enkleste testen krever ikke noe mer komplisert enn dine egne myste øyne. Elvene skiller seg ut som flekker av hvitt i en ellers grå tekstblokk. Hvis du ser elver, bør du gjøre endringer i tekststørrelsen eller bredden på tekstblokken for å gjenspeile teksten.

Bruk bare begrunnelse etter at du har sammenlignet den med venstrejustert tekst. Du liker kanskje konsistensen av full rettferdiggjørelse, men den standard venstrejusterte teksten er vanligvis mer lesbar. Til slutt bør du rettferdiggjøre tekst fordi du har valgt å rettferdiggjøre teksten for designformål og har bekreftet at nettstedet ditt fortsatt er lett å lese.

instagram story viewer