text-align: justify. Добро или зло?

Выравнивание текста по ширине в CSS

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

А так ли все плохо на самом деле?

Зачем это нужно

Примеры выравнивания текста по ширине (одновременно по левому и правому краю), часто можно увидеть в газетах и журналах. Оно используется для колонок небольшой ширины, чтобы избежать неприятного для глаз «зазубривания» текста с правой стороны строки. Такое выравнивание позволяет увеличить удобочитаемость и скорость чтения. Небольшая ширина колонки позволяет взгляду охватывать сразу всю строку, а не скользить постоянно слева-направо, что значительно снижает нагрузку на глаза читателя.

Вот парочка примеров для сравнения:

Пример выравнивания текста в колонках по левому краю

Пример выравнивания текста в колонках по ширине

Очевидно, что второй вариант более удобен для чтения, да и просто выглядит гармоничнее (есть дополнительная вертикальная линия привязки, что придает тексту более упорядоченный вид).

Как это работает в Web

Я согласен, что с выравниванием у браузеров есть определенные проблемы. Задав CSS-свойство text-align: justify для колонки текста небольшой ширины (скажем в 200-300 px), Вы можете увидеть нечто подобное:

Пример «проблемного» выравнивания текста по ширине

Появляются «проблемные» места в виде больших пробелов между словами, нарушается общий рисунок текста. Бывают примеры и хуже, когда, например, в строке всего два коротких слова и они выравниваются по разные стороны. Тоесть, в нешироких колонках, браузеры всегда пытаются растянуть отдельные слова на всю ширину строки, независимо от их количества и длины. И именно это представляет собой основную проблему для веб-дизайнеров.

Эх, нам бы здорово помогло какое-нибудь свойство в CSS-спецификации min-word-spacing или max-word-spacing, но это только мои фантазии и приходится использовать то, что есть.

Чтобы разобраться, когда же использование justify может быть вполне оправданным, предлагаю обратиться к небольшому приложению на JavaScript (помните, в прошлый раз мы тестировали anti-aliasing?), которое позволит нам проверить этот подход непосредственно в браузерах. Работает в Opera 9, IE 6-7, Mozilla Firefox 2-3.

justify-tester позволяет «на лету» менять ширину текстовой колонки, размер шрифта, его начертание, насыщенность и выравнивание.

Тестируем CSS-свойство text-align: justify в браузерах

Итак, тестируем.

Как и в предыдущем случае, надеюсь, скрипт поможет вам разобраться с проблемами и найти правильные решения. Тестировать нужно для каждого отдельного случая (дизайнерского решения, размера шрифта, ширины колонки и т.д.).

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

Небольшие итоги

Обнаружить «просветы» в тексте просто. Достаточно слегка отодвинуться от монитора и понизить резкость :) (прищуриться), чтобы видеть не отдельные буквы и слова, а весь блок целиком. И вы обязательно заметите «белые пятна». В таких местах направление взгляда срывается и начинает двигаться не слева-направо, как обычно, а вверх.

Для большинства гарнитур среднего размера (x-small, small, 11-12-13-14 px), ярко выраженные проблемы с выравниванием наблюдаются в колонках, шириной до 400 px (до 10 слов в строке). Они есть и дальше, но уже менее заметны, так как расстояния между словами более-менее равны. Следовательно, нежелательно использовать justify для строк шириной менее 400 px.

Если же, вам просто необходимо выровнять текст по ширине, а длина строк небольшая, попробуйте увеличить междустрочное расстояние (line-height), до значения, когда отступы между строками текста будут превышать расстояние больших пробелов между словами. Это позволит сохранить приемлемую читаемость текста.

Ну и еще это приложение можно использовать не по назначению, для демонстрации отдельным клиентам, которые хотят «резиновую» верстку, что текст на их сайте будет трудночитаемым при больших разрешениях мониторов (это я про «резиновую», а не адаптивую разметку).

Надеюсь, кому-нибудь пригодится в работе. Результатами своих наблюдений можете поделиться в комментах.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 11

  1. Денис Судилковский, 01.07.2008 в 19:45

    Да и не только «не красиво» выходит. Наш глаз при чтении больших объемов текста при переходе на следующую строку «цепляется» за неровный край (т.н. «рваный рукав») с правой стороны страницы. В другом случае (justify) правый край ровный словно под линейку, это жутко неудобно.

    з.ы. Статья отличная просто!

    Ответить

  2. Сергей М., 02.11.2008 в 20:59

    Ну я отписался — за линк спасибо, сюда подписан *^_^*

    Ответить

  3. @ Забытые возможности :first-letter | rotorweb.ru | Проблемы и решения в Web-дизайне, 22.02.2009 в 19:39

    [...] А если запастись временем, терпением, поэкспериментировать со шрифтами и фоновыми изображениями, то текст на страницах будет не только передавать информацию, но и создавать впечатление, что важно для любого дизайна. Список «безопасных» шрифтов можно посмотреть в приложении к этому посту. [...]

    Ответить

  4. Positive, 23.07.2009 в 14:37

    Как-то странно читать текст выровненный по ширине про неудобство такой верстки. О_о

    Ответить

  5. Унбиливбл, 01.08.2009 в 6:05

    2pos

    Однако в данном случае особенных убожеств не наблюдается.

    чтд

    Ответить

  6. Светлана, 01.10.2009 в 22:37

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

    Ответить

  7. FlameStorm, 13.10.2009 в 15:08

    За респектные материалы статей на этом сайте автору, и внимательным читателям приоткрою секрет: практически text-align:justify готов к бою при поддержке шестнадцатеричным Адом. В мелочах таки чуть подводит девятая опера, но они это исправят.

    Ответить

  8. Антон, 18.10.2009 в 20:22

    Неудачный пример полной выключки — данный блог.

    Пока браузеры не начнут поддерживать glyph-spaling (min- / max-), автоматический перенос слова, авто-трекинг для каждой отдельной строки, рано говорить о text-align:justify.

    Лучше пусть будет рваный правый край, чем рваная середина.

    Ответить

  9. Astir, 12.11.2009 в 20:52

    спасибо за пост

    Ответить

  10. @ trendbender, 09.09.2010 в 18:40

    jontangerine.com/log/2010...cons-and-unicode

    вот хороший пример выравнивания текста по ширине

    Ответить

Есть что сказать?