Jak nastavit zarovnaný text pomocí CSS

click fraud protection

Jednou z vlastností typografie webu, kterou můžete během vývoje webu upravit, je způsob, jakým je text webu zarovnán. Ve výchozím nastavení je text webových stránek zarovnán doleva a to je počet stránek, které opustily svůj text. Jediné další možnosti jsou oprávněné správně, což je vzácné, nebo plně oprávněné.

Zarovnaný text je blok textu, který je zarovnán na levé i na pravé straně, na rozdíl od pouze jedné z těchto stran (což je to, co dělá „levé“ a „pravé“ odůvodnění). Dvojnásobně odůvodněného efektu je dosaženo úpravou mezer mezi slovy a písmeny v každém řádku textu, aby byla zajištěna stejná délka každého řádku. Tento efekt se nazývá úplné odůvodnění. Zarovnejte text v CSS pomocí zarovnání textu vlastnictví.

Jak funguje ospravedlnění?

Důvod, proč často vidíte nerovný okraj na pravé straně bloku textu, je ten, že každý řádek textu nemá stejnou délku. Některé řádky mají více slov nebo delší slova, zatímco jiné mají méně nebo kratší slova. Aby byl tento blok textu ospravedlněn, musí být k některým řádkům přidány mezery, aby se všechny řádky vyrovnaly a byly konzistentní.

instagram viewer

Každý webový prohlížeč má svůj vlastní algoritmus pro použití mezer navíc v řádku. Prohlížeče sledují délku slova, dělení slov a další faktory, aby určily, kam umístit mezery. Výsledkem je, že zarovnaný text nemusí vypadat identicky z jednoho prohlížeče do druhého. Můžete si však být jisti, že hlavní podpora prohlížeče je dobrá pro zarovnání textu pomocí CSS.

Jak zarovnat text

Zarovnání textu pomocí CSS vyžaduje k zarovnání část textu. Obvykle použijete odstavce textu, protože velké bloky textového kontextu, které se rozprostírají na více řádcích, budou označeny značkami odstavců.

Poté, co máte blok textu k zarovnání, je jen otázkou nastavení stylu na zarovnání pomocí vlastnosti stylu CSS pro zarovnání textu. Aplikujte toto pravidlo CSS na vhodný selektor, aby se blok textu vykreslil podle plánu.

Kdy zarovnat text

Mnoho lidí má rád vzhled oprávněného textu z hlediska designu, a to především proto, že vytváří velmi konzistentní, měřený vzhled, ale existují i ​​nevýhody úplného zarovnání textu na webové stránce.

Za prvé může být obtížné číst zarovnaný text. Je to proto, že když zarovnáte text, může být mezi některá slova na řádku někdy přidána spousta místa navíc. Tyto nekonzistentní mezery mohou znesnadnit čtení textu. To je obzvláště důležité na webových stránkách, které již mohou být obtížně čitelné kvůli osvětlení, rozlišení nebo jiné hardwarové kvalitě. Přidání neobvyklých mezer do textu může špatnou situaci ještě zhoršit.

Kromě problémů s čitelností se mezery někdy navzájem srovnávají a vytvářejí „řeky“ bílého prostoru uprostřed textu. Tyto velké mezery v prázdném prostoru mohou skutečně způsobit nepříjemné zobrazení. Na extrémně krátkých řádcích navíc může zarovnání způsobit řádky, které obsahují jedno slovo s mezerami navíc mezi samotnými písmeny.

Kdy byste tedy měli použít zarovnání textu? Nejlepší čas pro zarovnání textu je, když jsou řádky dlouhé a velikost písma je malá - něco, co je těžké zajistit na responzivních webech, kde se délky řádků mění na základě velikostí obrazovky. Neexistuje žádné pevné a rychlé číslo pro délku řádku nebo velikost textu; musíte použít svůj nejlepší úsudek.

Poté, co k zarovnání textu použijete styl zarovnání textu, otestujte jej, abyste se ujistili, že text nemá řeky bílého místa - a otestujte jej v různých velikostech. Nejjednodušší test nevyžaduje nic komplikovanějšího než vlastní oči. Řeky vystupují jako bílé skvrny v jinak šedém bloku textu. Pokud vidíte řeky, měli byste změnit velikost textu nebo šířku textového bloku, aby se text přeformátoval.

Zarovnání použijte až po porovnání s textem zarovnaným doleva. Možná se vám líbí konzistence úplného zarovnání, ale standardní text zarovnaný vlevo je obvykle čitelnější. Nakonec byste měli text zarovnat, protože jste se rozhodli text zarovnat pro účely návrhu a potvrdili jste, že váš web zůstává snadno čitelný.

instagram story viewer