Надстрочный код только в CSS?
как я могу получить Надстрочный код, только в CSS?
у меня есть таблица стилей, где я отмечаю внешние ссылки символом надстрочного кода, но мне трудно правильно выровнять символ.
то, что у меня есть в настоящее время, выглядит так:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
но это не работает.
естественно, я использую <sup>
- tag, только если content
позволит использовать HTML...
13 ответов
вы можете сделать Надстрочный с vertical-align: super
(плюс сопровождающий font-size
обязательно прочитать другие ответы здесь, в частности paulmurray и Клетус, за полезную информацию.
честно говоря, я не вижу смысла делать Надстрочный/подстрочный только в CSS. Для него нет удобного атрибута CSS, просто куча доморощенных реализаций, включая:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
или с помощью вертикального выравнивания или я уверен, что другими способами. Дело в том, что это начинает усложняться:
- CSS Надстрочный интервал на высоту строки;
- остерегайтесь CSS для Надстрочного/Subcript о том, почему вы, возможно, не должны стиль Надстрочный / подстрочный с CSS на всех;
второй момент, который стоит подчеркнуть. Обычно Надстрочный / подстрочный индекс на самом деле не является проблемой стиля, но указывает на смысл.
Примечание: стоит упомянуть об этом список сущностей для общих математических надстрочных и подстрочных выражений хотя этот вопрос не относится к этому.
теги sub/sup находятся в HTML и XHTML. Я просто использовал бы их.
Что касается остальной части вашего CSS, атрибуты: after pseudo-element и content широко не поддерживаются. Если вы действительно не хотите помещать это вручную в 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, когда у вас есть элемент superscript, остальная часть этой строки опущен вниз. Поэтому вместо этого я использовал 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 Mozilla Firefox.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.6 em " такое небольшое количество, что также с этой высотой строки sub/sub текст будет соответствовать и не переходить друг через друга.
забыл деталь, которая может быть актуальной я всегда использую 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-тегов.
свойство CSS font-variant-position
находится на рассмотрении и в конечном итоге может быть ответ на этот вопрос. Однако с начала 2017 года его поддерживает только Firefox.
.super {
font-variant-position: super;
}
посмотреть MDN.
вот точный способ использования sup:
.superscript{
vertical-align:super;
font-size:smaller;
}
нашел это через элемент Google chrome inspect.