sIFR — расширяем возможности типографики xhtml
В этой заметке пойдет речь о довольно интересной технологии sIFR (Scalable Inman Flash Replacement). Путем комбинации Flash JavaScript и CSS на вашей XHTML-страничке можно создать текст, выполненный абсолютно любым шрифтом. При этом xhtml абсолютно валиден, текст будет выделяться, а отсутствие flash или JavaScript приведет всего лишь к отображению текста стандарным шрифтом с CSS стилями.
Заметка не претендует на абсолютно полное описание технологии, но в конце вас ждут ссылки на документацию и небольшой пример, который вы сможете скачать одним файлом и «поиграться» с ним на досуге.
Использовать sIFR очень просто. Все завязано на том, что после загрузки страницы JavaScript заменяет нужные XHTML элементы на Flash, который содержит в себе необходимый шрифт.
- Страница загружается в браузер
- Java Script-ом проверяется наличие Flash плеера и затем ищутся указанные тэги или классы.
- Если у клиента нет Flash или отключен JavaScript — ничего страшного не произойдет. Клиент увидит обычный текст со стилями.
- Если всего хватает, то JavaScript для каждого указанного элемента создаст Flash-объект и призведет замену.
- Встроенный во Flash Actionscript загрузит нужный шрифт размером 6pt и растянет до нужного размера.
Думаю, достоинства этого метода очивидны, а вот из недостатков стоит отметить:
- Заменённые таким образом элементы не участвуют в общем выделении (если, к примеру, вы нажали CTRL+A в браузере). Не критично, но пережить можно.
- Не всегда работает прозрачность фона. Если, к примеру, под заголовком находится какой-нибуть сложный фон. Похоже, это зависит от версии flash-плэера.
Материал на английском:
- sIFR 2.0: Rich Accessible Typography for the Masses
- Introducing sIFR: The Healthy Alternative to Browser Text
- sIFR Documentation & FAQ
Мой собственный пример
UPDATE: В комментариях CurlyBrace подсказал интересное решение в виде плагина для JQuery, которое еще больше упрощает разработку. За что ему большое спасибо и мой скромный плюс в карму.
оригинал — sIFR — расширяем возможности типографики xhtml