text-align: justify. Добро или зло?
Понедельник, 30 июня 2008
Выравнивание текста по ширине в 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 позволяет «на лету» менять ширину текстовой колонки, размер шрифта, его начертание, насыщенность и выравнивание.
Итак, тестируем.
Как и в предыдущем случае, надеюсь, скрипт поможет вам разобраться с проблемами и найти правильные решения. Тестировать нужно для каждого отдельного случая (дизайнерского решения, размера шрифта, ширины колонки и т.д.).
Однозначных выводов, которые могут быть применимы «всегда и ко всему» тут сделать не получится. Я не буду спорить с теми, кто для себя уже решил не использовать на сайтах выравнивание по ширине, просто поделюсь парочкой рекомендаций и своих наблюдений с теми, кто решил «рискнуть».
Небольшие итоги
Обнаружить «просветы» в тексте просто. Достаточно слегка отодвинуться от монитора и понизить резкость :) (прищуриться), чтобы видеть не отдельные буквы и слова, а весь блок целиком. И вы обязательно заметите «белые пятна». В таких местах направление взгляда срывается и начинает двигаться не слева-направо, как обычно, а вверх.
Для большинства гарнитур среднего размера (x-small, small, 11-12-13-14 px), ярко выраженные проблемы с выравниванием наблюдаются в колонках, шириной до 400 px (до 10 слов в строке). Они есть и дальше, но уже менее заметны, так как расстояния между словами более-менее равны. Следовательно, нежелательно использовать justify для строк шириной менее 400 px.
Если же, вам просто необходимо выровнять текст по ширине, а длина строк небольшая, попробуйте увеличить междустрочное расстояние (line-height), до значения, когда отступы между строками текста будут превышать расстояние больших пробелов между словами. Это позволит сохранить приемлемую читаемость текста.
Ну и еще это приложение можно использовать не по назначению, для демонстрации отдельным клиентам, которые хотят «резиновую» верстку, что текст на их сайте будет трудночитаемым при больших разрешениях мониторов (это я про «резиновую», а не адаптивую разметку).
Надеюсь, кому-нибудь пригодится в работе. Результатами своих наблюдений можете поделиться в комментах.
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
Да и не только «не красиво» выходит. Наш глаз при чтении больших объемов текста при переходе на следующую строку «цепляется» за неровный край (т.н. «рваный рукав») с правой стороны страницы. В другом случае (justify) правый край ровный словно под линейку, это жутко неудобно.
з.ы. Статья отличная просто!
Ну я отписался — за линк спасибо, сюда подписан *^_^*
[...] А если запастись временем, терпением, поэкспериментировать со шрифтами и фоновыми изображениями, то текст на страницах будет не только передавать информацию, но и создавать впечатление, что важно для любого дизайна. Список «безопасных» шрифтов можно посмотреть в приложении к этому посту. [...]
Как-то странно читать текст выровненный по ширине про неудобство такой верстки. О_о
2pos
Однако в данном случае особенных убожеств не наблюдается.
чтд
Как не старалась, но без justify никак не получается сделать красиво.(может, дизайны такие неприспособленные) Поэтому иногда приходится смириться с широкими пробелами...
За респектные материалы статей на этом сайте автору, и внимательным читателям приоткрою секрет: практически text-align:justify готов к бою при поддержке шестнадцатеричным Адом. В мелочах таки чуть подводит девятая опера, но они это исправят.
Неудачный пример полной выключки — данный блог.
Пока браузеры не начнут поддерживать glyph-spaling (min- / max-), автоматический перенос слова, авто-трекинг для каждой отдельной строки, рано говорить о text-align:justify.
Лучше пусть будет рваный правый край, чем рваная середина.
спасибо за пост
jontangerine.com/log/2010...cons-and-unicode
вот хороший пример выравнивания текста по ширине