Верхний и нижний индексы
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два тега для создания индекса: <sup> — верхний индекс и <sub> — индекс нижний. Текст, помещенный в один из этих контейнеров, обозначается меньшим размером, чем базовый текст и смещается относительно горизонтали.
Свойство CSS text-transform
Свойство CSS text-transform отвечает за написание строчных или заглавных букв (верхний и нижний регистр) в html.
Синтаксис CSS text-transform
- capitalize — каждое слово начинается с большой буквы
- lowercase — переводит все буквы в нижний регистр
- uppercase — переводит все буквы в верхний регистр
- none — отменяет все действия (по умолчанию)
- inherit — принять значение предка (родителя)
Примеры перевода в верхний и нижний регистр в HTML
Пример 1. Каждое слово с большой буквы в HTML
Вот как это выглядит на странице:
Пример 2. Все слова в нижнем регистре в HTML
Вот как это выглядит на странице:
Пример 3. Все слова в верхнем регистре в HTML
Вот как это выглядит на странице:
Для обращения к text-transform из JavaScript нужно писать следующую конструкцию:
Верхний и нижний индекс
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: <sup> (от англ. superscript) — верхний индекс и <sub> (от англ. subscript) — нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.
Пример 1. Создание верхнего и нижнего индекса
В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).
Рис. 1. Вид индексов после применения стилей
Можно вообще отказаться от использования <sup> и <sub> в пользу стилей. Аналогом этих элементов служит свойство vertical-align , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.
Пример 2. Использование стилей для управления индексами
В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).
Рис. 2. Управление положением и видом нижнего и верхнего индекса
Использование элемента <span> делает код громоздким, поэтому лучше переопределить стили <sub> и <sup> , в частности, задать положение индекса, цвет и курсивное начертание.