Верхний индекс в CSS?

Ответ 1

Вы можете сделать верхний индекс с помощью vertical-align: super (плюс сопровождающий font-size уменьшение).

Однако, не забудьте прочитать другие ответы здесь, в частности, paulmurray и cletus, за полезную информацию.

Ответ 2

Честно говоря, я не вижу смысла делать надстрочный/подстрочный индекс только в CSS. Там нет удобного атрибута CSS для него, просто куча доморощенных реализаций, включая:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

или используя вертикальное выравнивание, или я уверен, что другие способы. Дело в том, что все становится сложным:

• CSS надстрочный интервал по высоте строки;
• Остерегайтесь CSS для Superscript/Subcript о том, почему вы, возможно, не должны стиль надстрочный/подстрочный с CSS на всех;

Второй момент стоит подчеркнуть. Обычно верхний индекс/нижний индекс на самом деле не является проблемой стиля, но указывает на значение.

Примечание: стоит упомянуть этот список сущностей для общих математических выражений в верхнем и нижнем индексах, хотя этот вопрос не имеет к этому отношения.

Теги sub/sup представлены в HTML и XHTML. Я бы просто использовал их.

Что касается остальной части вашего CSS, атрибуты: after псевдоэлемента и содержимого не широко поддерживаются. Если вы действительно не хотите помещать это вручную в HTML, я думаю, что решение на основе Javascript - ваш следующий лучший выбор. С jQuery это так просто, как:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

Ответ 3

Документация по CSS содержит стандартный эквивалент CSS для всех HTML-конструкций. То есть: большинство веб-браузеров в наши дни явно не обрабатывают SUB, SUP, B, I и т.д. - они (sorta sorta) преобразуются в элементы SPAN с соответствующими свойствами CSS, а движок рендеринга имеет дело только с этим.

Страница Приложение D. Таблица стилей по умолчанию для HTML 4

Необходимые бит:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Ответ 4

Я работал над страницей с целью иметь четкий текст с надстрочными элементами, не изменяющими верхнюю и нижнюю поля строки - со следующими наблюдениями:

Если для вашего основного текста у вас есть line-height: 1.5em, например, вы должны уменьшить высоту строки вашего текста надстрочного текста, чтобы она отображалась правильно. Я использовал line-height: 0.5em.

Кроме того, vertical-align: super хорошо работает в большинстве браузеров, но в IE8, когда у вас есть элемент верхнего индекса, остальная часть этой строки нажата. Поэтому вместо этого я использовал vertical-align: baseline вместе с отрицательными top и position: relative для достижения такого же эффекта, который, кажется, лучше работает в браузерах.

Итак, чтобы добавить к "домашним реализациям":

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

Ответ 5

http://htmldog.com/articles/superscript/ По существу:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Хорошо работает на практике, насколько я могу судить.

Ответ 6

В Mozilla Firefox внутри html.css:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Итак, в вашем случае это будет что-то вроде:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Ответ 7

Это еще одно чистое решение:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

Таким образом, вы можете по-прежнему использовать теги sup/sub, но вы исправили свое поведение, чтобы всегда прикручивать высоту строки абзаца.

Итак, теперь вы можете сделать:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

И ваша высота строки абзаца не должна быть испорчена.

Протестировано на IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Я тестировал, используя p {line-height: 1.3;} (это хорошая высота строки, если вы не хотите, чтобы ваши строки придерживались слишком близко), и она все еще работает, поэтому "-0.6em" - это такая небольшая сумма, которая также с этой высотой строки суб/вспомогательный текст будет соответствовать и не переходить друг на друга.

Забыл деталь, которая может быть релевантной. Я всегда использую DOCTYPE в первой строке моей страницы (в частности, я использую HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Поэтому я не знаю, хорошо ли это решение работает, когда браузер находится в quirkmode (или не в стандартном режиме) из-за отсутствия DOCTYPE или DOCTYPE, который не запускает стандартный/почти стандартный режим.

Ответ 8

Если вы изменяете размер шрифта, вы можете отказаться от сокращения размеров с помощью этого правила:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Ответ 9

Я не уверен, связано ли это, но я решил проблему с ² HTML-объектами, поскольку мне не удалось добавить какие-либо другие теги html внутри тега <label>. Таким образом, идея заключалась в использовании кодов ASCII вместо тегов css или HTML.

Ответ 10

Свойство CSS font-variant-position находится на рассмотрении и в конечном итоге может быть ответом на этот вопрос. По состоянию на начало 2017 года только Firefox поддерживает его.

.super {
    font-variant-position: super;
}

См. MDN.

Ответ 11

Отъезд: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

если похоже, что вы хотите "vertical-align: text-top"

Ответ 12

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Ответ 13

Здесь точный способ sup использует:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Обнаружено это с помощью элемента проверки google chrome.

Ответ 14

Связанный или, возможно, не связанный, использование надстрочного индекса в качестве элемента HTML или в качестве span + css в тексте может вызвать проблемы с локализацией - в программах локализации.

Например скажем "программное обеспечение 3 - ^й партии":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

Как переводчики могут перевести "rd"? Они могут оставить его пустым для нескольких кириллических языков, но как насчет других экзотических или RTL-языков?

В этом случае лучше избегать использования надстрочных надписей и использовать полную формулировку, например "стороннее программное обеспечение". Или, как упомянуто здесь в других комментариях, добавление знаков плюс в верхний индекс через jQuery.