CSS властивості шрифтів

16

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

Тим не менш, в інтернеті, як у засобі комунікації, з’явилися свої особливості. Їх настільки багато, що ми прийшли до думки, що безшовний, безболісний перехід від друкованого формату веб-типографіці це ще та дилема. У своїй книзі Про Веб-Типографіці Jason Santa Maria пояснює:

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

Коли ж справа стосується інтернету, однакові сайти можуть відчуватися по-різному, все залежить від набору факторів, наприклад, різні пристрої, різні дозволи екранів, особисті настройки браузера і т. д. Деякі з цих факторів Jason пояснює далі…

«… може здатися, що шрифт занадто малий, інші сайти можуть змусити нас пропустити щось важливе, а треті можуть зробити читання майже неможливим.»

Беручи до уваги вищесказане, можна сказати, що інтернет це найкраще місце для тексту.», також як і Tim Brown говорить про свій шрифт Універсальний Typography. В інтернеті текст можна шукати, копіювати, переказувати, давати посилання на інші документи, його можна роздрукувати, він зручний і відкрито.

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

Нашим основним інструментом по зміні зовнішнього вигляду тексту є CSS. Всі представлені в цій статті властивості можна знайти в специфікації CSS Text Module.

«Цей модуль описує принципи управління шрифтом через CSS; ті властивості CSS, які відповідають за переклад вихідного тексту в форматовані абзаци.»

Іншими словами, CSS Module пояснює, як відображаються символи і слова в браузері, які в них літерами відстані, вирівнювання, як писати через дефіс і т. д.

Основна одиниця тексту або слова, а також, де саме в тексті допускається розрив, все це істотно залежить від використовуваного мови та її правил. Тому дуже важливо оголосити це в HTML документі (зазвичай, в атрибуті lang тега ).

У цій статті я не буду говорити про двох темах:

Шрифти, зокрема візуальне подання окремих символів, тобто знаки та їх властивості;

Властивості CSS відносяться до прикрас тексту, такі як підкреслення, тіні і насиченість.

Маніпуляція регістром літер

Буває, що потрібно написати частину тексту з великої літери, наприклад, ім’я і прізвище. CSS дозволяє це зробити з допомогою властивості text-transform.

Значення за замовчуванням для text-transform: none, до букв не застосовується ніяких ефектів.

Значення capitalize

Якщо вам необхідно відобразити перші літери слів у верхньому регістрі, а решту залишити без змін (не важливо де в HTML документі), використовуйте значення capitalize:

alice’s adventures in wonderland

h2 {
text-transform: capitalize;
}

CSS властивості шрифтів

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

Значення uppercase

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

h2 {
text-transform: uppercase;
}

CSS властивості шрифтів

Значення lowercase

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

Alice’s Adventures in Wonderland

h2 {
text-transform: lowercase;
}

CSS властивості шрифтів

Значення full-width

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

Не всі символи мають відповідну форму full-width, тому на ці символи значення просто не подіє.

h2 {
text-transform: full-width;
}

Нижче показано, як відображаються символи в Firefox:

CSS властивості шрифтів

Зауваження

У властивості text-transform просто чудова підтримка в браузерах. Всі сучасні браузери підтримують його.
Винятком є лише значення full-width, воно працює поки що лише в Firefox. В принципі це й зрозуміло, враховуючи те, що значення full-width може бути скасовано на етапі специфікації Candidate Recommendation.

Я зазначив маленьке невідповідність між версією Firefox v.39 і іншими сучасними браузерами в рендерінгу значення capitalize для слів з дефісом. Ось так це виглядає в Firefox:

CSS властивості шрифтів

Подивіться, як перший символ після дефіса все ще в нижньому регістрі. З іншого боку той самий текст у Chrome:

CSS властивості шрифтів

А в цьому прикладі символ, що йде за дефісом, не виняток; ці символи також відображаються з великої літери. Така поведінка спостерігається у всіх останніх версіях браузера, як вже було сказано за винятком Firefox.

І нарешті, каскадування властивостей. Якщо встановити властивість text-transform до контейнера, то його значення буде успадковано дочірніми елементами. Щоб прибрати непотрібні стилі встановіть для дочірніх елементів text-transform: none.

Дивитися демо по властивості text-transform.

Як працювати з пробілами

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

А що якщо це не основне призначення пробілів? Скажімо, якщо вам потрібно зберегти точну кількість прогалин у HTML документі. Це нормально, наприклад, коли ви пишіть код і хочете, щоб він відображався красиво і з відступами, а не в один рядок.

У таких випадках, якщо ви хочете змінити значення браузера за замовчуванням для пробілу, властивість white-space пропонує вам декілька цікавих варіантів.

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

Значення pre

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

element {
white-space: pre;
}

CSS властивості шрифтів

CSS властивості шрифтів

Якщо ви використовуєте Tab як пробілу, то за допомогою властивості tab-size можна змінювати його розмір, цілочисельні значення.

element {
white-space: pre;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}

Властивість tab-size не підтримується браузерами, але якщо вас дратує стандартний розмір таба, тобто спеціальний полифил.

Значення pre-wrap

Припустимо, ви хочете зберегти всі прогалини, як в исходнике, але також хочете, щоб текст сам переносився на новий рядок при досягненні краю контейнера. Значення pre-wrap зробить все за вас.

element {
white-space: pre-wrap;
}

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

CSS властивості шрифтів

CSS властивості шрифтів

Зменшіть вікно браузера, і ви побачите, як текст перестрибує на нові рядки.

CSS властивості шрифтів

Значення pre-line

Найцікавіше значення властивості white-space: pre-line. Крім того, що воно стискає послідовність пробілів в один, властивість веде себе так само, як normal. Якщо в исходнике є символ переходу на новий рядок або тег
, то вони зберігаються і у вікні браузера.

element {
white-space: pre-line;
}

CSS властивості шрифтів

CSS властивості шрифтів

Подивіться демо за значенням pre, pre-wrap і pre-line на CodePen.

Значення nowrap

Nowrap більше відомий як пробіл. У вас є контент, який не повинен поміщатися у вікно браузера? white-space: nowrap; допоможе з цим. Louis Lazaris посилається на наступний приклад.

CSS властивості шрифтів

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

CSS властивості шрифтів

У цьому і подібних випадках (іконки, наприклад) значення nowrap дуже зручно.

Інший цікавий спосіб застосування описала Sara Soueidan на Codrops у своєму блозі. Sara каже, що властивість white-space можна застосувати до будь-якого лінійного елементу, навіть зображенню.

«Іноді значення nowrap можна використовувати для горизонтальної галереї зображень, щоб зображення не з’їжджало на новий рядок.»

Я поліпшив її спосіб, додавши в звичайну JQuery карусель властивість white-space: nowrap. Демо:

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

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

Властивість word-warp/overflow-wrap

overflow-wrap працює, якщо властивість white-space встановлено так, щоб текст перестрибував на новий рядок (раніше називали word-wrap, повністю підтримується і працює у всіх сучасних браузерах так як успадкований від старого властивості). Має два значення: normal і break-word. При normal слова розриваються за прогалин, дефисам і т. д.

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

CSS властивості шрифтів

Встановимо значення break-word для властивості overflow-wrap, а для старих браузерів word-wrap:

element {
word-wrap: break-word;
overflow-wrap: break-word;
}

…і довге слово тепер розбита на рядки, вміщаються в контейнер.

CSS властивості шрифтів

Властивість hyphens

Розрив довгих слів хороша ідея, але отриманий текст може заплутати читача. Краще використовувати дефіс для переносу частини слова на новий рядок. Так користувачі відразу розуміють, що дивляться на одне довге слово на декількох рядках. В CSS для цього є властивість hyphens, яке можна використовувати в поєднанні з word-wrap: break-word.

А конкретніше, значення auto дозволяє переносити слова на новий рядок з додаванням дефіса, якщо це дозволяють правила мови або дефіс записаний в исходнике. Щоб все працювало правильно, переконайтеся, що встановлено атрибут lang із потрібною мовою:

.break-word.hyphens-auto {
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

CSS властивості шрифтів

Також можна прибрати дефіси. Встановіть hyphens: none:

.break-word.hyphens-none {
-moz-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

CSS властивості шрифтів

Можна відображати дефіси в слові, якщо дефіс присутня в розмітці, а текст необхідно перенести на наступний рядок. Це можна зробити за допомогою значення manual:

.break-word.hyphens-manual {
-moz-hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}

CSS властивості шрифтів

CSS властивості шрифтів

Властивість hyphens добре підтримується на всіх сучасних браузерах з вендорными префіксами, хоча є невеликі невідповідності. В останніх версіях Chrome (v.44) і Opera (v.30) на момент написання статті не підтримується значення auto.

Приклади вище в демо на CodePen.

Управляємо межбуквенным і межсловным інтервалами

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

В CSS є властивості word-spacing and letter-spacing, з допомогою яких можна контролювати відстані між словами і символами.

Властивість word-spacing

Значення властивості:

normal

length

percentage

При normal відстань між літерами за замовчуванням. Інтервал залежить від шрифту.

.normal {
word-spacing: normal;
}

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

.length {
word-spacing: 0.5 em;
}

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

.percentage {
word-spacing: 1%;
}

CSS властивості шрифтів

Властивість letter-spacing

Має два значення: normal або .

Значення normal залишає без зміни значення за замовчуванням між символами. Також воно скидає раніше встановлені значення letter-spacing на за замовчуванням. Наприклад, якщо ви встановили значення letter-spacing на 1em для батьківського блоку, але для дочірніх елементів хочете значення за замовчуванням, застосуйте до них значення normal.

element {
letter-spacing: normal;
}

CSS властивості шрифтів

використовує одиниці виміру px або em, до інтервалу за замовчуванням додається користувальницький інтервал.

element {
letter-spacing: 1em;
}

CSS властивості шрифтів

Додатково

Word-spacing застосуємо не тільки до слів. Його можна використовувати для будь-яких малих або терміново-блочних елементів.
Можна анімувати word-spacing і letter-spacing. Якщо використовувати властивість transition для анімації, то можна помітити, що letter-spacing: normal не працює в Firefox (v.39). Виправити можна, поставивши не normal, а 0em. Нижче представлено демо з анімацією властивостей word-spacing і letter-spacing:

Нещодавно додані значення і властивості для вирівнювання тексту

Властивість text-align вже давно відомо. Воно управляє вирівнюванням лінійного контенту, наприклад, тексту або зображень всередині блочних елементів. Значення left і right вирівнюють контент по лівому і правому краю відповідно, а значення center по центру. Justify-вирівнює текст по ширині блоку (крім останнього рядка, якщо вона не досягає краю контейнера).

Нещодавно додані два значення можуть бути корисні на іноземних сайтах з написанням справа наліво (RTL): start і end.

Для читають зліва направо (LTR) дані значення агалогичны left і right відповідно. Для читають справа наліво start відповідає значенню right, а end значення left.

element {
text-align: start;
}

CSS властивості шрифтів

element {
text-align: end;
}

CSS властивості шрифтів

Якщо застосувати text-align: match-parent до рядковий дочірньому елементу, то він успадкує батьківські значення вирівнювання. Значення start або end обчислюються залежно від мови батьківського елемента та його напрямки, і відповідно перетворюються в left або right.

Властивість text-align-last

Text-align-last нове властивість CSS. Властивість управляє вирівнюванням останнього рядка, вирівняного по ширині тексту в кінці параграфа або перед тегом br. Значення такі ж, як і у text-align, крім auto. У властивості text-align-last значення auto, дозволяє вирівняти останній рядок тексту так само, як у властивості text-align для всього тексту, якщо воно встановлено. Якщо text-align не використовується, то text-align-last приймає значення start.

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

На CodePen представлено демо.

Відступи тексту

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

CSS властивості шрифтів

Якщо у вашому дизайні є відступи, то можна використовувати властивість text-indent. Розглянемо можливі значення. Значення зазвичай у px або em:

element {
text-indent: 2em;
}

Відсотки:

element {
text-indent: 6%;
}

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

Each-line і hanging експериментальні значення, на момент написання статті не працюють ні в одному браузері. Демо по властивості text-indent

Висновок

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

У цій статті я розповів про деякі властивості CSS, маніпулюють форматуванням, переносом рядка і вирівнюванням тексту на веб-сторінці. Сміливо експериментуйте з представленими вище демо.