Text-align justify

У иравніваніе тексту по ширині в CSS - це одна з тих «страшних» речей, якій постійно лякають маленьких дітей початківців дизайнерів. Причому мало хто може просто і доступно пояснити чому не можна використовувати justify. Всі пояснення зводяться до утвердження «просто не використовувати і все».

А чи так все погано насправді?

Навіщо це потрібно

Приклади вирівнювання тексту по ширині (одночасно по лівому і правому краю), часто можна побачити в газетах і журналах. Воно використовується для колонок невеликої ширини, щоб уникнути неприємного для очей «зазубрювання» тексту з правого боку рядка. Таке вирівнювання дозволяє збільшити зручність читання і швидкість читання. Невелика ширина колонки дозволяє погляду охоплювати відразу всю рядок, а не ковзати постійно зліва-направо, що значно знижує навантаження на очі Новомосковсктеля.

Ось парочка прикладів для порівняння:

Приклад вирівнювання тексту в колонках по лівому краю.

Приклад вирівнювання тексту в колонках по ширині.

Очевидно, що другий варіант більш зручний для читання, та й просто виглядає гармонійніше (є додаткова вертикальна лінія прив'язки, що надає тексту більш впорядкований вигляд).

Як це працює в Web

Я згоден, що з вирівнюванням у браузерів є певні проблеми. Задавши CSS -властивість text-align: justify для колонки тексту невеликої ширини (скажімо в 200-300 px), Ви можете побачити щось подібне:

З'являються «проблемні» місця у вигляді великих пробілів між словами, порушується загальний малюнок тексту. Бувають приклади і гірше, коли, наприклад, в рядку всього два коротких слова і вони вирівнюються по різні боки. Тобто, в нешироких колонках, браузери завжди намагаються розтягнути окремі слова на всю ширину рядка, незалежно від їх кількості та довжини. І саме це є основною проблемою для веб-дизайнерів.

Ех, нам би здорово допомогло яке-небудь властивість в CSS -спеціфікаціі min-word-spacing або max-word-spacing. але це тільки мої фантазії і доводиться використовувати те, що є.

justify-tester дозволяє «на льоту» змінювати ширину текстової колонки, розмір шрифту, його накреслення, насиченість і вирівнювання.

Як і в попередньому випадку, сподіваюся, скрипт допоможе вам розібратися з проблемами і знайти правильні рішення. Тестувати потрібно для кожного окремого випадку (дизайнерського рішення, розміру шрифту, ширини колонки і т.д.).

Однозначних висновків, які можуть бути застосовні «завжди і до всього» тут зробити не вийде. Я не буду сперечатися з тими, хто для себе вже вирішив не використовувати на сайтах вирівнювання по ширині, просто поділюся парочкою рекомендацій і своїх спостережень з тими, хто вирішив «ризикнути».

невеликі підсумки

Виявити «просвіти» в тексті просто. Достатньо злегка відсунутися від монітора і знизити різкість :) (прискіпливіше), щоб бачити не окремі букви і слова, а весь блок цілком. І ви обов'язково помітите «білі плями». У таких місцях напрямок погляду зривається і починає рухатися не зліва-направо, як зазвичай, а вгору.

Для більшості гарнітур середнього розміру (x-small, small, 11-12-13-14 px), яскраво виражені проблеми з вирівнюванням спостерігаються в колонках, шириною до 400 px (до 10 слів в рядку). Вони є і далі, але вже менш помітні, так як відстані між словами більш-менш рівні. Отже, небажано використовувати justify для рядків шириною менше 400 px.

Якщо ж, вам просто необхідно вирівняти текст по ширині, а довжина рядків невелика, спробуйте збільшити поміжрядкове відстань (line-height), до значення, коли відступи між рядками тексту будуть перевищувати відстань великих пробілів між словами. Це дозволить зберегти прийнятну Новомосковскемость тексту.

Ну і ще це додаток можна використовувати не за призначенням. для демонстрації окремих клієнтах, які хочуть «гумову» верстку, що текст на їхньому сайті буде складним для розуміння при великих дозволах моніторів (це я про «гумову», а не адаптивен розмітку).

Тоді допоможіть мені зробити її доступною для інших, або будьте в курсі останніх подій: