Alleen superscript in CSS?

January 20, 2022

Hoe krijg ik superscript gedaan, alleen in CSS?

Ik heb een stylesheet waarin ik de externe links markeer met een superscript-teken, maar ik heb moeite om het teken correct uit te lijnen.

Wat ik momenteel heb, ziet er als volgt uit:

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

maar het werkt niet.

Natuurlijk zou ik de <sup>-tag gebruiken, alleen als contentHTML toestaat…

Antwoord 1, autoriteit 100%

U kunt superscript doen met vertical-align: super, (plus een begeleidende font-sizeverkleining).

Lees echter de andere antwoordenhier, met name die van paulmurrayen cletus, voor nuttige informatie.

Antwoord 2, autoriteit 38%

Eerlijk gezegd zie ik het nut er niet van in om superscript/subscript alleen in CSS te doen. Er is geen handig CSS-kenmerk voor, alleen een aantal zelfgemaakte implementaties, waaronder:

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

of met behulp van verticaal uitlijnen of ik weet zeker dat andere manieren. Het punt is dat het ingewikkeld begint te worden:

CSS superscript spatiëringop regelhoogte;
Pas CSS voor Superscript / Subcript over waarom je waarschijnlijk niet zou moeten stijl superscript / subscript met CSS alle

Het tweede punt is de moeite waard te benadrukken. Typisch superscript / subscript is niet echt een styling kwestie, maar is een indicatie van betekenis.

Side note: Het is de moeite waard waarin dit lijst van lichamen voor wiskundige superscript en subscript uitdrukkingen hoewel deze vraag heeft geen betrekking op dat.

De sub / sup tags zijn in HTML en XHTML. Ik wil alleen die te gebruiken.

Als voor de rest van je CSS, de: after pseudo-element en de inhoud attributen worden niet breed ondersteund. Als je echt niet wilt dat dit handmatig in de HTML heb ik denk dat een Javascript-gebaseerde oplossing is uw volgende beste weddenschap. Met jQuery is dit net zo eenvoudig als:

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

Antwoord 3, Autoriteit 26%

De CSS documentatie bevat industrie-standaard CSS equivalent voor alle HTML-constructies. Dat wil zeggen: de meeste web browsers deze dagen niet expliciet behandelen SUB, SUP, B, Ien ga zo maar door -. ze (soort sorta) worden omgezet in SPANelementen met de juiste CSS-eigenschappen en de rendering engine alleen betrekking heeft op het

De pagina is Bijlage D. Standaard style sheet voor HTML 4

De bits je wilt zijn:

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

Antwoord 4, autoriteit 5%

Ik werkte aan een pagina met als doel duidelijk leesbare tekst, met superscript-elementen die de boven- en ondermarge van de regel NIET veranderden – met de volgende opmerkingen:

Als u voor uw hoofdtekst bijvoorbeeld line-height: 1.5emheeft, moet u de regelhoogte van uw superscripttekst verkleinen om deze correct weer te geven. Ik heb line-height: 0.5emgebruikt.

Ook vertical-align: superwerkt goed in de meeste browsers, maar als je in IE8 een superscript-element hebt, wordt de rest van die regel naar beneden gedrukt. Dus in plaats daarvan gebruikte ik vertical-align: baselinesamen met een negatieve topen position: relativeom hetzelfde effect te bereiken, wat beter lijkt te werken in verschillende browsers.

Dus, om toe te voegen aan de “implementaties van eigen bodem”:

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

Antwoord 5, autoriteit 3%

http://htmldog.com/articles/superscript/In wezen:

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

Werkt in de praktijk goed, voor zover ik weet.

Antwoord 6, autoriteit 2%

Het volgende is overgenomen uit Mozilla Firefox’ interne html.css:

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

Dus in jouw geval zou het iets zijn, zoals:

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

Antwoord 7

Dit is nog een schone oplossing:

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

Op deze manier kun je nog steeds sup/sub-tags gebruiken, maar heb je hun idiote gedrag opgelost om altijd de regelhoogte van alinea’s te verknoeien.

Dus nu kun je het volgende doen:

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

En de hoogte van je alinearegel mag niet verpest worden.

Getest op IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Ik heb getest met een p {line-height: 1.3;}(dat is een goede lijnhoogte tenzij je wilt dat je lijnen te dicht bij elkaar blijven) en het werkt nog steeds, want “-0.6em ” is zo’n klein bedrag dat ook met die regelhoogte de sub/sub tekst zal passen en niet over elkaar heen gaan.

Een detail vergeten dat relevant is, gebruik ik altijd DOCTYPE in de 1e lijn van mijn pagina (specifiek gebruik ik de HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Dus ik weet niet of deze oplossing goed werkt wanneer browser in QuirkMode (of niet standaardmodus) is vanwege het ontbreken van DOCTYPE of aan een DOCTYPE die geen standaard / bijna standaardmodus triggeert.

Antwoord 8

Als u de lettergrootte aan het wijzigen wilt, wilt u misschien stoppen met krimpende maten met deze regel:

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

Antwoord 9

Uitchecken: http : //www.cssdesignpatterns.com/chapter%2012%20-%20aligning%20content/vertical-aligned%20content/example.html

Als het lijkt erop dat je wilt “verticaal-uitlijnen: tekst-top”

Antwoord 10

Ik ben niet zeker of dit gerelateerd is, maar ik heb mijn probleem opgelost met ²HTML-entiteiten zoals ik geen andere HTML-tags in een <label>TAG. Dus het idee gebruikte ASCII-codes in plaats van CSS- of HTML-tags.

Antwoord 11

De CSS-eigenschap font-variant-positionis in overweging en kan uiteindelijk het antwoord op deze vraag zijn. Vanaf begin 2017 ondersteunt alleen Firefox het echter.

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

Zie MDN .

Antwoord 12

Gerelateerd of misschien niet gerelateerd, het gebruik van superscript als HTML-element of als span+css in tekst kan problemen veroorzaken met lokalisatie – in lokalisatieprogramma’s.

Laten we bijvoorbeeld zeggen “software van derden”:

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

Hoe kunnen vertalers “rd” vertalen? Ze kunnen het leeg laten voor verschillende cyrillische talen, maar hoe zit het met andere exotische of RTL-talen?

In dit geval is het beter om het gebruik van superscripts te vermijden en een volledige formulering te gebruiken, zoals ‘software van derden’.
Of, zoals hier vermeld in andere opmerkingen, het toevoegen van plustekens in superscript via jQuery.

Antwoord 13

probeer

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

of gewoon “na”

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

“.a.external:after” kan worden vereenvoudigd

of

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

gebruik “lettergrootte 50%” – 50% van welke grootte? dit werkt mogelijk niet goed als het niet wordt gebruikt binnen een tag die de tekstgrootte vóór superscript definieert…

als je “font-size: 1em;” gebruikt dan is de lettergrootte zeker ingesteld, zonder verwijzing naar een tag die de tekstgrootte van de link definieert, tenzij de linktekst is ingesteld op 100% en superscript 50% van die 100% is.

Gebruik van “lettergrootte: 1em;” stelt eigenlijk de basislijn van de lettergrootte in.

Stel de grootte voor “verticaal uitlijnen” kleiner in als u wilt dat het superscript-lettertype kleiner is dan de linktekst

Stel de grootte voor “verticaal uitlijnen” in op dezelfde grootte als de lettergrootte, als u wilt dat het superscript-lettertype dezelfde grootte heeft als de linktekst

Als u de linktekst wilt uitlijnen, moet u ‘marge’ hetzelfde instellen als de linktekst (links, gecentreerd, rechts, uitgevuld).

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

Het zou zoiets moeten zijn als onderstaande voorbeeldlinks met ^superscript

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

of

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

of