• Улучшаем text-align: justify

    Считается, что выравнивание текста на всю ширину делают только дилетанты. Причина: огромные просветы между словами. Даже если в тексте расставлены переносы, результат всё равно получается не самый лучший:

    Не люб­лю я вос­крес­ные ве­че­ра. Как бы объ­яс­нить… все, что с ни­ми свя­за­но, то есть са­му об­ста­нов­ку вос­крес­но­го ве­че­ра, я не люб­лю. С при­бли­же­ни­ем вос­крес­но­го ве­че­ра у ме­ня обя­за­тель­но на­чи­на­ет дер­гать в го­ло­ве. Ког­да силь­нее, ког­да сла­бее. Но дер­га­ет обя­за­тель­но. Внут­ри вис­ков, в сан­ти­мет­ре или двух от ко­жи, дер­га­ет с обе­их сто­рон так, как буд­то что-то тя­нет мяг­кий бе­лый сгус­ток пло­ти на­ру­жу. Ощу­ще­ние, что из се­ре­ди­ны вис­ка вы­ле­за­ет не­ви­ди­мая нить, а кто-то из­да­ле­ка, схва­тив за са­мый кон­чик, по­ти­хонь­ку дер­га­ет за нее. Мне не осо­бен­но-то и боль­но. Я бы не уди­вил­ся, если бы бы­ло боль­но, но, как ни стран­но, не боль­но. Буд­то глу­бо­ко вве­ли длин­ную иг­лу в оне­мев­шее от нар­ко­за мес­то.

    Но в случае с переносами текст можно заметно улучшить. Достаточно всего лишь уменьшить расстояние между словами с помощью CSS-свойства word-spacing, выставив минимально допустимое расстояние. Важно помнить, что в word-spacing указывается не само расстояние, а его отклонение от стандартного значения: word-spacing: 0 — стандартное расстояние, word-spacing: 10px; — стандартное расстояние + 10 пикселей.

    Немного подтянем слова друг к другу:

    p {
    	text-align: justify;
    	word-spacing: -0.3ex;
    }
    

    …и текст выглядит заметно лучше:

    Было

    Не люб­лю я вос­крес­ные ве­че­ра. Как бы объ­яс­нить… все, что с ни­ми свя­за­но, то есть са­му об­ста­нов­ку вос­крес­но­го ве­че­ра, я не люб­лю. С при­бли­же­ни­ем вос­крес­но­го ве­че­ра у ме­ня обя­за­тель­но на­чи­на­ет дер­гать в го­ло­ве. Ког­да силь­нее, ког­да сла­бее. Но дер­га­ет обя­за­тель­но. Внут­ри вис­ков, в сан­ти­мет­ре или двух от ко­жи, дер­га­ет с обе­их сто­рон так, как буд­то что-то тя­нет мяг­кий бе­лый сгус­ток пло­ти на­ру­жу. Ощу­ще­ние, что из се­ре­ди­ны вис­ка вы­ле­за­ет не­ви­ди­мая нить, а кто-то из­да­ле­ка, схва­тив за са­мый кон­чик, по­ти­хонь­ку дер­га­ет за нее. Мне не осо­бен­но-то и боль­но. Я бы не уди­вил­ся, если бы бы­ло боль­но, но, как ни стран­но, не боль­но. Буд­то глу­бо­ко вве­ли длин­ную иг­лу в оне­мев­шее от нар­ко­за мес­то.

    Стало

    Не люб­лю я вос­крес­ные ве­че­ра. Как бы объ­яс­нить… все, что с ни­ми свя­за­но, то есть са­му об­ста­нов­ку вос­крес­но­го ве­че­ра, я не люб­лю. С при­бли­же­ни­ем вос­крес­но­го ве­че­ра у ме­ня обя­за­тель­но на­чи­на­ет дер­гать в го­ло­ве. Ког­да силь­нее, ког­да сла­бее. Но дер­га­ет обя­за­тель­но. Внут­ри вис­ков, в сан­ти­мет­ре или двух от ко­жи, дер­га­ет с обе­их сто­рон так, как буд­то что-то тя­нет мяг­кий бе­лый сгус­ток пло­ти на­ру­жу. Ощу­ще­ние, что из се­ре­ди­ны вис­ка вы­ле­за­ет не­ви­ди­мая нить, а кто-то из­да­ле­ка, схва­тив за са­мый кон­чик, по­ти­хонь­ку дер­га­ет за нее. Мне не осо­бен­но-то и боль­но. Я бы не уди­вил­ся, если бы бы­ло боль­но, но, как ни стран­но, не боль­но. Буд­то глу­бо­ко вве­ли длин­ную иг­лу в оне­мев­шее от нар­ко­за мес­то.

  • 33 комментария

    1. anton
      27 февраля 2010

      а как переносы-то расставлены? вручную?

    2. 27 февраля 2010

      >>а как переносы-то расставлены? вручную?

      # hyphen_words() — Расстановка «мягких» переносов в словах.
      http://forum.dklab.ru/viewtopic.php?t=17146

    3. Сергей Чикуенок
      27 февраля 2010

      И так тоже можно: http://code.google.com/p/hyphenator/

    4. UtK
      27 февраля 2010

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

    5. 27 февраля 2010

      Хорошо) В смысле практично.

    6. 27 февраля 2010

      а почему ивыбрано именно EX, а не EM? Так, из любопытства спросил.

    7. 27 февраля 2010

      Недостаток http://code.google.com/p/hyphenator/ в том, что он расставляет переносы только с помощью мнемоник «мягких переносов» ­, которые имеют следующие проблемы:

      — работают не во всех браузерах;

      — но, мое главное, текст копируется вместе с переносами.

      Для своего блога я немного переделал скрипт Кирилла Николаева http://snusmumrik.org.ru/ru/hyph/

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

      Однако у этого скрипта тоже есть недостатки, например:
      1. Неправильно разбивает на слоги слова с буквами «ъ» и «ь»;
      2. Закрашивает фон текста в белый цвет;
      2. В FF необходимо вручную задавать длину переноса для каждого шрифта
      3. Иногда глючит в IE, Chrome, но, скорее всего это глюки моей модификации.

      Я сейчас (правда не очень активно) работаю над собственным универсальным скриптом переносов, который избавлен от недостатков существующих скриптов.

    8. Сергей Чикуенок
      27 февраля 2010

      а почему ивыбрано именно EX, а не EM?

      EM связан с высотой буквы, а EX — с шириной.

      но, мое главное, текст копируется вместе с переносами.

      В айфоне наоборот: ­ не копируется, а юникодный символ — копируется

    9. 27 февраля 2010

      и еще есть проблема с национальными языками (напр. татарский, башкирский)

    10. 27 февраля 2010

      Скажите а какие ограничения на браузеры? Шестой ослик, конечно, не поддерживает, а 7 и 8?

    11. Сергей Чикуенок
      27 февраля 2010

      Пост не о том, нужны ли переносы с вебе :)

    12. Сергей Чикуенок
      27 февраля 2010

      Алексей Рытов, IE6 и выше очень даже хорошо всё поддерживают

    13. 27 февраля 2010

      Проблема в том, что в последней строке абзаца слова почти сливаются. Вот скрин из гуглоридета:

    14. 27 февраля 2010

      Картинка убилась :) http://i49.tinypic.com/ff1pad.jpg

    15. Сергей Чикуенок
      27 февраля 2010

      Всё зависит от шрифта и от системы, которая его рисует. Расстояние можно сделать больше/меньше.

    16. 27 февраля 2010

      Сергей, а у вас shy вставляется на стороне сервера?
      И еще хотелось бы узнать хоть какие-то прикидки по быстродействию — как для серверного решения, так и для клиентского js.

    17. 27 февраля 2010

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

    18. Сергей Чикуенок
      27 февраля 2010

      Алексей Рытов, мы сейчас читалку для айфона делаем, там расстановка переносов делается утилитой на C++, по времени занимает где-то 700 мс на главе размером в 200 Кб.

      Если говорить о небольших текстах в вебе, то через Hyphenator разбивка делается менее чем за 50 мс (у меня, по крайней мере)

    19. 27 февраля 2010

      Круто! А с поисковиками проблем не будет?

    20. Сергей Чикуенок
      27 февраля 2010

      На айфоне поисковики нас не волнуют :) А в целом — не знаю, вполне могут быть

    21. 27 февраля 2010

      как бороться-то с копированием мягких переносов в буфер обмена? есть нормальные варианты?

    22. 27 февраля 2010

      Скажите, а в каких случаях проблемы? Скопировал с этого сайта примеры в 3 браузерах и 2 системах, вставил текст — никаких проблем.

    23. Сергей
      28 февраля 2010

      EM связан с высотой буквы, а EX — с шириной.

      Мне кажется, обе величины связаны с высотой

    24. Сергей Чикуенок
      28 февраля 2010

      Да, точно, с высотой. EX лучше подходит для работы с шириной, чем EM (более точен при изменении размера шрифта)

    25. GreLI
      2 марта 2010

      На самом деле ex — это очко шрифта — высота строчной буквы без выносных элементов. Но по факту многие разработчики (не помню то ли шрифтов, то ли браузеров) ленятся, и указывают равным половине кегля (em).

    26. Психотроник
      3 марта 2010

      А никак нельзя научить браузер танцевать? Ну так чтобы в живую, по-настоящему танцевал, колбасился, кривлялся, извиваясь рекурсивной восьморкой в множестве мандельброта, под эйсид-хаус или чиптьюн, а то одному скучно… :-)

    27. Л
      12 марта 2010

      Психотроник, Compiz Fusion вам в руки :)

    28. 18 апреля 2010

      Вот и у меня дилемма была, вроде бы с text-align: justify и красивее, но в узких местах порой выглядит просто удручающе НЕкрасиво…

      Попробую последовать вашему совету и посмотрю что из этого выйдет.

    29. 27 октября 2010

      спасибо за совет, пригодилось

    30. Павел
      10 апреля 2011

      Здравствуйте!
      А между какими тэгами вставлять этот код? И в какое место?

    31. 11 мая 2011

      Хоть и небольшая, но экономия. Спасибо, в коллекцию знаний

    32. Роман
      19 мая 2011

      Влад Мержевич утверждает, что — «Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то свойство word-spacing не действует». http://htmlbook.ru/css/word-spacing

    33. Роман
      19 мая 2011

      Написал Владу. Он ответил, что у него ошибка.