HTML верхний и нижний индексы - PullRequest
4 голосов
/ 20 марта 2012

любые способы поместить в html, используя верхние или нижние значения css, такие как: ¹ или ₁ (мне также нужны латинские буквы).

Ответы [ 4 ]

13 голосов
/ 20 марта 2012

Используйте теги <sup> и <sub>.

5 голосов
/ 20 марта 2012

HTML-теги: попробуйте теги sup и sub, ...

Демо

Другой вариант с использованием css:

<style type="text/css">
#sup,
#sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;

}

#sup {
bottom: 1ex;
}

sub {
top: .5ex;
}
</style>
0 голосов
/ 21 марта 2012
<style>
.sub, .sup { position: relative; font-size: 80%; }
</style>
...    
<span class=sub>a</span> (subscript)
<span class=sup>a</span> (superscript)

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

Почему классы и CSS?

Хотя в HTML, похоже, есть только правильная разметка для этого, sup и sub, у них есть несколько недостатков.Их рендеринг несовместим во всех браузерах и часто типографски плох: как вертикальное размещение, так и размер могут быть неадекватными.Может показаться, что это легко исправить в CSS, но это не так, из-за странной ошибки IE при определении их размера: он неправильно интерпретирует проценты.Более того, sup и sub часто создают неравномерный межстрочный интервал.

Если вы собираетесь использовать sup и sub, запустите некоторые тесты, прежде чем начинать их интенсивное использование.Протестируйте в нескольких браузерах и с верхними и нижними индексами внутри текстовых абзацев (так что вы увидите проблему с межстрочным интервалом).

0 голосов
/ 20 марта 2012

Я не совсем уверен, что вы хотите с латинскими буквами или если вы знаете, что латинские буквы, но уникоды вы можете найти здесь http://unicodelookup.com/#latin

Если вы имеете в виду римские цифры, в HTML нет автоматического перевода, за исключением оль

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...