Выявляем изменения величины шрифта
Лоуренс Карвальо, Кристиан Хейльман
Перевод оригинальной статьи Лоуренс Карвальо и Кристиана Хейльмана “Text-Resize Detection”
Translated with the permission of A List Apart Magazine
Перевод Кирилла Грушко
Мучительная загадка преследует веб-дизайнера – какими программами и возможностями располагают пользователи для просмотра его творений? Он стремится застраховать посетителей сайтов от ошибок в отображении страниц, он уже знаком с плавающими разметками и масштабируемыми шрифтами, и применяет их вовсю. Но вот посетитель укрупняет или уменьшает шрифт в своем браузере всего на несколько единиц… и страница неминуемо теряет первозданный вид!
Предложим читателю удобный способ избежать мучений, научив его определять шрифтовые настройки посетителя веб-страницы и выявлять изменения этих настроек, если пользователь вознамерится «поиграться» с величиной шрифта. Эти навыки позволят создавать таблицы стилей, приспосабливающие внешний вид страницы к выбранной посетителем величине шрифта, предотвращая взаимное наползание объектов страницы и тому подобные несуразности. (Эта технология имеет много других полезных свойств, о которых поговорим в другой статье.)
Пример страницы до изменения величины шрифта.
Что бывает, когда пользователь произвольно увеличивает шрифт
Гибкие подходы.
Ряд обходных маневров позволяет достичь поставленной цели: можно воспользоваться «пуленепробиваемыми CSS» Дэна Седерхольма; можно создавать «ложные» колонки (имитирующие пустые колонки с фоновым изображением, в которые вольется укрупненный пользователем текст); можно с той же целью использовать более крупное фоновое изображение. Эти приемы полезны, но зачастую неприменимы: далеко не всякая веб-страница захочет иметь дело со слишком крупным или слишком мелким текстом. Кроме того, не следует заставлять пользователей с большим экранным разрешением щуриться при чтении мизерного текста лишь для того, чтобы пользователи с малым разрешением наслаждались крупным шрифтом на своих экранах. Избегайте этого при каждой возможности.
Дизайн в пустоту.
Прежде чем перейти к делу, отступим немного назад и уясним подоплеку проблемы. Мы уже умеем приспосабливать веб-страницу к разрешению экрана и размеру окна браузера. В этом помогает разметка висячих колонок CSS Стюарта Колвилла, которая разбивает страницу на четыре колонки таким образом, что в случае нехватки экранного пространства четвертая колонка «свешивается» ниже третьей. Еще раньше мы узнали о способе Камерона Адамса, позволяющего создавать таблицы стилей, приноравливающиеся к размеру окна браузера. При помощи камероновского скрипта, сайт распознает изменение размеров окна браузера и реагирует незамедлительно. К сожалению, при изменении величины шрифта оба способа попросту бесполезны.
Выявление изменений величины шрифта.
Процедура проста до необычного. Потребуется JavaScript, который:
- Создает скрытый элемент span, содержащий пустое пространство,
- Считывает и запоминает высоту означенного элемента,
- Регистрирует функцию слушателя, вызываемого при изменении величины шрифта,
- Периодически проверяет, не изменилась ли высота элемента span, что означало бы изменение величины шрифта пользователем.
Как видно, ничего нового – данный прием неоднократно применялся на многих известных Интернет-порталах. Однако, эта технология становится гораздо более заманчивой при использовании custom events, ибо в этом случае при каждом изменении величины шрифта на веб-странице вы будете получать уведомление. (Здесь можно ознакомиться с действующим примером подобного скрипта. «Поиграйте» с величиной шрифта, чтобы увидеть уведомления.)
Создаем определитель изменений величины шрифта.
Для начала встройте скрипт в head своей страницы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Font Resizer Demo</title>
<script type="text/javascript" src="textresizedetector.js"></script>
</head>
<body>
<h1>Resize me, now!</h1>
</body>
</html>
Затем определите два свойства:
- Id элемента, к которому хотите добавить span,
- Имя функции, вызываемой при инициализации определителя.
Эти свойства сохраняются в двух параметрах: TARGET_ELEMENT_ID и USER_INIT_FUNC.
<script type="text/javascript" src="textresizedetector.js"></script>
<script type="text/javascript">
// <![CDATA[
/* id of element to check for
and insert test SPAN into */
TextResizeDetector.TARGET_ELEMENT_ID = 'header';
/* function to call once TextResizeDetector
was initialized */
TextResizeDetector.USER_INIT_FUNC = init;
// ]]>
</script>
Примечание: для корректного определения изначальной величины шрифта на странице, элемент с id (сохраняемый в TARGET_ELEMENT_ID) должен располагаться в первых рядах иерархии источников, дабы не унаследовать величину шрифта от какого-либо предшествующего элемента. Соответственно, определитель должен срабатывать как можно раньше. Если изначальная величина шрифта вас не интересует, можно определить любой другой элемент.
Теперь определите функцию, устанавливаемую в параметре USER_INIT_FUNC.
<script type="text/javascript" src="textresizedetector.js"></script>
<script type="text/javascript">
// <![CDATA[
function init(){
var iBase = TextResizeDetector.addEventListener(onFontResize,null );
alert( "The base font size = " + iBase );
}
// id of element to check for and insert control
TextResizeDetector.TARGET_ELEMENT_ID = 'header';
/* function to call once TextResizeDetector
was initialized */
TextResizeDetector.USER_INIT_FUNC = init;
// ]]>
</script>
Слушатели определяются при помощи addEventListener в функции init(). Это придаст уверенности, что функция (в данном случае onFontResize) будет вызвана при изменении величины шрифта и выдаст изначальную величину шрифта (весьма полезно для пользователей Opera и InternetExplorer 7).
По касательной: IE7 и Opera.
Эти браузеры иначе подходят к изменению вида веб-страницы. Не заботясь о величине шрифта, они укрупняют или уменьшают масштаб просмотра всей страницы, включая изображения и формы. Поскольку шрифт остается нетронутым, наш определитель пребывает без дела. Но выход из ситуации есть: скрипт позволяет считывать изначальную величину шрифта и приспосабливать разметку страницы или widget к новой величине.
Итак…
Подготовив скрипт, определим функцию слушателя
<script type="text/javascript" »
src="textresizedetector.js"></script>
<script type="text/javascript">
// <![CDATA[
function init(){
var iBase = TextResizeDetector.addEventListener( »
onFontResize,null );
alert( "The base font size = " + iBase );
}
function onFontResize( e, args ){
var msg = "\nThe base font size in pixels: " + »
args[0].iBase;
msg +="\nThe current font size in pixels: " + »
args[0].iSize;
msg += "\nThe change in pixels from the last »
size:" + args[0].iDelta;
alert( msg );
}
// id of element to check for and insert control
TextResizeDetector.TARGET_ELEMENT_ID = 'header';
// function to call once TextResizeDetector has init'd
TextResizeDetector.USER_INIT_FUNC = init;
// ]]>
</script>
Когда срабатывает определитель, функция извлекает два параметра: имя события (textSizeChanged) и массив аргументов, первый из которых – объект со следующими свойствами:
iBase (Изначальная величина шрифта при загрузке.)
iDelta (Разница между предыдущей величиной шрифта и новой величиной шрифта.)
iSize (Новая величина шрифта.)
Величина шрифта указывается в пикселях.
Объект TextResizeDetector имеет три метода:
addEventListener() Регистрирует обработчика события и выводит изначальную величину шрифта. При использовании объекта в качестве второго параметра, функция обработчика исполняется в рамках этого объекта.
stopDetector() Остановка определителя.
startDetector() Запуск определителя. Необходимо лишь после использования stopDetector().
Способы применения.
Каково практическое применение определителя? Да какое угодно. В том числе:
- Превращение горизонтального меню в вертикальный список при сильном укрупнении шрифта.
- Замена графического элемента на текстовой символ в слишком крупных шрифтах.
- Применение к странице различных таблиц стилей, в зависимости от величины шрифта. Можно автоматически переключаться на совершенно иной (увеличенный) макет страницы.
- Скрытие элементов при достижении определенной величины шрифта.
- Показ элементов при уменьшении шрифта.
- Втягивание дополнительного текста на страницу при помощи Ajax (если экран вмещает больше текста).
- Расширение боковой панели соответственно изменению величины шрифта (для сохранения длины строки).
- Центрирование элемента, ширина которого определена в типографских единицах em.
…и многое другое! Присылайте свои способы применения скрипта в комментариях к статье.
Коды и примеры можно скачать здесь (zip-архив).За дополнительной информацией обращайтесь к следующим ресурсам: