Мы с большим удовольствием поддерживаем активных членов веб-дизайн сообщества и сообщества разработчиков. Сегодня мы с гордостью представляем плагин FlowType.JS, который позволяет подобрать идеальное количество символов в строке для экрана любой ширины. Эта статья является еще одной чвстью нашей серии различных инструментов, библиотек и методов, которые мы уже опубликовали здесь, на Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin, CSSComb и Желеподобное меню навигации. — Ред. Во время работы над сайтом Simple Focus, содержащим множество больших по размеру изображений, несколько наших дизайнеров, Джон Уилсон и Кейси Зумволт, отметили хорошую масштабируемость изображений. Потяните угол окна браузера и изображения также начнут расширяться и заполнят пространство. Верните окно браузера в прежнее состояние и картинки сожмутся и станут на свои места. С другой стороны, изменения длины линии гипертекста, основанные на ширине её родительского элемента оказывают негативное влияние на удобство чтения.

Джон спросил: “Разве это было бы не здорово, если бы текст работал таким же образом как, например, изображения?” Кейси заверил его, что такая возможность существует благодаря использованию одного из JQuery плагинов, но для этого необходимо знать математику.

“В гибкой разметке ширина браузера и типографические элементы связаны: чем шире область просмотра, тем больше символов в строке” – Трент Уолтон.

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

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

Далее описан весь рабочий процесс, благодаря которому мы добились требуемых результатов:

Техническая составляющая.

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

Давайте более детально взглянем на программный код, чтобы лучше понять принцип действия этого плагина:

Основные математические действия.

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

Line-height — это ещё одно простое уравнение, основанное на font-size. Допустим, для удобства чтения мы выбираем значение line-height как 1.45 величины font-size. Это уравнение довольно легко можно понять:font-size умножается на 1.45, а результат равен рекомендованному значению line-height

Прототип.

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

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'
	});
});

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

Улучшение программного кода.

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

Описание всего ус� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров