Superscript numai în CSS? (Programare, Css)

Henrik Paul a intrebat.

Cum pot face superscript, doar în CSS?

Am o foaie de stil în care marchez link-urile externe cu un caracter superscript, dar îmi este greu să aliniez corect caracterul.

Ceea ce am în prezent, arată așa:

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

dar nu funcționează.

În mod firesc, aș folosi opțiunea <sup>-tag, numai dacă content ar permite HTML…

Comentarii

  • „vertical-align:text-top” nu a funcționat pentru mine în IE9. Dar, a funcționat în FireFox 4.0. Cel puțin într-un context WordPress. –  > Por JosefB.
  • Dacă content este permis HTML, separarea preocupărilor ar avea de suferit. –  > Por Eva.
  • În caz că se mai întreba cineva … „Separarea preocupărilor (SoC) este un principiu de proiectare pentru separarea unui program de calculator în secțiuni distincte, astfel încât fiecare secțiune să abordeze o preocupare separată. O preocupare este un set de informații care afectează codul unui program de calculator.” (sursa) –  > Por ashleedawg.
15 răspunsuri
Peter Boughton

Puteți face superscript cu vertical-align: super, , (plus un semn de însoțire font-size reducere).

Cu toate acestea, asigurați-vă că citiți celelalte răspunsuri aici, în special cele ale lui paulmurray și cletus, pentru informații utile.

Comentarii

    33

  • De asemenea, se poate observa că font-size trebuie redus pentru a da efectul real de superscript. –  > Por Nirmal.
  • Răspunsul lui @paulmurray de mai jos este mai precis și mai cuprinzător. IMHO, ar trebui să fie răspunsul acceptat. –  > Por Doug Paul.
  • A spune „mai jos” nu tinde să ajute atunci când există trei moduri diferite de a ordona răspunsurile. Totuși, aveți dreptate, răspunsul lui Paul este unul mai bun, și e o nebunie că acesta are de peste cinci ori mai multe voturi. –  > Por Peter Boughton.
cletus

Sincer, nu văd rostul de a face superscript/subscript doar în CSS. Nu există un atribut CSS la îndemână pentru asta, ci doar o grămadă de implementări de casă, inclusiv:

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

sau folosind vertical-align sau sunt sigur că și alte moduri. Chestia este că începe să devină complicat:

Al doilea punct merită subliniat. În mod obișnuit, superscript/subscript nu este de fapt o problemă de stilizare, ci este un indicator al semnificației.

Notă suplimentară: Merită să menționăm următoarele listă de entități pentru expresii matematice obișnuite de superscript și subscript chiar dacă această întrebare nu se referă la aceasta.

Etichetele sub/sup se găsesc în HTML și XHTML. Eu le-aș folosi doar pe acelea.

În ceea ce privește restul CSS-ului dvs., atributele :after pseudo-element și content nu sunt acceptate pe scară largă. Dacă chiar nu doriți să introduceți manual aceste elemente în HTML, cred că o soluție bazată pe Javascript este cea mai bună opțiune. Cu jQuery acest lucru este la fel de simplu ca:

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

Comentarii

  • Cu „nu este acceptat pe scară largă” vă referiți la „nu este acceptat în IE”, presupun? –  > Por Boldewyn.
  • quirksmode.org/css/contents.html nu este suportat în IE7 și versiunile inferioare sau în IE8 în modul de compatibilitate. –  > Por cletus.
  • …ceea ce este exact ceea ce am spus, da. –  > Por Boldewyn.
  • Pentru a simplifica înfășurarea unei etichete A cu o etichetă SUP, folosiți următoarele: $(„a.external”).wrap(„<sup />”); –  > Por Russell.
  • La început am folosit soluția acceptată de @PeterBoughton, dar am optat pentru aceasta, deoarece nu distorsionează înălțimea liniei. –  > Por Nuri Hodges.
paulmurray

Documentația CSS conține echivalentul CSS standard al industriei pentru toate construcțiile HTML. Adică: majoritatea browserelor web din zilele noastre nu gestionează în mod explicit SUB, , SUP, , B, , I și așa mai departe – acestea sunt (oarecum) convertite în SPAN elemente cu proprietăți CSS corespunzătoare, iar motorul de redare se ocupă doar de acestea.

Pagina este Anexa D. Foaie de stil implicită pentru HTML 4

Părțile pe care le doriți sunt:

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

Comentarii

  • Acest lucru funcționează, dar strică totul. line-height. IMHO, singura modalitate de a nu o da în bară line-height este de a folosi position:relative așa cum a sugerat cletus: stackoverflow.com/a/501689/260080 –  > Por Marco Demaio.
Lessan Vaezi

Lucram la o pagină cu scopul de a avea un text clar lizibil, cu elemente superscript care NU modifică marginile de sus și de jos ale liniei – cu următoarele observații:

Dacă pentru textul principal aveți line-height: 1.5em de exemplu, ar trebui să reduceți înălțimea de linie a textului superscript pentru ca acesta să apară corect. Am folosit line-height: 0.5em.

De asemenea, am folosit și: „Ați folosit un text de tip „text de tip”, vertical-align: super funcționează bine în majoritatea browserelor, dar în IE8, atunci când este prezent un element superscript, restul liniei este împins în jos. Așa că am folosit în schimb vertical-align: baseline împreună cu un semn negativ top și position: relative pentru a obține același efect, ceea ce pare să funcționeze mai bine în toate browserele.

Așadar, pentru a adăuga la „implementările de casă”:

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

Comentarii

  • acest lucru se întrerupe atunci când este plasat în div container –  > Por Alex G.
Nick Presta

http://htmldog.com/articles/superscript/ În esență:

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

Funcționează bine în practică, din câte îmi dau seama.

Christian Stadler

Cele ce urmează sunt preluate din html.css-ul intern al Mozilla Firefox:

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

Deci, în cazul tău ar fi ceva de genul:

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

Marco Demaio

Aceasta este o altă soluție curată:

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 */

În acest fel poate folosi în continuare sup/sub dar trebuie să ați reparat comportamentul lor idiot de a strica întotdeauna înălțimea liniei paragrafului..

Deci, acum puteți face:

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

Și înălțimea liniei paragrafului nu ar trebui să fie dată peste cap.

Testat pe IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Am testat folosind un p {line-height: 1.3;} (aceasta este o înălțime bună a liniei, dacă nu doriți ca liniile să fie prea apropiate) și încă funcționează, deoarece „-0.6em” este o cantitate atât de mică încât și cu această înălțime a liniei, textul sub/sub se va potrivi și nu se va suprapune.

Am uitat un detaliu care ar putea fi relevant Am folosit întotdeauna DOCTYPE în primul rând al paginii mele (mai exact, folosesc HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Deci nu știu dacă această soluție funcționează bine atunci când browserul este în quirkmode (sau nu în modul standard) din cauza lipsei DOCTYPE sau a unui DOCTYPE care nu declanșează modul Standard/Altest Standard.

Comentarii

  • În ciuda faptului că răspunsul este vechi de zece ani, este încă modul corect de a face acest lucru. postition:relative; împiedică browserul să dea peste cap tot paragraful line-height atribuțiile de paragrafe. Acest comportament implicit este atât de ciudat încât mi se pare că este o eroare în modelul de redare a HTML. –  > Por serraosays.
freexe

Dacă modificați dimensiunea fontului, poate doriți să nu mai micșorați dimensiunile cu această regulă:

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

Archrade

Nu sunt sigur dacă are legătură, dar eu mi-am rezolvat problema cu &sup2; entitățile HTML, deoarece nu puteam adăuga alte tag-uri html în interiorul unei <label> tag. Așa că ideea a fost să folosesc coduri ASCII în loc de css sau tag-uri HTML.

Frank Schwieterman
hashchange

Proprietatea CSS font-variant-position este în curs de examinare și ar putea fi în cele din urmă răspunsul la această întrebare. De la începutul anului 2017, doar Firefox o acceptă, totuși.

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

A se vedea MDN.

Comentarii

  • Este primăvara anului 2020 și încă nu este suportat de niciun alt browser în afară de Firefox. Ah, deci… –  > Por Jens.
Nubian

Legat sau poate nu, folosirea superscriptului ca element HTML sau ca span+css în text ar putea cauza probleme cu localizarea – în programele de localizare.

De exemplu, să spunem „3rd software de terță parte”:

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

Cum pot traducătorii să traducă „rd”? Îl pot lăsa gol pentru mai multe limbi chirilice, dar cum rămâne cu alte limbi exotice sau RTL?

În acest caz, este mai bine să evitați utilizarea superscripturilor și să folosiți o formulare completă, cum ar fi „third third party software”.Sau, așa cum s-a menționat aici în alte comentarii, adăugarea de semne plus în superscript prin jQuery.

Artă creativă9

încercați

.aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

sau simplu „după”

.after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

„.a.external:after” ar putea fi simplificat

sau

.after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

folosind „font size 50%” – 50% din ce dimensiune? acest lucru ar putea să nu funcționeze bine dacă nu este folosit în cadrul unei etichete care definește dimensiunea textului înainte de superscript…

dacă folosiți „font-size: 1em;”, atunci dimensiunea fontului este stabilită cu siguranță, fără referință la o etichetă care definește dimensiunea textului de legătură, cu excepția cazului în care textul de legătură este stabilit la 100% și superscriptul este 50% din acel 100%.

Folosind „font-size: 1em;” se stabilește de fapt dimensiunea fontului de bază.

Setați dimensiunea „vertical-align” mai mică, dacă doriți ca fontul superscript să fie mai mic decât cel al textului de legătură.

Setați dimensiunea „vertical-align” la fel ca dimensiunea fontului, dacă doriți ca fontul superscript să aibă aceeași dimensiune ca și textul link-ului.

Pentru a se alinia cu textul linkului, trebuie să setați „margin” la fel ca textul linkului (stânga, centru, dreapta, justificat).

.text {
  font-size: 1em;
  margin: left;
}
.aftersup {
  font-size: 1em;
  margin: left;
  vertical-align: .7em;
}

Ar trebui să fie ceva asemănător cu exemplul de mai jos de linkuri cu superscript

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

sau

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

sau

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>

sau

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>

Ca și în…

Superscript numai în CSS?+

sau

Superscript numai în CSS?Ai înțeles?

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

SalutPopii

Iată exact modul pe care îl folosește sup:

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

Am găsit asta prin google chrome inspect element.

Tags: