Как установить оправданный текст с помощью CSS

Одним из свойств типографии веб-сайта, который вы можете настроить при разработке сайта, является обоснованность текста сайта. По умолчанию текст веб-сайта выравнивается по левому краю, и именно столько сайтов оставляют свой текст. Единственные другие варианты имеют правильное обоснование, которое никто не использует на веб-сайтах, так как это делает текст практически невозможным для чтения в Интернете, или то, что известно как полностью оправданное.

Оправданный текст — это блок текста, который выравнивается как с левой, так и с правой стороны, а не только с одной из этих сторон (что и делают «левые» и «правые» обоснования). Вдвойне оправданный эффект достигается путем корректировки пробелов в каждой строке текста, чтобы обеспечить одинаковую длину каждой строки. Этот эффект называется полным оправданием. Вы оправдываете текст в CSS, используя выравнивания текста свойство.

Как работает оправдание?

Причина, по которой вы часто видите неровный край с правой стороны блока текста, заключается в том, что каждая строка текста имеет разную длину. В некоторых строках больше или больше слов, а в других меньше или меньше слов. Чтобы оправдать этот блок текста, в некоторые строки необходимо добавить лишние пробелы, чтобы выровнять все строки и сделать их согласованными.

У каждого производителя веб-браузера есть свой алгоритм применения лишних пробелов в строке. Браузеры смотрят на длину слова, переносы и другие факторы, чтобы определить, где разместить пробелы. В результате выровненный текст может не выглядеть одинаково в разных браузерах. Это нормально, поскольку ни один посетитель сайта не будет переходить из одного браузера в другой, чтобы сравнить, как выглядят длины строк на вашем сайте! Будьте уверены, однако, что поддержка основных браузеров хороша для оправдания текста с помощью CSS.

Как оправдать текст

Обоснование текста с помощью CSS требует отрывка текста для обоснования. Как правило, это делается для абзацев текста, поскольку большие блоки текстового контекста, охватывающие несколько строк, будут помечены тегами абзаца.

После того, как у вас есть блок текста для выравнивания, нужно просто установить стиль для выравнивания с помощью свойства стиля CSS text-align.

Вам нужно будет применить это правило CSS к соответствующему селектору, чтобы блок текста отображался так, как задумано.

Когда оправдывать текст

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

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

В дополнение к проблемам с читабельностью, пробелы иногда выстраиваются в линию друг с другом, создавая «реки» пустого пространства в середине текста. Эти большие промежутки белого пространства могут действительно сделать неловкое отображение. Кроме того, на очень коротких строках выравнивание может вызвать строки, содержащие одно слово с дополнительными пробелами между самими буквами.

Итак, когда вы должны использовать текстовое обоснование? Наилучшее время для выравнивания текста возникает, когда строки длинные, а размер шрифта небольшой (что трудно обеспечить на адаптивных веб-сайтах, где длина строк изменяется в зависимости от размеров экрана). Нет точного и быстрого числа для длины строки или размера текста; Вы должны использовать свое лучшее суждение. 

После применения стиля выравнивания текста для выравнивания текста протестируйте его, чтобы убедиться, что в тексте нет рек пустого пространства, и убедитесь, что он протестирован с различными размерами. Самый простой способ сделать это — посмотреть на нее косыми глазами. Реки выделяются белыми пятнами в остальном сером блоке текста. Если вы видите реки, вы должны внести изменения в размер текста или ширину текстового блока, чтобы избавиться от этих неприглядных рек.

Используйте выравнивание только после того, как вы сравнили его с выровненным по левому краю текстом. Вам может понравиться последовательность полного выравнивания, но стандартный выровненный по левому краю текст обычно более читабелен. В конце концов, вы должны обосновать текст, потому что вы решили оправдать текст в целях дизайна и подтвердили, что ваш сайт остается легко читаемым.

Ссылка на основную публикацию