Пользователь
0,0
рейтинг
22 февраля 2008 в 13:49

Дизайн → Выключка по ширине, или Убей «text-align: justify;»

Надеюсь этой записью открыть серию статей, посвящённых типографике в целом и веб-типографике в частности.

Логически следующая статья будет посвящена использованию разнообразных пробелов и разделительных интервалов (такой заказ был в комментариях к статье о тире и дефисах пользователя besisland).

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

Это значит, что нужно забыть CSS-конструкцию «text-align: justify;» и, если вы этого до сих пор не сделали, то выжечь калёным железом все воспоминания об «align="justify"».

Инь и ян типографики: ширина пробелов и правый край


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

Ровный правый край блока текста улучшает удобочитаемость на объёмах от половины стандартной страницы (при средней ширине строки), и только в случае однородности пробелов.

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

На протяжении исторического развития публикации книг (от рукописей до компьютерных текстовых процессоров) внешний вид полосы текста зависел от двух параметров:
  • подвижность литер, то есть, наличие обратной связи: можно ли исправлять уже написанный/набранный текст;
  • возможность переноса части слова на новую строку, в ручном режиме либо автоматически.
В случае, если хотя бы одна из этих возможностей отсутствует, то одновременно невозможно удовлетворить требованию равномерности ширины пробелов и выравнивания правого края.

Рукописи и ксилография


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

При наличии равномерных пробелов (а для старых рукописей — при полном их отсутствии) обычно виден рваный правый край (хотя, кое-где он — почти ровный, в зависимости от почерка писца).

Типографская печать (ручной набор, монотипы, линотипы)


Есть и подвижность литер (поподробнее о разгонке мы поговорим в будущей статье о пробелах), и возможность переноса в «ручном» режиме.

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

Печатная машинка


Снова нет подвижности литер, но переносы можно расставлять вручную.

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

Современные текстовые процессоры


Пытаются автоматически имитировать типографский процесс. Есть подвижность литер и возможность как автоматической расстановки переносов, так и ручной. Как ни удивительно, но даже в MS Word можно добиться приличного вида блока текста, выключенного по ширине, если в тексте расставить переносы.

Без переносов текст ужасен.

Браузеры


Первый в истории тип носителя, имеющий подвижность литер, но не имеющий возможности расстановки переносов. Помимо этого, строка может иметь практически любую ширину (ведь хорошие дизайнеры предусматривают возможное изменение размера шрифта пользователем!).Теперь, чтобы совместить равномерность пробелов и выравнивание по ширине, браузеры практически должны стать интерактивными текстовыми процессорами: либо автоматически расставляя переносы в реальном времени на произвольных объёмах текста, либо адекватно обрабатывая «мягкие переносы» ­ так же в реальном времени.

До тех пор, пока этого не произошло, в плане типографики браузер недалеко ушёл от печатной машинки. Осознавая как этот факт, так и тот факт, что в недалёком будущем технологии разовьются до нормальной обработки переносов, дизайнер должен временно отказаться от CSS-конструкции «text-align: justify;». Надеюсь, что от кода вида «p align="justify"» вы уже давно отказались, потому что он является не рекомендуемым (deprecated) в HTML 4.01 и может в следующих версиях стандарта перейти в разряд «устаревшего» (obsolete).

И последний, самый сильный аргумент


Хабрахабр не использует выключку по ширине! :)
Алексей Ёжиков @Heath
карма
220,1
рейтинг 0,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (39)

  • 0
    обстоятельно, спасибо!
    два вопроса от дилетанта:

    1. каким образом эта проблема решается в типографском процессе
    (может, это тема для отдельной статьи;)?

    2. что такое мягкий перенос?

    PS: мне кажется в том, что касается рукописей надо учитывать
    ещё неравномерность ширины литер (или я не прав?)
    • 0
      Литера не равны по ширине и в печати (кроме моноширинных шрифтов, названных так именно потому, что в них литеры по ширине равны).

      Под мягкими переносами понимается ­.
      • 0
        я имел в виду одноимённые литеры: например, ширина всех литер ж постоянна в печатном тексте, разве не так (при постоянстве гарнитуры и т. п., разумеется)?
        • 0
          В одном шрифте одного кегля (размера) ширина литер обычно постоянна. В некоторых старых шрифтах существовали литеры с разным рисунком (и, следовательно, с разной шириной), например, для амперсанда.
    • 0
      При ручной вёрстке слова разделялись пробельными элементами разной ширины: шпациями, квадратами и бабашками. :) В статье про пробелы я, наверное, расскажу про это подробнее.

      Мягкий перенос — невидимый символ, указывающий браузеру или текстовому процессору, где можно переносить слово. По-английски он называется SOFT HYPHEN, в HTML используется мнемоника ­, а код в Юникоде — 00AD.
      • +1
        спасибо, прояснили!
        будем ждать статьи с участием шпаций, квадратов и бабашек в главных ролях )
        • +1
          Ну, вообще это не сильно важно — всё это интересно скорее, чтобы понимать, откуда берутся некоторые правила, которыми мы все пользуемся или пытаемся пользоваться. Что-то пошло ещё от рукописей, что-то — от ручного набора, что-то — осталось от печатной машинки. :)

          Чтобы разумно принимать или отвергать те или иные правила в веб-типографике, надо понимать, откуда они и зачем. В этом смысле пробельные элементы ручной вёрстки — скорее чисто иллюстративный материал. :)
  • 0
    А как насчёт включения text-align: justify при условии расстановки shy?
    • 0
      К сожалению, он далеко-о-о не везде работает. При желании, могу подготовить развёрнутый ответ. Когда ­ будет нормально обрабатываться у 99 % пользователей, можно будет начинать им пользоваться для некоторых текстов. Только надо понимать, что будет значительно увеличиваться размер текста — мягкие переносы нужно будет расставлять во всём тексте.

      А так, пока процитирую заметку из «Компьютерры»:

      Несмотря на громкий успех браузера Mozilla Firefox, его разработчикам еще есть над чем потрудиться. Некоторым ошибкам в нем от роду несколько лет. В частности, баг, связанный с неработающей мнемоникой мягкого переноса (­), был занесен в базу еще в июне 1999 года. Долгие годы в комментариях к нему обсуждалось, почему его нельзя исправить быстро, и в итоге ошибка продолжала здравствовать. После длительной паузы очередной пользователь из Скандинавии написал комментарий под названием «Это вопль отчаяния». В нем он обвиняет англоговорящих разработчиков Firefox в равнодушии к юзерам из других стран (Германии, Польши, Швеции…), в чьих языках чаще всего встречаются длинные слова и для которых важна поддержка переносов. Все эти годы разработчики откладывают исправление ошибки на далекое будущее, а между тем она мешает миллионам людей. После такого «крика души» один из разработчиков пообещал, что баг будет исправлен в Firefox 3, и попросил «воздержаться от дальнейших комментариев».
      • 0
        Firefox… is so Firefox!
        • 0
          Да, и ещё я не уверен, что Google или Yandex по запросу «мама мыла раму» найдут страницу с текстом «ма­ма мы­ла ра­му». Честно говоря, меня интересует этот вопрос.
          • 0
            Так это же легко проверить (в моей статье о чёрточках в абзаце о мягких дефисах расставлены мягкие дефисы).
            • 0
              И точно, спасибо. И всё равно, даже в IE7, который обрабатывает ­, правый край абзаца является очень рваным, ему justify засчёт межсловных пробелов сделает эти пробелы зияющими. :-/ Нет в жизни счастья с выравниванием по ширине пока.

              Но я лично очень жду того момента, когда это счастье наступит — выравнивание по ширине действительно улучшает читаемость длинных сплошных текстов, которых в Интернете предостаточно.
      • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Это уже починили, и оно работает:
        https://bugzilla.mozilla.org/show_bug.cg…
  • 0
    За материал спасибо в любом случае. Но я использовал и буду использовать justify на своих страницах (за исключением явно узких колонок) независимо от того, сколько времни придется ждать "счастья".

    Логика такая. Что в подавляющем случае страница с такой выключкой выглядит эстетичнее, ИМХО - неопровежимо. Спорить по поводу читабельности не стану - нет у меня объективных данных, поверю на слово автору, что разная ширина межсловных пробелов ухудшает читабельность. НО! Две категории пользователей могут оказаться на странице. Первая - праздношатающиеся или попавшие сюда по ошибке. Они читать и не будут. Вторая - те, которым сюда НАДО. Вот эти прочтут ВСЕ, что написано, и даже внимания не обратят на разную ширину межсловных интервалов - они ПО ДЕЛУ пришли. Зато обе категории увидят (и, возможно, оценят :-) ) эстетику ровненького правого края.

    Ну, и наконец, вот это: "Убей «text-align: justify" - очень крайнее заявление. А истина с краю не бывает. Посередине ее тоже может не быть, но на краю ее нет точно :-)

    Спасибо.
    • 0
      Я как раз и пытался обосновать тот тезис, что в подавляющем случае страница с выключкой по
      ширине выглядит кривее. Если у Вас есть личные примеры обратного — дайте хотя бы взглянуть.

      «Вторая — те, которым сюда НАДО. Вот эти прочтут ВСЕ, что написано, и даже внимания не обратят на разную ширину межсловных интервалов — они ПО ДЕЛУ пришли.»

      А вот тут я с Вами в корне, категорически не согласен. Вы жертвуете читабельностью для тех, кому это действительно нужно, в пользу «эстетики правого края» для праздношатающихся. Это как строить снаружи красивый бизнес-центр, внутри которого отвратительные условия для работы — вряд ли такой вариант будет очень успешным.
      • 0
        По поводу подавляющего большинства случаев - мне так представляется, Вы в аргументации забыли или упустили одну важную вещь: в подавляющем большинстве случаев на странице много абзацев, и ровный правый край значительно улучшает читаемость их всех вместе. Да, если мы говорим об одном абзаце из двух-трех-четырех строк, его лучше читать выровненным влево. Да, если колонка узкая, и неровности пробелов очень заметны, это ужасно. Но основное содержимое большинства страниц - это таки тексты из многих абзацев, включая в том числе форумы и ленты комментариев, где в одном сообщении текста мало, но последовательность сообщений образует те же самые длинные тексты.

        Собственно, если взять основной текст статьи, который мы обсуждаем, с левым выравниванием он выглядит плохо. С выравниванием по ширине будет не лучше, по одной простой причине: в нем нет кажется ни одного абзаца величиной более одного предложения. Если же расставить абзацы нормально, объединяя "мысли", а не "слова до точки", выравнивание по ширине уже станет лучше.
        • 0
          Давайте на примерах. Вы можете привести пример класса текстов, который лучше выглядит при выключке по ширине, при условии использования произвольных среднестатистических русских слов? С конкретным примером конкретных текстов? Если да, то безусловно добавлю его в статью. :)
          • 0
            Давайте попробуем на конкретном примере, http://blog.softwarer.ru/?page_id=94 По моим представлениям, и этот текст, и его соседи при text-align: left воспринимаются гораздо хуже. Могу поменять стиль и сделать скриншоты для сравнения.

            Что касается "воспринимаются" - мерилом является мое личное "удобно читать" либо "неудобно". С измеряемыми объективными критериями здесь некоторый напряг.

            P.S. Сайт в процессе конструирования и непубличный. Я смотрю его в FF и IE, оперу не учитываю. Советы по его верстке, не связанные с нашей темой, будут с благодарностью выслушаны, но вовсе не обязательно приняты.
            • 0
              Ммм… На ширину экрана 1280 слишком длинные строчки — более 100 символов. Можно вас попросить сделать скриншоты одной и той же статьи с выключкой по ширине и по левому краю, при ширине браузера в 1024 пикселя? Чтобы было видно всё полотно статьи?
              • 0
                У меня тоже LCD... сейчас попробую сделать скриншоты, потом переключусь обратно и посмотрю на качество картинки.

                Насчет полотна не совсем понял - имеется в виду "видно все" в длину или в ширину?
                • 0
                  В высоту. :)
                  • 0
                    Судя по предпросмотру, не получается у меня попытка воспользоваться тегом <a> для выкладывания ссылки, поэтому так: http://softwarer.ru/Permanent/text-align.zip
              • 0
                Кстати, я бы сказал, что на ширину экрана 1024 уже вряд ли стоит ориентироваться - по моей статистике посещений разрешение 800/1024 используют менее 16%, остальное - чуть-чуть любимого мной 1152, 1280 и 1600.
    • 0
      Внимание очень даже обращается, хорошо хоть у меня FireBug всегда под рукой, чтобы привести твориния эстетствующих дизайнеров в приемлемое для использования состояние.

      Я думаю, ни один пользователь сайта не согласиться пожертвовать читабельностью ради эстетики, но дизайнеры почему-то часто поступают именно так, конечно, если на сайте бесценная информация, то я добавлю для него заплатку в Stylish, но скорее всего просто уйду на другой.

      justify начинает выглядеть более менее приемлемо, только при существенной ширине колонки, но эта же ширина начинает отрицательно влиять на читабельность.

      В порядке шутки на тему не более: http://www.artlebedev.ru/kovodstvo/busin…
      • 0
        Я не любитель дискуссий. Это не значит, что мне нечего сказать. Просто не любитель. Я обычно высказываю свое мнение, а если сделал это невнятно (что видно по реакции окружающих) - уточняю его. Но если все внятно, а со мной начинают спорить, я просто говорю: "Хорошо, Вы правы" - независимо от того, что думаю на самом деле. Это экономичнее всего :).

        А вот что такое FireBug я не знаю, буду рад, если просветите. Спасибо.
        • 0
          Замечательный плагин для FireFox, очень сильно упрощает жизнь веб-разработчику, рекомендую.

          Сейчас только заметил его русскую страничку http://firebug.ru/
          • 0
            Спасибо. Поставлю, конечно. Хотя я FireFox просто держу на машине и периодически обновляю :). Как и ишачок, и Netscape. А работаю-то в основном "Оперой". Оно мне как-то больше "с руки".
    • 0
      Вы долбоёб и ваша аргументация говно.
      • 0
        Антон, голубчик, да не расстраивайтесь вы так... Я понимаю, обидно - уже 32 года, а мозгов так и нет... и это значит, что в этой жизни их уже и не будет. Ну, что ж, надейтесь, что в следующей реинкарнации судьба поднимет вас по интеллекту (в словарике посмотрите это слово) хотя бы до уровня таракана :)... Успехов!
  • 0
    По началу, как неопытный, делал в своих проектах выключку по формату — так казалось опрятнее, ровнее.
    По мере изучения основ типографики, удобочитаемости текстов, стал понимать, что выключка по флагу с грамотной расстановкой переносов вручную является наиболее удачным вариантом и гуманным решением по отношению к читательским глазам :)
    Всем советую прочитать «Живую типографику» Корольковой — там все это прекрасно описано!
    • 0
      Да, это — замечательная книга. Также можно порекомендовать для общего образования книгу Роберта Брингхёрста «Основы стиля в типографике».
  • 0
    У меня на сайте щас как раз text-align: justify используется. Тут было много разговоров, но никто не предложил что-либо в замен. Так что делать-то, господа типографы?!)
    • 0
      Использовать стандартную выключку по левому краю. Как здесь, на Хабре.
  • 0
    Текст-то здравый, вот только никакого решения взамен не предложено, да его на данный момент, по сути, и не существует…
    • 0
      Предложено, я уже три раза написал: использовать стандартную выключку по левому краю. :)
  • 0
    Ну и кроме обычного способа выравнивать текст justify есть еще один вариант:
    text-align:justify;text-justify: newspaper.
    При нем выравнивание происходит за счет треккинга - расстояния между буквами. Но у этого способа свой геморрой.
    Остается ждать, когда разработчики Оперы и FF, кроме гонки за ACID обратят внимание на забытый ­
    • 0
      Нет, это пока что выглядит ещё ужаснее, уж лучше межсловное расстояние менять. :(

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.