Верхний индекс только в CSS?

Question

Как мне сделать надстрочный текст, только в CSS?

У меня есть таблица стилей, где я помечаю внешние ссылки надстрочным символом, но мне трудно правильно выровнять символ.

То, что у меня сейчас есть, выглядит так:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

но это не работает.

Естественно, я бы использовал тег <sup>, только если content разрешил бы HTML ...

Answer 1

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

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

Answer 2

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

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

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

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

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

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

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

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

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

Answer 3

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

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

Требуемые биты:

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

Answer 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;
}

Answer 5

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

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

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

Answer 6

Следующая информация взята из внутреннего html.css в Mozilla Firefox:

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

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

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

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

Answer 8

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

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

Answer 9

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

Answer 10

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

Например, скажем, «3 ^rd Party Software»:

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

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

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