Суперскрипт лише у CSS?

Як я можу зробити надрисок лише в CSS?

У мене є таблиця стилів, де я позначаю зовнішні посилання символом суперскрипту, але мені важко правильно вирівняти персонаж.

Що у мене зараз, виглядає так:

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

але це не працює.

Природно, я б використовував <sup>-tag, тільки якщо contentдозволив би HTML ...

Можна виконати надпис із vertical-align: super(плюс супровідне font-sizeскорочення).

Однак не забудьте прочитати тут інші відповіді , зокрема відповіді Паульмуррея та Клетуса , щоб отримати корисну інформацію.

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

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

або використовуючи вертикальне вирівнювання, або я впевнений, інші способи. Річ у тому, що вона починає ускладнюватися:

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

Другий момент варто підкреслити. Як правило, суперскрипт / підписник насправді не є стильовим питанням, але вказує на значення.

Побічна примітка: Цей список сутностей варто згадати для загальних математичних надрискових та підрядних виразів, хоча це питання не стосується цього.

Теги sub / sup містяться в HTML та XHTML. Я б просто скористався цими.

Що стосується решти вашої CSS, атрибути: після псевдоелементів та вмісту широко не підтримуються. Якщо ви дійсно не хочете вводити це вручну в 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,6ем" - це така невелика кількість, що також з цією висотою рядка підходить під / підтекст. і не переходьте один одного.

Забув деталь, яка може бути актуальною, я завжди використовую 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

якщо схоже, що ви хочете "вертикальне вирівнювання: текст-верх"

Властивість CSS font-variant-positionрозглядається і, зрештою, може бути відповіддю на це питання. На початок 2017 року підтримує його лише Firefox.

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

Див. MDN .

Пов'язані або, можливо, не пов’язані між собою, використання надкрипту як HTML-елемента або як проміжок + css у тексті може спричинити проблеми з локалізацією - у програмах локалізації.

Наприклад, скажімо " програмне забезпечення ^{третьої} партії":

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

Знайдено це за допомогою елемента огляду Google Chrome chrome.