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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эээ ... Нет ...!

[серьезно] WordPress использует justify, и я думаю, что это довольно сильное утверждение относительно того, снижает ли это удобочитаемость ...

Вы также можете использовать выравнивание текста: газета. Тег css с выравниванием по ширине текста помогает контролировать перенос текста при выравнивании по ширине.

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

Дополнительная информация: text-align: justify

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

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

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

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

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

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

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

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

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

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

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

Здесь в игру вступает словарь расстановки переносов. Расстановку переносов можно выполнять по алгоритму, но бывает достаточно исключений, когда наличие словаря очень помогает. (Для мягких дефисов для слов, которых нет в вашем словаре, используется специальный символ.)

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

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

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

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

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

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

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%
• Обоснованный текст.

В результате время на сайте и количество страниц за сеанс удвоились.

Анекдотично, но, возможно, стоит проверить.