-
Улучшаем text-align: justify
Считается, что выравнивание текста на всю ширину делают только дилетанты. Причина: огромные просветы между словами. Даже если в тексте расставлены переносы, результат всё равно получается не самый лучший:
Не люблю я воскресные вечера. Как бы объяснить… все, что с ними связано, то есть саму обстановку воскресного вечера, я не люблю. С приближением воскресного вечера у меня обязательно начинает дергать в голове. Когда сильнее, когда слабее. Но дергает обязательно. Внутри висков, в сантиметре или двух от кожи, дергает с обеих сторон так, как будто что-то тянет мягкий белый сгусток плоти наружу. Ощущение, что из середины виска вылезает невидимая нить, а кто-то издалека, схватив за самый кончик, потихоньку дергает за нее. Мне не особенно-то и больно. Я бы не удивился, если бы было больно, но, как ни странно, не больно. Будто глубоко ввели длинную иглу в онемевшее от наркоза место.
Но в случае с переносами текст можно заметно улучшить. Достаточно всего лишь уменьшить расстояние между словами с помощью CSS-свойства
word-spacing, выставив минимально допустимое расстояние. Важно помнить, что вword-spacingуказывается не само расстояние, а его отклонение от стандартного значения:word-spacing: 0— стандартное расстояние,word-spacing: 10px;— стандартное расстояние + 10 пикселей.Немного подтянем слова друг к другу:
p { text-align: justify; word-spacing: -0.3ex; }…и текст выглядит заметно лучше:
Было
Не люблю я воскресные вечера. Как бы объяснить… все, что с ними связано, то есть саму обстановку воскресного вечера, я не люблю. С приближением воскресного вечера у меня обязательно начинает дергать в голове. Когда сильнее, когда слабее. Но дергает обязательно. Внутри висков, в сантиметре или двух от кожи, дергает с обеих сторон так, как будто что-то тянет мягкий белый сгусток плоти наружу. Ощущение, что из середины виска вылезает невидимая нить, а кто-то издалека, схватив за самый кончик, потихоньку дергает за нее. Мне не особенно-то и больно. Я бы не удивился, если бы было больно, но, как ни странно, не больно. Будто глубоко ввели длинную иглу в онемевшее от наркоза место.
Стало
Не люблю я воскресные вечера. Как бы объяснить… все, что с ними связано, то есть саму обстановку воскресного вечера, я не люблю. С приближением воскресного вечера у меня обязательно начинает дергать в голове. Когда сильнее, когда слабее. Но дергает обязательно. Внутри висков, в сантиметре или двух от кожи, дергает с обеих сторон так, как будто что-то тянет мягкий белый сгусток плоти наружу. Ощущение, что из середины виска вылезает невидимая нить, а кто-то издалека, схватив за самый кончик, потихоньку дергает за нее. Мне не особенно-то и больно. Я бы не удивился, если бы было больно, но, как ни странно, не больно. Будто глубоко ввели длинную иглу в онемевшее от наркоза место.
33 комментария
а как переносы-то расставлены? вручную?
>>а как переносы-то расставлены? вручную?
# hyphen_words() — Расстановка «мягких» переносов в словах.
http://forum.dklab.ru/viewtopic.php?t=17146
И так тоже можно: http://code.google.com/p/hyphenator/
Получше, факт. Но местами все-равно глаз спотыкается, теперь уже от обратной проблемы: «в сантиметре» слиплись, «бы не удивился» вообще странно выглядит. А при попытке текст скопировать — вообще ужас-ужас из-за тех самых мягких переносов.
Хорошо) В смысле практично.
а почему ивыбрано именно EX, а не EM? Так, из любопытства спросил.
Недостаток http://code.google.com/p/hyphenator/ в том, что он расставляет переносы только с помощью мнемоник «мягких переносов»
, которые имеют следующие проблемы:— работают не во всех браузерах;
— но, мое главное, текст копируется вместе с переносами.
Для своего блога я немного переделал скрипт Кирилла Николаева http://snusmumrik.org.ru/ru/hyph/
Для каждого браузера он использует наиболее подходящие для него техники переносов, в том числе и низкоуровневое рисование переносов с помощью картинок.
Однако у этого скрипта тоже есть недостатки, например:
1. Неправильно разбивает на слоги слова с буквами «ъ» и «ь»;
2. Закрашивает фон текста в белый цвет;
2. В FF необходимо вручную задавать длину переноса для каждого шрифта
3. Иногда глючит в IE, Chrome, но, скорее всего это глюки моей модификации.
Я сейчас (правда не очень активно) работаю над собственным универсальным скриптом переносов, который избавлен от недостатков существующих скриптов.
EM связан с высотой буквы, а EX — с шириной.
В айфоне наоборот: ­ не копируется, а юникодный символ — копируется
и еще есть проблема с национальными языками (напр. татарский, башкирский)
Скажите а какие ограничения на браузеры? Шестой ослик, конечно, не поддерживает, а 7 и 8?
Пост не о том, нужны ли переносы с вебе 🙂
Алексей Рытов, IE6 и выше очень даже хорошо всё поддерживают
Проблема в том, что в последней строке абзаца слова почти сливаются. Вот скрин из гуглоридета:
Картинка убилась 🙂 http://i49.tinypic.com/ff1pad.jpg
Всё зависит от шрифта и от системы, которая его рисует. Расстояние можно сделать больше/меньше.
Сергей, а у вас shy вставляется на стороне сервера?
И еще хотелось бы узнать хоть какие-то прикидки по быстродействию — как для серверного решения, так и для клиентского js.
Долго не мог заметить разницы между «было» и «стало», пока не понял, что у меня почему-то переносы расставляются. В таком случае настройка в CSS почти не имеет смысла.
Алексей Рытов, мы сейчас читалку для айфона делаем, там расстановка переносов делается утилитой на C++, по времени занимает где-то 700 мс на главе размером в 200 Кб.
Если говорить о небольших текстах в вебе, то через Hyphenator разбивка делается менее чем за 50 мс (у меня, по крайней мере)
Круто! А с поисковиками проблем не будет?
На айфоне поисковики нас не волнуют 🙂 А в целом — не знаю, вполне могут быть
как бороться-то с копированием мягких переносов в буфер обмена? есть нормальные варианты?
Скажите, а в каких случаях проблемы? Скопировал с этого сайта примеры в 3 браузерах и 2 системах, вставил текст — никаких проблем.
Мне кажется, обе величины связаны с высотой
Да, точно, с высотой. EX лучше подходит для работы с шириной, чем EM (более точен при изменении размера шрифта)
На самом деле ex — это очко шрифта — высота строчной буквы без выносных элементов. Но по факту многие разработчики (не помню то ли шрифтов, то ли браузеров) ленятся, и указывают равным половине кегля (em).
А никак нельзя научить браузер танцевать? Ну так чтобы в живую, по-настоящему танцевал, колбасился, кривлялся, извиваясь рекурсивной восьморкой в множестве мандельброта, под эйсид-хаус или чиптьюн, а то одному скучно… 🙂
Психотроник, Compiz Fusion вам в руки 🙂
Вот и у меня дилемма была, вроде бы с text-align: justify и красивее, но в узких местах порой выглядит просто удручающе НЕкрасиво…
Попробую последовать вашему совету и посмотрю что из этого выйдет.
спасибо за совет, пригодилось
Здравствуйте!
А между какими тэгами вставлять этот код? И в какое место?
Хоть и небольшая, но экономия. Спасибо, в коллекцию знаний
Влад Мержевич утверждает, что — «Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то свойство word-spacing не действует». http://htmlbook.ru/css/word-spacing
Написал Владу. Он ответил, что у него ошибка.