Следует ли мне избегать использования "text-align: justify;"?
Есть ли причина избегать использования text-align: justify;?
Это снижает читабельность или вызывает проблемы?
13 ответов
Во-первых, это чисто связанная с дизайном проблема и решение. Дизайн вашей сетки указывает, нужен ли обосновывающий текст. Я думаю, что оправдание выравнивания само по себе не имеет большого влияния на удобство использования. Плохая типографика, делающая текст неразборчивым, снижает удобство использования. Тем не менее, убедитесь, что у вас есть четкие контрасты и хороший баланс пробелов в вашем типе. Размер шрифта тоже имеет значение.
Этот сайт является успешной попыткой оправдать текст в Интернете. Поскольку с помощью CSS вы не можете контролировать пробелы между буквами и словами почти так же сильно, как с помощью InDesign, гораздо сложнее выровнять текст, и в ваших строках не появляются "реки" из пробелов, что происходит, когда пробелы между словами превышает пробелы между строками. Вещи, которые затрудняют выравнивание текста: длинные слова, ширина строк, в которых недостаточно слов, и слишком большой контраст между текстом и цветами фона; они делают реки более широкими и заметными.
Типографский идеал - иметь ровный текстовый блок, где, если вы косите, текстовый блок становится равномерным сплошным оттенком. Так что если вы сохраняете текст размером около 10px и 60% серого на белом фоне и имеете строки, которые вмещают около 20 слов, выравнивание по выравниванию не должно выглядеть уродливо. Но имейте в виду, что это никак не улучшает юзабилити. Небольшой, относительно легкий текст раздражает многих людей, особенно читателей старшего возраста.
Я должен отметить, что с ­ (мягкий перенос слов), правильно отделяя длинные проблемные слова, такие как superawesome, вы можете имитировать правильную набор текста (например, InDesign). Есть много вещей, чтобы помочь вам сделать это. Я бы порекомендовал логику для сокрытия, манипулирования и отображения текста на стороне клиента, возможно, с этим.
Редактировать: Как другие упоминают ниже, дефисы CSS теперь возможны, кроме невозможных (не в Chrome). Кроме того, css4 предлагает еще больше контроля.
text-align: justify не должен использоваться в браузерах на данный момент. Они не умеют обрабатывать мелкие детали внутри, и в результате получается множество рек, и нет поддержки переносов (кроме мягких дефисов).
Примечание выше было написано 4,5 года назад. Вещи медленно меняются... http://caniuse.com/
Изменить: Hyphenator был доведен до моего внимания в комментариях этого ответа. Похоже, что делает выравнивание текста оправданным, стоит проверить сайты, которые его используют. Возможно, вы захотите использовать javascript для применения выравнивания текста по выравниванию перед использованием этого сценария, чтобы те, у кого нет javascript, не были обнаружены.
Редактировать 2: CSS теперь позволяет переносить с hyphens свойство [ поддержка браузера]. Сейчас PPK говорит, что нужно добавить его в свои таблицы стилей, а Эрик Мейер говорит, просто добавьте его для мобильных устройств.
Изменить 3: хороший небольшой обзор вещей, доступных нам сейчас, с некоторыми SASS.
Проблемы, возникающие у других по поводу обоснования выравнивания, более распространены в узких колонках. Если ваши столбцы достаточно широки по отношению к размеру ваших шрифтов и другим параметрам, тогда можно оправдать текст. Допустим, вы хотите в среднем от 12 до 15 слов на строку. Чем больше, тем лучше.
Я не могу придумать вескую причину, почему бы не оправдать текст - в определенный момент объем и ширина контента почти требуют его обоснования. Конечно, у вас возникнут проблемы с контентом, состоящим из определенных словосочетаний, но, на мой взгляд, если вы видите реки и необычно большие промежутки между словами, у вас возникает совсем другая проблема - проблема читабельности и ясности.
Чего бы я ни хотел избежать, так это по центру основного текста. Я не думаю, что есть больший красный флаг любительского веб-дизайна, чем это.
Там нет технической причины не - это чисто дизайнерское решение. Многие считают, что оправданный текст труднее читать, но я думаю, это зависит от вашей ситуации. Хотя он отлично работает для печати, обычно веб-браузеры не дают достаточного контроля над возможным выводом текста, чтобы гарантировать, что то, что вы обслуживаете, не будет выглядеть дерьмом на экранах некоторых людей.
Ваш лучший вариант - избежать оправдания.
Я предпочитаю выравнивание по левому краю (text-align: left), потому что это обычно более читабельно. Кроме того, быстрее читать слова на одинаковом расстоянии, поэтому я слышу. Если у вас нет стилистической причины для использования выравнивания, оставьте его влево, вправо или по центру. Специально для основного текста, используйте слева. (На самом деле, вы хотите что-то вроде "вперед" для текста в другом направлении (например, иврит)...)
Обоснование не должно использоваться без переносов. Вот библиотека переносов на основе PHP и порт этой библиотеки для плагина WordPress: wp-Typography.
Выравнивание текста может быть сделано несколькими способами.
Пара определений: регулировка расстояния между словами - это "отслеживание". Регулировка расстояния между символами - это "кернинг". Хорошие программы верстки делают кернинг автоматически, и он зависит от пары букв. Значение переменной переменной может быть точно определено ближе, чем значение переменной xa. Хорошие шрифты встроили таблицы подсказок кернинга, чтобы помочь в этом процессе.
В первые дни моноширинных шрифтов это было сделано путем вставки лишних пробелов между словами. Это сделано для очень неуклюжего вида продукции. Если бы у вас было 4 пробела в конце строки и 6 пробелов в строке, 4 из них стали бы двойными пробелами.
Моноширинные шрифты не должны быть оправданы.
С помощью шрифтов переменной ширины у нас есть пробелы em, en space и т. Д., Поэтому пространство может быть лучше распределено.
Я думаю, что это где большинство браузеров сейчас. Это работает достаточно хорошо большую часть времени. Чтобы это работало хорошо, необходимо выполнить следующие условия:
- Вам нужно разумное количество слов в строке.
- Большое слово в конце строки может создать проблемы.
Среднее слово на английском языке составляет 5 символов. Таким образом, в среднем у вас будет 5 символов (слово из 5 символов плюс пробел не уместится, поэтому будет перенесено на следующую строку)
Если в строке 10 слов, вам нужно добавить примерно половину стандартного пробела для каждого интервала между словами.
Если последнее слово длинное, например "головные боли", и для него нет места, теперь у вас есть 10 пробелов для распределения. Это начинает выглядеть плохо.
Это где словарь переносов вступает в игру. Перенос слов может быть выполнен по алгоритму, но есть достаточно исключений, которые очень помогают при наличии словаря. (Существует специальный символ для мягких дефисов для слов, которых нет в вашем словаре.)
Дефис может разделить слово так, чтобы строка заполнялась более равномерно.
Опытным путем я решил, что длина линии в 65 em сделала хороший компромисс. Это дает 11-13 слов в строке большую часть времени.
Другой подход к обоснованию - разделить пространство между персонажами. Это позволяет избежать некоторых проблем, описанных выше, но все равно выглядит странно, если вы распределяете много места в недостаточном количестве строк. Время от времени вы видите это в газетах, где слово, кажется, имеет полный пробел между каждым символом. Это хороший аргумент для более длинной строки.
Хорошие программы для набора текста (InDesign, *TeX, Framemaker) делают комбинацию дополнительного пробела в промежутках между словами и крошечных лишних пробелов между символами.
В блоке появился новый объект text-justify, который можно использовать в CSS для изменения использования text-align: justify. Номинально он принимает варианты
- авто (по умолчанию)
- между словами
- межсимвольный (+ распространять по наследству)
- никто
CanIuse https://caniuse.com/ рабочая группа CSS https://drafts.csswg.org/css-text-3/
CanIuse сообщает о соответствии только для Firefox прямо сейчас, Chrome поддерживает его, но требует, чтобы вы включили экспериментальные функции. CanIuse утверждает, что поддержка глючит. Зайдя на сайт отслеживания ошибок Chromium, утверждает, что это исправлено. Пойди разберись. Не проверял
Другие прагматические моменты:
Я внес четыре изменения в таблицу стилей моего сайта:
- Максимальная длина линии 65 бэр
- увеличение шрифта до 110%
- ведущее увеличение до 125%
- Оправданный текст.
Результатом стало то, что время на сайте и количество страниц за сеанс удвоилось.
Анекдотично, но может стоить вашего собственного теста.
Э-э-э... Нет...!
[серьезно] WordPress использует justify, и я думаю, что это довольно сильное утверждение относительно того, уменьшает ли он читабельность или нет...
Вы также можете использовать текст-оправдать: газета. Тег text-justify css помогает вам контролировать перенос текста при выравнивании
Как и любой вопрос веб-дизайна... это зависит. Как уже было предложено, оправданный текст обычно не выглядит хорошо в узких столбцах. Я бы рекомендовал против этого как общее правило в боковых панелях, поскольку боковые панели обычно узкие.
С основной копией часто рекомендуемых 10 слов в строке (или с любой суммой выше этой) вы, вероятно, сможете избежать неприятностей с оправданным текстом, и он будет выглядеть достаточно хорошо в большинстве случаев, если вы не используете много очень длинных слова и / или строки.
Я думаю, что раньше я ставил этот сайт на Stackru, но Джон Тан использует обоснованный текст в своей основной копии (в статьях), и он выглядит великолепно в 99,99% случаев.
Следует отметить, что Internet Explorer (по крайней мере) до версии 8 не отображает text-align: justify правильно. Вместо этого это интерпретируется как text-align: center,
Вот больше информации: text-align: justify
Вызвала у меня некоторые головные боли, чтобы выяснить, почему IE продолжал центрировать вещи. Может быть, это сэкономит кому-то еще время.
Я думаю, что это нормально на печати, но это неуклюже в большинстве веб-браузеров, из-за отсутствия точного контроля пробелов и переносов. В некоторых случаях типографы могут даже немного играть на межбуквенном интервале или сокращении шрифта, поскольку страницы / столбцы (по крайней мере, в журналах) могут быть точно настроены.