Exposant en CSS uniquement?

Comment puis-je faire exposer, 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 caractère.

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 le <sup>-tag, seulement si contentcela permettait le HTML ...

Vous pouvez faire un exposant avec vertical-align: super, (plus une font-sizeréduction qui l' accompagne ).

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

Honnêtement, je ne vois pas l'intérêt de faire des exposants / indices en CSS uniquement. Il n'y a pas d'attribut CSS pratique pour cela, juste un tas d'implémentations locales, y compris:

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

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

• Espacement CSS en exposant sur la hauteur de ligne;
• Prenez garde CSS pour Superscript / Subcript pourquoi vous ne devriez pas le style sans doute superscript / CSS avec l' indice du tout ;

Le deuxième point mérite d'être souligné. Typiquement, les exposants / indices ne sont pas en fait un problème de style, mais indiquent la signification.

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

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

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

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

La documentation CSS contient un équivalent CSS standard pour toutes les constructions HTML. C'est: la plupart des navigateurs web ces jours -ci ne gèrent pas explicitement SUB, SUP, B, Iet ainsi de suite - ils ( un peu sorta) sont convertis en SPANéléments avec des propriétés CSS appropriées, et le moteur de rendu offres uniquement avec cela.

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, par line-height: 1.5emexemple, pour votre texte principal , vous devez réduire la hauteur de ligne de votre texte en exposant pour qu'il s'affiche correctement. J'ai utilisé line-height: 0.5em.

En outre, vertical-align: superfonctionne bien dans la plupart des navigateurs, mais dans IE8 lorsque vous avez un élément en exposant, le reste de cette ligne est poussé vers le bas. Au lieu de cela, j'ai utilisé vertical-align: baselineavec un négatif topet position: relativepour obtenir le même effet, ce qui semble fonctionner mieux entre les navigateurs.

Donc, pour ajouter aux "implémentations locales":

.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 est tiré du html.css interne de 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 des balises sup / sub mais vous avez corrigé leur comportement idiot pour toujours bousiller la hauteur de la ligne de paragraphe .

Alors maintenant, vous pouvez faire:

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

Et la hauteur de votre ligne de paragraphe ne doit pas être foirée.

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 à moins que vous vouliez que vos lignes collent trop près) et cela fonctionne toujours, car "-0.6em" est une si petite quantité qu'avec cette hauteur de ligne le texte sous / sous s'adaptera et ne vous recoupez pas.

J'ai oublié un détail qui pourrait être pertinent J'utilise toujours DOCTYPE dans la 1ère ligne de ma page (en particulier j'utilise le HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Donc, je ne sais pas si cette solution fonctionne bien lorsque le navigateur est en mode quirkmode (ou non standard) en raison du manque de DOCTYPE ou d'un DOCTYPE qui ne déclenche pas le mode Standard / Presque Standard.

Si vous modifiez la taille de la police, vous souhaiterez peut-être arrêter la réduction des tailles avec cette règle:

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

Je ne sais pas si cela est lié mais j'ai résolu mon problème avec ²les entités HTML car je n'ai pas pu ajouter d'autres balises html dans un<label> balise. L'idée était donc d'utiliser des codes ASCII au lieu de balises CSS ou HTML.

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

si semble que vous voulez "vertical-align: text-top"

La propriété CSS font-variant-positionest à l'étude et pourrait éventuellement être la réponse à cette question. Depuis début 2017, seul Firefox le prend en charge.

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

Voir MDN .

Lié ou peut-être pas lié, l'utilisation d'exposant comme élément HTML ou comme span + css dans le texte peut causer des problèmes de localisation - dans les programmes de localisation.

Par exemple , disons « 3 ^ème logiciel tiers »:

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

Comment les traducteurs peuvent-ils traduire "rd"? Ils peuvent le laisser vide pour plusieurs langues cyrriliques, mais qu'en est-il des autres langues exotiques ou RTL?

Dans ce cas, il vaut mieux éviter d'utiliser des exposants et utiliser un libellé complet comme "logiciel tiers". Ou, comme mentionné ici dans d'autres commentaires, en ajoutant des signes plus en exposant via jQuery.

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

Voici la façon exacte dont sup utilise:

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

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