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

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

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

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

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

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

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

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

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

Честно говоря, я не вижу смысла делать надстрочный / подстрочный индекс только в 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>");
};

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

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

Биты, которые вы хотите:

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

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

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

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

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

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

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

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

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

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

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

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, который не вызывает стандартный / почти стандартный режим.

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

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

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

Проверьте: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

если выглядит так, как будто вы хотите "vertical-align: text-top"

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

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

Смотрите MDN .

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

Например , скажем , «3 - ^е программного обеспечения партии»:

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

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

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

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

Вот точный способ использования sup:

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

Нашел это через гугл хром проверяющий элемент.