Подмена «руб.» на знак рубля

23.09.2014  19:05

С подачи Артемия Татьяныча и с официальным утверждением знака рубляa, у всех веб-мастеров образовался дополнительный геморрой.

Проблема:
  • ни в одном стандартном шрифте такого символа нет
  • делать картинкой — не спортивно
  • поисковики должны продолжать «видеть» «руб.», для лучшей идентификации сайта как интернет-магазина и правильной индексации цен
  • менять вручную по всему сайту — жопа


Решение:
Для начала, возьмём шрифт со знаком рубля, который предлагает Студия Лебедева. Для кроссбраузерности запихнём этот шрифт в Font Squirrel, чтобы получить основные форматы: .ttf, .eot, .woff и .svg. В нагрузку будет сгенерирована таблица стилей:
@font-face {
    font-family: 'rublregular';
    src: url('rouble-webfont.eot');
    src: url('rouble-webfont.eot?#iefix') format('embedded-opentype'),
         url('rouble-webfont.woff2') format('woff2'),
         url('rouble-webfont.woff') format('woff'),
         url('rouble-webfont.ttf') format('truetype'),
         url('rouble-webfont.svg#als_rublregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
//класс для знака рубля
.rubl {font-family:rublregular, Arial, Tahoma, sans-serif;}


Теперь — самое интересное: на сайте используется Arial, знак рубля в лебедевском шрифте в этой гарнитуре под латинской буквой «a». Чтобы пакетно поменять на всём сайте я накидал простенький яваскрипт:

$(".prices-table tbody td").each(function(index, value){
 // подменить " руб" на знак рубля
 var block = $(this).html();
 var rep = /\sруб(.|\s)?$/
 block = block.replace(rep,' a');
 $(this).html(block);
});

Готово! Теперь во всех таблицах с классом «prices-table» строки вида «[пробел]руб.» «[пробел]руб[пробел]» подменяются на нужный нам знак pубля (в регулярке sруб — условие, чтобы впереди был пробел, дабы не зацепить что-нибудь нужное). Вы, соответственно, меняйте под свои нужды.

Убито кучу зайцев: «руб.» на a по сайту заменяется само, в плане SEO ничего не изменилось, для поисковиков осталось всё как было, решение простое и быстро-внедряемое.

Архив с готовыми шрифтами: ruble-webfont.zip


перейти в Блог | Блог (стр. 6)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): JavaScript 15  jQuery 8  web-программирование 34  лучшее 9  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)