Jak nastavit oprávněný text pomocí CSS

Použití vlastnosti CSS Text-Align pro ospravedlnění textu

Jednou z vlastností typografie webové stránky, kterou si můžete zvolit během vývoje webu, je způsob, jakým je text webu oprávněný. Ve výchozím nastavení je text webových stránek vlevo a to je, jak mnoho stránek opouští text. Jediné další možnosti jsou oprávněné, které nikdo nepoužívá na webových stránkách, neboť by to způsobilo, že text je v podstatě nemožné přečíst on-line nebo co je známo jako plně odůvodněné.

Odůvodněný text je blok textu, který je zarovnán jak na levé, tak na pravé straně, na rozdíl od jedné z těchto stran (což je to, co "levé" a "pravé" ospravedlnění). Dvojitě odůvodněný účinek se provádí úpravou slovních a písmenných mezer v každém řádku textu, aby bylo zajištěno, že každý řádek má stejnou délku. Tento účinek se nazývá plné ospravedlnění . Odeznáváte text v CSS pomocí vlastnosti align-text .

Jak funguje odůvodnění?

Důvod, proč často vidíte nerovný okraj na pravé straně bloku textu, je, že každý řádek textu nemá stejnou délku. Některé řádky mají více slov nebo delší slova, zatímco ostatní mají méně nebo kratší slova. Chcete-li tento blok textu ospravedlnit, musí být na některé řádky přidány další mezery pro vyrovnání všech řádků a jejich soulad.

Každý výrobce webových prohlížečů má svůj vlastní algoritmus pro použití extra mezery v řádku. Prohlížeče se dívají na délku slova, dělení slov a další faktory, které určují, kde je třeba místo.

Výsledkem je, že odůvodněný text nemusí vypadat z jednoho prohlížeče na jiný. To je v pořádku, protože žádný návštěvník stránek nebude skočit z jednoho prohlížeče na jiný, jen aby porovnal, jak vypadají délky vašich stránek. Ujistěte se však, že hlavní podpora prohlížeče je vhodná pro zdůvodnění textu pomocí CSS.

Jak zdůvodnit text

Ospravedlnění textu pomocí CSS vyžaduje odůvodnění textu.

Obvykle se to provádí na odstavcích textu, protože velké bloky textového kontextu, které překlenují více řádků, budou označeny značkami odstavců.

Poté, co máte k dispozici blok textu, je to jen otázka nastavení stylu, který je odůvodněn vlastností stylu CSS text-align .

text-align: justify;

Budete muset použít toto pravidlo CSS na vhodný selektor, abyste získali blok textu tak, jak je určen.

Kdy k odůvodnění textu

Mnoho lidí má rád vzhled odůvodněného textu z hlediska návrhu, a to hlavně proto, že vytváří velmi konzistentní, měřený vzhled, ale na stránce obsahují plné ospravedlňující texty.

Za prvé, oprávněný text může být těžko čitelný. Je to proto, že když ospravedlňujete text, může být někdy přidáno spousta volného prostoru mezi některými slovy na řádku. Tyto nekonzistentní mezery mohou ztěžovat čtení textu. To je obzvláště důležité na webových stránkách, které jsou již obtížně čitelné z důvodu osvětlení, rozlišení nebo jiné hardwarové kvality. Přidání neobvyklých mezer do textu může způsobit špatnou situaci ještě horší.

Kromě problémů s čitelností se prázdné prostory někdy navzájem vyrovnají, aby vytvořily "řeky" bílého místa ve středu textu.

Tyto velké mezery bílého prostoru mohou skutečně znamenat pro nepříjemné zobrazení. Dále na extrémně krátkých řádcích může ospravedlnění způsobit čáry, které obsahují jedno slovo s dalšími mezerami mezi samotnými písmeny.

Kdy tedy použijete textové ospravedlnění? Nejlepší čas na ospravedlnění textu nastane, když jsou řádky dlouhé a velikost písma je malá (něco, co je těžké zajistit na citlivých webových stránkách, kde se délka čáry mění podle velikosti obrazovky). Neexistuje žádné tvrdé a rychlé číslo pro délku řádku nebo velikost textu, musíte použít svůj nejlepší úsudek.

Poté, co použijete textový styl pro ospravedlnění textu, otestujte jej, aby se ujistil, že text nemá řeky bílého místa - a ujistěte se, že ho vyzkoušíte v různých velikostech.

Nejjednodušší způsob, jak to udělat, je podívat se na něj s ostýchavými očima. Ř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, abyste se zbavili těch nevzhledných řek.

Použijte ospravedlnění pouze poté, co jste jej srovnali s levým označením textu, jak je vidět v tomto článku. Učiníte jako konzistence plného ospravedlnění, ale standardní levostranný text je obvykle čitelnější. Nakonec byste měli ospravedlnit text, protože jste se rozhodli ospravedlnit text pro účely návrhu a potvrdili, že vaše stránky zůstávají snadno čitelné.