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…
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.
- 33
- De asemenea, se poate observa că
font-size
trebuie redus pentru a da efectul real de superscript. – > . - Răspunsul lui @paulmurray de mai jos este mai precis și mai cuprinzător. IMHO, ar trebui să fie răspunsul acceptat. – > .
- 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. – > .
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>");
};
- Cu „nu este acceptat pe scară largă” vă referiți la „nu este acceptat în IE”, presupun? – > .
- quirksmode.org/css/contents.html nu este suportat în IE7 și versiunile inferioare sau în IE8 în modul de compatibilitate. – > .
- …ceea ce este exact ceea ce am spus, da. – > .
- Pentru a simplifica înfășurarea unei etichete A cu o etichetă SUP, folosiți următoarele: $(„a.external”).wrap(„<sup />”); – > .
- La început am folosit soluția acceptată de @PeterBoughton, dar am optat pentru aceasta, deoarece nu distorsionează înălțimea liniei. – > .
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 }
- Acest lucru funcționează, dar strică totul.
line-height
. IMHO, singura modalitate de a nu o da în barăline-height
este de a folosiposition:relative
așa cum a sugerat cletus: stackoverflow.com/a/501689/260080 – > .
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;
}
- acest lucru se întrerupe atunci când este plasat în div container – > .
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.
- Î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 paragrafulline-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. – > .
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.
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.
- Este primăvara anului 2020 și încă nu este suportat de niciun alt browser în afară de Firefox. Ah, deci… – > .
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.
î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.
content
este permis HTML, separarea preocupărilor ar avea de suferit. – > Por Eva.