Подписка на блог

РСС — лучше всего

Ещё есть автоматические трансляции в Тумблере и Же-же. Если что-то не работает, напишите мне: ilyabirman@ilyabirman.ru.

Верхние и нижние индексы, не портящие вид текста

Для нижних и верхних индексов в ХТМЛе есть элементы sub и sup. К сожалению, при использовании их в тексте равенство высот строк ломается, и образуются неприятные дыры:

Верхние и нижние индексы, портящие высоту строки

Но ведь мы знаем, что элементы выглядят в браузере так, как выглядят, лишь потому, что про них написано что-то во встроенной таблице стилей браузера (иногда, правда, воображаемой).

Элементы sub и sup для выравнивания используют свойство vertical-align со значениями sub или super. Именно они и влияют на высоту строки. Стало быть, нам нужно вместо них использовать какой-нибудь vertical-align, оставляющий строку прежней высоты, и сдвигать индексы иным способом, например, с помощью position: relative.

Я уже давно почти везде использую примерно вот такую конструкцию:

sup, sub {
  vertical-align: middle;
  position: relative;
  font-size: 75%;
}
sup { bottom: 0.5em; }
sub { top: 0.5em; }


В результате получается нормальный текст:

Верхние и нижние индексы, не портящие высоту строки
Подписаться на блог
Поделиться
Отправить
11 комментариев
Владимир Игонин
Огромное спасибо, меня всегда бесили получаемые дыры, но занятся решением было всё некогда.
Val
Хорошее решение и хороший текст выбран в качестве образца.
Илья Бирман
Илья Новиков
Спасибо, Илья. Я часто использую в тексте сноски, поэтому этот совет для особенно важен.
frst
Волшебно.
Надеюсь оно везде работаетю
Виктор
Илья, благодарю вас за эту заметку!
alshur
Надеюсь оно везде работаетю
в ie 5.0 свойство bottom не поддерживается, если что
Shclr
Разве position:relative не для блочных элементов работает?
Илья Бирман
Для любых работает.

Более того, в спецификации даже написано:
Although relative positioning may be used as a form of superscripting and subscripting, the line height is not automatically adjusted to take the positioning into consideration.
Это я только что обнаружил в поисках ответа на ваш вопрос ;-)
Johnny Woo
На случай, если хочется удостовериться, но негде — в Сафари тоже работает.
gray
Ух ты, отличная «как бы мелочь». Возьму на вооружение :)
Никита Васильев
Я раньше использовал для этого line-height:.1em, но ваш вариант, похоже, лучше работает в IE.
Карпинский Александр aka homm
Спасибо, но всеже есть некторые проблемы.

1. Стандартизации отображения это все равно не дает, в Эксплорере отличается чуток, хотя в Опере и ФаерФоксе становится одинакого.
2. Эксплорер при значении font-size: 75%; попытался сгладить шрифт, и вместо циферок получилась размазня. Пришлось исправить на 85%.

Пользовательский интерфейс
Доступны два раздела
электронного учебника

Популярное
Эти ссылки принесут мне миллионы: Мумие при переломах