Правильный символ тенге в вебе

21 февраля 2012

Введение

Часто бывает так, что при верстке нам нужен правильный символ тенге. Хорошо, когда разработчик или владелец сайта понимает, что символ «╤» — это символ псевдографики, а не символ тенге, потому как получить его в тексте (без помощи inline элемента <img>) можно довольно просто и быстро. Для этого нам понадобится:

Для примера мы возьмем обычный Times New Roman с засечками. Приступим.

Подготовка шрифта

1. Открываем times.ttf и tenge.otf в FontLab Studio:

2. В times.ttf ищем глифы кириллической «г» в нижнем регистре (U+0433, Cyrillic Small Letter Ghe) и точки (U+002E, Full Stop).

3. Удаляем все кривые в обоих глифах и устанавливаем толщину каждому из них в ноль. Зачем это нужно — будет показано дальше.

4. Теперь ищем глиф символа тенге в tenge.otf для Times New Roman. Судя по tenge.txt внутри tenge.zip, tenge.otf — это глиф с номером U+0050 (Latin Small Letter P). Копируем этот глиф в буфер обмена операционной системы.

5. Возвращаемся к times.ttf и ищем малую кириллическую «т» (U+0442, Cyrillic Small Letter Te). Ее заменяем на тот глиф, что находится сейчас у нас в буфере обмена. Результат операции:

6. Сам шрифт почти готов. Осталось скомпилировать его в новый шрифт формата TrueType и можно приступать к верстке. Компилируем и сохраняем его как times-tenge.ttf.

Верстка

Ничего сложного и необычного в верстке нет. Каскадные стили:

@font-face{
	font-family:Times New Roman Tenge;
	/* для нормального начертания, не жирное и не курсивное */
	font-style:normal;
	font-weight:normal;
	src:url(/fonts/times-tenge.eot);
	src:url(/fonts/times-tenge.eot?iefix) format('☺'),
		url(/fonts/times-tenge.woff) format('woff'),
		url(/fonts/times-tenge.ttf) format('truetype'),
		url(/fonts/times-tenge.svg#times-tenge) format('svg');
}
p{
	font-family:Times New Roman;
	font-size:24px;
}
p span.tenge{
	font-family:Times New Roman Tenge;
}

Разметка:

<p>Красивые женские сапоги. Цена 16 000 <span class="tenge">тг.</span>, размеры 36, 37, 38, 39.</p>

Результат:

Красивые женские сапоги. Цена 16 000 тг., размеры 36, 37, 38, 39.

Сконвертировать наш шрифт из формата TrueType в Embedded OpenType, WOFF и SVG можно много где в сети.

Почему мы удалили глифы точки и малой кириллической «т»? Это нужно для того, чтобы текст с символом тенге отображался корректно в тех браузерах, где поддержки встраиваемых шрифтов нет. Второй причиной является то, что используя такой прием пользователь может копировать текст с символом тенге без задних мыслей и получать нормальный текст при вставке его куда-либо.

Данный способ работает во всех браузерах, которые поддерживают встраиваемые шрифты, а в их число входит и Microsoft Internet Explorer шестой версии. Хотя, конечно, для него приходится конвертировать шрифт в формат Embedded OpenType. :-)

Дополнения и замечания по данному способу приветствуются.