Как улучшить буквицу с помощью свойства initial-letter

От автора: буквицы ставятся в начале строки текста и используются для украшения. Начальная буква занимает несколько строк текста, а сам текст сдвигается немного вправо.

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

Старый способ

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

Теперь с помощью псевдоэлемента ::first-letter мы получаем доступ к первой букве параграфа. В этом подходе мы должны были бы заставить текст обтекать первую букву с помощью p::first-letter { float: left; }, т.е. выдергиваем первую букву из параграфа и задаем нужный ей размер:

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

Новый способ

Свойство initial-letter (на данный момент обсуждается как редакторский проект на W3C и будет стандартизировано в скором времени) даст нам полный типографский контроль, именно то, что мы хотели. Данное свойство используется в паре с first-letter. Первое принимаемое значение – размер первой буквы, т.е. сколько строк оно займет.

А так это будет выглядеть:

Оговорка

И на этом нам придется остановиться, простите. Поддержка данного свойства все еще очень слабая. На момент написания статьи демо выше корректно отображалось только в 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 опциональное. С его помощью можно указать, насколько строк должна провалиться первая буква. К примеру:

Выше мы объявили, что первая буква должна занимать 3 строки по высоте, но утопать она будет всего лишь на две строки.

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

Делаем буквицу адаптивной

Большая буквица может смотреться отлично, но на узких экранах она должна становиться частью общего адаптивного шрифта. На маленьких экранах, обычно, уменьшают размер текста. Поэтому и буквицу необходимо уменьшить.

Фолбэк

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

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

Если свойство initial-letter поддерживается, стили применятся и наоборот. Обратите внимание: даже CSS feature query не имеет универсальной поддержки, так что подумайте, прежде как использовать их. Лучше воспользоваться Modernizr.

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

Заключение

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

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

Автор: Ian Yates

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: