Контекстное восстановление

Сейчас будет немного математики: берем целевое значение кегля и делим на кегль (font size) его контейнера, то есть контекста. В результате мы получаем желаемый кегль, выраженный в относительных и достаточно гибких единицах em.

Другими словами, относительный кегль можно рассчитать по следующей формуле:

target ÷ context = result

(Отвлечемся на минутку. Лично у меня слово «математика» вызывает немедленный и серьезный приступ паники. У вас тоже? Стойте, не убегайте с криками – все не так страшно. Это говорит вам человек, который заменил курс математики в колледже курсом философии. Делайте, как я: просто посчитайте все на калькуляторе и скопируйте результат в CSS. Калькуляторы – просто спасение для таких, как мы, правда?)

Итак, формула у нас есть, давайте вернемся к нашему заголовку в 24px. Если предположить, что базовый кегль (font size) элемента body равен 16 пикселям при 100%, мы можем подставить эти значения непосредственно в формулу. В результате получим отношение целевого кегля заголовка h1

(24 пикселя, 24px) и кегля его контекста (16 пикселей, 16px):

24: 16 = 1,5

Так как 24 пикселя в 1,5 раза больше 16 пикселей, это значит, что кегль равен 1,5 em.

h1 {

font‑size: 1.5em; /* 24px / 16px */

font‑style: italic;

font‑weight: normal;

}

Вуаля! Размер нашего заголовка прекрасно совпадает с размером, указанным в оригинал‑макете, но при этом выражен в относительных, масштабируемых единицах (рис. 2.7).

(Обычно я оставляю комментарий с расчетами с правой стороны (/* 24px / 16px */). Вносить изменения становится намного проще.)

С этим закончили, давайте вернемся к нашей одинокой маленькой ссылке Read More (узнать больше). Хотя, если посмотреть на рис. 2.7, она не такая уж и маленькая. И это проблема. Нам нужно уменьшить заданные 11 пикселей, и довольно существенно, поскольку размер его шрифта принял значение 1,5 em от его контекста, h1.

^{Рис. 2.7. Размер нашего заголовка правильно выражен в гибких, масштабируемых единицах em. (Но что за ерунда творится со ссылкой?)}

И вот здесь требуется внимание. Поскольку текст заголовка установлен равным 1,5 em, любые элементы внутри этого заголовка должны быть выражены в виде доли этого значения. Другими словами, изменился наш контекст.

Поэтому, чтобы установить кегль ссылки в единицах em, мы делим целевые 11 пикселей (11px) не на 16 (значение, установленное в body), а на 24 – кегль заголовка, наш новый контекст:

11: 24 = 0,458333333333333

Мы получили какое‑то совсем некрасивое число. Может быть, самое некрасивое, которые вы сегодня видели. (Но подождите, эта глава еще не окончена.)

Вам захочется округлить его до более‑менее приемлемого числа – скажем, 0,46 em. Даже не думайте! Может, ваши глаза и устанут смотреть на 0,458333333333333, но именно это число идеально представляет желаемый кегль в пропорциональном отношении. К тому же браузеры мастерски владеют искусством округления лишних десятичных знаков, когда преобразовывают значения в пиксели. Поэтому нужно дать им больше, а не меньше, и в конце вас будет ожидать отличный результат.

Теперь просто скопируйте это непритязательное число в CSS:

h1 a {

font: bold 0.458333333333333em Calibri, Optima, Arial, sans‑serif; /* 11px / 24px */

color:#747474;

letter‑spacing: 0.15em;

text‑transform: uppercase;

text‑decoration: none;

}

Посмотрим на результат. Наша страничка закончена, она полностью соответствует желаемому дизайну, а текст задан в масштабируемых единицах em (рис. 2.8).

^{Рис. 2.8. С помощью простой математики мы создали более красивый дизайн – и без всяких пикселей}