Власть народу - относительные размеры шрифтов
Bojan Mihelac
Относительные
размеры шрифтов делают сайты более удобными для чтения - но польза от этого не
велика, если посетители сайта не знают, как реально изменять размеры текста. В Internet Explorer, наиболее распространенном
на данный момент браузере, эта возможность спрятана в одном из меню второго
уровня, из-за чего изменение размера текста становится чересчур сложной задачей
для многих пользователей. Эта задача намного упростится, если на страницах
сайта присутствуют кнопки, позволяющие быстро изменить размер шрифта.
К
сожалению, в большинстве вариантов таких кнопок игнорируются установки
пользователя. В данной статье мы приводим решение, которое позволят менять
размера текста, и при этом не вступает в противоречие с настройками
пользователя.
CSS
В
качестве первого шага создадим CSS-файл
с основными стилями, в котором будут использоваться относительные размеры
шрифтов в сочетании с размером шрифта, установленном на машине пользователя
по-умолчанию. Для этого размеры мы будем задавать в процентах или в em-ах.
/*
размер шрифта по-умолчанию */
@import url('/small.css');
/*
Совместимые с Netscape 4
размеры шрифтов */
body, div, p, th, td, li, dd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 130%;
font-weight: bold;
}
h2 {
font-size: 110%;
font-weight: bold;
}
Теперь
создадим пять альтернативных стилей, где используются определенные в
спецификации CSS абсолютные
размеры: "xx-small", "x-small", "small",
"medium", и "large". В любом браузере
коэффициент масштабирования между ними должен быть 1.2, как это рекомендует
стандарт CSS2. Также следует
учесть и обойти проблемы масштабирования в IE5 и Opera (более
подробно эта тема раскрыта в замечательной статье Тода Фарнера (Todd Fahrner) "Размер имеет
значение").
/*
пример файла xx-small.css */
body,
body div,
body p,
body th,
body td,
body li,
body dd {
font-size: xx-small;
voice-family: ""}"";
voice-family: inherit;
font-size: x-small
}
html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
font-size: x-small
}
Получившиеся файлы можно посмотреть по данным ссылкам: xx-small.css, x-small.css, small.css, medium.css, large.css.
HTML
Теперь
давайте создадим HTML-документ
и подключим к нему основной и альтернативный CSS-файлы, присвоив альтернативным файлам имена "A--", "A-", "A", "A+" и "A++" в порядке возрастания.
JavaScript
Теперь добавим в нашу HTML-страницу переключатель таблиц стилей, взятый из статьи "Alternative Style: Working With Alternate Style
Sheets".
Сами
кнопки реализуем вот так:
Вот
исходный код переключателя стилей, а вот полностью рабочий пример,
протестированный в Mozilla
1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. Вот и все.
Предупреждение
Не
забывайте, в некоторых версиях IE
есть баг, из-за которого он начинает странно себя вести, когда перед типом
документа DOCTYPE идет
декларация XML.
Список литературы
Для
подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/