font-size, scaling, zooming
Немножко о шрифтах. Уж не знаю, кто как делает, а я предпочитаю делать так:
body { font: 100% someFamily }
#someElem { font-size: somePercentageOrEmSize }
Остается просто помнить про размеры, которые во всех браузерах идентично отображаются.
Но! Куча «но» появляется при использовании какого-нибудь image-replacement'a… Например, при масштабировании текст начинает вылазить из-под графики. Или макет не дает возможности указать все размеры в em'ах. И начинаешь понимать, что масштабирование только текста просто бесполезно. К сожалению, нормально масштабирование всего и вся реализовано только в IE. В опере оно есть, и сделано вроде бы нормально, да вот только из js доступ к масштабированию норвежцы дать забыли… Ну а FF… Наверное, решить проблему масштабирования произвольного элемента — слишком сложная задача для mozilla foundation.
Итак, задача: реализовать визуально доступное пользователю грамотное масштабирование сайта. Решение: 3 кнопочки вида «ААА», масштабирующие сайт с сохраненим состояния.
<html>
<head>
<title>full page scaling, IE-only</title>
<style type="text/css">
body { font: 14px "Trebuchet MS", Arial, sans-serif; }
#sizeScale { display: none; }
#sizeScale a { text-decoration: none }
#small, .small { zoom: 0.8 }
#normal, .normal { zoom: 1 }
#large, .large { zoom: 1.2 }
.small #small,
.normal #normal,
.large #large { text-decoration: underline }
</style>
<script type="text/javascript">
window.onload = function() {
//window.external есть только у IE.
if (window.external) {
//если получилось взять из куки, выставляем сохранённое значение
document.body.className = dom.cookie.get('sizeScale') || 'normal'
//показываем блок с масштабирующими ссылками
sizeScale.style.display = 'block'
//описываем обработчик нажатия на ссылку
var handler = function(){
//выставляем
document.body.className = this.id
//сохраняем
dom.cookie.set('sizeScale', this.id)
//предотвращаем переход по ссылке.
return false
}
//выставляем обработчики
small.onclick = normal.onclick = large.onclick = handler
}
}
</script>
</head>
<body>
<div id="sizeScale">
<a id="small" href="#">A</a>
<a id="normal" href="#">A</a>
<a id="large" href="#">A</a>
</div>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
</body>
</html>
таким образом, по нажатию на одну из кнопок посредством изменения className'a будет применено соответствующее правило для body (и сохранено в куки), а ссылка с текущим состоянием будет подчеркнута.
Как видно, мой пример рассчитан только на Internet Explorer.
Так как FF не может масштабировать произвольного элемента в принципе, есть два решения:
- Забить на FF
Страдать фигнейДля каждого "уровня" масштабирования писать каждому элементу размеры. Также придётся наделать кучищу изображений и переключать их.
Второй вариант хоть технически и реализуем, но геморроен страшнейшим образом — нужно либо в css писать мильон правил, либо отдавать изображения и css скриптом, подставляя нужные значения в соответствии с полученной кукой.
Так как Opera не дает программной возможности управления своим замечательным механизмом масштабирования, есть три решения:
- Забить на Оперу
Страдать фигнейделать то же самое, что и для FFЗабить на юзабилитиПредложить пользователю самому смасштабировать страницу
Ну а в ИЕ все просто — пишем в каждое правило соответствующее значение zoom и радуемся.
Вывод: для пользователей ИЕ предоставляем возможность нормального масштабирования с красивым контролом, а остальные к неудобствам наверняка привыкли ;)
P.S. Даешь в Опере доступ к зуму из js!
3 Comments:
div id="size"
#sizeScale a { text-decoration: none } /* отключим для всех */
Не понимаю. Был идентификатор size а стал sizeScale?
Дим, я категорически извиняюсь — после очередного репоста то ли через недосып то ли через что на блог был выложен ранний драфт поста. Поправил. Я совершенно слеп!
Да, чуть не забыл %) о dom.cookie.get/dom.cookie.set я расскажу гораздо позже:) Сейчас готовится к выходу статья про события, затем уже буду про DOM потихоньку освещать...
Отправить комментарий
<< Home