Як поліпшити буквицю з допомогою властивості initial-letter

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

Традиція використовувати буквиці в тексті стара, як сама друкарня, і сьогодні ми можемо імітувати їх за допомогою CSS псевдоэлемента ::first-letter. Однак, як відомо, стилізувати даний елемент вкрай незручно, але тут нам допоможе наш властивість initial-letter. Давайте подивимося, що це за властивість така, що ми можемо робити з його допомогою, а також чого можна чекати в майбутньому від нього.

Старий спосіб

Давайте спочатку поглянемо на демо нижче. Ми бачимо параграф тексту.

Тепер з допомогою псевдоэлемента ::first-letter ми отримуємо доступ до першої букві параграфа. У цьому підході ми повинні були б змусити текст обтікає першу букву з допомогою p::first-letter { float: left; }, тобто висмикуємо першу букву з параграфа і задаємо потрібний їй розмір:

Непогано, далі можна прописати властивості line-height, задати позиціонування і т. д. Даний спосіб також досить добре підтримується в браузерах. Однак він не ідеальний, нам потрібен повний контроль і гнучкість, щоб вичавити з буквиці все по максимуму.

Новий спосіб

Властивість initial-letter (на даний момент обговорюється як редакторський проект на W3C і буде стандартизовано незабаром) дасть нам повний типографський контроль, саме те, що ми хотіли. Дана властивість використовується в парі з first-letter. Перше отримане значення – розмір першої літери, тобто скільки рядків воно займе.

p::first-letter {
initial-letter: 3;
}

А так це буде виглядати:

Застереження

І на цьому нам доведеться зупинитися, вибачте. Підтримка даного властивості все ще дуже слабка. На момент написання статті демо вище коректно відображався лише в Safari OS X і у версії для iOS, і то, тому що ми використовуємо префікс: -webkit-initial-letter: 3;

Якщо в демо вище у вас нічого не працює, ось вам скріншот:

Перша буква в Safari OS X

Перше, що можна помітити, це різні шрифти. Мабуть, жоден браузер не може показувати нормально властивість initial-letter і веб-шрифти. Системні шрифти відображаються коректно, але їх необхідно явно оголошувати; додавання в кінець стека шрифтів стандартних serif або sans-serif; ніяк не впливає на відображення. Щоб все запрацювало, необхідно що-то типу font-family: «my web font», arial;.

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

Друге значення

Продовжимо. Друге значення для initial-letter опціональне. З його допомогою можна визначити, наскільки рядків повинна провалитися перша літера. Наприклад:

p::first-letter {
initial-letter: 3 2;
}

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

Такі букви називають «притопленными», а не буквицами. Якщо вам нічого не видно, нижче скріншот:

Робимо буквицю адаптивної

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

/* базові стилі параграфа */
p {
font-size: 1em;
}
/* базові стилі буквиці */
p::first-letter {
initial-letter: 2;
color: #c69c6d;
margin: 1em .2em 0 0;
}
/* mobile first медіа запит */
@media only screen and (min-width: 800px) {
/* стилі параграфа для великих екранів */
p {
font-size: 1.25 em;
}
/* стилі буквиці для великих екранів */
p::first-letter {
initial-letter: 3 2;
margin: 1em .5em 0 0;
}
}

Фолбэк

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

Застосувались всі стилі крім власне тих, які відповідають за буквицю. З допомогою CSS feature query можна застосовувати стилі вибірково. Оберніть стилі для буквиці в умова @supports:

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
/* стилі initial-letter */
}

Якщо властивість initial-letter підтримується, стилі застосуються і навпаки. Зверніть увагу: навіть CSS feature query не має універсальної підтримки, так що подумайте, перш як використовувати їх. Краще скористатися Modernizr.

Розбираючись в даному питанні далі, ви, можливо, захочете підключити dropcap.js JavaScript polyfill від Adobe, але в цій статті ми не будемо про нього розповідати. Почитати про це полифиле можна в блозі Dudley Storey.

Висновок

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

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