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

Как улучшить буквицу с помощью свойства 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.25em;
    }
   
    /* стили буквицы для больших экранов */
    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 (с его помощью можно более точно подогнать обтекающий текст).

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

Все общие свойства для шрифтов

Цвет и прозрачность

Text-shadow и другое декорирование текста

Свойства transform

А может и background-clip?

Автор: Ian Yates

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree