Должен ли я избегать использования «text-align: justify;»?

Question

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

Уменьшает ли это читаемость или вызывает проблемы?

Answer 1

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

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

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

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

Редактировать: Как упоминается ниже, css hyphens возможны, за исключением случаев, когда это невозможно (не в Chrome). Плюс, css4 offers even more control.

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

Edit 2: CSS теперь позволяет hyphenation с hyphens собственности [browser support]. Сейчас PPK говорит add it to your stylesheets, в то время как Эрик Мейер говорит just add it for mobile.

Edit 3: A good little overview вещей, доступных нам теперь, с некоторыми SASS.

Answer 6

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

Answer 7

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

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

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

Answer 8

Erhh ... No ...!

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

Answer 9

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

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

Answer 10

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

Answer 11

Вы также можете использовать текст-оправдание: газета. Текст-оправдывающий тег css помогает вам контролировать, как вы обертываете текст, когда вы оправдываете

Answer 12

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

Здесь подробнее: text-align: justify

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