Рисунок 4.1. Прекрасный ритмичный шрифт с использованием вертикального ритма и атрибута @font-face
Каждый сервис имеет свой собственный способ подключения шрифтов. В нашем случае мы использовали Google Web Fonts для основного заголовка страницы. Google представляет три способа: через тег link, через @import и через JavaScript. Мы остановились на использовании тега link и добавили его в шапку документа как:
<head>
<meta charset=”UTF-8” />
<title>Типографикаввек CSS3 </title>
<link href=’http://fonts.googleapis.com/
css?family=Abril+Fatface’
rel=’stylesheet’ type=’text/css’>
…
</head>
Потом в таблице стилей шрифт может указываться, как раньше, по имени “Abril Fatface”:
h1 {
font-family: “Abril Fatface”;
font-weight: normal;
…
}
В этом случае мы настраиваем обычное начертание шрифта, потому что Firefox пытается искусственно сделать полужирным уже полужирный шрифт.
Из-за того что мы не можем контролировать, настраивает ли правило @font-face шрифт как полужирный, нам приходится делать все наоборот и устанавливать нормальную насыщенность каждый раз при его использовании. Как видите, на выходе мы имеем прекрасный ритмичный шрифт, без намека на базовые гарнитуры:
Встречайте нового члена семейства, используя FONT-STRETCH
Свойство font-stretch возможно имеет самое неудачное название в CSS.
Оно не расширяет шрифт искусственно, но взамен позволяет вам использовать растянутое и уплотненное начертание шрифта в гарнитуре. К примеру, если вы захотите использовать шрифт Helvetica Neue Condensed без свойства font-stretch, вам нужно будет подключить его как веб-шрифт (необходима лицензия) и обозначить его под другим именем в шрифтовом семействе. С font-stretch это делается проще:
h1 {
font-family: “Helvetica Neue”;
font-stretch: condensed;
}
Большинство шрифтов не имеют узкого или широкого начертания, так что при использовании другого шрифта, не Helvetica, вам, вероятно, придется подключать его как веб-шрифт. Свойство font-stretch имеет такие значения: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded и ultraexpanded. Браузер применит значения к ближайшему подходящему начертанию в семействе. В случае с Helvetica Neue ОС X все сжатые значения отображаются как Helvetica Neue Condensed до тех пор, пока вы не установите дополнительные шрифты.
Перенос слов
Мы привыкли видеть текст в вебе выровненным по левому краю с рваным правым. При печати часто применяется выравнивание вместе с переносами, чтобы избежать «рек» в тексте (больших пробелов между словами и символами). Не так давно перенос был недоступен в Сети. Но сейчас все меняется. Свойство hyphens (перенос) доступно с префиксами в Safari (с версии 5.1) и Firefox, и в IE 10.
В примере ниже мы настроили выравнивание текста по всей ширине и автоматический перенос:
Рисунок 4.2. Пример параграфа с переносом (слева) и без переноса (справа)
p {
text-align: justify;
hyphens: auto;
…
}
Свойство auto указывает браузеру использовать словари переноса для разбивки слов в нужных местах, и вставлять переносы в конце строк. Каждому языку присущи свои словари переноса, поэтому поддержка этой функции будет варьироваться. Если вы вставляете свой собственный символ мягкого переноса (), это аннулирует автоматическое поведение браузера. Если вы хотите настроить перенос вручную, можете использовать ручной режим. Отключение переноса (по умолчанию) происходит через ключевое слово none.
Вот пример с переносом (слева) и без (справа). Обратите внимание на неровные интервалы между словами во второй и шестой строках текста без переносов.
Журнальная верстка
В книгах и журналах текст обычно располагают несколькими колонками. Это делается для удобочитаемости. Длина строк остается короткой, при этом дизайнеры черпают полную выгоду от ширины страницы (или, в случае с Интернетом, от ширины окна браузера). Многоколоночная спецификация наделяет этой возможностью CSS. Это позволяет вам точно определить ряд атрибутов для колонок, такие как их количество, ширина и размер интервала между ними.
Доработаем пример выше с использованием колонок, чтобы попробовать, каково это.
Определение колонок
Вы можете установить либо ширину, либо количество колонок. Браузер рассчитает другую величину, основанную на заданной, и доступную ширину контейнера. В этом примере мы зададим две колонки только для разделов, которые расположены в статье глубиной на два уровня. Это убережет нас от многочисленных колонок во вводном блоке и предотвратит разбивку колонок на ячейки, если мы добавим еще один вложенный блок.
Количество колонок может устанавливаться свойством column-count, которое допускает своей величиной целое число. Мы также применим такой интервал между колонками, чтобы они располагались красиво. В этом нам поможет свойство column-gap:
article> section > section {
column-count: 2;
column-gap: 2.6rem;
}
Для того чтобы определить ширину колонок, вы можете использовать свойство column-width, которое допускает величины длины, так же как и column-gap.
Размещаемся в нескольких колонках
Часто бывает нужно, чтобы текст или элементы, такие как изображения, охватывали несколько колонок. Это можно достигнуть с помощью свойства column-span. В настоящее время можно все или ничего: вы можете либо охватить все колонки, используя значение all или не охватывать вообще, применяя значение none. Определить точное число охватываемых колонок невозможно. В нашем примере заголовки h3 охватывают полную ширину колонок[45].
h3 { column-span: all; }
Результат будет выглядеть примерно таким образом, как ниже на рисунке[46].
Еще одно предостережение в плане многоколонной верстки. Применение этого свойства для длинных кусков текста может привести к тому, что человек, чтобы ему было удобно читать, будет вынужден прокручивать вверх-вниз каждую колонку на странице. Поэтому применяйте это свойство только для коротких отрывков, где длина колонок, возможно, будет меньше, чем окно браузера пользователя. Но когда страница распечатывается, многоколоночная верстка будет удобнее, т. к. размещается на целой странице. Ее хорошо использовать в длинных текстах в таблицах стилей для печати.
Рисунок 4.3. Верхняя колонка как при журнальной верстке. Текстовый блок в верхней части захватывает ширину нескольких колонок в нижней части
Техники верстки/компоновки
Пожалуй, самое сложное на сегодняшний день при работе с CSS – это разметка страницы. Что-то вроде простейшей центровки элемента на странице бывает ужасно сложно сделать. Вы можете поседеть (если не уже), когда верстаете двух– или трехколонный макет с равными по высоте колонками. Эти моменты сводятся к тому, что CSS на самом деле никогда не предоставлял способ разбивки страниц. Годами мы неправильно использовали формат, основанный на свойстве float, но это только один хак. Как таблицы, так и свойство floats, не разрабатывались для разметки страницы. Они создавались для обтекания изображения внутри текстового блока. А когда нам не хватает подходящих инструментов, мы импровизируем. Мы должны быть благодарны скромному свойству float за помощь нам все эти годы. Теперь с CSS3 мы можем попросить float подвинуться, потому что у нас есть новые инструменты для этого. Они из самых многообещающих – создание сетки с помощью тянущихся блоков.
Разметка с помощью тянущихся блоков
Flexible Box Layout (или Flexbox) – это новая блочная модель, оптимизированная под дизайн интерфейса. Дети блока, настроенные для использования модели Flexbox, располагаются вдоль горизонтальных либо вертикальных осей. Их ширина увеличивается или сокращается для того, чтобы заполнять имеющееся пространство на основе назначенной гибкой длины.
Flexbox имеет историческое прошлое. Сначала оно представляло собой свойство для XUL Mozilla (расширенного языка пользовательского интерфейса) и переписывалось тысячи раз. Спецификация только сейчас достигает зрелости, а у нас есть довольно полная поддержка в WebKit и ночных сборках Chrome. Об этом, вне сомнения, полезно знать. Потому что спецификация, возможно, будет реализовываться быстро, если это уже не произошло до того, как вы об этом прочитали. В особенности с быстротой графика релизов Chrome и Firefox.
Пример: Горизонтальная и вертикальная центровка, или Священный Грааль веб-дизайна
Расположить элемент по центру страницы, это, возможно, номер один среди всех запросов веб-дизайнеров. Он, пожалуй, даже превосходит запрос, как положить конец страданиям IE 6. С Flexbox это очень просто.