Superscript numai în CSS? (Programare, Css)

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.

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:

• Spațierea superscriptului CSS pe înălțimea liniei;
• Atenție la CSS pentru Superscript/Subcript despre motivul pentru care, probabil, nu ar trebui să stilizați superscript/subscript cu CSS deloc;

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

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 }

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

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.

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

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.

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

Nu sunt sigur dacă are legătură, dar eu mi-am rezolvat problema cu ² 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.

Verifică: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

dacă se pare că doriți „vertical-align:text-top”

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.

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 „3^rd 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.

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

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

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.