Знак рубля в html

Поки новий символ не включений в таблиці ISO і Unicode і відсутній на комп'ютерах користувачів, доводиться шукати способи його відображення. Важливо, щоб він був масштабується. Необхідно також подумати про пристрої читання з екрану і про те, що виявиться в буфері обміну у користувача, що копіює ціни. Можливі рішення: Flash, PNG, GIF і HTML.

Мінуси флеша очевидні: у користувача може не бути програвача, фокус з тексту переміщається в об'єкт при кліці, складно змінити колір знака.

Працюючи з зображеннями ми стикаємося з межами масштабування, фіксованою кольоровою гамою, ігноруванням пошуковими системами і прив'язкою до графіку.

Рішення з картинкою може бути наступним (позначення «руб» приховано і потрапить в буфер обміну при копіюванні):

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Від деяких проблем позбавить формат SVG. Це вектор, розмір файлу невеликий, через CSS ми можемо вільно управляти кольором символу. Великий мінус - необхідність впровадження об'єктів в текст. Приклад нижче не працює в MSIE.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Якщо відкинути варіанти з картинками, перше рішення, яке лежить на поверхні, - перекреслений текст. На жаль, результат в MSIE жахливий. Існуючі на даний момент кошти CSS не дають нам можливості вільно управляти положенням горизонтальної лінії.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Якщо стандартну межу не можна посунути, можна намалювати свою. Припустимо, бордером. Товщина лінії в прикладі добре підходить для Firefox, але недостатня для відображення в браузері Opera. Результат дуже непередбачуваний.

Кролики по 100 p.

Кролики по 100 p.

Кролики по 100 p.

Кролики по 100 p.

Звернемося до таблиць символів. Сумісний коротке тире з буквою «Р». Впровадивши - через таблиці стилів, ми можемо управляти його відображенням при різних режимах виведення. Результат краще, але при зміні розмірів шрифту риса стрибає. Особливо в MSIE.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

У вірменському алфавіті існує досить близький до знаку символ. Хм, теж варіант. Користувачі Mac OS X побачать кілька віддалене від оригіналу накреслення (і лише в тому випадку, якщо поставили Additional Fonts). Але все-таки занадто кидається в очі, що буква рядкова.

Кролики по 100 # X584; руб.

Кролики по 100 # X584; руб.

Кролики по 100 # X584; руб.

Кролики по 100 # X584; руб.

Якщо символу немає на комп'ютері користувача, то може бути варто його туди завантажити? На жаль, властивість font-face (CSS 2.0), не включене в CSS 2.1. Але браузер, що підтримує завантаження шрифтів, існує - це Internet Explorer. Тільки він відобразить знак нижче. Решта браузери покажуть «руб». Створивши Односимвольний шрифт зі знаком рубля, прив'язаним до букви «р», ми отримуємо краще рішення для користувачів MSIE.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Для користувачів інших браузерів поки залишається використовувати коротке тире або картинки. Останній приклад поєднує в собі всі переваги перерахованих методів.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Схожі статті