Типографика, зависящая от размеров области просмотра

В CSS появились новые значения для изменения размеров объектов в зависимости от размера области просмотра (viewport): vw, vh и vmin. Уместно рассказать об этом сейчас, т.к. эти вещи появатся уже в Chrome 20 (в сборке canary на момент написания статьи). Пока нельзя сказать, что это работает. Использовать в продакшне их пока нельзя, но довольно скоро мы сможем ими пользоваться.

Почему это так классно?

На это есть несколько причин.Вот две:

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

Как они работают

Одна единица любого из трех значений равняется 1% от расмера оси области просмотра. Область просмотра == ширина окна браузера == объект window. Если ширина области просмотра 40см, то 1vw = 0.4см.

При использовании font-size мы предполагаем, что ширина одной буквы равна значению font-size, но, как мы знаем, в шрифтах, которые не являются моноширинными, ширина буквы может быть довольно произвольной. Поэтому нам приходится немного играться со значениями, чтобы подобрать нужное. Что мы, собственно, и делаем, правда?

1vw = 1% от ширины области просмотра
1vh = 1% от высоты области просмотра
1vmin = 1vw или 1vh, берется наименьшее значение

Как их использовать

Да как два пальца:

h1 {
    font-size: 5.9vw;
}

h2 {
    font-size: 3.0vh;
}

p {
    font-size: 2vmin;
}

Демо

Вот видео простой разметки, использующей единицы vw для нудж типографики:

Посмотрите демо и обратите внимание на поддержку браузерами.

Баги!

Поддержка будет в Chrome 20, но есть один существенный недостаток. Когда ресайзится окно браузера шрифт не изменяется в зависимости от размеров области просмотра. В спеке сказано:

Когда высота или ширина области просмотра изменяется, размеры изменяются соответсвенно.

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

Чтобы побороть проблему (позволить шрифту менять размеры без перезагрузки страницы) нам нужно как-то перерендерить элемент. Я использовал jQuery и просто поигрался со значением z-index каждого элемента (которое, в данном, случае ни на что не влияет), смена z-index заставляет браузер перерисовать элемент.

causeRepaintsOn = $("h1, h2, h3, p");

$(window).resize(function() {
    causeRepaintsOn.css("z-index", 1);
});

Поддержка браузерами

Chrome 20+ и IE 10+.

Я попробовал применить значения в Opera Next (12), Safari 5.2 и Firefox Beta (13) и мне не свезло.

Не только font-size

Для справки, это эти новые значения, просто еще одни единицы. Такие же как em, px и т.п. Вы можете использовать их не только для указания размера шрифта.

Я подумал о размере шрифта как о наиболее интересном варианте использования, в свете того, что такие вещи как margin, padding и width и так могут реагировать на размеры окна, если указать им значения в %. Возможно, бывают такие случаи когда, каким-либо, глубоко вложенным элементам нужно будет отсчитывать ширину не относительно своего родителя, а относительно ширины окна.

Используем это сейчас

Нативное использование

Вам нужно использовать деградацию:

h1 {
    font-size: 36px; /* Некое резервное значение, которое не выглядит ужасным */
    font-size: 5.4vw;
}

Тест на поддержку

В Modernizr пока нет проверки на поддержку этих значений, но вы можете написать проверку самостоятельно, используя некий временный элемент, которому установлена некая приближенная ширина в CSS, которая потом переустанавливается в JavaScript и проверяется, равна ли эта ширина ширине окна. Что-то типа:

var testEl = $("#vw-test");

var viewport = $(window);

testEl.css({
  width: "100vw"
});

if (testEl.width() == viewport.width()) {
   $("html").addClass("vw-support");
} else {
   $("html").append("vw-unsupported");
};

Похожий функционал в FixText.js

Мы обсуждаем идею привязки ширины текста заголовка к ширине окна — это как раз то, что реализует FixText.js. Только реализует он это через нетривиальный JavaScript, математику, спаны и т.п. Теоретически вы можете запустить проверку на поддержку и использовать Modernizr.load для загрузки FixText.js если проверка провалилась.

Собственно

Что вы думаете? Вам понравилось? Есть идеи как это можно использовать?

Перевод статьи Viewport Sized Typography автор Chris Coyier

P.S. Это тоже может быть интересно:

2 Комментарии

  1. SilentImp

    Хочется сказать «You are doing it wrong» -_____-«

  2. c1n1k

    Ошибочка в Как они работают — от расмера

Оставить комментарий

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

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

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