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

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

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

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

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

instagram viewer

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

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

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

След като имате блок текст, който да оправдае, просто е въпрос да зададете стила да бъде оправдан със свойството CSS style-align-style. Приложете това CSS правило към подходящ селектор, за да накарате блока текст да се изобрази по предназначение.

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

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

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

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

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

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

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