Следует ли мне избегать использования "text-align: justify;"?

Question

Есть ли причина избегать использования text-align: justify;?

Это снижает читабельность или вызывает проблемы?

Answer 1

Во-первых, это чисто связанная с дизайном проблема и решение. Дизайн вашей сетки указывает, нужен ли обосновывающий текст. Я думаю, что выровненное выравнивание не имеет большого влияния на удобство использования. Плохая типографика, делающая текст неразборчивым, снижает удобство использования. Тем не менее, убедитесь, что у вас есть четкие контрасты и хороший баланс пробелов в вашем типе. Размер шрифта также имеет значение.

Этот сайт является успешной попыткой оправдать текст в Интернете. Поскольку с помощью CSS вы не можете контролировать пробелы между буквами и словами почти так же сильно, как с помощью InDesign, гораздо сложнее выровнять текст, и в ваших строках не появляются «реки» из пробелов, что происходит, когда пробелы между словами превышает пробелы между строками. Вещи, которые затрудняют выравнивание текста: длинные слова, ширина строк, в которых недостаточно слов, и слишком большой контраст между текстом и цветами фона; они делают реки более широкими и заметными.

Типографский идеал - иметь ровный текстовый блок, где, если вы щурите, текстовый блок становится равномерным сплошным оттенком. Так что если вы сохраняете текст размером около 10px и 60% серого на белом фоне и имеете строки, которые вмещают около 20 слов, выравнивание по выравниванию не должно выглядеть уродливо. Но имейте в виду, что это никак не улучшает юзабилити. Небольшой, относительно легкий текст раздражает многих людей, особенно читателей старшего возраста.

Я должен отметить, что с ­ (мягким переносом слов), правильно разделяющим длинные проблемные слова, такие как super & shy; awesome, вы можете имитировать правильную набор (например, InDesign). Есть много вещей, чтобы помочь вам сделать это. Я бы порекомендовал логику для сокрытия, манипулирования и отображения текста на стороне клиента, возможно, с this .

Редактировать : Как уже упоминалось ниже, css дефисы теперь возможны, кроме невозможных (не в Chrome). Кроме того, css4 предлагает еще больший контроль .

Answer 2

text-align: justify не должно использоваться в браузерах на данный момент. Они не умеют обрабатывать мелкие детали внутри, и в результате получается множество рек, и нет поддержки переносов (кроме мягких дефисов).

Примечание выше было написано 4,5 года назад. Вещи медленно меняются ... http://caniuse.com/#feat=css-hyphens

Изменить: Hyphenator был доведен до моего внимания в комментариях к этому ответу. Похоже, это делает выравнивание текста оправданным, стоит проверить сайты, которые его используют. Возможно, вы захотите использовать javascript для применения выравнивания текста по выравниванию перед использованием этого сценария, чтобы те, у кого нет javascript, не были обнаружены.

Редактировать 2: CSS теперь допускает переносы со свойством hyphens [ поддержка браузера ]. ППК говорит, что добавьте его в свои таблицы стилей , а Эрик Мейер сказал , просто добавьте его для мобильных устройств .

Редактировать 3: Хороший небольшой обзор вещей, доступных нам сейчас, с некоторыми SASS.

Answer 3

Проблемы, возникающие у других по поводу обоснования выравнивания, более распространены в узких колонках. Если ваши столбцы достаточно широки по отношению к размеру ваших шрифтов и другим параметрам, тогда можно оправдать текст. Допустим, вы хотите в среднем минимум 12-15 слов на строку. Чем больше, тем лучше.

Answer 4

Технических причин нет - это чисто дизайнерское решение. Многие люди считают, что оправданный текст труднее читать, но я думаю, это зависит от вашей ситуации. Хотя он отлично работает для печати, обычно веб-браузеры не дают достаточного контроля над возможным выводом текста, чтобы гарантировать, что то, что вы обслуживаете, не будет выглядеть чушью на экранах некоторых людей.

Ваш лучший вариант - избежать оправдания.

Answer 5

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

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

Answer 6

Обоснование не должно использоваться без переносов. Вот библиотека на основе *1001* PHP и порт этой библиотеки для плагина WordPress: wp-Typography .

Answer 7

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

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

Я думаю, что раньше я ставил этот сайт на StackOverflow, но Джон Тан использует оправданный текст в своей основной копии (в статьях), и он прекрасно выглядит в 99,99% случаев.

Answer 8

Я предпочитаю выравнивание по левому краю (text-align: left), потому что оно обычно более читаемо. Кроме того, быстрее читать слова на одинаковом расстоянии, поэтому я слышу. Если у вас нет стилистической причины для использования выравнивания, оставьте его влево, вправо или по центру. Специально для основного текста, используйте слева. (На самом деле вы хотите что-то вроде «вперед» для текста в другом направлении (например, иврит) ...)

Answer 9

Выравнивание текста может быть сделано несколькими способами.

Пара определений: настройка расстояния между словами - это «отслеживание». Настройка расстояния между символами - это «кернинг». Хорошие программы верстки делают кернинг автоматически, и он зависит от пары букв. Значение переменной переменной может быть точно определено ближе, чем значение переменной xa. Хорошие шрифты встроили таблицы подсказок кернинга, чтобы помочь в этом процессе.

В первые дни моноширинных шрифтов это было сделано путем вставки лишних пробелов между словами. Это сделано для очень неуклюжего вида продукции. Если у вас есть 4 пробела в конце строки и 6 пробелов в строке, 4 из них станут двойными пробелами.

Моноширинные шрифты не должны быть оправданы.

При использовании шрифтов переменной ширины у нас есть пробелы em, пробелы en и т. Д., Поэтому пространство можно распределить лучше.

Я думаю, что именно здесь сейчас большинство браузеров. Это работает достаточно хорошо большую часть времени. Для правильной работы необходимо выполнить следующие условия:

• Вам нужно разумное количество слов в строке.
• Большое слово в конце строки может создать проблемы.

Среднее слово на английском языке составляет 5 символов. Таким образом, в среднем у вас будет 5 символов (слово из 5 символов плюс пробел не уместится, поэтому будет перенесено на следующую строку)

Если в строке 10 слов, вам нужно добавить примерно половину стандартного пробела к каждому межсловному промежутку.

Если последнее слово длинное, например «головные боли», и для него нет места, теперь у вас есть 10 пробелов для распределения. Это начинает выглядеть плохо.

Здесь вступает в игру словарь переносов. Перенос слов может быть выполнен по алгоритму, но есть достаточно исключений, которые очень помогают при наличии словаря. (Существует специальный символ & shy; для мягких дефисов для слов, которых нет в вашем словаре.)

Дефис может разделить слово так, чтобы строка заполнялась более равномерно.

Эмпирически я решил, что длина строки в 65 em сделала хороший компромисс. Это дает 11-13 слов в строке большую часть времени.

Другой подход к обоснованию - разделить пространство между символами. Это позволяет избежать некоторых проблем, описанных выше, но все равно выглядит странно, если вы распределяете много места в недостаточном количестве строк. Время от времени вы видите это в газетах, где слово, кажется, имеет полный пробел между каждым символом. Это хороший аргумент для более длинной строки.

Хорошие программы для набора текста (InDesign, * TeX, Framemaker) делают комбинацию дополнительного пробела в промежутках между словами и крошечных лишних пробелов между символами.

В блоке появился новый объект text-justify, который можно использовать в CSS для изменения использования text-align: justify. Номинально он принимает опции

• авто (по умолчанию)
• * 1040 между словами *
• межсимвольный (+ распространять по наследству)
• нет

CanIuse https://caniuse.com/#search=text-justify Рабочая группа CSS https://drafts.csswg.org/css-text-3/#text-justify-property

CanIuse сообщает о соответствии только для Firefox прямо сейчас, Chrome поддерживает его, но требует, чтобы вы включили экспериментальные функции. CanIuse утверждает, что поддержка глючит. Зайдя на сайт отслеживания ошибок Chromium, утверждает, что это исправлено. Пойди разберись. Не проверял.

Другие прагматические моменты:

Я внес четыре изменения в таблицу стилей моего сайта:

• Максимальная длина линии 65 рем
• увеличение шрифта тела до 110%
• опережающее увеличение до 125%
• Оправданный текст.

Результатом было то, что время на сайте и количество страниц за сеанс удвоилось

Анекдотично, но может стоить вашего собственного теста.

Answer 10

Следует отметить, что Internet Explorer (по крайней мере) до версии 8 не отображает text-align: justify правильно. Вместо этого это интерпретируется как text-align: center.

Вот больше информации: выравнивание текста: выровнять

Вызвала у меня некоторые головные боли, чтобы выяснить, почему IE продолжал центрировать вещи. Может быть, это сэкономит кому-то еще время.