Главная » Полезные статьи » HTML-верстка » Типографика, зависящая от размеров области просмотра
Распечатать статью

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

В 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 если проверка провалилась.

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

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

Похожие статьи