Balise HTML <sup /> affectant la hauteur de ligne, comment la rendre cohérente?

Si j'ai une <sup>étiquette dans une étiquette multiligne <p>, la ligne avec l'exposant dessus a un espacement de ligne plus grand au-dessus que les autres lignes, quelle que soit la hauteur de ligne que j'ai mise sur le <p>.

Modifiez pour clarification : je ne veux pas dire que j'ai beaucoup de <p>s, chacun sur une seule ligne. J'en ai un <p>avec suffisamment de contenu pour provoquer un enveloppement sur plusieurs lignes. Quelque part (n'importe où) dans le texte, il peut y avoir un <sup>ou <sub>. Cela affecte la hauteur de ligne de cette ligne en ajoutant un espacement supplémentaire au-dessus / en dessous. Si je règle une hauteur de ligne plus grande sur le, <p>cela ne change rien au problème. La hauteur de ligne est augmentée, mais l'espacement supplémentaire subsiste.

Comment puis-je le rendre cohérent - c'est-à-dire que toutes les lignes ont le même espacement, qu'elles contiennent <sup>ou non un?

Vos solutions doivent être multi-navigateurs (IE 6+, FF, safari, opéra, chrome)

line-height le corrige, mais vous devrez peut-être le rendre assez grand: sur mes paramètres, je dois augmenter la hauteur de ligne à environ 1,8 avant que cela <sup>n'interfère plus avec elle, mais cela variera d'une police à l'autre.

Une approche possible pour obtenir des hauteurs de ligne cohérentes consiste à définir votre propre style en exposant au lieu de celui par défaut vertical-align: super. Si vous l'utilisez, topcela n'ajoutera rien à la zone de ligne, mais vous devrez peut-être réduire davantage la taille de la police pour l'adapter:

sup { vertical-align: top; font-size: 0.6em; }

Un autre hack que vous pourriez essayer est d'utiliser le positionnement pour le déplacer un peu vers le haut sans affecter la zone de ligne:

sup { vertical-align: top; position: relative; top: -0.5em; }

Bien sûr, cela risque de s'écraser sur la ligne ci-dessus si vous n'avez pas assez de hauteur de ligne.

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

L'astuce consiste à définir la <sup>hauteur de ligne de s à 0. @Scott a dit d'utiliser normal, mais cela ne fonctionne pas toujours.

Cela signifie que vous n'avez pas à modifier la hauteur de ligne du texte environnant pour l'adapter au texte en exposant. J'ai testé cela dans IE7 + et les autres principaux navigateurs.

J'ai eu le même problème et aucune des réponses données n'a fonctionné. Mais j'ai trouvé un commit git avec un correctif qui a fonctionné pour moi:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

garder les choses faciles:

sup { vertical-align: text-top; }

[ la taille de la police dépend de votre type de visage]

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Je préfère utiliser lengthsur l'alignement vertical. Cela aligne la ligne de base de l'élément à la longueur donnée au-dessus de la ligne de base de son parent.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

La raison pour laquelle l' <sup>étiquette affecte l'espacement entre deux lignes a à voir avec un certain nombre de facteurs. Les facteurs sont: la hauteur de la ligne, la taille de l'exposant par rapport à la police normale, la hauteur de la ligne de l'exposant et enfin et surtout quel est le bas de l'exposant aligné avec ... Si vous définissez ... la hauteur de ligne du texte normal pour être dans une "bande tunnel" (c'est comme ça que je l'appelle) de 135% alors le texte normal (le 100%) devient blanc rembourré de 35% de plus de blanc. Pour un paragraphe, cela ressemble à ceci:

 p
    {
            line-height: 135%;
    }

Si vous ne remplissez pas ensuite en blanc l'exposant ... (c'est-à-dire gardez sa hauteur de ligne à 0), l'exposant n'a que la largeur de son propre texte ... si vous demandez alors à l'exposant d'être un pourcentage de la police régulière (pour exemple 70%) et que vous l'alignez avec le milieu du texte normal (texte-milieu), vous pouvez éliminer le problème et obtenir un exposant qui ressemble à un exposant. C'est ici:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Je préfère la solution suggérée ici , comme illustré par ce jsfiddle :

CSS:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

La beauté de cette solution est que vous pouvez personnaliser le positionnement vertical de l'exposant et de l'indice, pour éviter tout conflit avec la ligne au-dessus ou en dessous ... dans ce qui précède, augmentez ou diminuez simplement le 0.2empour répondre à vos besoins.

Pour rendre toutes les lignes plus hautes , pour avoir la même apparence que la ligne avec l'exposant, définissez une plus grande line-heightpour tout le paragraphe

<p style='line-height:150%'>

ou quelle que soit la valeur qui donne l'effet que vous désirez.

Cela peut paraître étrange, mais c'est ainsi que vous avez décrit vos besoins.

EDIT: Pour que toutes les lignes se ressemblent quand une seule a besoin de plus d'espace vertical que les autres , TOUTES les lignes du paragraphe devront être plus hautes.

Ceci, comme je l’ai dit, n’est peut-être pas une solution intéressante. Peut-être que quelque chose peut être fait avec un span rendant juste le texte avec le sous / exposant plus petit , à part cela je ne crois pas que ce que vous voulez puisse être réalisé. Mais j'aimerais voir la solution de quelqu'un d'autre.

EDIT2: Incidemment, j'ai essayé un petit fichier html contenant

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

Et les lignes ont toutes la même hauteur dans FF3.0.14 et Konqueror (je ne peux pas parler pour les autres navigateurs)

J'ai utilisé la hauteur de ligne: normal pour l'exposant, ce qui fonctionne très bien pour moi dans Safari, Chrome et Firefox, mais je ne suis pas sûr d'IE.

Utilisez spécialement ceci sur la newsletter -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

J'aime la solution de Milingu Kilu mais dans le même esprit je préfère

sup { vertical-align:top; line-height:100%; }

& sup1, & sup2 etc. pourraient faire l'affaire. c'est une astuce HTML pour exposer

Réponse d' ici , fonctionne à la fois dans phantomjs et en HTML intégré aux e-mails:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>