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

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++" в порядке возрастания.

<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.

Список литературы

Разработка web сайта на основе HTML с использованием JavaScript
... Свердловской области. Учебно-технический цент "Омега-1" Предмет: Информатика Разработка web сайта на основе HTML с использованием JavaScript.
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
Times New Roman;">выбор гарнитуры</ГОЫТ> и <SPAN CLASS="font">pa3Mep шрифта</ЗРШ>), с помощью средств CSS возможно <FONT С1АЗЗ="со1ог">изменять такие параметры</ГОЫТ>, как <FONT ...
Раздел: Рефераты по информатике, программированию
Тип: дипломная работа
Разработка сайта с использованием CSS
Разработка сайта с использованием CSS Оглавление: 1. Кратко про CSS. 2. Основы. 3. Расширение свойств тегов. 4. Способы определения стилей. 5. Классы ...
<P style="text-align: center; font-style: italic; font-size:
<Link href="style.css" type="text/css" rel="stylesheet">
Раздел: Рефераты по информатике, программированию
Тип: реферат
Разработка интернет-ресурса для системы дистанционного образования по ...
МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ГУМАНИТАРНЫЙ УНИВЕРСИТЕТ ФАКУЛЬТЕТ ИНФОРМАТИКИ Кафедра общей информатики ...
<link type="text/css" rel="StyleSheet" href="http://src.ucoz.ru/src/css/922.css"
dl class="uLogBlock"><div class="uLogLinks" style="font-size:7pt;text-align:center;"><a id="ull1" href="$REMINDER_LINK$">Забыл пароль</a> · <a id="ull2" href="$REGISTER_LINK ...
Раздел: Рефераты по информатике, программированию
Тип: дипломная работа
Text analysis in translation
1. "Extratextual Factors in Translation Text Analysis" Lecture 1. Systematic Framework for External Analysis Introduction Most writers on translation ...
In this case, the text type is linked with a particular intention on the part of the sender, which leads to the corresponding text function on the part of the receiver.
As was mentioned above, the conventions of certain text types seem to dictate that the title or heading or the title context (comprising main title, subtitle(s) and the like ...
Раздел: Топики по английскому языку
Тип: учебное пособие
Глобальні інформаційні мережі
ОСНОВИ РОБОТИ В ОС UNIX Операційна система - це набір програм, який керує комп'ютером, здійснює зв'язок між користувачем і комп'ютером, і забезпечує ...
Мета тег Content-Style-Type - вказує мову таблиці стилів, значення "text/css" приймається за замовченням, якщо воно влаштовує і розробник не використовує в цьому документі теги ...
Приклад: <META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
Раздел: Рефераты по информатике, программированию
Тип: учебное пособие