Superscript en CSS uniquement?

Comment puis-je obtenir un exposant, uniquement en CSS?

J’ai une feuille de style où je marque les liens externes avec un caractère en exposant, mais j’ai du mal à aligner correctement le personnage.

Ce que j’ai actuellement ressemble à ceci:

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

mais ça ne marche pas.

Naturellement, j’utiliserais l’étiquette -si le content permettrait le HTML …

Vous pouvez faire un exposant avec vertical-align: super (plus une réduction de la font-size ).

Cependant, assurez-vous de lire les autres réponses ici, en particulier celles de paulmurray et de cletus , pour des informations utiles.

Honnêtement, je ne vois pas l’intérêt de faire en indice ou en indice uniquement en CSS. Il n’y a pas d’atsortingbut CSS pratique, juste un tas d’implémentations internes, y compris:

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

ou en utilisant l’alignement vertical ou je suis sûr d’autres moyens. La chose est que ça commence à se compliquer:

  • Espacement CSS en exposant sur la hauteur de la ligne;
  • Méfiez-vous des CSS pour Superscript / Subcript sur les raisons pour lesquelles vous ne devriez peut-être pas donner un style à vos exposants / indices avec CSS;

Le deuxième point mérite d’être souligné. Généralement, indice supérieur / indice n’est pas réellement un problème de style, mais est révélateur du sens.

Note latérale: Il convient de mentionner cette liste d’entités pour les expressions mathématiques courantes en exposant et en indice, même si cette question ne s’y rapporte pas.

Les balises sub / sup sont en HTML et XHTML. Je voudrais juste les utiliser.

Comme pour le rest de votre CSS, les atsortingbuts de pseudo-élément et de contenu: after ne sont pas largement pris en charge. Si vous ne voulez vraiment pas le mettre manuellement dans le HTML, je pense qu’une solution basée sur Javascript est votre meilleur choix. Avec jQuery, c’est aussi simple que:

 $(function() { $("a.external").append("+"); }; 

La documentation CSS contient l’équivalent CSS standard pour toutes les constructions HTML. C’est-à-dire que la plupart des navigateurs Web ne gèrent pas explicitement SUB , SUP , B , I et ainsi de suite. Ils (kinda sorta) sont convertis en éléments SPAN avec des propriétés CSS appropriées, et le moteur de rendu ne les gère que.

La page est l’ Annexe D. Feuille de style par défaut pour HTML 4

Les bits que vous voulez sont:

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

Je travaillais sur une page dans le but d’avoir un texte clairement lisible, avec des éléments en exposant ne modifiant pas les marges supérieure et inférieure de la ligne – avec les observations suivantes:

Si pour votre texte principal vous avez une line-height: 1.5em par exemple, vous devez réduire la hauteur de ligne de votre texte en exposant pour qu’il apparaisse correctement. J’ai utilisé la line-height: 0.5em .

De plus, vertical-align: super fonctionne bien dans la plupart des navigateurs, mais dans IE8 lorsque vous avez un élément en exposant, le rest de cette ligne est poussé vers le bas. Au lieu de cela, j’ai utilisé vertical-align: baseline avec un top négatif et une position: relative pour obtenir le même effet, ce qui semble mieux fonctionner sur les navigateurs.

Donc, pour append aux “implémentations maison”:

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

http://htmldog.com/articles/superscript/ Essentiellement:

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

Fonctionne bien dans la pratique, pour autant que je sache.

Ce qui suit provient de html.css interne à Mozilla Firefox:

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

Donc, dans votre cas, ce serait quelque chose comme:

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

Ceci est une autre solution propre:

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

De cette façon, vous pouvez toujours utiliser les balises sup / sub mais vous avez corrigé leur comportement idiot pour toujours visser la hauteur des lignes de paragraphe .

Alors maintenant vous pouvez faire:

  

This is a line of text.

This is a line of text, with sub text.

This is a line of text, with sup text.

This is a line of text.

Et la hauteur de votre ligne de paragraphe ne devrait pas être foutue.

Testé sur IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

J’ai testé en utilisant un p {line-height: 1.3;} (c’est une bonne hauteur de ligne sauf si vous voulez que vos lignes restnt trop proches) et ça marche toujours, parce que “-0.6em” est tellement petit que hauteur du trait le sous / sous texte s’ajustera et ne se chevaucheront pas.

J’ai oublié un détail qui pourrait être pertinent J’utilise toujours DOCTYPE dans la première ligne de ma page (en particulier, j’utilise le HTML 4.01 ). Donc, je ne sais pas si cette solution fonctionne bien lorsque le navigateur est en quirkmode (ou non en mode standard) en raison du manque de DOCTYPE ou d’un DOCTYPE qui ne déclenche pas le mode Standard / Almost Standard.

Si vous modifiez la taille de la police, vous pouvez arrêter de réduire la taille avec cette règle:

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

Je ne suis pas sûr si cela est lié mais j’ai résolu mon problème avec ² Entités HTML car je n’ai pas pu append d’autres balises HTML dans une . Donc, l’idée utilisait des codes ASCII au lieu de balises css ou HTML.

La propriété CSS font-variant-position est à l’étude et peut éventuellement être la réponse à cette question. Au début de 2017, seul Firefox le prend en charge.

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

Voir MDN .

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

si ressemble à ce que vous voulez “vertical-align: text-top”

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

Voici la manière exacte d’utiliser:

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

Trouvé cela via google chrome inspect élément.