Представляем вашему вниманию инструмент адаптивной настройки шрифтов для веб-проектов FlowType.JS

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

Во время работы над сайтами с большим количеством изображений для Simple Focus пара наших дизайнеров, Джон Уилсон и Кейси Зумволт, заметили, как отлично реализована в них функция масштабирования картинок. Вы тянете за угол активное окно браузера, и изображения расширяются вместе с ним, заполняя все пространство. Возвращаем окну браузера прежний размер, и они сжимаются и становятся на свои места. Однако при этом строка с гипертекстом, сопутствующая изображению, не изменяется в размере вместе с родительским элементом, и это негативно влияет на читаемость.

«Не было бы лучше, - задался вопросом Джон, - если бы текст работал так же, как изображения?» На что Кейси заверил его, что это можно решить с помощью JQuery плагина. Но для этого нужно просчитать математику.

«В плавающей разметке, ширина окна браузера и текстовые настройки связаны: чем шире область просмотра, тем больше символов в строке». - Трент Уолтон.

Simple Focus в основном занимается дизайнерскими разработками, поэтому большинство программных задумок, которые приходили нам в голову, так и оставались нереализованными - мы ничего с ними не делали. Однако несколько недель спустя Джон прочел статью Трента Уолтона о плавающей разметке текста и был вдохновлен на то, чтобы попытаться в этом разобраться детальнее.

Где-то через час у нас уже был рабочий прототип, который давал нам кое-какую базу. В течение двух недель FlowType.JS был полностью доработан и готов к тому, чтобы представить его миру. Вот полное описание процесса его создания:

Техническая точка зрения

Если разобраться, FlowType.JS не что иное, как несколько умных математических алгоритмов, облаченных в тело JQuery плагина. С их помощью автоматически задается размер шрифта для того, чтобы ссылку можно было вписать в строку заданной ширины. Давайте детальнее рассмотрим сам код, чтобы лучше понять, как это осуществляется:

Математическая основа

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

Прототип

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

var $width = $window.width(),
		$fontSize = $width / 50,
		$lineHeight = $fontSize * 1.45;

$(window).ready( function() {
	$('element').css({
		'font-size':$fontSize + 'px',
		'line-height':$lineHeight + 'px'
	});
}

$(window).resize( function() {
	$('element').css({
		'font-size':$fontSize + 'px',
		'line-height':$lineHeight + 'px'
	});
});

Если вы обратили внимание, существует одна серьезная проблема с кодом: математика отталкивается от ширины окна, а не ширины элемента. Поэтому при изменении размеров текст становится меньше, в то время как сам элемент стал шире.

Отредактированный код

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

Изложение всех вариантов кода, которые мы перепробовали в ходе решения задачи, сделало бы эту статью слишком длинной. Они включали в себя несколько объявлений цикла «если», а также дублирований кода. Как минимум, это непродуктивно. Одним словом, в конечном итоге мы нашли несколько вариантов, которые работали достаточно хорошо. Но наша главная цель - дизайн, помните? Поэтому мы хотели сперва получить некоторые отзывы и советы от наших друзей, прежде чем выложим на общее обозрение что-то, что сделает нас в глазах многих полными профанами.

Небольшая помощь от друзей

Когда FlowType.JS был почти готов к запуску, мы предложили взглянуть на него нескольким коллегам. Дэйв Руперт предложил, удостовериться в работоспособности плагина, создать демонстрационную страницу с повторяющимися большими фрагментами одного и того же текста. Что мы, затаив дыхание, и сделали. К счастью, плагин работал очень хорошо.

Тогда мы попросили фидбэк у Джованни ДиФетеричи. Джованни нас удивил, переписав и сжав все циклы «если» буквально в две строки. В конце концов, облегченная версия FlowType.JS ужалась в размере примерно до 450 байт. Мы также получили еще несколько ценных советов от наших друзей. Они касались многих аспектов, вплоть до проверки орфографии демонстрационного сайта.

Окончательный код

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

Взгляните сами:

(function($) {
   $.fn.flowtype = function(options) {

      var settings = $.extend({
         maximum   : 9999,
         minimum   : 1,
         maxFont   : 9999,
         minFont   : 1,
         fontRatio : 35,
         lineRatio : 1.45
      }, options),

      changes = function(el) {
         var $el = $(el),
            elw = $el.width(),
            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
            fontBase = width / settings.fontRatio,
            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;

         $el.css({
            'font-size'   : fontSize + 'px',
            'line-height' : fontSize * settings.lineRatio + 'px'
         });
      };

      return this.each(function() {
         
         var that = this;
         $(window).resize(function(){changes(that);});
         
         changes(this);
      });
   };
}(jQuery));

Как это работает

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

Если вы хотите настроить параметры для выбранного шрифта, то математика будет обрабатывать данные по-разному – именно отталкиваясь от того, какой размер шрифта вы выбираете.

Внедрение

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

$('body').flowtype({
 minimum   : 500,
 maximum   : 1200,
 minFont   : 12,
 maxFont   : 40,
 fontRatio : 30,
 lineRatio : 1.45
});

Подробные инструкции можно найти на нашем демо-сайте. На случай, если JQuery не ваш конек, один из членов сообщества Github уже перевел его на оригинальный JavaScript.

И это еще не все…

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

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

Еще один вопрос – удобство пользователей. Не сделает ли использование данного плагина невозможным масштабирование объекта пользователями так, как им удобно. А сам сайт следовательно менее удобным. Бывают случаи, когда пользователи, чтобы посмотреть изображение так, как им нравится, увеличивают его более чем на 200%. Соответственно увеличится и размер шрифта. Как минимум, если решите применять на своем сайте плагин FlowType.JS, не забудьте принять во внимание предпочтения вашей аудитории.

Помните, как и любая другая программа FlowType.JS не является панацеей для решения всех проблем. Мы просто пытаемся внести свой посильный вклад в дело развития веб-дизайна и поддержки веб-сообщества. Будем благодарны вам за любые отзывы о нашей работе через Github.