Чи є підстави уникати використання text-align: justify;?
Це зменшує читабельність чи викликає проблеми?
Відповіді:
По-перше, це суто проблема та рішення, пов’язане з дизайном. Дизайн вашої сітки визначає, чи потрібен текст, що виправдовує. Я думаю, що виправдання вирівнювання одне не має великого впливу на зручність використання. Погана типографіка, яка робить текст нерозбірливим - це те, що зменшує зручність використання. Тим не менш, переконайтеся, що у вас є тверді контрасти та гарний баланс інтервалів у вашому типі. Розмір шрифту теж має значення.
Цей сайт є успішною спробою виправдання тексту в Інтернеті. Оскільки ви не можете керувати пробілами між буквами та словами майже так само, як за допомогою CSS, як за допомогою InDesign, набагато складніше виправдати текст і не пропускати "річки" пробілів у ваші рядки, що трапляється, коли пробіли між словами перевищує пробіли між рядками. Речі, які ускладнюють виправдання тексту: довгі слова, ширина рядків, в яких не вистачає слів, і занадто великий контраст між кольором тексту та фоном; вони роблять річки ширшими та очевиднішими.
Типографський ідеал - мати рівномірний текстовий блок, де, якщо ви примружитися, текстовий блок стає однорідним суцільним відтінком. Отже, якщо ви тримаєте текст приблизно на 10 пікселів і 60% сірого на білому тлі, і у вас є рядки, що вміщують близько 20 слів, виправдайте, що вирівнювання не повинно виглядати негарно. Але майте на увазі, це нічого не покращує зручність використання. Невеликий, порівняно легкий текст дратує багатьох людей, особливо старших читачів.
Я повинен зауважити, що за допомогою ­(м’якого переносу) правильного розділення довгих проблемних слів, таких як супер-дивовижні, ви можете імітувати належну версію (наприклад, InDesign). Є багато речей, які допоможуть вам це зробити. Я б порекомендував логіку приховування, маніпулювання та відображення тексту, яку слід робити на стороні клієнта, можливо, з цим .
Редагувати : Як згадують інші нижче, дефіси css тепер можливі, крім неможливих (не в Chrome). Крім того, css4 пропонує ще більше контролю .
text-align: justify наразі не повинен використовуватися у браузерах. Вони погано обробляють найдрібніші деталі всередині, і результат закінчується містять багато річок, і немає ніякої підтримки для переносу (крім м’яких дефісів).
Примітка вище написана 4,5 роки тому. Справа повільно змінюється ... http://caniuse.com/#feat=css-hyphens
Редагувати: Гіфенатор був звернений до мене в коментарях до цієї відповіді. Схоже, це робить вирівнювання тексту виправданим, що варто використовувати, перевірити сайти, які його використовують. Можливо, ви захочете використовувати javascript для застосування вирівнювання тексту, перш ніж використовувати цей скрипт, щоб ті, хто не має javascript, не потрапляли.
Редагування 2:
CSS тепер дозволяє переносити дані з hyphensвластивістю [ підтримка браузера ]. PPK зараз каже, щоб додати його до своїх таблиць стилів , тоді як Ерік Мейер каже, що просто додайте його для мобільних пристроїв .
Редагування 3: Хороший невеликий огляд речей, доступних нам зараз, з деякими SASS.
Проблеми, висунуті іншими щодо виправдання вирівнювання, більш поширені у вузьких колон. Якщо ваші стовпці досить широкі по відношенню до розміру ваших шрифтів та інших параметрів, тоді виправдайте текст. Скажімо, ви хотіли б мати в середньому від 12 до 15 слів на рядок у середньому. Більше - краще.
Немає технічних причин цього не робити - це суто дизайнерське рішення. Багато людей вважають, що виправданий текст важче читати, але, гадаю, це залежить від вашої ситуації. Хоча це добре працює для друку, як правило, веб-браузери не дають достатнього контролю над можливим виведенням тексту, щоб гарантувати, що те, що ви обслуговуєте, не буде виглядати як лайно на екранах деяких людей.
Найкращий варіант - уникнути виправдання.
Я не можу придумати вагому причину, чому б не виправдовувати текст - у певний момент обсяг і ширина вмісту майже вимагають, щоб він був виправданим. Звичайно, у вас виникнуть проблеми із вмістом, що складається з певних сполучень слів, але, на мою думку, якщо ви бачите річки та незвично великі проміжки між словами, у вас взагалі інша проблема - читабельність та чіткість.
Чого б я не уникав, будь-якою ціною, це централізований основний текст. Я не думаю, що існує більший червоний прапор аматорського веб-дизайну, ніж це.
Я віддаю перевагу вирівнюванню зліва (text-align: left), оскільки воно, як правило, більш читабельне. Так само швидше читаю слова з рівним інтервалом, тому я чую. Якщо у вас немає стилістичної причини використовувати виправдання, тримайте його ліворуч, праворуч або в центрі. Спеціально для основного тексту, використовуйте ліворуч. (Насправді, ви хочете щось на зразок "переслати" для тексту в іншому напрямку (наприклад, іврит) ...)
Як і будь-яке питання веб-дизайну ... це залежить. Як було запропоновано, виправданий текст зазвичай не виглядає добре у вузьких колонках. Я б рекомендував це не використовувати як загальне правило для бічних панелей, оскільки бічні панелі зазвичай вузькі.
З основним копіюванням, яке часто рекомендується 10 слів на рядок (або з будь-якою кількістю вище цього), ви, мабуть, зможете уникнути виправданого тексту, і він буде виглядати досить добре більшу частину часу, якщо ви не використовуєте багато справді довгого слова та / або рядки.
Я думаю, що я вже прокачав цей сайт на StackOverflow, але Джон Тан використовує виправданий текст у своєму основному тексті (у межах статей), і це виглядає чудово в 99,99% випадків.
Обґрунтування не слід використовувати без переносу. Ось такий бібліотека переносів на основі PHP та порт цієї бібліотеки до плагіна WordPress: wp-Typography .
Я думаю, що з друком це нормально, але в більшості веб-браузерів це незручно через відсутність чіткого контролю інтервалів та переносів. Друкарні машини можуть навіть трохи зіграти на інтервалі літер або скороченні шрифтів, в деяких випадках, оскільки сторінки / стовпці (принаймні в журналах) можуть бути тонко налаштовані.
Е-е ... ні ...!
[серйозно] WordPress використовує виправдання, і я думаю, що це досить вагоме твердження щодо того, зменшує чи ні читабельність ...
Ви також можете використовувати виправдання тексту: газета. Тег CSS для вирівнювання тексту допомагає контролювати спосіб обтікання тексту під час обґрунтування
text-justifyіснує в останній версії чернетки текстового модуля CSS3, але значення newspaperне існувало (і, можливо, ніколи не існувало). Крім того, це властивості CSS , а не теги
text-justify: newspaperбув у 2003 році в CR для CSS3 Text , тому не зовсім точно стверджувати, що він ніколи * не існував - незалежно від того, чи був він власним. :)
Слід зазначити, що Internet Explorer (принаймні) до версії 8 відображається text-align: justifyнеправильно. Натомість це трактується як text-align: center.
Ось більше інформації: text-align: justify
Викликав у мене кілька головних болів, щоб з’ясувати, чому IE продовжував відцентровувати речі. Можливо, це економить хтось інший час.
Обґрунтування тексту можна зробити кількома способами.
Пара визначень: Налаштування інтервалу між словами є "відстеженням". Налаштування інтервалу між символами є "кернінгом". Хороші програми компонування виконують деякі кернінги автоматично, і вони змінюються залежно від пари літер. Va змінної може бути ядро ближче, ніж xa, в точності. Хороші шрифти вбудували таблиці підказок кернінгу, щоб допомогти в цьому процесі.
У перші дні монопросторових шрифтів це робилося шляхом вставлення зайвих пробілів між словами. Це створило дуже незграбний результат. Якби у вас було 4 пробіли в кінці рядка і 6 пробілів у рядку, 4 з них стали б подвійними пробілами.
Монокосмічні шрифти не повинні бути виправданими.
Зі шрифтами змінної ширини ми маємо пробіли, пробіли тощо, і тому простір може бути краще розподілений.
Думаю, саме тут зараз знаходиться більшість браузерів. Це працює досить добре більшу частину часу. Щоб він добре працював, необхідно виконувати такі умови:
Середнє слово англійською мовою - 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, стверджує, що це виправлено. Піди розберися. Не тестував.
Інші прагматичні моменти:
Я вніс чотири зміни в таблицю стилів мого сайту:
Результатом стало те, що час відвідування сайту та сторінок за сесію подвоївся.
Анекдотично, але, можливо, варто вашої власної перевірки.