![]() ![]() |
Кирилл Кленов
Артур Чафонов
8 августа 2007 |
|
![]() |
Задача. | Внедрить знак рубля. |
![]() |
![]() |
![]() |
1 августа студия пригласила профессиональных дизайнеров начать использовать новый знак рубля. Впервые в офлайне он применен на ценниках студийного «Пункта сбыта мечт». Варианты применения в интернете предлагаются ниже.
Пока новый символ не включен в таблицы ISO и Unicode и отсутствует на компьютерах пользователей, приходится искать способы его отображения. Важно, чтобы он был масштабируемым. Необходимо также подумать об устройствах чтения с экрана и о том, что окажется в буфере обмена у пользователя, копирующего цены. Возможные решения: Flash, PNG, GIF и HTML.
Минусы флеша очевидны: у пользователя может не быть проигрывателя, фокус с текста перемещается в объект при клике, сложно изменить цвет знака.
Работая с изображениями мы сталкиваемся с пределами масштабирования, фиксированной цветовой гаммой, игнорированием поисковиками и привязкой к графике.
Решение с картинкой может быть следующим (обозначение «руб» скрыто и попадет в буфер обмена при копировании):
Кролики по 100 руб.
Кролики по 100 руб.
Кролики по 100 руб.
Кролики по 100 руб.
|
|
От некоторых проблем избавит формат SVG. Это вектор, размер файла небольшой, через CSS мы можем свободно управлять цветом символа. Большой минус — необходимость внедрения объектов в текст. Пример ниже не работает в MSIE. |
Batik SVG Toolkit Opera SVG Mozilla SVG Webkit(Safari) SVG |
Кролики по 100 руб.
Кролики по 100 руб.
Кролики по 100 руб.
Кролики по 100 руб.
|
|
Если отбросить варианты с картинками, первое решение, лежащее на поверхности, — перечеркнутый текст. К сожалению, результат в MSIE ужасен. Существующие на данный момент средства CSS не дают нам возможности свободно управлять положением горизонтальной линии. |
Font specification |
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
|
|
Если стандартную черту нельзя подвинуть, можно нарисовать свою. Допустим, бордером. Толщина линии в примере хорошо подходит для Firefox, но недостаточна для отображения в браузере Opera. Результат слишком непредсказуем.
Кролики по 100 p.
Кролики по 100 p.
Кролики по 100 p.
Кролики по 100 p.
|
|
Обратимся к таблицам символов. Совместим короткое тире с буквой «Р». Внедрив – через таблицы стилей, мы можем управлять его отображением при различных режимах вывода. Результат лучше, но при изменении размеров шрифта черта прыгает. Особенно в MSIE. |
Content property |
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
|
|
В армянском алфавите существует достаточно близкий к знаку символ. Хм, тоже вариант. Пользователи Mac OS X увидят несколько отдаленное от оригинала начертание (и лишь в том случае, если поставили Additional Fonts). Но все-таки слишком бросается в глаза, что буква строчная. |
Армянский алфавит |
Кролики по 100 քруб.
Кролики по 100 քруб.
Кролики по 100 քруб.
Кролики по 100 քруб.
|
|
Если символа нет на компьютере пользователя, то может быть стоит его туда загрузить? К сожалению, свойство font-face (CSS 2.0), не включено в CSS 2.1. Но браузер, поддерживающий загрузку шрифтов, существует — это Internet Explorer. Только он отобразит знак ниже. Остальные браузеры покажут «руб». Создав односимвольный шрифт со знаком рубля, привязанным к букве «р», мы получаем лучшее решение для пользователей MSIE. |
Внедрение шрифтов в MSIE Шрифт с тремя вариантами знака Конвертер в формат EOT |
Для просмотра этого примера необходим IE.
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
|
|
Для пользователей остальных браузеров пока остается использовать короткое тире или картинки. Последний пример сочетает в себе все достоинства перечисленных методов.
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
Кролики по 100 pуб.
|
|
© 19952025 Студия Артемия Лебедева
|