Ставити український грошовий символ прийнято після числа.
Як ввести знак з клавіатури
Просто так одним натисканням клавіші код рубля з клавіатури поки не надрукувати. Код символу в розкладці юнікод - U + 20BD. Але важливо, щоб використовуваний шрифт підтримував цей знак, інакше ви побачите на цьому місці в тексті просто квадратик.
Наприклад, в MS Word надрукувати знак рубля можна, якщо ввести «20BD» (без лапок), а потім натиснути клавішу ALT і, утримуючи її натиснутою, - клавішу X. Крім того, можна поставити символ через меню «Вставка - Символ».
Html код символу рубля
Щоб додати позначення рубля на сайт в html коді потрібно вказати код:
Природно, що шрифт повинен містити в своєму складі цей грошовий знак.
Наведу працюючий приклад.
У сервісі Google Fonts можна швидко знайти шрифти з підтримкою цього знака. В поле Preview Text вказуємо код рубля (я скопіював символ з документа Word, куди вставив вищеописаним способом, оскільки так і не знайшов універсального прийому набрати символ unicode з клавіатури).
Видно, що потрібний нам значок підтримують шрифти:
- PT Sans (також PT Sans Narrow, PT Sans Caption);
- PT Serif (також PT Serif Caption);
- Roboto (також Roboto Condensed);
- Rubik;
- Istok Web;
- PT Mono;
- Cormorant (також Cormorant Garamond, Cormorant Infant, Cormorant SC, Cormorant Unicase).
Детально про підключення шрифту з google fonts написано в статті: Використання на сайті шрифтів від Google Fonts.
Стосовно до нашого випадку потрібно виконати 3 кроки:
1. Підключаємо шрифт (поміщаємо куди небудь в область header сайту інструкцію).
2. Задаємо цей шрифт для відповідного елемента.
font - family. 'PT Sans'. serif;
3. Вставляємо знак рубля як спецсимвол.
# 8399;
Створюємо свій знак рубля
В ході використання такого підходу зіткнувся з проблемою, що на деяких пристроях символ виводиться у вигляді квадратика. В результаті знайшов універсальний спосіб виведення знака рубля за допомогою букви Р і підкреслення, піднесеного до потрібного рівня.
Для цього на сайті вказуємо: