Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Верстаем знак рубля разными способами на HTML и CSS

В начале июля 2007 года в России, наконец, согласились с необходимостью разработки специального знака рубля и приняли соответствующий закон, но рабочего спецсимвола нет и по сей день.

Верстаем знак рубля разными способами на HTML и CSS
Содержание статьи

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

Одновременно с желанием сменить «руб.» на спецсимвол, означающий рубль появились и проблемы. Специального символа рубля же еще нет, а когда он появится – неизвестно. Чтобы слишком долго не ждать погоды у моря, было решено изощриться и сверстать знак стандартными средствами HTML и CSS.

Знак рубля при помощи изображения

Самым простым, но далеко не самым изящным способом верстки является использование изображения. Допустим, вы определились с тем, какой шрифт будет использоваться на вашем сайте, тогда и буква «Р» с горизонтальной чертой должна быть написана тем же шрифтом. Цвет также должен совпадать, чтобы символ рубля не выбивался из контекста и не выглядел инородным телом.

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

Мы не будем вставлять картинку с перечеркнутой буквой «Р» рядом с ценой с помощью тега img, который, кстати нужно выровнять с помощью vertical-align по центру строки текста.

.rub {
	vertical-align: middle;
}

Продам слона за 9 999

Лучше будет использовать картинку в качестве фонового изображения, тогда она не будет копироваться в буфер при «копипасте».

.price {
	display: inline-block;
	padding: 0 18px 0 0;
	background: url(/i/rub.png) 100% 50% no-repeat;
	background-size: auto 100%;
	line-height: 100%;
}

Продам слона за 9 999

В данном примере мы создали наполовину блочный, наполовину встроенный элемент, в который будет вписываться цена. Затем мы немного отступили от правого края элемента, чтобы вместить картинку со знаком рубля и настроили положение и размер фонового изображения таким образом, что картинка всегда будет справа от текста, а ее размер будет подстраиваться под размер текста автоматически.

Используя данный способ, нужно сделать картинку покрупней, чтобы при ее растяжении для крупного шрифта не происходила потеря качества, которая будет сильно бросаться в глаза.

Использование text-decoration: line-through для верстки знака рубля

В CSS есть замечательное свойство text-decoration, которое, как не трудно догадаться из названия, позволяет украсить (декорировать) текст. Подробности про это замечательное свойство вы можете посмотреть на одном из наших любимых сайтов, посвященных HTML и CSS – htmlbook.ru.

Нас же интересует перечеркивающая линия, которая задается значением line-through.

.rub {
	text-decoration: line-through;
}

Продам слона за 9 999 Р

Данный способ до безобразия прост и, казалось бы, отлично решает проблему, но не стоит забывать про всеми любимый Internet Explorer, в котором результат смотрится мягко говоря не очень.

К сожалению, в CSS не существует способа, который позволил бы регулировать высоты линии, перечеркивающей текст, а очень бы хотелось ее немного опустить (1-2 пикселя для нашей задачи вполне хватило бы).

Использование border-bottom и line-height для верстки знака рубля

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

.rub {
	display: inline-block;
	line-height: 50%;
	border-bottom: #000 1px solid;
}

Продам слона за 9 999 Р

Прекрасный и изящный способ, который отлично работает во всех основных браузерах, а результат очень предсказуем и не возникает проблем при масштабировании текста.

Главной хитростью тут является придание букве «Р» свойства наполовину блочного и наполовину встроенного элемента. Это делается для того, чтобы появилась возможность добавить нижнюю рамку. Высота строки текста устанавливается как в пикселях, так и в процентах. Мы же сделали так, что эта высота в 2 раза меньше размера шрифта (50%), а значит рамка снизу поднимается ровно до середины буквы «Р», что нам как раз было и нужно.

Данный способ отлично работает и при масштабировании текста, а результат одинаков во всех популярных браузерах. Именно поэтому этот метод рекомендуется как один из лучших.

Буква ք из армянского алфавита в качестве знака рубля

Как оказалось, в армянском алфавите есть буква, которая выглядит точно так же, как знак рубля, но есть 2 очень больших минуса. Во-первых, она находится ниже линии текста, причем не во всех браузерах одинаково.

Продам слона за 9 999 ք

Во-вторых – она является строчной, а не прописной буквой, а это очень значительный недостаток, от которого сильно режет глаз.

.rub {
	position: absolute;
	margin: -4px 0 0 5px;
}

Продам слона за 9 999 ք

Можно конечно присвоить этой букве некоторые стили и поднять чуть повыше, но с тем, что буква строчная поделать ничего нельзя. Вернее сделать то можно, установив text-transform: uppercase, но результат, который при этом получится выглядит еще хуже, чем в случае со строчной буквой и со знаком рубля ничего общего не имеет.

.rub {
	text-transform: uppercase;
}

Продам слона за 9 999 ք

Нарисовать черточку повторяющимся по горизонтали фоновым пикселем

Как видите из названия, этот вариант, наверное, является самым изощренным, но довольно неплохо себя проявляет на практике.

Суть решения проблемы заключается в еще одной хитрости, придуманной нашими специалистами. Нам потребуется картинка размером 1х1 пиксель черного цвета.

Эту картинку мы установим в качестве фонового изображения для буквы «Р» и повторим ее по горизонтали.

.rub {
	display: inline-block;
	background: url(/i/pixel.gif) 0 70% repeat-x;
}

Продам слона за 9 999 Р

С помощью сокращенного написания background-position, мы можем регулировать расположение черты по вертикали и добиться требуемого результата.

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


Предыдущая статья:
Особенности использования планшетов и смартфонов для просмотра веб-страниц

Читайте также:
Базовое использование jQuery при создании сайта


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»