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.