Как сделать минускульные цифры средствами HTML

Здравствуйте,
Заказчик просит сделать на странице подпись с телефонными номерами, набранными минускульными цифрами.
Т.к. шрфит с такими цифрами установлен далеко не у всех, а подгружать файл шрифта в данном случае не вариант, возникла идея использовать теги -sub- или еще какие-то ухищрения HTML. Но пока ничего не получилось - я не пойму, как изменить свойства -sub- по умолчанию, т.е. как поднять верхнюю линию буквы еще выше.
Может быть кто-нибудь сталкивался с такой проблемой, и знает как ее решить?
Спасибо!
0
html минускульные типографика цифры

1 ответов

Вы можете использовать относительное позиционирование в духе


top: -0.5ex;
 
Также вы можете использовать свойство vertical-align, также со значением в относительных единицах

vertical-align: 35%;
 
В данном случае положительное значение смещает элемент вверх.

Кстати, вы можете использовать не только элементы sub, sup для этого, а, например span (потому как для него чаще всего не требуется сбрасывать стиль), хотя здесь элементы sub / sup в некоторой степени подходят и семантически (хотя строго говоря они означают нижний и верхний индексы).

Я бы мог посоветовать также не указывать для каждой цифры её контейнер вручную, а использовать для этого JS (например, функцию, которая принимает элемент, содержимое которого следует "оминускулить"), тогда решение будет весьма симпатичным :)
2

Самый-самый простой вариант: шрифт Georgia - цифры у него "пляшут", так что может и подойдет. На Windows есть у всех.
А вариантов тут очень много. К тому, что написал StreetStrider, могу добавить:


.span_top {
    padding-bottom: 10px;
}
.span_bot{
    padding-top: 10px;
}
 И используем эти стили:

<span class="span_top">+7</span><span class="span_bot">987</span><span class="span_top">4515</span>
 Вместо padding можно использовать и margin, и border по цвету фона - в общем все от фантазии зависит. Конечно если заражены "семантикой головного мозга" - этот вариант не подойдет.
Если устраивает вариант, когда пользователь не может скопировать номер телефона:
1) Картинкой (дешево и сердито)
2) Cufon - новомодная библиотека, отрисовывающая буковки на canvas ( Почитать). Единственный плюс перед предыдущим способом - буковки можно отредактировать прямо в HTML, а не делать новое изображение.
1