Dubrowsky
Хроники одного дупла
Блогово  →  WebDev  → 

Выравнивание текста по ширине (html-css, text-align:justify)

29 Августа 2012 года

Псто ненависти к сабжу. Выравнивание текста по ширине - это плохо, понятненько? Почему плохо?

По ширине!

Вот текст, для которого при помощи конструкции text-align:justify; в CSS выполнено выравнивание по ширине, благодаря чему текст имеет ровный край и слева, и справа.

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

Если нельзя переносить слова, браузер выравнивает текст, растягивая пробелы. Пробелы разной ширины (иногда - огромные) полностью перечеркивают положительный эффект от аккуратности правого края. Чем уже текст и длиннее слова, тем это заметнее. Например:

Систематическое использование подобного инструментария нивелирует преимущества визуализации.

Здесь мы наблюдаем эффект "реки из пробелов" (гипертрофированно). Пробелы, выстроенные в столбик, воспринимаются как цельная фигура и отвлекают от чтения. Вы скажете, это надуманный пример с ненастоящим текстом? А представьте, что у пользователя настроен крупный шрифт. Текст из первого примера вроде бы вполне настоящий...

Вот текст, для которого при помощи конструкции text-align:justify; в CSS выполнено выравнивание по ширине, благодаря чему текст имеет ровный край и слева, и справа.

Ужас, правда? Здесь нету "реки", зато есть просто анархия. Из-за непостоянной ширины пробела юзер, вместо чтения, занят поиском следующего слова.

Можно ли использовать text-align:justify, если мы точно знаем, что текст достаточно широкий, чтоб такой анархии не случалось? Я бы не стал. Во-первых, когда речь идет о браузерах, мы ничего не знаем точно - следовательно см. выше. Во-вторых, дело еще и в привычке. Подавляющее большинство текстов (статистики не нашел, но спорить тут ИМХО не о чем) выравниваются по левому краю. Поэтому, видя ровный правый край, пользователь может отвлечься, залипнуть и мгновенно скончаться от припадка уйти, не дочитав наш бесценный контент. А оно нам надо?

Именно поэтому я отключил кнопку выравнивания по ширине в TinyMCE во всех своих админках. Просящим включить обратно - буду давать ссылку сюда, чего и вам желаю :)

UPD: К оффлайну, как оказалось, это тоже относится =)

Камменты

Skyter29.08.2012, 12:58#
Илюх, твои аргументы работают только тогда, когда блок текста узкий, а шрифт большой. Если же текст на всю страницу, а шрифт маленький, то вполне нормально живет такая конструкция.
Дуброн самый29.08.2012, 13:55#
Skyter, привет ) Про широкие тексты я в конце добавил. На мой взгляд фактор привычки очень важен, все что непривычно - отвлекает.

Есть еще такое мнение - вроде этим можно психологически объяснить мое личное ощущение диссонанса:

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


У авторитетных буржуйских юзабилистов я такого не нашел, правда не очень и старался :)
cleam29.08.2012, 17:18#
Skyter, человек может смотреть сайт со смартфона, например. Там физически нет широкой страницы
Дуброн самый29.08.2012, 17:26#
cleam, а разве мобильные браузеры не оптимизируют такие штуки, тупо их не поддерживая? =) Было бы логично, надо проверить.
cleam29.08.2012, 17:29#
Только что зашел с айфона на эту страницу - все тут поддерживается.

Впрочем, логично. У них там внутри (и у андройда тоже) тот же вебкит, что и на десктопе
Дуброн самый29.08.2012, 17:51#
Ок, спасибо )
Вебкит внутри андроида не совсем тот же, что на десктопе - я из-за этого два дня с гелакситабом в обнимку просидел недавно =) Причем отличаются не только всякие события (что логично, ибо мыши нет), но и рендеринг в самых неожиданных местах. Но это оффтоп )
> "они приводят к лишней нагрузке на человека"
Эта нагрузка компенсируется за счет удобства чтения. Выровненный край дает сигнал перевода глаз на другую строку
> проблемам с браузерами
Ну последние броузеры давно справляются. IE так вообще всегда умел
> и поисковиками
Если можно поподробнее.
Я не заметил какого-то резкого снижения трафика у себя после ввода мягкого переноса. Точный поиск и в гугле и в Яндексе нормально работает. Каких-то аномалий невооруженным взглядом не заметил.
Перед этим гугли проблему. Про Яндекс ничего не нашел, но про Гугль пишут, что проблем нет.
Дуброн самый01.11.2012, 16:46#
Исаак, привет!

Про поисковики, навскидку:

шлеп, находится

а так нифига - Точная цитата "с уже расставленными переносами" rhost:ru.habr* в кавычках нигде не встречается. Показаны результаты по запросу без кавычек.

Ок, заранее соглашусь, что это проблема сервиса, а не метода в целом :)

По поводу того, что ровный край читается лучше или хуже - не нашел авторитетного мнения типографов/юзабилистов, но есть например имхо некоего лже-юзера, который считает как раз, что лучше с рваным краем (цитировал выше в комментах).
За Яндекс - спасибо. Упустил. Сдемпфировало то, что в разбивку пошли только длинные слова.

> некоего лже-юзера
По ссылке приведено мнение специалиста по оформлению юридических документов со ссылкой на чужие слова применительно к верстке документов в Word :)
Сам не использую justify, но с переносами сдуру вляпался.

Написать коммент: памятка постеру

 

Крутые посты wtf??? →

02.10.2012 · 90 камментов · рейтинг 18.62
27.06.2012 · 37 камментов · рейтинг 11.64
28.04.2008 · 44 каммента · рейтинг 9.54
30.01.2013 · 13 камментов · рейтинг 7.31
19.01.2008 · 20 камментов · рейтинг 6.34

Поисковый спам

Последне камменты

18.11.2017  JohnКак закрыть окно Skype / свернуть нафиг в трэй: Спасибо, добрый человек! Неимоверно раздражало.
10.11.2017  NikПочему не работает form.submit(): Автор, спасибо за статью 5-летней давности. Подари...
27.10.2017  ДенисОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Блин. А для не в зуб ногой - можно код целиком выл...
17.10.2017  ДубрDenwer - настройка алиасов (ServerAlias): Ахуенно не это, ахуенно то что кто-то пользуется Д...
29.09.2017  Maxтам же: Спасибо, чувак! Это ахуенно, оно заработало!!!

Статсы