Техніки адаптивної друкарської розмітки тексту

14

Від автора: Коли справа доходить до адаптивного тексту в Мережі, крім простого зміни розміру контейнера і перезаливки тексту всередині нього можна зробити ще багато чого. Ця детальна стаття розкриває різні методи адаптації текстів.

Один з найважливіших аспектів адаптивного веб-дизайну – адаптивна типографська розмітка тексту. Коли постає питання адаптивного тексту в Мережі, крім простого зміни розміру контейнера і перезаливки тексту всередині нього можна зробити ще багато чого. Від вибору типу шрифту і його кольори до отримання розбірливого розміру, висоти і довжини рядка на різних екранах – існує кілька способів досягти гнучкого і дійсно адаптивного веб-тексту.

СПОЧАТКУ НАЙГОЛОВНІШЕ: РОБИМО ТЕКСТ ДОСТУПНИМ

До того, як перейти до методів зміни розміру тексту на різних екранах, потрібно переконатися, що ваш текст розбірливий і доступний, застосувавши достатній колірний контраст і легко читається шрифт, щоб від нього не втомлювалися очі.

Почнемо з того, що якщо текст нерозбірливий, то неважливо, скільки ви будете змінювати його розмір, він у вас все одно залишиться нечітким, а це, звичайно, зовсім не те, чого варто домагатися в першу чергу. Щоб гарантувати чіткість і доступність тексту, потрібно продумати три питання:

Вибрати читану гарнітуру шрифту

При виборі шрифту важливо вибрати читається. Не всі види шрифтів підходять для тіла тексту. Деякі, на зразок шрифтів artistic script, можуть відмінно підійти для коротких заголовків, але для основного тексту потрібно легко читається шрифт. Існує безліч шрифтів і сервісів, подібних Google Web Fonts і покращення якості її роботи, надають довгий список опцій, які пропонують допомогу з вибором шрифтів.

Крім того, правило @font-face в CSS дає вам можливість застосовувати на своїй сторінці настроювані шрифти, і при дуже гарній браузерної підтримки можна вже зараз почати ними користуватися, а також забезпечити неподдерживающие браузери альтернативним шрифтом. Для визначення шрифту за допомогою правила @font-face у наведеному нижче прикладі ми збираємося скористатися надійним синтаксисом Підлоги Айриша (Paul Irish).

Із-за різноманітності підтримуються браузерами форматів вам доведеться створити «набір шрифтів, що складається щонайменше з трьох файлів, для отримання браузерної підтримки: eot, woff і truetype.

Доступні сотні безкоштовних наборів шрифтів, що містять всі види файлів, потрібних для @font-face, а якщо вам потрібен інтерфейс шрифт, для якого потрібно ваш власний набір, то завжди можна застосувати Font Squirrel’s Font-Face Generator, відмінно генерує все, що потрібно для додавання нового шрифту на сторінку, тільки переконайтеся, що шрифт, для якого вам потрібно згенерувати @font-face, можна використовувати на законних підставах, і тоді можете продовжувати.

/* Заявіть свій шрифт з допомогою правила @font-face */
/* Джерело: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ */
@font-face {
font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot?’) format(‘eot’),
url(‘GraublauWeb.woff’) format(‘woff’),
url(‘GraublauWeb.ttf’) format(‘truetype’);
}

Після объвления його можна використовувати, як будь-який інший шрифт у своїй таблиці стилів, і забезпечувати альтернативу для тих браузерів, які нездатні прочитати ваш користувальницький шрифт, оголошений у правилі @font-face.

font-family: ‘Graublau Web’, ‘Droid Sans’, Arial, sans-serif; /* можна додати будь-яку кількість альтернативних шрифтів */

Браузери стануть відображати перший шрифт зі списку, який наткнуться, тому якщо ваш користувач переглядає сторінку в браузері, що підтримує @font-face, то побачить власний шрифт. Якщо ні, то побачить надані вами альтернативні варіанти, а якщо це не вдасться, то зможе побачити загальну опцію.

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

Джерела:

Відмінна @font-face 101 стаття у блозі ThemeForest

Ця стаття Дункана Мидуинтера (Duncan Midwinter) навчить вас, як створити власний шрифт за допомогою генератора Font-Face від Font Squirrel

Підлогу Айріш (Paul Irish) пояснює у своїй статті, чому вищезгаданий синтаксис @font-face дуже надійний

Доступність кольору шрифту

Вміст вебсайту в основному призначений для читання, а колір шрифту низької контрастності може зробити текст нечитабельним. Не поступайтеся високу читаність гарного оформлення. Це не просто дизайнерська підказка, при створенні контенту це нагальна необхідність.

Рекомендації щодо доступності контенту W3C визначають мінімальну контрастність тексту і його фону для того, щоб він читався людьми з помірним зниженням зору (це цілком звичайний процес). Ще один експеримент підтверджує, що час читання знижується, коли текст і фон сильно контрастують. Більш того, чутливість до контрастом з віком знижується.— вебсайт Contrast Rebellion

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

Є кілька засобів, що дозволяють виміряти рівень контрастності застосовуваних вами в дизайні квітів, один з них – це інструмент, який, крім того, можна використовувати для знаходження колірних поєднань, і який підраховує контрастність згідно з Рекомендаціями доступності контенту W3C.

Щоб підкреслити важливість читання і доступності шрифтів, а також зробити акцент на тому факті, що адаптивний вебдизайн означає не просто підгонку розмітки різними розмірами екранів, слід зазначити, що W3C у Модулі медиазапросов Рівня 4 серед інших нових властивостей також представила таку концепцію, як медиазапрос освітленості, яка, будучи застосована, дозволить дизайнерам і розробникам пристосовувати стиль документа до зовнішньої освітленості, при якому використовується пристрій, щоб гарантувати максимальну читаність вмісту веб-сторінки. Для запуску цього нового медиасвойства пристрій користувача має бути оснащений сенсором світла.

По суті, медиазапрос освітленості luminosity дає можливість змінювати стилі веб-сторінки всередині правила CSS @media, як у звичайному медиазапросе при визначенні нових стилів в залежності від розміру екрану, але в даному випадку ви визначаєте нові властивості на основі певного сенсором пристрою значення освітленості, яке приймає одне з трьох значень: тьмяне (dim), нормальний (normal) та рясне (washed).

Наприклад, для зміни кольору фону і тексту в різних умовах освітленості ви написали б щось на зразок цього:

@media (luminosity: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
@media (luminosity: dim) {
body {
background: #e9e4e3;
}
}
@media (luminosity: washed) {
body {
background: #ffffff;
}
}

Можливо, ви знайомі з f.lux: це додаток, яке змушує колір дисплея вашого комп’ютера адаптуватися до часу доби: тепла вночі і схожий на сонячне світло протягом дня. З допомогою медиазапроса освітленості можна змінювати стилі сторінки так, щоб адаптувати їх до умов зовнішньої освітленості, в точності як це робить f.lux, і значно полегшували читання вмісту ваших веб-сторінок.

Ми не будемо вдаватися в деталі цього медиазапроса, так як він ще знаходиться в стадії робочого проекту і поки не підтримується жодним браузером, але варто відзначити, що адаптація тексту не обмежується зміною його розміру в різних вікнах. Звичайно, медиазапрос освітленості вживається не тільки для призначення стилів тексту в різних умовах освітленості, але, можливо, стане найбільш логічним випадком застосування.

Прочитати більше про медиазапросе освітленості можна в робочому проекті медиазапросов Рівня 4 W3C.

Краще використовувати «справжній» текст, а не графічний

Текст можна трансформувати в звук за допомогою голосових синтезаторів екранних скринридеров. Також його без втрати якості можна збільшувати за допомогою екранного збільшення або спеціальної програми. Існує дві основні причини, чому в цілях доступності так важливо, щоб вміст у тестовому форматі. Хоча можливо забезпечити альтернативний текст для графіки, найчастіше в ній не можна збільшувати текст без втрати якості (якщо тільки векторна графіка не така як масштабована векторна графіка [SVG] або Flash, але це означає потенційні проблеми доступності).— Пам’ятайте про веб-доступності

При створенні адаптивного вебдизайну, що враховує різні екрани і користувачів, також доводиться пам’ятати про відвідувачів з обмеженими можливостями і гарантувати їм доступ до вашого контенту. Адаптивний вебдизайн – це більше, ніж проста підгонка розмітки вебсайту до розмірів екранів пристроїв, це також означає, що ви гарантуєте відповідність вашого сайту запитів користувачів для того, щоб ті змогли отримати до нього доступ з будь-якого пристрою незалежно від вмісту.

Тепер, коли основні моменти доступності головного шрифту розкриті, ми досліджуємо різні способи створення гнучкого і адаптивного веб-тексту.

РОБИМО ВЕЛИКІ ЗАГОЛОВКИ АДАПТИВНИМИ

Застосування плагін jQuery

Існує три досить відомих плагіна для адаптації великих заголовків: FitText і slabText. З їх допомогою можна створювати великі, сміливі адаптивні заголовки, при будь-яких розмірах заповнюють ширину свого батьківського елемента.

Серед них, здається, один має переваги перед двома іншими – це плагін slabText розробника Брайана Макалістера (Brian McAllister), який при відображенні тексту поєднує FitText з алгоритмом slabtype Еріка Лойєра (Erik Loyer) для створення гнучких і масштабованих адаптивних заголовків.

Простіше кажучи, скрипт ділить заголовки рядків до зміни розміру кожного рядка таким чином, щоб вона заповнила доступне горизонтальне простір. Ідеальне кількість символів кожного рядка підраховується шляхом ділення наявної ширини на піксельний розмір шрифту – потім скрипт застосовує ідеальне кількість знаків для поділу заголовка на словосполучення, які відображаються як окремі рядки тексту.— Демо-сторінка slabText

Застосовується плагін досить просто. Припустимо, що у вас є заголовок, який повинен бути великим, займати весь свій контейнер і бути гнучким – все, що потрібно зробити, це включити на свою сторінку плагін, додати в таблицю рекомендовані на демо-сторінці стилі (хоча мушу зазначити, що я пробував застосовувати плагін без них і все працювало ідеально), а потім викликати його до свого заголовку.

Ось демо-приклад використання плагіна slabText. Поглянути на його оригінал можна, подивившись код в закладках HTML, CSS і JS. Код досить простий і говорить сам за себе. Спробуйте дивитися демо-приклад в повноекранному режимі і змінювати вікно браузера, щоб було видно, як розмір тексту адаптується до розміру екрана.

See the Pen Responsive Headline using the slabText Plugin by Sara Soueidan (@SaraSoueidan) on CodePen

І вуаля! У вас вийшов повністю адаптивний, гнучкий, великий і чіткий заголовок, який відмінно виглядає на екранах всіх розмірів. Плагіном BigText Зака Летермана (Zach Leatherman) користуватися теж легко і просто. jQuery BigText приймає один елемент і змінює розмір тексту всередині div а його дочірнього елемента, щоб пристосуватися до ширини батьківського елемента. Розмітка буде виглядати так:

The elusive
BIGTEXT
plugin exclusively
captured on film

Вам доведеться всього лише включити в свою сторінку ісходник плагіна і викликати його до містить текст батьківського елементу, і текст всередині нього стане змінювати розмір так, щоб при будь-якому розвитку подій адаптуватися до його ширині:

$(‘#bigtext’).bigtext();

Плагін автоматично змінює розмір тексту з базового так, щоб підігнати його до ширини елемента незалежно від вихідного розміру його шрифту.

Використання одиниць вимірювання вікна перегляду CSS

Ефекту, аналогічного досягнутому попередніми плагінів, можна добитися за допомогою одиниць виміру вікна перегляду CSS: vw, vh, vmax і vmin.

Застосування таких одиниць дає вам можливість забезпечити постійну відповідність тексту ширині свого контейнера, так як розмір шрифту змінюється відносно вихідного містить блоку, вікна перегляду, який є розміром вікна браузера, і при зміні його ширини також змінюється розмір шрифту. Звучить дуже схоже на те, як працюють вищенаведені FitText і slabText, вірно? Це досить дивно, беручи до уваги, що того ж ефекту можна домогтися за допомогою плагінів jQuery, а шляхом застосування одного лише CSS. Однак результати, досягнуті з допомогою одиниць виміру, менш гнучкі, ніж за допомогою плагінів, так як fitText і slabText (а також bigText) автоматично розтягують заголовки з тим, щоб ті заповнювали ширину свого контейнера у всіх рядках, тому вони продовжують працювати і при зміні кількості тексту в заголовку, але це не випадок застосування одиниць вікна перегляду, так як для них вам доведеться вручну регулювати розміри.

Довжина на основі процентного співвідношення вікна перегляду відносна розміром вихідного містить блоку. При зміні висоти або ширини блоку вони відповідно масштабуються.

1vw = дорівнює 1% ширини вихідного містить блоку. 1vh = дорівнює 1% висоти вихідного містить блоку. 1vmin = дорівнює меншому з ‘vw’ або ‘vh’. 1vmax = дорівнює більшій з ‘vw’ або ‘vh’. — Розділ значень і одиниць виміру W3C Рівень 3

При використанні цих одиниць з font-size всього одна буква приймає розмір шрифту, але, цитую Кріса Койера (Chris Coyier): «Як відомо, в немоноширинных шрифтах ширина літери досить довільна. Думаю, потрібно лише налаштувати значення так, як вам потрібно. Що, загалом, ми і займаємося, правильно?».

Нижче наведено приклад зміни розміру заголовка з використанням одиниць вимірювання вікна перегляду. Аналогічно попередньому демо, ви можете подивитися код в панелях вставленого прикладу. Крім того, переконайтеся, що переглядаєте цей демо підтримує браузері. При використанні одиниць вимірювання вікна перегляду CSS слід бути уважним до браузерної підтримки.

See the Pen Responsive Headline Using CSS Viewport Units by Sara Soueidan (@SaraSoueidan) on CodePen

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

Зверніть увагу на те, що при зміні вікна браузера шрифт не пристосовується до нового розміру вікна перегляду, що, швидше за все, є дефектом. Розмір шрифту змінюється так, щоб підходити до розміру свого контейнера при оновленні сторінки. Щоб виправити цю проблему (дозволити зміну розміру без необхідності в оновленні сторінки) вам потрібно викликати «перемальовування» (repaint) елемента. Зробити це можна, наслідуючи приклад Кріса Койера (Chris Coyier) і застосувавши для перемальовування jQuery. Заради того, щоб вищенаведений демо-приклад запрацював, я використав фрагмент коду Кріса, змінює z-index заголовка при зміні розміру вікна, викликаючи перемальовування і, отже, з прикладу видно, як заголовок змінюється при зміні розміру браузера.

Якщо хочете більше дізнатися про одиницях виміру вікна перегляду CSS, пропоную до розгляду наступні ресурси:

Друкарська розмітка при зміні вікна перегляду на CSS-Tricks

Специфікація значень і одиниць W3C CSS

Стаття про одиницях виміру вікна перегляду CSS розробників Opera

Стаття про одиницях виміру, пов’язаних з вікном перегляду в блозі Treehouse

Використання медиазапросов

Останній і найвідоміший спосіб адаптації заголовків – використання старих добрих медиазапросов для визначення розміру шрифту різних екранів з допомогою набору певних контрольних крапок, що служать для відповідного підбору розміру шрифту. Само собою, остаточний розмір шрифту при цьому не буде на 100% гнучким, як у попередніх техніках.

Припустимо, у вас в розмітці заголовок першого рівня, його можна змусити змінювати розмір на різних екранах з допомогою медиазапросов, як тут:

body {
font-size: 100%; /* почніть з гнучкою вихідної бази, більш докладно про це написано в наступному розділі */
}
h1 {
font-size: 2.5 em;
}
@media screen and (max-width: 50em) {
h1 {
font-size:2em;
}
}
@media screen and (max-width: 40em) {
h1 {
font-size:1.5 em;
}
}
@media screen and (max-width: 30em) {
h1 {
font-size:1.2 em;
}
}

Варто відзначити, що при заяві медиазапросов найкраще використовувати для визначення контрольних точок em , так як пікселі при збільшенні сторінки активують горизонтальну смугу прокручування і не так добре масштабуються. Прочитайте докладніше про пропорційні медиазапросах в блозі Cloud Four. У наступному розділі ми також з’ясуємо, чому встановлення розміру шрифту в одиницях em переважніше використання пікселів.

РОБИМО АДАПТИВНИМ ТЕКСТ BODY

Адаптуючи текст body, важливо пам’ятати кілька важливих моментів. При підтримці ідеальної читаності і розумної довжини рядків доводиться не лише змінювати розмір тексту його відповідності контейнера, але і зберігати ритміку по вертикалі за допомогою оптимальної і гнучкої довжини рядка, переконайтеся, що ваш текст добре масштабується на екранах з високою роздільною здатністю і користувач може легко змінювати його розмір. Вищезазначені питання можна вирішити, використовуючи пропорційні і відносні одиниці для визначення розміру свого шрифту і призначення висоти рядків.

Застосування em і медизапросов

Ітан Маркотт (Ethan Marcotte), прабатько ідеї адаптивного веб-дизайну, написав чудову статтю в блозі Adobe покращення якості її роботи, пояснюючи, чому застосовувати em (і rem, який ми розглянемо в наступному розділі) для зміни розміру шрифту набагато краще, ніж пікселі.

До деталізації переваг застосування em важливо знати, чому пікселі – це погана ідея. Пікселі забезпечують високий рівень контролю над розміром тексту, але мають широко відомий недолік: текст не масштабується при зміні його розміру в Internet explorer’і, чому у вашого читача немає можливості при необхідності збільшити розмір шрифту на сторінці, коли ви користуєтеся пікселями. «Зараз, абсолютно вірно, багато браузерів настільних комп’ютерів, включаючи більш пізні версії IE можуть певним чином збільшувати/зменшувати сторінку, що дозволяє збільшити розмір дизайну, включаючи текст. Але більш старі версії IE, на жаль, все ще відстають». З іншого боку, застосування для зміни розміру тексту em абсолютно позбавляє нас від цієї проблеми.

Більш того, рекомендується використовувати значення процентного співвідношення для розміру шрифту body сторінки та визначати розмір контенту пропорційно числу. Заявивши розмір шрифту body у відсотках, ви гарантуєте гнучку основу, на базі якої можна змінювати розміри тексту за допомогою відносних одиниць начебто em. Визначення розміру шрифту body у 100% встановлює текст на розмір браузера по замовчуванню, який зазвичай складає 16px.

Багато розробники схильні – чи воліють користуватися базовим значенням body у 62,5% замість 100%, так як остаточний застосований до нього розмір шрифту буде в точності 10px і, таким чином, стає набагато легше визначати розміри інших шрифтів сторінки щодо цього числа, але Річард Раттер (Richard Rutter), автор вихідної методики 62,5%, написав статтю для A List Apart, де рекомендує 100% як набагато кращу основу, гарантує більш стабільні кросбраузерні результати.

Отже, пам’ятаючи про це, можна зробити текст своєї сторінки адаптивним з допомогою em і медиазапросов. Найпростіший приклад буде приблизно таким:

body {
font-size:100%; /* гнучка основа */
}
p {
font-size: 1.25 em; /* 1,25 em щодо основи в 16px до body в результаті дасть розмір шрифту в 20px */
}

Щоб змінити шрифт для більш маленьких екранів з допомогою медиазапросов, достатньо просто змінити розмір шрифту body, а так як текст сторінки масштабується пропорційно йому, весь текст цілком теж зміниться, якщо поміняти всього один рядок CSS:

@media screen and (max-width: 40em) {
body {
font-size:90%;
}
}
@media screen and (max-width: 30em) {
body {
font-size:80%;
}
}

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

Як ви, можливо, вже здогадалися, висоту рядка теж можна визначити em замість пікселів. Якщо застосувати пікселі, то при зміні читачем сторінки, наприклад, розмір шрифту збільшиться без відповідного збільшення висоти рядка, і інтервал між рядків залишиться маленьким, рядки зіб’ються разом, загубиться вертикальна ритміка, а текст стане дуже складно читати.

Визначивши висоту рядка в відносних одиницях, ми також гарантуємо, що по мірі зменшення тексту займаний їм вертикальний проміжок також зменшиться, що дуже нагально для маленьких екранів, де і так занадто мало вертикального простору для читання.

Значення висоти рядка, що полегшує читання і не діє негативно на зір — 1,4 em тексту тіла і 1,2 em – для заголовків. Вони можуть змінюватися в залежності від застосовуваних вами шрифтів, але по суті вони звичайні. Так, додавши до вищенаведеними правилами пропорційні значення висоти рядка, ми отримаємо:

body {
font-size: 100%; /* гнучка основа */
}
p {
font-size: 1.4 em; /* 1.4 em щодо основи в 16px до body в результаті дасть розмір шрифту в 20px */
line-height: 1.4 em;
}
/* а якщо заголовків визначені стилі, ми також додамо */
h1, h2, h3, h4, h5, h6 {
line-height: 1.2 em;
}

Ще краще, більш гнучко і зручно, вийде, якщо встановити висоту рядків за допомогою значень без одиниць вимірювання. Ерік Мейер (Eric Meyer) написав чудову і дуже зрозумілу статтю, що пояснює, чому краще встановити висоту рядка в них. Знайдіть час її прочитати. Деякі важливі моменти:

1. При призначенні стилів своїм шрифти краще всього використовувати якогось роду скидання CSS, так як у браузерів зумовлені поля заголовків, абзаців, які можуть суперечити того інтервалу, який ви хочете призначити своїм рядками.

2. При роботі над вертикальною ритмікою своєї сторінки не забувайте про встановлення відповідного поля між абзацами, для того, щоб ритм дотримувався на всій сторінці.

Браузери за замовчуванням звертаються з абзацами, встановлюючи їм верхнє і нижнє поле в 1em. У нашому випадку це дає проміжки між абзацами в 12px і, отже, порушує задану ритміку тексту. Щоб її підтримувати, проміжки між абзацами потрібно прив’язати до основної одиниці виміру рядка. Це порівняно просто зробити, якщо встановити значення верхнього і нижнього полів рівними висоті рядка.— Річард Раттер (Richard Rutter) «Складайте вертикальну ритміку», блог 24Ways

3. Для установки розмірів шрифту в em є просте правило, якого потрібно дотримуватися при визначенні альтернативи em пиксельному значенням. Стаття Ітана Маркотта (Ethan Marcotte) в блозі покращення якості її роботи пояснює, як точно вирахувати розміри шрифту em, тому постарайтеся прочитати її, якщо не знаєте цього.

Застосування rem і медиазапросов

Як і em, rem – теж відносна одиниця вимірювання CSS. Вона дуже схожа на em за винятком того, що розмір шрифту, визначений за допомогою rem, встановлюється щодо розміру шрифту кореневого елементу html, а не body, ось звідки взялася буква r в rem, так як rem означає “root em“.

Зміна розміру тексту за допомогою rem дуже схоже на те ж саме з em, з тими ж перевагами і одним маленьким відмінністю: ви встановлюєте розмір шрифту в 100% до елемента html замість елемента body, а потім для зміни тексту медиазапросах змінюєте значення елемента html, як ми це робили раніше з елементом body.

Але якщо rem і em так схожі, то навіщо користуватися rem? Яке у rem є перевага перед em? В rem найкраще, що можна міняти розмір тексту всього вмісту в контексті кореневого елемента, а не його контейнера. Наприклад, зміна розміру вкладених списків з допомогою em через каскадування може виявитися неакуратною і трудомісткою роботою:

Якщо ви вирішите, що пункти списку повинні бути font-size: 1.1 em, а потім в них повинні бути вкладені списки, вони будуть каскадироваться і збільшувати розмір шрифту дочірніх списків. Воно вам напевно не потрібно. Можна виправити за допомогою li li { font-size: 1em; }, але це один з тих моментів, що здатні зруйнувати всю роботу. Тут-то і стане в нагоді rem, але із-за не надто великий браузерної підтримки (IE 9+) він виявитися вельми підступним.— Чому Em’и? (стаття Кріса Койера (Chris Coyier)

Хоча браузерна підтримка стала вельми значною, вам може знадобитися забезпечення альтернативи в пікселях для старих браузерів, так як звернення до значень em знову поверне вас до контекстної складності em, якій ви спробували уникнути в той момент, коли вирішили замість них використовувати rem.

Якщо ви користуєтеся препроцесором CSS начебто Sass, що я настійно рекомендую робити, то можна застосувати мікс, який виконає для вас всі обчислення альтернативного варіанту. Для rem є кілька миксинов, можна вибрати найбільш підходящий і почати вже сьогодні застосовувати rem у своїх проектах.

Використання цієї одиниці також переважно при роботі над великомасштабними проектами з великою кількістю контенту і модулів, де контроль над контекстом і розмірами шрифту може виявитися дуже виснажливим, тому дуже зручно застосовувати відносну одиницю, що не вимагає обізнаності контексті елемента.

Застосування одиниць вимірювання вікна перегляду CSS

Використання для адаптації тексту body одиниць вимірювання вікна перегляду CSS робиться таким же способом і з тих же причин, які згадані в попередньому розділі, де ми застосовували їх для адаптації великих заголовків, тому не станемо заново описувати цей метод.

Застосування цих одиниць для тексту body володіє явними перевагами перед попередніми методами – з em і rem текст стає на 100% гнучким і не залежить від набору контрольних точок медиазапроса; він буде змінювати розмір і підлаштовуватися до розміру свого контейнера без оглядки на те, як або коли змінюється ширина.

Приклад використання одиниць вимірювання вікна перегляду, створення гнучкого тексту ви побачите в наступному розділі.

Використання плагіна jQuery

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

Якщо рядок занадто довга, погляду важко зосередитися на тексті. Це відбувається тому, що довжина не дає зрозуміти, де рядок починається, а де закінчується. Більше того, у великих текстових блоках може виявитися складним продовжити читання рядка.

Якщо рядок занадто коротка, погляд доведеться часто переводити назад, порушуючи ритм читання. Занадто короткі рядки також мають тенденцію вводити читачів в напружений стан, змушуючи їх починати читання наступного рядка до закінчення поточної (і таким чином пропускаючи потенційно важливі слова).—Читаність: оптимальна довжина рядка

Хороша довжина дозволяє погляду читача легко і природно ковзати від закінчення одного рядка до початку наступної. Оптимальною довжиною рядка тексту тіла вважається 50-60 символів, включаючи пробіли, а дехто каже, що дозволено до 75 і навіть 80 символів.

При зміні розміру тексту для його припасування до ширини елементів в різних екранах потрібно пам’ятати про те, що великий текст на маленькому екрані зробить занадто короткі рядки, а маленький текст на великому або широкому – рядки, довжина яких буде перевищувати рекомендований для гарною читаності кількість слів, отже, при такому розвитку подій ви ризикуєте отримати погану читаність і, відповідно, погане враження користувача.

Пам’ятаючи про це, краще за все знайти спосіб зменшити розмір шрифту на маленькому екрані і збільшити його на великому, таким чином зменшуючи кількість слів на великих екранах і збільшуючи його на маленьких із збереженням розумної кількості слів і поліпшенням доступності. І бажано домогтися такої зміни розміру автоматично – без ручного встановлення розміру шрифту в медиазапросах, отримавши, таким чином, на 100% гнучкий текст body, що в поєднанні з відносною висотою рядки та збалансованої ритмікою по вертикалі створить оптимальне враження від читання або, щонайменше, наблизить нас до ідеалу.

Одиниці виміру вікна перегляду CSS можуть допомогти досягти гнучкості, потрібної нам для зміни розміру тексту по мірі масштабування ширини вікна перегляду, але проблема в тому, що при зменшенні екрану текст стає менше, і може вийти занадто дрібним і нечитабельним на маленьких екранах занадто великим на великих, а можливості обмежити мінімум і максимум розміру шрифту не існує, окрім як знову почати використовувати медиазапросы, установлюючи спеціальний розмір шрифту для різних екранів, і, крім того, на шляху до досягнення істинно гнучких текстів у всіх браузерах все одно стирчить перешкода – браузерна підтримка.

Нижче наведено приклад використання одиниць вимірювання вікна перегляду тексту body. При зміні розміру вікна браузера і перегляду ширина зменшується, текст стає занадто дрібним для нормального читання по досягненні ширини вікна перегляду приблизно в 480px. Я додав пару медиазапросов для регулювання розміру на маленьких екранах і прокоментував їх для того, щоб було видно, що шрифт продовжує зменшуватися в розмірах, поки не стане абсолютно нечитабельним. Приберіть коментарі правил медиазапросов, якщо хочете відрегулювати розмір шрифту на маленьких екранах.

See the Pen Fluid Body Type using Viewport Units by Sara Soueidan (@SaraSoueidan) on CodePen

FlowTypeJS – це плагін, який працює зі зміною розміру шрифтів і висоти рядків в залежності від ширини певного елемента, так виходить гнучкий текст на зразок того, який забезпечують одиниці виміру вікна перегляду, але, звичайно, у нього є перед ними деякі переваги: кросбраузерна підтримка і опції, які дають можливість визначати мінімальний та максимальний розмір шрифту, щоб текст не ставав більше або менше потрібного.

Техніки адаптивної друкарської розмітки тексту

Плагін FlowType використовується просто: ви робите на сторінці посилання на нього, додаєте кілька стилів шрифтів для користувачів з відключеним Javascript’ом, викликаєте плагін до будь-якого елементу, який містить текстовий контент, який потрібно зробити гнучким, і модифікуєте його з використанням доступних в цьому плагіні опцій. Більше інформації про можливості плагіна є на домашній сторінці.

Нижче наведено приклад. Замість використання одиниць вимірювання вікна перегляду я взяв плагін FlowType і викликав його до фрагмент тексту, який додав лише заради прикладу, а в опціях плагіна визначив мінімальний і максимальний розмір шрифту. Дивіться код нижче в закладках.

See the Pen Fluid Body Type using FlowTypeJS by Sara Soueidan (@SaraSoueidan) on CodePen

Бачите, як легко домогтися з його допомогою гнучкості тексту, при цьому не потрібно турбуватися про додавання додаткових правил медиазапросов.

Використання запитів до елементів

Запити до елементів схожі на медиазапросы тим, що при відповідності умові буде застосовано якийсь CSS. Умови таких запитів (min-width, max-width, min-height max-height) засновані на елементах, а не екранах. Але справа в тому, що запити до елементів CSS ще навіть не існують.

Концепція народилася у статті Іана Сторма Тейлора (Ian Storm Taylor), де він пояснює, чому домогтися дійсно модульного CSS можна з допомогою медиазапросов, і що можливість призначення контрольних точок елементу, а не браузеру – набагато кращий спосіб побудови елементів багаторазового використання з модульними стилями. Запит до елемента буде виглядати приблизно так:

.main-nav (max-width: 30em) {
font-size: 0.75 em;
}

Слідом за статтею Іана була опублікована ще одна стаття на цю тему в Smashing Magazine, і Тайсоном Матанихом (Tyson Matanich) представлений полифил запитів до елементу. З іншого боку, полифил ElementQuery використовує аналогічний вищенаведеному синтаксис, підтримуючи селектор атрибуту ~= для перевірки того, чи міститься значення в розділеному пробілами списку. Наприклад:

/* Це правило запитує себе про єдиному умови */
header[min-width~=»500px»] {
background-color: #eee;
}
/* Це правило запитує себе про безліч умов */
header[min-width~=»500px»][max-width~=»800px»] {
background-color: #eee;
}

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

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

Щоб зробити навігацію повністю гнучкою і, таким чином, багаторазової використовується, можна було б визначити адаптивні стилі в залежності від того, як змінюється її власна ширина. Вийде, що ви скажете: без різниці, де знаходиться навігація – в широкому верхньому колонтитулі або вузькою бічній колонці – мені потрібно, щоб її посилання «плавали» поруч один з одним і розмір шрифту був 1em, коли вона досить широка, щоб утримувати свої плаваючі елементи – наприклад, коли її ширина більше або дорівнює 400px, а якщо вона менше 400px, потрібно, щоб пункти навігації знаходилися один над іншим, а розмір шрифту зменшився до 0,8 em.

Отже, бачите: цей метод схожий на попередні, де використовувалися em і rem з медиазапросами, але останні замінені на запити до елементів.

Тайсон Матаних (Tyson Matanich) створив добірку демо-прикладів на сайті Codepen, що демонструють, як можна зробити деякі елементи адаптивними з допомогою полифила ElementQuery. Нижче наведений один з них, що показує зміну стилів навігації в залежності від її власної ширини. Подивіться в закладці CSS і самі пограйте з кодом, щоб побачити зміна стилів.

See the Pen Responsive menu using elementQuery by Sara Soueidan (@SaraSoueidan) on CodePen

ІНТЕРАКТИВНО АДАПТИВНИЙ ТЕКСТ?

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

Практичний цей метод чи ні, він виразно варто згадки при роботі з адаптивною друкарської розміткою тексту як креативний і корисний проект. Можна побачити його роботу на домашній сторінці проекту. Вам знадобиться веб-камера.

Текст демо-приклад збільшується, якщо ви відсували від екрану, і зменшується при вашому наближенні, підтримуючи читану довжину рядка, що не перевищує рекомендовану кількість слів при зменшенні тексту. Правда, здорово? Техніки адаптивної друкарської розмітки тексту

ПІСЛЯМОВА

Корисно подивитися, як виглядає і працює типографіка вашої сторінки – прибрати всі зображень і медіасередовищі і перевірити вигляд свого контенту без них. Добре вирівнюється текст? Достатньо збалансований він по вертикалі? Читаються рядки і шрифти? Що з його ієрархією?

Існує тенденція вважати, що адаптивний веб на 99,9% буде друкарської розміткою, а при зростаючій «ускладненість» сучасних пристроїв і ті проблеми, які вони створюють адаптивного веб-дизайну, багато дизайнерів намагаються застосовувати спрощену розмітку, яка здебільшого сфокусована на друкарською розмітці, так як, взагалі-то, першим читається вміст. З-за цього адаптивна типографська розмітка – один з найважливіших аспектів сучасного веб-дизайну.

Зробити типографіку тексту своєї сторінки читається нескладно, але дуже важливо, якщо ви займаєтеся адаптивними вебсайтами. Сподіваюся, що ця стаття допомогла вам розглянути спектр тих технік, з яких можна вибирати при «адаптації» текстів, і сподіваюся, що ви почерпнули з неї щось нове і вона виявилася вам корисною. Дякую за прочитання! =)