Стили для верхнего и нижнего индекса в CSS
Наверное, почти все знают про теги SUP и SUB. Довольно подробное описание можно найти в статье английской википедии.
Основная проблема в стандартной реализации отображения этих тегов — изменение высоты строки за счёт того, что текст в этих тегах выравнивается свойством CSS vertical-align. Это изменение варьируется от браузера к браузеру, но, кроме того, везде различаются как размеры шрифта для таких элементов, так и сами отступы. Об этой проблеме многие знают и, чаще всего, предлагают два решения: уменьшение высоты строки этих элементов, и их относительное позиционирования.
Для себя я решил это делать так:
SUP, SUB {
vertical-align:baseline;
position:relative;
font-size:.7em;
line-height:1;
}
SUP {
bottom:1.4ex;
}
SUB {
top:.5ex;
}
Как видно из кода, я «обнулил» вертикальное вырванивание, воспользовался относительным позиционированием, а также уменьшил высоту строки. Кроме того, можно обратить внимание на величины отступов: я их задал в ex, т.к. по логике и по имеющимся описаниям (например, в уже упомянутой статье английской википедии) этот отступ должен быть основан именно на этой относительной единице, основанной на высоте шрифты, нежели на ширине. Вообще, это достаточно общее определение, в идеале можно использовать различные классы для цифровых значений в индексах, для случаев когда есть только прописные или только строчные буквы и пр. Однако, это уже требует вмешательств в разметку, и к CSS уже не имеет отношения.
Примеры как исправленных тегов, так и не исправленных
Стоит упомянуть, что в некоторых случаях всё-таки может иметь смысл задавать отступ для индексов, увеличивающий высоту строки, скажем, когда у нас есть большая вложенность индексов или ешё что-то, за счёт чего они могут попасть на другие строки. Правда, чаще всего про это можно забыть.