Как я могу получить надстрочный текст, только в 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%; }
или используя вертикальное выравнивание, или я уверен, что другие способы. Дело в том, что все становится сложным:
Второй момент стоит подчеркнуть. Обычно верхний индекс/нижний индекс на самом деле не является проблемой стиля, но указывает на значение.
Примечание: стоит упомянуть этот список сущностей для общих математических выражений в верхнем и нижнем индексах, хотя этот вопрос не имеет к этому отношения.
Теги sub/sup представлены в HTML и XHTML. Я бы просто использовал их.
Что касается остальной части вашего CSS, атрибуты: after псевдоэлемента и содержимого не широко поддерживаются. Если вы действительно не хотите помещать это вручную в HTML, я думаю, что решение на основе Javascript - ваш следующий лучший выбор. С jQuery это так просто, как:
$(function() {
$("a.external").append("<sup>+</sup>");
};
Документация по 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 }
Я работал над страницей с целью иметь четкий текст с надстрочными элементами, не изменяющими верхнюю и нижнюю поля строки - со следующими наблюдениями:
Если для вашего основного текста у вас есть 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;
Хорошо работает на практике, насколько я могу судить.
В Mozilla Firefox внутри html.css:
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 в первой строке моей страницы (в частности, я использую 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.
Свойство CSS font-variant-position находится на рассмотрении и в конечном итоге может быть ответом на этот вопрос. По состоянию на начало 2017 года только Firefox поддерживает его.
.super {
font-variant-position: super;
}
См. MDN.
если похоже, что вы хотите "vertical-align: text-top"
.superscript {
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
}
Здесь точный способ sup использует:
.superscript{
vertical-align:super;
font-size:smaller;
}
Обнаружено это с помощью элемента проверки google chrome.
Связанный или, возможно, не связанный, использование надстрочного индекса в качестве элемента HTML или в качестве span + css в тексте может вызвать проблемы с локализацией - в программах локализации.
Например скажем "программное обеспечение 3 - й партии":
3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software
Как переводчики могут перевести "rd"? Они могут оставить его пустым для нескольких кириллических языков, но как насчет других экзотических или RTL-языков?
В этом случае лучше избегать использования надстрочных надписей и использовать полную формулировку, например "стороннее программное обеспечение". Или, как упомянуто здесь в других комментариях, добавление знаков плюс в верхний индекс через jQuery.