Заголовки... с флешом
14 Sep, 2004Поскольку главным элементом страницы я считаю текст, то мне всегда было интересно как "продвинутые дизайнеры" решают для себя этот вопрос. Поэтому ранее я уже изучил заголовки на сайте www.cameronmoll.com, можете почитать об этом здесь.
На очереди новая техника, теперь в борьбу с отображением шрифтов вступает... Flash.
Кто придумал?
Авторами и разработчиками данной техники являются Mike Davidson, Tomas Jogin и Shaun Inman. Оригинальная статья находится по адресу : http://mikeindustries.com/blog/archive/2004/08/sifr.
Зачем?
Как говорит сам Майк Девидсон: чтобы Arial'а стало меньше(не дословно, но смысл именно такой).
Этот прием адресован всем, кому не не хватает обычных шрифтов (Verdana, Helvetica, Georgia, etc). А так же тем, кто не доверяет аппаратному сглаживанию их на экране. И тем кто хочет иметь еще больший контроль над отображением страниц (это наверно про любого дизайнера можно сказать). Поэтому теперь я думаю понятно зачем заменять стандартные шрифты своими.
Уже довольно много попыток предпринималось "писать" страницы своими шрифтами (теми, которых нет у пользователей). Есть и статья с использованием PHP на ALA называвшаяся Dynamic Text Replacement, и много было других техник подобных этой, на флэше (Inman Flash Replacement).
Однако, эта оказалась одной из самых универсальных и простых для внедрения. Читайте сами. Назывется она sIFR
Что же происходит?
Вот как можно описать действие этой методики.- Вы запрашиваете страничку и она начинает грузиться.
- Javascript определяет установлен ли у вас Flash 6 или выше.
- Если не обнаружено Flash 6 или выше, страничка грузится и отображается как обычно.
- Если же Flash обнаружен, то элементу HTML присваивается класс “hasFlash”, что должно спрятать весь текст подлежащий обработке на этой страничке. То есть тот, который мы заменяем.
- Javascript пробегает по страничке, и находит все элементы, которые нужно заменить. Как только находит — определяет высоту и ширину элемента, а потом заменяет Flash-роликом с соответствующими размерами.
- Flash-ролик знает, какой текст он содержит. Он отображает его очень большим(96pt).
- Flash-ролик уменьшает размер шрифта, пока он не поместится в отведенное для него место.
Размер шрифта
Так как скрипт сначала получает размер заголовка(текста), а потом подгоняет под него наш флэш-ролик, то и размер конечного заголовка может варьироваться. То есть, если у вас стоит увеличенный шрифт(в броузере), то замена с помощью этой техники тоже будет увеличенной.
Однако, так как скрипт срабатывает при загрузке. То если вы на страничке измените размер текста, наши флэш-заголовки остануться неизменными. Хотя после обновления страницы они тоже станут увеличенными. По-моему это довольно сомнительный недостаток.
Недостаток
Автор упоминает лишь один недостаток.
Не следует использовать этот прием если флеш-ролик получается намного меньше(уже) чем оригинальный текст. В этом случае лучше задать отрицательные расстояния между буквами оригинального текста, что бы размеры будущего флэш-ролика и бывших заголовков сильно не отличались.
Хотя лично я считаю недостатком размер файлов, которые подгружаются. Я понимаю, что меньше уже некуда. Но все-таки...
Как использовать?
- Нужно открыть "sIFR.fla" (это можно сделать например с помощью Flash MX) и изменить параметр font (шрифт) на тот о котором вы мечтали, но боялись применять. После этого нужно экспортировать ролик в файл с именем "sIFR.swf", например.
- Нужно задать CSS для заголовков, которые будем заменять, в таком роде:
html.hasFlash .replace { visibility: hidden; } - Определить, какие элементы мы будем заменять. Это нужно сделать внизу файла “sIFR.js”. Примерно так:
TJ_replaceElement('h1','sIFR.swf','','','#990000','#FFFFFF',''); TJ_replaceElement('h2.replace','sIFR.swf','','','#002D6F','#FFFFFF','');Первый цвет — цвет шрифта, второй — фона. - Подключить скрипт “sIFR.js” к вашей страничке.
Смотреть
Что бы не напрягать трафиком авторов(они почему-то всегда на него жалуются), я сделал свой пример.
- Время загрузки - скрипт и флэш будут загружаться лишь при первом посещении. При втором же все будет максимально быстро. При использовании картинок примерно тоже.
А время загрузки играет роль всегда. Поэтому естественно нужно не переходить некоторые границы, которые зависят по моему сугубо от аудитории. К тому же все не так плохо. Совсем несложно применять эту методику и не выходить из 40Kb. По моему дайалапшики такое могут потерпеть. И именно это число завещал нам "гуру".
А вот вред от использования неоптимальной верстки по моему намного более глобален.
Возьмите хотя бы мои переделки укрнета и "Висныkа Державных закупивель". Экономия трафика там просто огромная.
- Страдания людей.
Насчет скринридеров. Они читают код. А в коде это все те же обычные заголовки. Поэтому именно их "читатели экранов" и прочтут. Никто ничего не потеряет.
Шрифты резиновые, с той оговоркой, что надо обновлять страницу. К тому же нетрудно для пущей доступности, если это действительно критично, сделать джаваскрипт для смены размера шрифта.
Насчет красочности: очень многие страницы загружаются не красочно. Исключения разве что чисто флэшевые.
И кстати при загрузке будут отображаться обычные шрифты, вплоть до того момента пока загрузится сам флэш и скрипт. То есть ничего ужасного кроме какого-нить шрифта со своего компа пользователь не увидит.
- И насчет гибкого флэша. Любой хороший инструмент можно использовать не по назначению. И это не аргумент против флэша.
- КАКИЕ ПРИНЦИПЫ МЫ НАРУШАЕМ???КАКАЯ СЛОЖНОСТЬ??
- Но тем не менее эту технику уже довольно часто используют. Поскольку она оптимальная для данных задач. Поэтому можно сказать - для замены текста своим шрифтом это сейчас стандарт.(один из...)
И вообще что вы можете предложить дизайнеру взамен? Как заменять шрифты?