Поддерживайте вертикальный ритм с помощью CSS и jQuery

Содержание

• Тип раскладки
• Вертикальный ритм
• Проведение ритма
• Работа с изображениями
• Улучшение jQuery
• Заключение

• Знания необходимы: CSS, базовый jQuery
• Требует: jQuery, CSS, HTML
• Время проекта: 30 минут
• Скачать исходные файлы

Предполагая, что вы проектируете, исходя из содержания, первое решение, которое повлияет на ваш дизайн имеет быть связанным с типом. Даже по нет Выбирая шрифт, вы сделали что-то, что повлияло на ваш сайт. Шрифт - это ядро ​​печати и веб-дизайна, и он сложен; существует множество накопленных терминов, практик, правил и приемов, которые пригодятся ему. В этой статье рассматривается один метод управления одним аспектом шрифта, который сложно реализовать в Интернете, но является обычным для печати: поддержание последовательного вертикального ритма, что, в свою очередь, позволяет нам достичь профессионального макета.

Тип раскладки

В печати для любого элемента с большим количеством текста основой дизайна, вероятно, будет базовая сетка. Он используется для структурирования страницы и направляет вертикальный поток контента. Почти все размещено относительно этой базовой сетки. Не волнуйтесь, если вы не знакомы с терминами, никто не знаком с базовыми линиями или базовыми сетками; вы уже знаете о них. Вспомните школу, когда вы, несомненно, писали на линованной бумаге - когда вы писали, вы аккуратно размещали нижнюю часть писем на каждой строчке на бумаге. Базовая и базовая сетка в действии. Базовая линия - это воображаемая линия, по которой выравниваются нижние части букв.Если вы посмотрите эту статью сейчас, вы «увидите» базовый уровень, хотя на самом деле линии нет. Ваш мозг помещает его туда для вас, поэтому вы можете читать предложения. Линии на линованной бумаге? Это базовая сетка. Прямые, чтобы ваши предложения были прямыми, и располагались через равные промежутки времени, чтобы ваш текст имел правильный вертикальный ритм.

Вертикальный ритм

Вертикальный ритм определяет, где на странице расположен текст. Это один из компонентов, который влияет на нашу способность сканировать и читать блоки текста, а также помогает информировать наши эмоциональные реакции. Когда текст имеет четкий вертикальный ритм и хороший интервал, мы считаем его профессиональным, продуманным, авторитетным и удобным для чтения. Когда текст имеет плохой ритм и интервал, мы чувствуем, что он менее продуман, менее профессионален и часто его труднее читать. Вертикальный ритм - это отчасти удобство использования и отчасти эстетика.

Проведение ритма

К сожалению, Интернет по-прежнему является бедным родственником печати с точки зрения ее способности применять некоторые фундаментальные практики в отношении шрифтов. В Интернете мы не можем использовать базовую сетку так же, как дизайнер полиграфии (или ребенок в школе) - мы не можем выровнять базовую линию текста по базовой сетке документа. В CSS нет концепции базовой сетки. Таким образом, наш текст не будет располагаться точно на линиях базовой сетки. Вместо этого он будет центрирован по вертикали в промежутке между линиями. Это лучшее, что может сделать Интернет.

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

1. html {background: #fff url (baseline_22.png); }

Ура, у нас есть линованная бумага!

Вы заметите, что ничего не выстраивается. Чтобы все выстроилось в линию, мы хотим, чтобы нижний край всех элементов касался одной из этих линий. Самый простой способ сделать это - убедиться, что все элементы занимают высоту (включая поля) по вертикали, кратную 22. Вот несколько CSS, которые делают именно это. Я использую модуль REM, но даю запасной вариант EM для браузеров, которые не поддерживают REM. Я также включаю в комментарии эквивалент блока PX. Если вы еще не понимаете REM / EM, вы можете просто использовать вместо них значения px - все они эквивалентны:

1. html {/ * размер шрифта: 16 пикселей, высота строки: 22 пикселя * /
2. шрифт: 100% / 1,375 «Helvetica Neue», Helvetica, Arial, без засечек;
3. фон: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * верхнее и нижнее поля имеют размер 22 пикселя * /
6. / * запасной вариант * / маржа: 1.375em 0;
7. маржа: 1.375rem 0; }
8. h1 {/ * размер шрифта - 32 пикселя, высота строки - 44 пикселя * /
9. / * резервный вариант * / размер шрифта: 2em;
10. размер шрифта: 2rem; высота строки: 1,375; }
11. h2 {/ * размер шрифта - 26 пикселей, высота строки - 44 пикселя * /
12. / * резервный вариант * / font-size: 1.75em;
13. размер шрифта: 1,75 бэр; высота строки: 1.5714285714; }
14. h3, h4, h5, h6 {/ * размер шрифта 22 пикселя, высота строки 22 пикселя * /
15. / * резервный вариант * / размер шрифта: 1.375em;
16. размер шрифта: 1.375rem; высота строки: 1; }
17. p, ul, blockquote {/ * нижнее поле составляет 22 пикселя, высота строки наследуется от html (22px) * /
18. / * резервный вариант * / margin-top: 0; нижнее поле: 1,375em;
19. margin-top: 0; нижняя маржа: 1,375 бэр; }

Давайте посмотрим, что это нам дает. Обратите внимание, как хорошо выравнивается весь текст? Он не соответствует базовой линии, но имеет предсказуемый вертикальный ритм. Здесь красиво и аккуратно.

Работа с изображениями

Изображения все усложняют. Посмотрите, что происходит с нашим ритмом, когда мы включаем некоторые из них. Они срывают его, как пропуск в записи - темп правильный, но не вовремя. Выравнивание смещается. Это потому, что изображения вряд ли будут иметь высоту, кратную базовой линии, поэтому нижний край не совпадает с нашей базовой сеткой.

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

1. Определите высоту каждого изображения.
2. Посмотрите, сколько раз значение базовой линии делится на вертикальное пространство, которое в настоящее время занимает изображение, и получите остаток.
3. Вычтите остаток от базовой линии, чтобы получить смещение, которое нам нужно применить к изображению.
4. Примените смещение в качестве поля к нижней части изображения.

Нижняя часть вертикального пространства изображения теперь будет правильно выровнена с базовой сеткой. Вот основная функция jQuery, которая делает это:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). each (function () {
3. / * переменные * /
4. var this_img = $ (это);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * подсчитываем * /
8. var остаток = parseFloat (базовый уровень img_height%);
9. / * сколько нам нужно добавить? * /
10. var offset = parseFloat (базовый остаток);
11. / * применяем поле к изображению * /
12. this_img.css ("край-низ", смещение + "пикс");
13. });
14. });

Почему window.bind линия? Потому что нам нужно дождаться загрузки изображений, прежде чем мы сможем достоверно получить их размеры. Вот пример работы этого базового кода.

Улучшение jQuery

Мир редко бывает прямолинейным, и, как оказалось, здесь нам приходится иметь дело с довольно большим количеством деталей реализации. Что не так с нашей функцией? Множество:

• Он дает неприятные результаты с изображениями, которые являются встроенными, а не плавающими или блокированными.
• На некоторых изображениях, особенно в контейнерах, это кажется ошибочным.
• Он не касается жидких макетов.
• Его нельзя использовать повторно.

Мы не хотим применять это поведение к встроенным изображениям, таким как смайлик в примере. Встроенные изображения выравниваются таким образом, чтобы нижний край находился на той же базовой линии, что и текст (нет базовая сетка). Это означает, что изображение смещено по вертикали. Ни CSS, ни JS не дают нам способа узнать, где находится базовая линия для текстового элемента, поэтому мы не знаем смещения. Мы должны игнорировать встроенные изображения и применять наше исправление только к изображениям, для которых установлено значение дисплей: блок (к счастью, любое плавающее изображение автоматически устанавливается на отображение блока).

Если изображение находится в контейнере, поле, примененное к изображению, может быть скрыто из-за настроек переполнения в контейнере. Кроме того, нам может понадобиться поле не на изображении, а на элементе контейнера. В этом примере мы предпочли бы иметь поля на белом поле, чем на изображении внутри поля, чтобы избежать появления странных пробелов в поле.

Функция запускается только один раз, но в жидком дизайне изображения меняют высоту при изменении размера браузера (попробуйте изменить размер примера на что-то довольно узкое, чтобы увидеть это). Изменение размера снова нарушает ритм. Нам нужно, чтобы функция запускалась после изменения размера браузера, а также после загрузки страницы. Жидкие макеты также создают другие проблемы; изображения могут быть высотой в несколько пикселей, например 132,34 пикселей. Это, в свою очередь, может привести к неожиданным результатам, даже если мы применим дробную маржу (если вам интересно, вот почему: trac.webkit.org/wiki/LayoutUnit). Итак, нам нужно будет масштабировать изображение на всю высоту пикселя, чтобы избежать ошибок макета, вызванных дробными пикселями.

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

В последнем примере вы найдете код, который выполняет все это. Подключаемый модуль JavaScript сильно прокомментирован, поэтому вы можете следить за ним. Вы можете использовать плагин, вызвав его следующим образом:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ();
3. });

Или вы можете указать плагину применить поле к именованному контейнеру, если он существует как родительский для изображения:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ({контейнер: ’. popup’});
3. });

Заключение

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

По мере развития CSS мы продолжаем получать больше функций, соответствующих нашим кузенам-печатникам, поэтому хорошее понимание шрифта станет более важным для создания качественных веб-сайтов. Если вы хотите узнать больше о шрифте в целом, я настоятельно рекомендую www.thinkingwithtype.com (и купить к нему книгу). Если вам интересны статьи по CSS об обработке шрифтов, есть множество статей как здесь, так и в других местах в Интернете. Я также рекомендую узнать последние новости от Марка Бултона и Эллиота Джея Стокса, которые часто говорят о шрифтах в связи с веб-дизайном.

Повеселись!