Номер телефона

Последнее обновление:

Как изменить высоту подстрочных или надстрочных индексов html

Вначале поговорим о том, что это за индексы и как они выглядят в разных браузерах.

Что такое подстрочный и надстрочный индекс?

Как известно, в языке html для них используются соответственно, теги <sub> и <sup>. Отображаются они ниже или. соответственно, выше строчки текста, на которой они имеются. При этом каждый браузер по умолчанию дает, вообще говоря, РАЗНЫЕ вертикальные смещения. Интересно, что так обстоит дело даже для браузеров одной и той же линейки. Например, вот как выглядят по умолчанию индексы в браузере Firefox 24:


Как выглядят верхние и нижние индексы в браузере Firefox 24

Видно, что их границы располагаются практически точно по (нижним или верхним, в зависимости от вида индекса) границам строчных букв. Т.е. здесь индексы с полным правом можно назвать именно НАДстрочными или же ПОДстрочными. Потому, что они и в самом деле идет точно под или над строкой (строчными буквами).

А вот что показывает Firefox 36:


Как выглядят верхние и нижние индексы в браузере Firefox 36

Здесь ситуация несколько иная: индексы несколько (процентов на 30) приближены к середине строки.

Вот результат Firefox 45:


Как выглядят верхние и нижние индексы в браузере Firefox 45

Как видно, практически то же самое, что и в 36-м Firefox. Аналогично обстоит дело и в Firefox 70.

Вот что показывает Internet Explorer 11:


Как выглядят верхние и нижние индексы в браузере  Internet Explorer 11

Любопытно, что нижний индекс он отображает, как Firefox 36-45, а вот верхний – как Firefox 24. Да еще при этом сам шрифт индексов как-то поменьше. Все-таки, человечество много-много потеряло, что практически перестало пользоваться сим загадочным браузером.

Вот что выдает Edge 89:


Как выглядят верхние и нижние индексы в браузере  Edge 89

Здесь – практически полное соответствие Firefox 36, 45.

Как изменить местоположение индексов

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

Вроде бы, в стандарте html 5 для этого разработали даже соответствующий тег, позволяющий менять расположение. Если это так, то его разработчики зря старались, по сути, лишь засоряя язык html.

Впрочем, разных ненужных нововведений в html 5 предостаточно, не будем на этом останавливаться. Отметим лишь, что этот стандарт явно нарушает принцип И. Ньютона: не изобретать дополнительных сущностей без надобности.

Так вот, посмотрим, как это сделать средствами «обычного» html 4 (в том числе XHTML). На самом деле, все даже не просто, а очень просто. Следует лишь:

  1. Задать тегам <sub> и/или <sup> соответствующий класс, который будет содержать наши пользовательские расстояния;
  2. В этом классе задать тегам <sub> и/или <sup> свойство position: relative;
  3. И – указать местоположения индексов путем свойства top.

Чтобы не быть голословными, сразу посмотрим на пример кода:

  • <style type="text/css">

  •    sub.another {position: relative; top: 10px }
  •    sup.another {position: relative; top: -10px}
  •  
  •    sub.one {position: relative; top: 27%; display: inline-block }
  •    sup.one {position: relative; top: -27%}
  • </style>


  • <p>С<sub>ег</sub>од<sup>ня</sup> температура 21 <sup>о</sup>С</p>
  • <p>С<sub class="one">ег</sub>од<sup class="one">ня</sup> температура 25 <sup class="one">о</sup>С</p>
  • <p>С<sub class="another">ег</sub>од<sup class="another">ня</sup> температура 21 <sup class="another">о</sup>С</p>


Как выглядят верхние и нижние индексы в браузере  Firefox 24 (полный скриншот для трех разных строчек с индексами sub и sup)

Это скриншот, сделанный в браузере Firefox 24. В других браузерах местоположение индексов будет скорректировано с учетом их значений по умолчанию.

Как видим, в третьей строчке, для которой смещение top задано в пикселях (рх), местоположение изменилось.

А вот вторая строчка не среагировала на свойство top. Почему? Потому, что для ее индексов смещение задано в процентах (относительных величинах), а не в пикселях. А так как мы не задали высоту абзаца, то, соответственно, браузер считает ее «неизвестной» для свойства top. И потому не применяет значения этого свойства.

Можно ли как-то изменить местоположение индексов, задавая относительные свойства?

Да, можно. Есть два возможных пути:

  1. Указать жестко высоту абзаца, т.е. задать что-то вроде

height: 30px

Или какое-то другое значение. При этом свойство top начнет работать и индексы сместятся соответствии с заданным для них значением (в процентах). Однако, такое жесткое задание высоты не всегда удобно. Тем более, у абзацев (с учетом полей margin и отступов padding) РАЗНЫЕ значения высот по умолчанию в разных браузерах, даже в пределах браузеров одного производителя. Поэтому в итоге на экране может получиться не совсем то, что задумано. Как минимум, потому, что при открытии в разных браузерах высота абзацев по умолчанию является будет различной – за исключением тех абзацев, для которых задана высота в пикселях. Это может весьма испортить вид текста.

  1. Использовать средства javascript. Для этого где-нибудь ПОСЛЕ (это обязательно, иначе скрипт к абзацу применен не будет) абзаца следует разместить скрипт из одной строчки. Например, для второго по счету абзаца текста (тега <p>):

    • <script type="text/javascript">
         document.getElementsByTagName('p')[1].style.height = getComputedStyle(document.getElementsByTagName('p')[1]).height;
    • </script>

Здесь все просто: вначале вычисляется высота соответствующего абзаца, а потом – сразу же жестко задается (в пикселях). При этом результат будет одинаковым в разных браузерах – в том смысле, что абзацам (в данном случае – второму по счету абзацу) будет задаваться равно такая же высота, которую им определил конкретный браузер по умолчанию.

Так что вот так

Как видите, изменить местоположение подстрочных или настрочных индексов – очень просто. А изменяя эти свойства динамически – можно динамически же изменять местоположение у ВСЕХ требуемых индексов. Так что специальный тег для этого не нужен вообще.


Комментарии:
Всего комментариев:0
Пожалуйста, не забудьте ознакомиться с правилами оставления комментариев.



Подписаться на комментарии на этой странице

Мы можем выполнить

Другие услуги
Интересная и полезная
информация
НАПИШИТЕ НАМ
Яндекс.Метрика
Номер телефона
© Copyright Все права защищены 2013-