Ako nastaviť zarovnaný text pomocou CSS

click fraud protection

Jednou z vlastností typografie webových stránok, ktorú si môžete zvoliť počas vývoja stránky, je spôsob odôvodnenia textu stránky. V predvolenom nastavení je text webových stránok zarovnaný doľava a to je počet stránok, ktoré opustili svoj text. Jediné ďalšie možnosti sú oprávnené správne, čo je zriedkavé, alebo úplne opodstatnené.

Zarovnaný text je blok textu, ktorý je zarovnaný na ľavú aj pravú stranu, na rozdiel od iba jednej z týchto strán (čo robí zarovnanie „doľava“ a „doprava“). Dvojnásobne odôvodnený efekt sa dosiahne úpravou medzier medzi písmenami a písmenami v každom riadku textu, aby sa zabezpečila rovnaká dĺžka každého riadku. Tento efekt sa nazýva úplné odôvodnenie. Text v CSS zarovnajte pomocou zarovnať text nehnuteľnosť.

Ako funguje zdôvodnenie?

Nerovný okraj na pravej strane bloku textu je často viditeľný v tom, že každý riadok textu nemá rovnakú dĺžku. Niektoré riadky majú viac slov alebo dlhšie slová, zatiaľ čo iné majú menej alebo kratšie slová. Na zdôvodnenie tohto bloku textu je potrebné do niektorých riadkov pridať ďalšie medzery, aby sa vyrovnali všetky riadky a boli konzistentné.

instagram viewer

Každý webový prehliadač má svoj vlastný algoritmus na použitie medzery navyše v riadku. Prehliadače určujú, kam vložiť medzery, dĺžku slova, delenie slov a ďalšie faktory. Výsledkom je, že zarovnaný text nemusí vyzerať v jednotlivých prehliadačoch rovnako. Môžete si však byť istí, že hlavná podpora prehľadávača je dobrá na zarovnanie textu pomocou CSS.

Ako zarovnať text

Zarovnanie textu pomocou CSS vyžaduje časť textu, ktorá sa má zarovnať. Spravidla použijete odseky textu, pretože veľké bloky textového kontextu, ktoré pokrývajú viac riadkov, budú označené značkami odsekov.

Potom, čo máte blok textu na zarovnanie, stačí nastaviť štýl na zarovnaný pomocou vlastnosti CSS text-align style. Použite toto pravidlo CSS na vhodný selektor, aby sa blok textu vykreslil podľa plánu.

Kedy text zarovnať

Mnoho ľudí má rád vzhľad zarovnaného textu z hľadiska dizajnu, a to predovšetkým preto, že vytvára veľmi konzistentný a odmeraný vzhľad, ale úplné zarovnanie textu na webovej stránke má svoje nevýhody.

Najskôr je ťažké prečítať zarovnaný text. Je to tak preto, lebo pri zarovnávaní textu môže byť medzi niektoré slová v riadku niekedy pridané veľa medzery. Tieto nekonzistentné medzery môžu sťažiť čítanie textu. To je obzvlášť dôležité na webových stránkach, ktoré už môžu byť ťažko čitateľné z dôvodu osvetlenia, rozlíšenia alebo inej hardvérovej kvality. Ak do textu pridáte neobvyklé medzery, môže sa zlá situácia ešte zhoršiť.

Okrem problémov s čitateľnosťou sa medzery niekedy zarovnávajú navzájom a vytvárajú „rieky“ bieleho priestoru v strede textu. Tieto veľké medzery bieleho priestoru môžu skutočne spôsobiť nepríjemné zobrazenie. Na mimoriadne krátkych riadkoch môže navyše zarovnanie spôsobiť riadky, ktoré obsahujú jedno slovo s medzierami medzi písmenami.

Kedy by ste teda mali použiť zarovnanie textu? Najlepší čas na zarovnanie textu je, keď sú riadky dlhé a veľkosť písma malá - čo je ťažké zabezpečiť na responzívnych webových stránkach, kde sa dĺžka riadkov mení na základe veľkostí obrazovky. Neexistuje tvrdé a rýchle číslo pre dĺžku riadku alebo veľkosť textu; musíte použiť svoj najlepší úsudok.

Po použití štýlu zarovnania textu na zarovnanie textu ho otestujte, aby ste sa uistili, že text nemá rieky bieleho priestoru - a vyskúšajte ho v rôznych veľkostiach. Najjednoduchší test nevyžaduje nič zložitejšie ako vlastné privreté oči. Rieky vynikajú ako škvrny bielej farby v inak sivom bloku textu. Ak vidíte rieky, mali by ste zmeniť veľkosť textu alebo šírku textového bloku, aby ste text preformátovali.

Zarovnanie použite až po porovnaní s textom zarovnaným doľava. Možno sa vám bude páčiť dôslednosť úplného odôvodnenia, ale štandardný text zarovnaný doľava je zvyčajne čitateľnejší. Nakoniec by ste mali text zarovnať, pretože ste sa rozhodli text zarovnať kvôli dizajnovým účelom a potvrdili ste, že váš web je aj naďalej ľahko čitateľný.

instagram story viewer