Balise HTML <sup /> affectant la hauteur de ligne, comment la rendre cohérente?
Si j'ai une balise <sup> dans une balise <p> à plusieurs lignes, la ligne au-dessus de celle-ci a un espacement de ligne supérieur à celui des autres lignes, quelle que soit la hauteur de ligne que j'ai indiquée dans le <p>.
Modifier pour clarification: Je ne veux pas dire que j'ai beaucoup de <p>s, chacun sur une seule ligne. J'ai un seul <p> avec suffisamment de contenu pour provoquer le retour à la ligne 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 pour 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>, le problème ne fait aucune différence. La hauteur de ligne est augmentée, mais l'espacement supplémentaire demeure.
Comment puis-je le rendre cohérent - c'est-à-dire que toutes les lignes ont le même espacement, qu'elles contiennent ou non un <sup>?
Vos solutions doivent être multi-navigateurs (IE 6+, FF, Safari, Opéra, Chrome)
line-height corrige le problème, mais vous devrez peut-être l'agrandir: sur mes réglages, je dois augmenter le paramètre line-height à environ 1,8 avant que le <sup> n'interfère plus avec cela, mais cela varie 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 du vertical-align: super par défaut. Si vous utilisez top, cela 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 sans affecter le champ 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 {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
L'astuce consiste à définir la hauteur de ligne du <sup> sur 0. @Scott a dit d'utiliser normal, mais cela ne fonctionne pas toujours.
Cela signifie que vous n'avez pas à changer la hauteur de ligne du texte environnant pour accueillir le 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 git commit avec un correctif qui fonctionnait pour moi:
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
La raison pour laquelle la balise <sup> affecte l'espacement entre deux lignes est liée à un certain nombre de facteurs. Les facteurs sont les suivants: hauteur de trait, taille de l'indice supérieur par rapport à la police de caractère normale, hauteur de trait de l'indice supérieur et dernier élément, mais non des moindres, l'alignement du bas de l'indice supérieur sur ... Si vous définissez ... la hauteur de ligne du texte normal devant figurer dans une "bande de tunnel" (c'est ce que je l'appelle) de 135%, puis le texte normal (les 100%) devient blanc avec 35% de plus de blanc. Pour un paragraphe cela ressemble à ceci:
p
{
line-height: 135%;
}
Si vous ne superposez pas alors l’indice blanc ... (c’est-à-dire que la hauteur de ligne est 0), l’exposant n’a que la largeur de son propre texte ... si vous demandez à l’indice supérieur de représenter un pourcentage de la police normale exemple 70%) et si vous l’alignez au milieu du texte normal (text-middle), 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;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
Keep it easy:
sup { vertical-align: text-top; }
[font-size en fonction de votre type-face]
Je préfère utiliser length sur 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;
}
J'utilise line-height: normal pour l'indice supérieur, ce qui me convient parfaitement dans Safari, Chrome et Firefox, mais je ne suis pas sûr pour IE.
Pour rendre toutes les lignes plus hautes , pour avoir la même apparence que la ligne avec exposant, définissez un line-height plus grand pour tout le paragraphe.
<p style='line-height:150%'>
ou quelle que soit la valeur qui donne l'effet que vous désirez.
Cela peut sembler étrange, mais c'est ainsi que vous avez décrit vos besoins.
EDIT: Pour que toutes les lignes aient la même apparence si une seule a besoin de plus d’espace vertical que les autres , TOUTES les lignes du paragraphe devront être plus hautes.
Comme je l’ai dit, cela n’est peut-être pas une solution attrayante. Peut-être que quelque chose peut être fait avec un intervalle faisant juste le texte avec le sous/exposant plus petit , à part cela, je ne crois pas que ce que vous voulez peut être réalisé Mais j'aimerais voir la solution de quelqu'un d'autre.
EDIT2: A propos, 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 d'autres navigateurs)
& sup1, & sup2 etc. pourraient faire l'affaire. c'est une astuce HTML à exposer
La réponse de ici , fonctionne à la fois en phantomjs et en HTML incorporé à la messagerie:
Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup>Utiliser spécialement ceci sur la newsletter -
<sup style="font-size:9px; line-height:8px;">®</sup>
J'aime la solution de Milingu Kilu mais dans le même esprit que je préfère
sup { vertical-align:top; line-height:100%; }