Text Resize with JavaScript

Изменяем размер шрифта

Andrew Medico on March 25, 2008 @ 7:21 am
I’m curious.. what is the point of doing this in JavaScript? Are there major browsers that are incapable of increasing page text size?

david on March 25, 2008 @ 7:25 am
I think it’s good to do this in javascript because many users may not know how to change the text size using the browser’s menu. Believe me, you’d be surprised how much I need to explain to customers about their browsers.

Из обсуждения поста на эту же тему в блоге Дэвида Уолша.

Задача: сделать простую, но юзабельную переключалку размеров шрифта с запоминанием.
Условия: На ресурсе толкаются как минимум две JavaScript библиотеки, MooTools и jQuery, каждая со своими UI, Tools'ами и плагинами.
Решение: делаем на «чистом» JavaScript + CSS в надежде избежать конфликта.

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


<a href="#" onclick="javascript:body.style.fontSize='1em'; set_cookie('page_size', '1', 30);">Small Text</a>
<a href="#" onclick="javascript:body.style.fontSize='2em'; set_cookie('page_size', '2', 30);">Medium Text</a>
<a href="#" onclick="javascript:body.style.fontSize='3em'; set_cookie('page_size', '3', 30);">Large Text</a>

Не слишком «Unobtrusive JavaScript», а?

Пришлось повозиться.
HTML блока переключения, также как и CSS, генерируется посредством document.write:


function setTextSizeHTML() {
	document.write('<p id="fs">\n');
	document.write('<small>Размер шрифта:</small> \n');
	document.write('<a id="fs-small" onclick="set_small()"><small>A</small></a> \n');
	document.write('<a id="fs-normal" onclick="set_normal()" title="по умолчанию">A<a> \n');
	document.write('<a id="fs-large" onclick="set_large()"><big>A</big></a>\n');
	document.write('</p>');
}

Функции set_small(), set_normal() и set_large() задают значение свойства font-size контейнера, в котором изменяется размер шрифта; они же управляют CSS-классами, определяющими поведение элементов переключателя размеров шрифта:


function set_small() {
	document.getElementById('content-size').style.fontSize='85.71%';
	set_cookie('font_size', 85.71, 30); // cookie name, font-size (number only), days to expire
	CSSClass.add('fs-normal', 'fs-idle');
	CSSClass.add('fs-large', 'fs-idle');
	CSSClass.remove('fs-small', 'fs-idle');
	CSSClass.add('fs-small', 'fs-active');
}

В конечном итоге вызов стал таким:


<script type="text/javascript">
	setTextSizeHTML();
</script>

В результате замены атрибута гиперссылки href на вполне семантичный (и необходимый в моем варианте!) идентификатор id — глаз не будут мозолить ни маловразумительный javascript:void(0);, ни адрес-страницы-с-решеткой# на конце, появляющиеся в строке состояния при наведении курсора на соответствующий объект.

Для управления классами CSS, не мудрствуя лукаво, взял скрипт из настольной книги
JavaScript. Подробное руководство. Дэвид Флэнаган. 5-е издание, гл. 16.5. CSS-классы, пример 16.7.

Функции первоначальной установки размера шрифта set_fontsize() и индикатора текущего размера set_color() должны вызываться независимо от действий пользователя, а именно при загрузке страницы:


// Here you can add functions that have to run on window.onload
function runOnLoad() {
	set_fontsize();
	set_color();
}
window.onload = runOnLoad;

Вот и все. Добавляем загрузку скрипта в секцию head, а его вызов — в любой контейнер документа, начиная с body. Скрипт настраивается под любой внешний вид; CSS и HTML, генерируемые с помощью document.write можно перенести в секции head и body соответственно. Преимуществом сгенерированного HTML мне видится то, что при отключении JavaScript все следы переключателя исчезают. :roll:

Но. Все делается ручками, никаких плагинов! Желающие могут написать плагин, скажем, для MaxSite сами, благо его автор предоставил для этого все условия и обучающие материалы. Значения всех CSS свойств в скрипте установлены применительно к текущему дизайну и структуре CSS, так что каждый меняет для себя.

Может возникнуть вопрос, почему я назвал файл javascript.kit.js? А не, например, fontsize.js, что было бы логично. Очень просто. Сюда можно добавлять и добавлять отдельные скрипты, необходимость в которых возникнет. Так, методы is, add и remove объекта CSSClass могут быть использованы любым скриптом для проверки наличия, добавления или удаления класса CSS. Могут появиться и другие совместно используемые сервисные сниппеты.

Как положено, на сладкое ложка дегтя: в процессе усовершенствования размер файла увеличился с 1.1 до 4.9 КБ, и это не предел! :lol:

У ИЕ 6 привычный вывих мозга, отрицательный margin-right удваивает, с классами косячит: после последовательного переключения размеров все буквы А переключателя краснеют и остаются такими до перехода на другую страницу или перезагрузки. Все ИЕ в локалке не запоминают куки, да и фиг с ними, еще не хватало копаться в настройках…

В нормальных браузерах косяков не замечено.

Взять файл javascript.kit.js

Loading comments …   ←   Text Resize with JavaScript

Fields marked with asterix are required.


Max 40 alpha-numeric characters, including spaces.


Valid email. Max 255 characters. Not displayed publicly.

*