Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Хитрости при программировании php, заметки по базам данных

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

Источник: realcoding.net

Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В 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.

/* пример файла 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++ в порядке возрастания.

<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="alternate stylesheet" type="text/css" href="large.css" title="A++" />
<link rel="alternate stylesheet" type="text/css" href="medium.css" title="A+" />
<link rel="alternate stylesheet" type="text/css" href="small.css" title="A" />
<link rel="alternate stylesheet" type="text/css" href="x-small.css" title="A-" />
<link rel="alternate stylesheet" type="text/css" href="xx-small.css" title="A--" />

JavaScript


Теперь добавим в нашу HTML-страницу переключатель таблиц стилей, взятый из статьи Alternative Style: Working With Alternate Style Sheets.

<script language="JavaScript1.2" src="styleswitcher.js" type="text/javascript"></script>

Сами кнопки реализуем вот так:

<form name="font_select" action="GET">
<input type="button" onclick="javascript:fontsizedown();" value=" font - "/>
<input type="button" onclick="javascript:fontsizeup()" value=" font + "/>
</form>

Вот исходный код переключателя стилей, а вот полностью рабочий пример, протестированный в Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. Вот и все.

Предупреждение


Не забывайте, в некоторых версиях IE есть баг, из-за которого он начинает странно себя вести, когда перед типом документа DOCTYPE идет декларация XML.



Похожие статьи:
- Спецификация и функции DOM в PHP
- Отрисовка связанного дерева с помощью XSLT - как с умом использовать XSLT и XPath
- ADODB – русская документация (часть 1)
- Хранение древовидных структур в Базах данных (Nested Sets)
- Обработка запросов к БД при помощи PEAR::XML
- Дополнительные возможности JpGraph
- Установка и конфигурация веб сервера Apache с поддержкой PHP, JSP и MySQL на Windows XP
- Установка и конфигурация веб сервера Apache с поддержкой PHP, JSP и MySQL на Windows XP
- Парсинг на Perl
- Perl & XML. Библиотека программиста
- Генерация контента сайта с использованием Template Toolkit
- Использование модуля для работы с шаблонами. Часть 2.
- Модуль Apache mod_rewrite


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.001]