Как да зададете обоснован текст с CSS

Използване на CSS Text-Align собственост за обосновка на текст

Едно от свойствата на типографията на даден уебсайт, която може да изберете да коригирате по време на развитието на даден сайт, е как текстът на сайта е оправдан. По подразбиране текстът на уебсайта е оправдан в ляво и много сайтове оставят текста си. Единствените други опции са правилно оправдани, които никой не използва на уебсайтовете, тъй като това ще направи текста по същество невъзможен за четене онлайн или това, което е известно като напълно оправдано.

Оправданият текст е блок от текст, който се подравнява както на лявата, така и на дясната страна, а не само на една от тези страни (което прави оправданието "ляво" и "дясно"). Двойно оправданият ефект се постига чрез коригиране на думите и буквите във всеки ред текст, за да се гарантира, че всеки ред е с еднаква дължина. Този ефект се нарича пълно оправдание . Оправдавате текста в CSS, като използвате свойството text-align .

Как функционира обосновката?

Причината, поради която често виждате неравен ръб от дясната страна на блок от текстове, е, че всеки ред от текста няма същата дължина. Някои редове имат повече думи или по-дълги думи, докато други имат по-малко или по-кратки думи. За да се обоснове този блок от текстове, трябва да се добавят допълнителни интервали към някои линии, за да се изравнят всички линии и да се направят последователни.

Всеки създател на уеб браузър има собствен алгоритъм за прилагане на допълнителни пространства в рамките на една линия. Браузърите разглеждат дължината на думата, сривовете и други фактори, за да определят къде да се поставят пространствата.

В резултат на това оправданият текст може да не изглежда идентичен от един браузър до друг. Това е добре, тъй като никой посетител на сайта няма да скочи от един браузър в друг, само за да сравни дължината на линията на сайта Ви. Бъдете сигурни обаче, че основната поддръжка на браузъра е добра за оправдаване на текста с CSS.

Как да обосновете текста

Оправдаването на текст с CSS изисква раздел от текста, който да се обоснове.

Обикновено това се прави с параграфи от текст, тъй като големи блокове от текстов контекст, които обхващат няколко реда, ще бъдат маркирани с маркери за параграфи.

След като имате блок от текстове, които оправдават, това е просто въпрос на задаване на стил, който да е оправдан с CSS текст-align alignment.

текст-подравняване: justify;

Трябва да приложите това правило за CSS на подходящ селектор, за да получите блока на текста, за да го направите по предназначение.

Кога да обосновете текста

Много хора харесват вида на оправдания текст от гледна точка на дизайна, до голяма степен защото създават много последователен, измерен вид, но има недостатъци за напълно оправдателен текст на уеб страница.

Първо, оправданият текст може да бъде трудно да се чете. Това е така, защото когато оправдавате текст, понякога може да се добави много допълнително пространство между някои думи на линията. Тези непоследователни пропуски могат да направят текста по-труден за разчитане. Това е особено важно на уеб страници, които вече могат да се четат трудно поради осветление, разделителна способност или друго хардуерно качество. Добавянето на необичайни интервали в текста може да доведе до още по-лоша ситуация.

В допълнение към проблемите с четливостта празните пространства понякога се подреждат един към друг, за да създават "реки" на бяло пространство в средата на текста.

Тези големи празнини на бялото пространство наистина могат да направят неловко показване. Освен това, при изключително кратки редове, обосновката може да доведе до линии, които съдържат една дума с допълнителни интервали между самите букви.

Кога трябва да използвате обосновка на текста? Най-доброто време за оправдаване на текста се получава, когато линиите са дълги и размерът на шрифта е малък (нещо, което е трудно да се осигури на отзивчиви уеб сайтове, където дължината на линиите се променя на базата на размера на екрана). Няма твърд и бърз номер за дължината на линията или размера на текста, трябва да използвате най-добрата си преценка.

След като приложите стила на текста, за да обосновете текста, тествайте го, за да сте сигурни, че текстът няма реки с бяло пространство - и се уверете, че го тествате в различни размери.

Най-лесният начин да направите това е да го видите с присвити очи. Реките се открояват като бели петна в иначе сив блок от текст. Ако видите реки, трябва да направите промени в размера на текста или в ширината на текстовия блок, за да се отървете от тези грозни реки.

Използвайте оправдание само след като сте го сравнили с левия текст, както се вижда в тази статия. Правиш като последователността на пълното оправдание, но стандартният текст, описан в ляво, обикновено е по-разбираем. В крайна сметка трябва да обосновете текста, защото сте избрали да оправдаете текста за целите на дизайна и сте потвърдили, че сайтът ви е лесен за четене.