Какое-то древнее дерьмо

Живёт тупо потому, что за хостинг уплачено на годы вперед

Как и когда использовать sIFR

17 февраля 2006 · Комментариев: 21 · HTML/CSS, Рецептарий

Перевод статьи Andy HumeHow and when to use sIFR“.

Прежде чем приступить к анализу sIFR, давайте убедимся, что все знакомы с этой технологией и принципами ее работы. sIFR расшифровывается как scalable Inman Flash Replacement и является техникой презентации полностью настраиваемой типографики для web. Происходит это за счет замены текста в целевом элементе флеш-текстом, который рендерится в процессе загрузки страницы. Важно понимать, что флешем замещается не сам элемент, а текст внутри него, что позволяет оформлять и позиционировать элемент вполне обычным образом.

Некоторые факты о sIFR: аксиомы

  • sIFR не требует изменения (X)HTML кода, все действия осуществляются через Javascript, Flash и CSS.
  • Если у пользователя не установлен Flash или отключен Javascript, текст элемента будет оформлен посредством CSS.
  • sIFR масштабируем, и в процессе рендеринга страницы будет изменен согласно установленному у пользователя размеру шрифта (при увеличении шрифта посредством Ctrl-Wheel изменений не происходит до перезагрузки страницы – прим. переводчика).
  • sIFR совместим с программами, читающими информацию с экрана. Ни о каких ошибках или проблемах с ними информации не поступало.
  • sIFR можно выделить при помощи мыши, хотя при выделении всего текста на странице выделение sIFR-элемента может быть визуально незаметным (однако текст все равно выделяется и успешно копируется – прим. переводчика).
  • sIFR не оказывает никакого негативного влияния на SEO, так как не скрывает изменяемый текст от поисковых роботов и пользователей (ваш красивый заголовок первого уровня так и останется заголовком первого уровня для поисковика – прим. переводчика).

Можно сделать следующий вывод: sIFR – это доступная, сложившаяся технология и возможность ее использования должна быть серьезно рассмотрена дизайнерами и разработчиками.

Когда стоит использовать sIFR

Как и в случае с любой web-технологией, важно найти наилучшее применение sIFR’у и выделить ситуации, в которых он может быть уместен. Это сродни выбору правильного инструмента для работы, и в конкретном случае sIFR выскакивает из коробки с оными и умоляет нас пустить его в ход.

Сценарий: Крупный спортивный новостной сайт решает оформить все заголовки уникальным корпоративным шрифтом. Новости (вместе с их заголовками) публикуются различными людьми, расположенными в разных частях света, с помощью некой системы управления контентом. Они не могут нанять человека, который будет сидеть перед Photoshop’ом и рисовать картинку с заголовком каждый раз, когда редактор хочет добавить новую новость.

В такой ситуации sIFR является непревзойденным в своей простоте, удобстве и расширяемости инструментом. Некоторые новостные сайты внедрили решение, позволяющее генерировать изображения на лету посредством PHP или других манипуляций на стороне сервера. Это позволяет сэкономить время, но имеет множество недостатков по сравнению с sIFR’ом:

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

Что касается sIFR’а, то все, что понадобится для отображения заголовков корпоративным шрифтом – один Flash (.swf) файл и один Javascript (.js).

Пример взят не с потолка. Это один-в-один ситуация, которая привела к разработке Майком Девидсоном (Mike Davidson) первоначальной техники Flash replacement еще в 2001 году при редизайне ESPN.com. С тех пор, при участии Шона Инмана (Shaun Inman) и других разработчиков, sIFR превратился в сформировавшуюся гибкую технологию, какой мы видим ее сейчас, и которая внесла решающий вклад в web-типографику в 2005 году.

Использование sIFR для ссылок

Последняя версия sIFR’а позволяет замещать текст ссылки. Хотя это и интересный прием, фактически никогда не стоит использовать sIFR для данной задачи. Связано это с вопросами accessibility:

  • Невозможность вызова контекстного меню по правому клику
  • Невозможность вызова контекстного меню по кнопке “option” (для Mac’ов)
  • Отсутствие информации в строке состояния.

Хотя это и достаточно тривиальные проблемы, множество людей считают, что отсутствие данных возможностей довольно неудобно. Без отображения адреса ссылки в status bar’е невозможно заранее узнать, куда вы попадете, нажав на нее. Да и с увеличением популярности таких браузеров как Firefox и Opera, контекстное right-click меню становится все более используемым инструментом. Хоть sIFR и предоставляет простое контекстное меню для ссылок (флешевое, грубо говоря – прим. переводчика), контекстные опции браузера недоступны.

Разумеется, данные ограничения связаны с Flash’ем, а не с самим sIFR’ом. Вероятно, данные проблемы будут решены в будущем (вернее, частично они уже решены – прим. переводчика). Информация в строке состояния, в частности, может контролироваться посредством Javascript. Однако, до тех пор, пока Flash не позволит отображать полное контекстное меню браузера для ссылок, я уверен, что sIFR не вполне подходит для работы со ссылками.

Сглаживание шрифта

Поскольку основной интерес к sIFR’у связан с возможностью использовать уникальные шрифты, также важным моментом является возможность сглаживания Flash-текста. Web-разработчики часто забывает об этом, частично потому, что многие работают на Mac OS X с впечатляющей технологией сглаживания Quartz. Однако пользователи Windows (пусть и при наличии спрятанной в настройках отображения функции ClearType) по умолчанию видят несглаженные шрифты. В связи с этим возможность оформлять заголовки сглаженным шрифтом для всех пользователей является важным преимуществом, достойным самого пристального внимания.

Тонкая настройка

Еще одна проблема заключается в том, что sIFR не дает возможности тонкого контроля над качеством отдаваемого Flash-текста. Это действительно так. В случае, когда вы создаете изображение в Photoshop или Fireworks, вы можете четко контролировать кернинг, растяжение, сглаживание и любые другие опции (такие как отбрасываемые тени). Графический редактор дает именно тот результат, который вы планируете. В случае с sIFR’ом это не так.

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

Скорость загрузки

Скорость загрузки замещаемого текста является важным вопросом при использовании sIFR’а. И хотя скорость значительно увеличилась по сравнению с ранними версиями, все еще возможна определенная существенная задержка при наличии большого количества замещаемых элементов на одной странице. Пожалуй, это лучший пример того, что умеренное использование (например, один заголок на страницу или запись) на данный момент является идеальным вариантом применения данной технологии.

Это одна из наиболее существенных преград к использованию Flash replacement. Слишком велико первоначальное искушение заменить как можно больше элементов на странице. Для таких задач скорости загрузки должны быть существенно увеличены. И хотя шустрый сервер может помочь вам в этом, главной проблемой остается время, которое требуется для работы довольно громоздкого Javascript’а.

Вывод

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

Идеальная ситуация для внедрения sIFR’а – когда вы используете изображения только для отображения оригинального шрифта или сглаженного заголовка. Это встречается в сети очень часто и sIFR для таких случаев подходит куда лучше. Он масштабируется в зависимости от пользовательского размера шрифта, его можно выделить и скопировать, а также использовать на тысячах страниц всего с двумя файлами, необходимыми для его работы.

Резюме

  • Используйте sIFR для заголовков
  • Сводите использование sIFR’а к минимуму для оптимизации времени загрузки
  • Не используйте sIFR для ссылок

Полезные ссылки

Теги:

Комментариев: 21 ↓

  • fIREz

    здорово, но, имхо, надо хоть как-то перевести на русский “scalable Inman Flash Replacement” а то странно такое в переводе видеть…

  • Flack

    Нет, ни за что.

    Я никогда не перевожу подобные вещи и вам не советую.

  • Arsart

    Алекс, может осилишь перевод и вступительной статьи:)?
    (Первая ссылка в “полезных”)

  • Flack

    Поговорим в понедельник. На праздниках осилю, наверное.

  • fIREz

    имеется ввиду сделать это всплывающей подсказкой, а в тексте так и оставить

  • Максим Россомахин

    И нигде не сказано о том, что sIFR безбожно корёжит в Firefox, если в оном установлено расширение AdBlock, и, кроме того, наблюдаеются проблемы в неоторых Линуксах.

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

    Ну и т.д.

    Осенью мне довелось применить сифр во время работы над сайтом одной из американский хостинг-компаний – по итогам работы сайта сифр был заменён на обычную графику. Клиенту вся эта чехарда обошлась в копеечку.

  • Flack

    Максим, а по поводу качества перевода будут комментарии? :)

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

  • An2k

    Хочу спросить: какие-нибудь проблемы с кирилицей известны?

  • Flack

    При экспорте шрифта нужно выбирать, какие символы добавлять. Мне всегда было достаточно Latin-1 и пунктуации.

    Но не думаю, что есть особо критичные проблемы. Иначе были бы упоминания в сети.

  • Arsart

    Максим, дело в том, что с осени прошлого года sIFR 2 раза обновился до стабильной версии для фикснутых шрифтов. Мы с Алексом использовали flexible шрифты и читали документацию где было написано, что паддинги влияют на размер мувиса в который впихивается sIFR. В общем пока особых проблем с ним не наблюдаем:) Есть плюсы и минусы, но о них позже…

  • Arsart

    http://www.designet.ru !!!! Молодцы! Они поверили в силу сИФРа!:))

  • Андрейка

    Проблемы при верстке с СИФРом есть, куда ж без них? :) Но все решаемо, насколько я пока смог судить по своему опыту.

  • Nekto

    Отличная технология.

    Протестировали, попробовали – работает и вполне устраивает. Заказчикам рекомендуем очень осторожно, но на своем сайте применили и не жалеем.

    Студия Flomaster

  • Oleg

    Кто-нибудь знает как сделать что бы sifr-шрифты были одинаковых размеров?
    Пример пролеммы: смотреть, архив

  • Neutrino

    Уже не первый день думаю, юзать sIFR в комм.проектах или нет. SEO’шники плюются и требуют прекратить беспредел. Я пока не поддаюсь, но и не убеждаюсь ни в ту ни в другую сторону.

  • SvT

    прикольно получается ;)

  • pudeyan

    У браузеров на движке Gecko проблемы с сифром в случае задания у оного аттрибута прозрачности “wMode: transparent”, что в некоторых случаях ограничивает его примененние. Также есть уже упоминавшиеся ранее проблемы с размером флешевого объекта, если у заменяемого элемента задать паддинги (высоту, ширину … нужное подчеркнуть). На практике я заменяю не сам блок, а вложенный в него, к примеру, span.

  • pudeyan

    P.S.: Те же проблемы, что у Gecko-браузеров, есть и в Опере. Для наблюдения вам нужно, чтобы в заменяемом фрагменте имелась гиперссылка при установленном у сифра режиме прозрачного фона. Смотрим на результат в браузере – вроде все нормально, но… теперь если быстро прокрутить страницу вниз, а потом обратно к сифру – ссылка перестанет подсвечиваться. Лечится явным заданием цвета фона у сифра и отключением прозрачности, что в случае если фон не однотонной приведет к отказу от сифра (или от такого фона ;).

    P.P.S.: По поводу тормозов – сифр ощутимо сильнее тормозит в режиме прозрачного фона.

  • Kuzma

    Возможно, кому-то будет интересна статья в моем блоге по этому поводу. Там есть примеры с ссылка на официальную документацию.

  • VINIL

    уперся в отсутствие прозрачных фонов, имхо большой минус этого метода!

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