Знак рубля средствами CSS 3.0

Все мы знаем, что существует неофициальный, но распространенный в рунете (а в последнее время все чаще и в материальном мире) символ рубля, известный, как "знак Лебедева-Тарбеева ^[1]". Однако в силу того, что знак не имеет признанного статуса, и, как следствие, отсутствует в Unicode, его использование в веб-дизайне сопряжено с очевидными техническими сложностями, не раз уже обсуждавшимися на тематических ресурсах.

Существующие решения

Не вдаваясь в подробности, позволю себе напомнить наиболее распространенные способы решения проблемы.

1. С использованием картинки. Самый очевидный и распространенный метод, не нуждается в особенных пояснениях. Преимущества: простота в исполнении и стопроцентная кроссбраузерность. Недостатки: лишний HTTP-запрос к серверу, несемантичная разметка и отсутствие гибкости — и, да, решение обладает изяществом медведя, танцующего «Лебединое озеро».
2. При помощи веб-шрифтов. Суть решения в том, что для отображения знака создается специальный шрифт, в котором данный символ так или иначе присутствует. Различные способы реализации этого метода уже обсуждались несколько раз на Хабре (раз ^[2], два ^[3]). Преимущества и недостатки метода зависят от того, хотим ли мы себе упростить жизнь (например, использованием сторонних сервисов вроде Google Web Fonts или готового шрифта от А. Лебедева, как описано в упомянутых постах) или делаем все своими руками. В целом, решение получается либо несемантичным, либо очень сложным в исполнении; кроме того, мы, как и в первом случае, завязываемся на внешнюю сущность — дополнительный шрифт (или даже сервис) — и увеличиваем количество HTTP-запросов к серверу минимум на один. Несомненным плюсом является хорошая кроссбраузерность.
3. Добавление перекладины к кириллической «Р» средствами CSS. Это решение подробно описано ^[4] у А. Лебедева. Его огромный плюс — семантичность: HTML-код будет содержать символ «Р», а значит, именно он проиндексируется поисковиками, попадет в буфер обмена при копировании текста, отобразится в случае, если страница подгрузилась не полностью и т.д. Второй серьезный плюс — отсутствие дополнительных сущностей и лишних запросов. К недостаткам можно отнести сравнительную сложность в исполнении и не самую лучшую кроссбраузерность — последнее, увы, перекрывает все достоинства метода.

Решение на основе CSS 3.0

Так или иначе, ни один из перечисленных способов меня не удовлетворяет. Поэтому здесь я хочу предложить уважаемому хабросообществу новый вариант решения задачи, основанный на использовании CSS 3.0.
Если вы помните, в дореволюционной орфографии существовал знак, очень похожий на нужный нам: ять (Ѣ) ^[5]; он присутствует в большинстве популярных шрифтов. Все, что нам надо сделать, это отразить его по вертикали, что легко достигается посредством CSS-свойства transform:

<span style = "transform: scaleY( -1 )">Ѣ</span>

(Данный пример несколько упрощен, т.к. свойство transform на данный момент не работает без вендорных префиксов.)
Однако вспомним о семантике: что увидит здесь поисковой робот? Верно. Шлифуем решение, теперь «ять» добавляется через псевдокласс CSS before, а исходный HTML-фрагмент будет содержать читаемый текст «руб.», который будет скрываться в браузере.

.rur:before
{
    content:           "462";
    
    -webkit-transform: scale( 1, -1 );
       -moz-transform: scale( 1, -1 );
        -ms-transform: scale( 1, -1 );
         -o-transform: scale( 1, -1 );
            transform: scale( 1, -1 );
}

.rur span
{
    display: none;
}

<span class = "rur"><span>руб.</span></span>

Как видите, в теории все очень легко. К сожалению, на практике у данного решения существуют свои подводные камни.
На первый из них мы наткнемся, если попытаеся использовать шрифты с засечками (Times New Roman, к примеру): перекладина у яти в таком случае отобразится с засечками, направленными после отражения вверх. Для решения этой проблемы теоретически можно было бы использовать другой очень похожий символ, полумягкий знак (Ҍ) ^[6], начертание которого не предполагает засечек на перекладине, однако увы — в Times New Roman данный символ отсутствует, что делает всю затею бессмысленной. К сожалению, в этом случае придется довольствоваться начертанием, не подходящим к основному шрифту.
Второй неприятный момент возникает, если нам нужен относительно большой шрифт (16px и выше): в этом случае, перекладина оказывается уж очень низко относительно общей высоты литеры. Если такое начертание нас не устраивает, мы можем попытаться исправить ситуацию использованием строчной яти вместо прописной. Для придания ей более солидного вида снова воспользуемся свойством transform:

.rur:before
{
    content:           "463";
    
    -webkit-transform: scale( 1.2, -1 );
       -moz-transform: scale( 1.2, -1 );
        -ms-transform: scale( 1.2, -1 );
         -o-transform: scale( 1.2, -1 );
            transform: scale( 1.2, -1 );
}

К сожалению, масштабирование литеры по горизонтали приведет к увеличению толщины линии, поэтому знак рубля будет выглядеть, как набранный более жирным шрифтом (но не дотягивающим до настоящего полужирного). Поэтому здесь нам придется выбирать меньшее из трех зол: низкую перекладину, узкую букву или жирное начертание.
Наконец, третья неприятность заключается в том, что при использовании шрифта, отличного от Arial, нам придется заниматься пиксельхантингом, т.к. перевернутая ять, скорее всего, окажется на уровне, отличном от остального текста — здесь на помощь нам снова придет transform:

.rur:before
{
    content:           "462";
    
    -webkit-transform: scale( 1, -1 ) translateY( 1px );
       -moz-transform: scale( 1, -1 ) translateY( 1px );
        -ms-transform: scale( 1, -1 ) translateY( 1px );
         -o-transform: scale( 1, -1 ) translateY( 1px );
            transform: scale( 1, -1 ) translateY( 1px );
}

Заключение

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

Достоинства

• относительная простота в исполнении
• хорошая кроссбраузерность (для поддержки старых версий Internet Explorer, как обычно, можно использовать джаваскриптовые костыли)
• отсутствие лишних сущностей и HTTP-запросов — только HTML + CSS

Недостатки

• в чистом виде решение несемантично и требует дополнительной шлифовки
• нет способа отобразить подходящий символ для шрифтов с засечками
• эстетика несколько портится при использовании крупного кегля

Таким образом, решение почти идеально подходит для использования со шрифтом Arial (и чуть хуже — для других шрифтов без засечек) небольшого размера; в остальных случаях целесообразность его применения дискуссионна.

Демо

Ну и конечно же демо ^[7]. Здесь хорошо видны все достоинства и недостатки метода.

Автор: malroc