Артём Мáлков

Кроссбраузерный значок рубля на CSS

9 июл1 комм

Как известно из различных источников, в недалеком 2013-м году рубль, как и многие другие валюты, обзавелся собственным символом.

Кроссбраузерный значок рубля на CSS

Знак рубля уже внедрили в некоторые шрифты и в HTML-разметку. В HTML, кстати говоря, код символа:

₽ 

или

₽ 

Многие интернет-магазины, да и прочие сайты, связанные с денежными операциями, активно заменяют привычное «Руб», «RUB» и «р.» на новый знак рубля. Но есть одна проблема – не на каждом компьютере существует этот символ, и вместо символа рубля мы наблюдаем следующее:

Кроссбраузерный значок рубля на CSS

И такая картина может быть у большинства ваших клиентов. А исправлять это нужно как можно скорее, ведь без присутствия соответствующего знака валюты мы вводим в заблуждение ваших покупателей и, тем самым, теряем драгоценных клиентов.

Сегодня я покажу вам, как с помощью стандартной буквы «Р» и CSS можно получить значок рубля, который будет отображаться на всех устройствах правильно, как это и должно быть.

1. Итак, первое, что нам необходимо сделать, это обернуть нашу букву в тег span:

<span class="rub">Р</span>

2. Затем напишем для нее небольшой стиль:

.rub { 
	line-height: 5px;
	width: 0.4em;
	border-bottom: 1px solid #000; 
	display: inline-block;
} 

Сохраняем и смотрим, что у нас получилось:

Кроссбраузерный значок рубля на CSS

По-моему – очень неплохо. По желанию можете изменить размеры горизонтальной полосы, ее цвет и положение относительно буквы «Р».

Рекомендуем к просмотру
Что делать, если вместо знака рубля в WooCommerce отображается пустой квадрат?
Хаки
Значок рубля в HTML
Статьи и советы
12 вариантов обрезки строки на PHP
Модули и скрипты
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 15
    766
      •  Гости
    21 июн в 11:53

    Такой вариант кросбраузернее

    .rub{

    font-size:inherit;

    margin:0 2px;

    color:inherit;

    position:relative;

    }

    .rub:after{

    content:"";

    position:absolute;

    display:inline-block;

    width:80%;

    height:8%;

    top:auto;

    bottom:25%;

    left:-5%;

    background:blue;

    }

Подняться наверх
«Pandoge» - помощник вебмастера