Заголовки… с флешом

14 September, 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

Что же происходит?

Вот как можно описать действие этой методики.

  1. Вы запрашиваете страничку и она начинает грузиться.
  2. Javascript определяет установлен ли у вас Flash 6 или выше.
  3. Если не обнаружено Flash 6 или выше, страничка грузится и отображается как обычно.
  4. Если же Flash обнаружен, то элементу HTML присваивается класс “hasFlash”, что должно спрятать весь текст подлежащий обработке на этой страничке. То есть тот, который мы заменяем.
  5. Javascript пробегает по страничке, и находит все элементы, которые нужно заменить. Как только находит — определяет высоту и ширину элемента, а потом заменяет Flash-роликом с соответствующими размерами.
  6. Flash-ролик знает, какой текст он содержит. Он отображает его очень большим(96pt).
  7. Flash-ролик уменьшает размер шрифта, пока он не поместится в отведенное для него место.

Размер шрифта

Так как скрипт сначала получает размер заголовка(текста), а потом подгоняет под него наш флэш-ролик, то и размер конечного заголовка может варьироваться. То есть, если у вас стоит увеличенный шрифт(в броузере), то замена с помощью этой техники тоже будет увеличенной.

Однако, так как скрипт срабатывает при загрузке. То если вы на страничке измените размер текста, наши флэш-заголовки остануться неизменными. Хотя после обновления страницы они тоже станут увеличенными. По-моему это довольно сомнительный недостаток.

Недостаток

Автор упоминает лишь один недостаток.

Не следует использовать этот прием если флеш-ролик получается намного меньше(уже) чем оригинальный текст. В этом случае лучше задать отрицательные расстояния между буквами оригинального текста, что бы размеры будущего флэш-ролика и бывших заголовков сильно не отличались.

Хотя лично я считаю недостатком размер файлов, которые подгружаются. Я понимаю, что меньше уже некуда. Но все-таки…

Как использовать?

  1. Нужно открыть “sIFR.fla” (это можно сделать например с помощью Flash MX) и изменить параметр font (шрифт) на тот о котором вы мечтали, но боялись применять. После этого нужно экспортировать ролик в файл с именем “sIFR.swf”, например.
  2. Нужно задать CSS для заголовков, которые будем заменять, в таком роде:
    html.hasFlash .replace	{
    	visibility: hidden;
    }
    
  3. Определить, какие элементы мы будем заменять. Это нужно сделать внизу файла “sIFR.js”. Примерно так:
    TJ_replaceElement('h1','sIFR.swf','','','#990000','#FFFFFF','');
    TJ_replaceElement('h2.replace','sIFR.swf','','','#002D6F','#FFFFFF','');

    Первый цвет — цвет шрифта, второй — фона.

  4. Подключить скрипт “sIFR.js” к вашей страничке.

Смотреть

Что бы не напрягать трафиком авторов(они почему-то всегда на него жалуются), я сделал свой пример.

Дизайн, Полезности

15 комментариев к “Заголовки… с флешом”

Vanav | 1. 23 September, 2004

Flash уже добрался до текста, только здесь его нехватало.

А ведь кому-то не понравится курсив (em/i) в текущем шрифте, давайте весь курсив будем заменять на заранее подготовленные картинки (конечно, только если браузер поддерживает графику).

Это просто: ставим на сервер скрипт, которому через URI передаём слово (/img.php?w=SomeText), а получаем красивую картинку, которой и заменяем это слово (при помощи JavaScript).

Самый большой недостаток: у этой технологии пока еще нет названия :)

kukutz | 2. 30 September, 2004

Главные недостатки:
1. Сначала текст скрывается, потом неизвестно сколько грузится флеш. У меня грузился долго.
2. Выделить текст вместе с заголовками невозможно.
3. Выделение заголовков страшно тормозное.
4. Нет переноса текста заголовков при ресайзе страницы.

В общем, я надеюсь, что эта технология будет использоваться как можно меньше.

Vova | 3. 30 September, 2004

вообще то эту технику придумал Shaun Inman, а остальные только развили тему.

среди основных недостатков могу согласиться только со временем загрузки (ок 12кб javascript+флэш файл со шрифтом в кривых – от 15кб до бесконечности). Заголовков в несколько строк можно запросто избежать, выражаясь более кратко.
выделение на http://www.shauninman.com/ не такое уж тормозное.

Из других недостатков могу отметить некрасивое флэшевское сглаживание и отсутствие поддержки кириллицы. Во всяком случае, я пока не встречал sIFR2.0, работающий с кириллическим шрифтом. Просто IFR с небольшими изменениями в javascript правильно отображает кириллицу. см. http://www.evgord.com/

cssing могу только похвалить за пропоганду вэб стандартов, о которых в русскоязычном мире пока никто ничего не знает и знать не хочет.

всегда приятно найти единомышленников

akella | 4. 30 September, 2004

Все равно другой удобоваримой альтернативы заменить текст своими шрифтами фактически нет (на АЛА с ПХП мне честно говоря тоже больше нравится, но то немного другое).
Ну а за это естественно приходится платить трафиком, но это еще спорный вопрос и зависит от частных случаев — оправдывает ли себя эта техника.
А насчет выделения: а если бы была картинка? Нифига бы мы не выделили вообще. А так и код в порядке и заголовки своим шрифтом.

Хотя я всегда исходил из ограничения в 40Kb, поэтому эта техника не для меня…

Екатерина | 5. 15 November, 2004

Чтобы работала кириллица в версии 2.0.

В скрипте sifr.js строку 32
String.prototype.normalize = function(){
return this.replace(/\s+/g, ” “);
};

нужно поменять на:
function SI_normalizeWhiteSpace(txt) {
var rE = /\s+/gi;
return txt.replace(rE,’ ‘);
}

Всё просто очень просто:)

vallka | 6. 15 November, 2004

Если эта техника дейсвительно получит какое-то распространение, придется потратить силы чтобы НЕ ДОПУСТИТЬ установки флаша в своем браузере… И новая забота для продвинутых браузеров появится: помимо душения попапов и прочего г**на, душить и этот конкретный джаваскрипт, слава Богу это думаю несложно будет приделать…

akella | 7. 16 November, 2004

А почему вас так пугает эта техника?
Трафик? Так от любого флэша точно такая же опасность. Даже больше…
Почему он вам так не нравится?

witness | 8. 9 December, 2004

Все зависит от назначения сайта. Для контент проекта , скажем так, не самое идеальное решение. А для on-line представительства, – возможность подчеркнуть индивидуальность (тем более, если за разработку фирменного шрифта платились немалые деньги).
Думаю sIFR наиболее удачна для:
меню домашних страничек
блоки текста промо-сайтов
заголовков новостей сайтов информационных агенств.
Хотя не факт, что данная технология имеет перспективы сколько – нибудь большие (проживет хоть на день дольше), чем “Embedding Font by MS”

Dmitrii Ro | 9. 22 December, 2004

Совершенно согласен с Vanav и Kukutz: глупость и излишество. Совет создавать заголовки поменьше — это, знаете, означает, что смыслонесущее содержимое страницы начинает зависеть от дизайна, что категорически неприемлемо.
Время загрузки остаётся критически важной величиной. Этой осенью “КО” опрашивал провайдеров о перспективах dial-up’а, и там была названа цифра в 60% доходов, которые он даёт; если вспомнить, что один дайалапщик даёт провайдеру в десятки раз меньше денег, чем любой “выделенщик” и т. п., то по количеству людей соотношение будет ещё более катастрофическим. Так что время загрузки does matter. Дальше, из-за медленного соединения люди открывают одновременно полтора, два, три десятка страниц и ловят, какая первая загрузится; ресурсы ПК заняты, и все стадии процесса — скрытие текста, отбражение и подгонка флешевого варианта — могут стать видимыми, что красочности не добавит.
Люди с ограничениями по зрению — и слепые, которые используют всяческие читалки, и просто близорукие — страдают. И если тотально слепые просто не устанавливают флеш вообще, и пройдут по ветви чистого HTML, то большинство близоруких по умолчанию грузят страницу в 100%, а потом, если шрифт мелковат, увеличивают масштаб.
> А почему вас так пугает эта техника?
> Трафик? Так от любого флэша точно такая же опасность.
А с чего это Вы так позитивно отзываетесь о флеше? Хороший, гибкий и мощный, инструмент, но как всегда используют его в первую очередь дураки и сволочи. Тотальное нарушение всех принципов гипертекста со всеми наработанными методами работы с ним, нагнетание сложности и затратности там, где она не просто не нужна, а противопоказана. Это о флеше я говорю, и обговариваемая техника — достаточно яркая иллюстрация. Вы пугаете нас картинкой, тогда, мол, с масштабированием, выделением, роботизированным чтением текста вообще дно. Но извините, это всё равно что убеждать в пользе курения, ссылаясь на большую опасность от героина. Vanav про картинку сардонически говорил, как раз и указывая, что это одного поля ягоды, и одинаково малосъедобные.
И не дай бог, чтобы эта техника когда-либо приобрела статус стандарта.

akella | 10. 22 December, 2004

Ваша критика данной техники носит несколько деструктивный характер.
Пока более стоящей альтернативы нет. И хотя я не ярый сторонник данного метода, но и вы перегнули.

  • Время загрузки – скрипт и флэш будут загружаться лишь при первом посещении. При втором же все будет максимально быстро. При использовании картинок примерно тоже.
    А время загрузки играет роль всегда. Поэтому естественно нужно не переходить некоторые границы, которые зависят по моему сугубо от аудитории. К тому же все не так плохо. Совсем несложно применять эту методику и не выходить из 40Kb. По моему дайалапшики такое могут потерпеть. И именно это число завещал нам “гуру”.
    А вот вред от использования неоптимальной верстки по моему намного более глобален.
    Возьмите хотя бы мои переделки укрнета и “Висныkа Державных закупивель”. Экономия трафика там просто огромная.
  • Страдания людей.
    Насчет скринридеров. Они читают код. А в коде это все те же обычные заголовки. Поэтому именно их “читатели экранов” и прочтут. Никто ничего не потеряет.

    Шрифты резиновые, с той оговоркой, что надо обновлять страницу. К тому же нетрудно для пущей доступности, если это действительно критично, сделать джаваскрипт для смены размера шрифта.
    Насчет красочности: очень многие страницы загружаются не красочно. Исключения разве что чисто флэшевые.
    И кстати при загрузке будут отображаться обычные шрифты, вплоть до того момента пока загрузится сам флэш и скрипт. То есть ничего ужасного кроме какого-нить шрифта со своего компа пользователь не увидит.

  • И насчет гибкого флэша. Любой хороший инструмент можно использовать не по назначению. И это не аргумент против флэша.
  • КАКИЕ ПРИНЦИПЫ МЫ НАРУШАЕМ???КАКАЯ СЛОЖНОСТЬ??
  • Но тем не менее эту технику уже довольно часто используют. Поскольку она оптимальная для данных задач. Поэтому можно сказать – для замены текста своим шрифтом это сейчас стандарт.(один из…)

И вообще что вы можете предложить дизайнеру взамен? Как заменять шрифты?

vallka | 11. 23 February, 2005

>И вообще что вы можете предложить дизайнеру взамен?
К сожалению, ничего хорошего… Но вот что все это напоминает: мне в почтовый ящик каждый день сыпется огромный ворох макулатуры, тоже, кстати, красиво сделанный бумажными в данном случае, дизайнерами. Утром у каждого метро подобную макулатуру раздают налево и направо бесплатно (я живу в Лондоне, не очень знаю как с подобным делом скажем в России, знаю что примерно так же только разве что качество картинок этой макулатуры не в пример хуже). Да, кто-то старался, дизайнировал все это, кто-то за это платил.. Но для конечного пользователя все это – всего лишь навязчиво навязавыемый мусок, лишние хлопоты – как от этой макулатуры избавится.. Наверное это еще долго будет продолжаться – борьба заказчиков за красивые бесполезные картинки и простых пользователей – против них….

GREKIMOS | 12. 28 May, 2005

Екатерина сказал(а) 15 ноября:
В скрипте sifr.js строку 32
String.prototype.normalize = function(){
return this.replace(/\s+/g, ” “);
};
нужно поменять на:
function SI_normalizeWhiteSpace(txt) {
var rE = /\s+/gi;
return txt.replace(rE,’ ‘);
}

ВСЕ СДЕЛАЛ, НО ВСЕ РАВНО НЕ РАБОТАЕТ С КИРРИЛИЦЕЙ!!!
Всё просто очень просто:)

ktonado | 13. 29 June, 2005

да, товарищи, не получилось у меня завести это с русским языком. в архиве, как я понял, это все уже заменено? я про 32 строчку, которая там пустая…

ktonado | 14. 30 June, 2005

вопрос снят. во флеше нужно добавить русские буквы к шрифту.

akella | 15. 30 June, 2005

Именно так,
сорри не мог уследить за всеми постами…

Оставить комментарий