x
 
Сергей Дроганов
23 февраля 2012

Привет!

Расскажите, пожалуйста, какую технику вы используете для работы со знаком рубля при вёрстке сайтов?



Мы собираем шрифт, в котором определён только символ заглавной буквы Р, но имеющий вид знака рубля. Этот специальный шрифт подключаем с помощью ЦСС-правила font-face:

  • 1000 Р

При копировании и в старых браузерах на месте «Р» будет «Р».

Такой рубль не боится любого размера и начертания шрифта, работает в ИЕ 5+, Опере 10+, Файрфоксе 3.5+, Хроме 3+ и Сафари 3.1+:

  • 100 500 Р

Сборка шрифта

Чтобы сделать такой набор, скачайте шрифт ALS Rubl со знаками рубля для разных гарнитур, созданный в Студии Лебедева.

Отройте его в Фонтографере (Fontographer):

Знаки валют и разряды в бюро отбивают полупробелами.

Создайте новый файл. Выберите любую кирилическую кодировку (Element → Font Info → Encoding). Скопируйте нужный глиф из ALS Rubl в слот с буквой Р:

В окне Font Information назовите шрифт, укажите его насыщенность (Weight) и наклон (Slope). Сохраните otf-файл (File → Generate Font Files).

Полученный файл сконвертируйте в кроссбраузерный набор шрифтов через сервис Font Squirrel. Перед скачиванием своего набора переключитесь в «экспертный» режим и отметьте No Subsetting и Style Linking.

При необходимости повторите всё для других начертаний. Соберите файлы в одну папку, а код подключения в один ЦСС-файл:

@font-face {
  font-family: 'ALSRubl-Verdana';
  src: url('rub-ver.eot');
  src: url('rub-ver.eot?#iefix') format('embedded-opentype'),
       url('rub-ver.woff') format('woff'),
       url('rub-ver.ttf') format('truetype'),
       url('rub-ver.svg#ALSRublRegular') format('svg');
  font-weight: normal;
  font-style:  normal;
}

@font-face {
  font-family: 'ALSRubl-Verdana';
  src: url('rub-ver-it.eot');
  src: url('rub-ver-it.eot?#iefix') format('embedded-opentype'),
       url('rub-ver-it.woff') format('woff'),
       url('rub-ver-it.ttf') format('truetype'),
       url('rub-ver-it.svg#ALSRublItalic') format('svg');
  font-weight: normal;
  font-style:  italic;
}

Теперь шрифт ALSRubl-Verdana можно использовать:

<style>
  .b-rub { font-family: 'ALSRubl-Verdana', Verdana, sans-serif; }
</style>

<p>Не имей 100 <span class="b-rub">Р</span>,
    а имей 100 друзей.</p>

Десерт

Готовые наборы шрифтов с ЦСС и тестовыми страницами. В ассортименте — Ариал, Вердана, Георгия, Таймс, Тахома:

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Анатолий Карасов
23 февраля 2012

Тимур Рузиев пару дней назад описал эту технику для символа казахстанского тенге (официально принятого, но пока ещё не внедрённого в стандартные системные наборы шрифтов): http://resurtm.kz/tenge-symbol

Андрейка Лечев
23 февраля 2012

Некоторое время назад в Студии Лебедева пробовали похожее решение: шрифты, в которых только символы пробела, «р», «у», «б» и «.»

Пробел — половинный (какое должно быть расстояние между числом и знаком), вместо «р» — знак рубля, а «у», «б» и «.» — символы нулевой ширины.

Вставляли это всё конструкцией: 123<span class=«rub»> руб.</span>

В итоге браузеры, поддерживающие подгрузку шрифтов, показывают знак, остальные — «123 руб.» (типа graceful degradation), и последнее также копируется в буфер обмена.

Единственный недостаток — «прыгает» ширина при подгрузке шрифта (знак рубля уже строчки «руб.»)

Не в курсе, пользуются ли в Студии этим после моего ухода. Но если будут нужны варианты для Ариала (regular, bold, italic...) у меня где-то есть — напишите.

Денис Попов
23 февраля 2012

Я думаю, лучше делать примерно так:
100 500 р.

Или даже так:
100 500 руб.

Где внутренний спан скрывается тем или иным способом. Это для того, чтобы при копировании получался текст «100 500 руб.», а не «100 500 Р».

В спецшрифте в таком случае начертание знака рубля следует «повесить» на строчную р.

Вячеслав Войцеховский
24 февраля 2012

Вот только если скопировать и вставить текст, то будет «100 500 Р»
А по идее должно быть «100 500 р.» или «100 500 руб.»

Можно символ рубля присвоить точке, а букве ничего не присваивать.

Не имей 100 <span class=«b-rub»>р.</span>

Тогда при копировании от края до края будет копироваться цена с правильным обозначением валюты. Но при копировании одного символа рубля — только точка.

Костыли, эх, костыли...

Но можно при копировании символа рубля скриптом перехватывать данные и производить замену на «руб.»

Что вы думаете на этот счёт? Насколько вообще нужно заморачиваться этой проблемой?

Даниил Пронин
10 сентября 2013

Я думаю, что стоит использовать не «руб.», а «Р.», так как это ближе всего к хотя бы каким-либо стандартам. Центробанк, вроде, что-то по этому поводу даже предпринял http://jinsa.ru/news/140.html (да, пруф не ахти какой, но лучшего пока не нашёл).


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

1 7 Как избежать «эффекта Тильды»? 2 1