En exposant dans CSS seulement?

honnêtement, je ne vois pas l'intérêt de faire du superscript/subscript uniquement dans CSS. Il n'y a pas d'attribut CSS pratique pour cela, juste un tas d'implémentations maison incluant:

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

ou en utilisant vertical-align ou je suis sûr d'autres moyens. Chose est, il commence à se compliquer:

• CSS exposant espacement à la hauteur de la ligne;
• méfiez-vous CSS pour exposant / sous-indice sur la raison pour laquelle vous ne devriez sans doute pas style superscript / subscript avec CSS du tout ;

le second point mérite d'être souligné. Typiquement l'exposant / l'indice n'est pas en fait une question de style mais est indicatif du sens.

note de Côté: Il est intéressant de mentionner cette liste des entités pour la commune de mathématiques en exposant et en indice expressions même si cette question ne concerne pas que.

les balises sub / sup sont en HTML et XHTML. Je voudrais juste de l'utiliser.

comme pour le reste de votre CSS, les attributs :after pseudo-element et content ne sont pas largement supportés. Si vous ne voulez vraiment pas mettre cela manuellement dans le HTML je pense qu'une solution basée sur Javascript est votre meilleur pari suivant. Avec jQuery c'est aussi simple que:

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

la documentation CSS contient l'équivalent CSS standard de l'industrie pour toutes les constructions HTML. C'est-à-dire: la plupart des navigateurs Web de nos jours ne traitent pas explicitement SUB , SUP , B , I et ainsi de suite - ils (kinda sorta) sont convertis en SPAN éléments avec des propriétés CSS appropriées, et le moteur de rendu ne traite que de cela.

la page est Annexe D. feuille de style par défaut pour HTML 4

Les bits que vous souhaitez 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 changeant pas les marges supérieure et inférieure de la ligne - avec les observations suivantes:

si pour votre texte principal vous avez 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é line-height: 0.5em .

aussi, vertical-align: super fonctionne bien dans la plupart des navigateurs, mais dans IE8 quand vous avez un exposant présence d'un élément, le reste de la ligne, est poussé vers le bas. Donc à la place j'ai utilisé vertical-align: baseline avec un négatif top et position: relative pour obtenir le même effet, qui semble fonctionner mieux entre les navigateurs.

ainsi, pour ajouter aux "réalisations 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, autant que je peux dire.

ce qui suit est tiré du html interne de Mozilla Firefox.css:

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

c'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 sup/sub tags mais vous fixé leur comportement idiote pour toujours visser la hauteur de la ligne de paragraphe .

donc 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 votre hauteur de ligne de paragraphe ne doit pas se foirer.

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

j'ai testé en utilisant un p {line-height: 1.3;} (qui est une bonne hauteur de ligne sauf si vous voulez que vos lignes à coller trop près) et il fonctionne toujours, parce que" -0.6 em " est une si petite quantité que même avec cette hauteur de ligne Le sous/sous texte conviendra et ne pas aller sur l'autre.

a oublié un détail qui pourrait être pertinent j'utilise toujours DOCTYPE dans le première ligne de ma page (spécifiquement 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 Eh bien lorsque le navigateur est en quirkmode (ou non en mode standard) en raison de L'absence de DOCTYPE ou D'un DOCTYPE qui ne déclenche pas le mode Standard/presque Standard.

si vous changez la taille de la police, vous pourriez vouloir arrêter de réduire les tailles avec cette règle:

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

Je ne suis pas sûr que ce soit lié mais j'ai résolu mon problème avec ² entités HTML car je n'ai pas été en mesure d'ajouter d'autres balises html à l'intérieur d'une étiquette <label> . Donc l'idée était d'utiliser des codes ASCII au lieu des balises CSS ou HTML.

La propriété CSS font-variant-position est en cours d'examen et peuvent éventuellement être la réponse à cette question. Au début de 2017, seulement Firefox soutient, cependant.

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

voir MDN .

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

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

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

L'a trouvé via google Chrome inspect element.