Влада народу - відносні розміри шрифтів

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/