28172 sujets

CSS et mise en forme, CSS3

[Résolu] <sub>, <sup> et interlignage

Pages :
Bonjour,

Une question me taraude :
Est-il possible de conserver un interlignage uniforme malgré la présence d'indice et d'exposant au sein d'un paragraphe ?
Car dès lors que l'on en insère au sein d'un texte, l'interlignage est augmenté en conséquence (c'est notamment visible sur IE6).

Est-il possible de contourner le problème ? Smiley rolleyes
Modifié par Cygnus (19 Mar 2008 - 10:29)
Bonjour Cygnus,

Je ne suis pas sûr de comprendre ton problème, si tu souhaites conserver un interlignage homogène dans un paragraphe dans lequel tu aurais des indices et des exposants (les éléments sub et sup donc) tu perdras le bénéfice de ces mises en forme non ?
Si je prend par exemple :
a écrit :

<p>M<sup>lle</sup>P'tite Pom et M.Ornithorynque vous annonce la naissance de n<sup>lles</sup> com-positions, lorem ipsum et caetera... </p>

Avec la propriété vertical-align tu dois pouvoir ajuster le positionnement des "lle(s)" sur la même ligne par exemple :
sup {vertical-align:baseline;}


Tu supprimes ainsi, me semble-t-il, les différences de hauteurs de lignes, mais au détriment de la mise en forme typographique de l'élément sub (ou sup) dans la langue française, non ?

L'écart, est-il si préjudiciable par rapport à ce que tu souhaites obtenir ?

Désolé si je suis à l'Ouest ou si je raconte des bétises... Smiley confused

Cdt,
Sylvain
6l20 a écrit :
Tu supprimes ainsi, me semble-t-il, les différences de hauteurs de lignes, mais au détriment de la mise en forme typographique de l'élément sub (ou sup) dans la langue française, non ?

L'écart, est-il si préjudiciable par rapport à ce que tu souhaites obtenir ?

En effet, ton exemple entraîne la perte de mise en forme, ce qui n'est pas le but recherché.
L'effet souhaité est la conservation de la mise en forme des exposants et indices (en haut et en bas de ligne donc) mais sans que cela n'interfère sur le line-height général du paragraphe.

Dans l'optique où mon paragraphe fait 6 lignes, et que la 4ème ligne contient un exposant, celle-ci présentera une marge supérieure, ce qui est dommageable. Enfin perso, je le vis très bien mais mon client n'est pas de cet avis. Smiley langue

Et comme dit : le client est roi ! Alors, si je peux le contenter... Smiley ravi
Salut Corinne,
comme le souligne 6//20, c'est dû au vertical-align:super/sub des sup/sub, la valeur baseline résout le décalage mais déplace l'exposant sur la ligne de base logiquement.
Tu dois donc attribuer un 
line-height: 2em
à tes sup/sub puisque IE6 se base visiblement sur leur boîte en-ligne pour l'interlignage de la ligne inférieure.
Modifié par Hermann (18 Mar 2008 - 17:40)
Une image en background... Smiley lol
Je sors ? Oui, c'est normal.... Smiley decu Smiley cligne

Sinon: rien trouvé d'autre...sorry Smiley decu

Et un truc du genre :

sup {
font-size:.8em;
position:relative;
top:6px;
}
?

Valeurs à adapter oeuf corse Smiley cligne
Modifié par 6l20 (18 Mar 2008 - 18:48)
Cygnus a écrit :
Déjà testé sans résultat Smiley smile

Autant pour moi. Pourtant je suis sûr de l'avoir déjà utilisé avec des effets positifs. Je suis super perplexe, là... Smiley confuse

Enfin bref, la proposition de Sylvain marche plutôt bien:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Test</title>
	<style type="text/css" media="screen">
	body {
		width: 400px;
		margin: 50px auto;
	}
	p {
		line-height: 1.25;
	}
	sup, sub {
		vertical-align: baseline;
		font-size:.75em;
		position:relative;
	}
	sup {top: -0.75em;}
	sub {bottom: -0.25em;}
	</style>
</head>

<body>
<p>Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Cras elementum ultrices diam. Maecenas ligula<sup>m</sup>, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec <sub>nonummy</sub> molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massachu<sup>setts</sup>, consequat in, pretium a, enim.Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. <sub>Praesent</sub> blandit odio eu enim.</p>
</body>
</html>
Florent V. a écrit :

Enfin bref, la proposition de Sylvain marche plutôt bien:

Euuh et la mienne elle est bidon? C'est drôle on dirait que mon message est resté invisible.
Modifié par Hermann (18 Mar 2008 - 23:24)
Hermann a écrit :

Euuh et la mienne elle est bidon? C'est drôle on dirait que mon message reste invisible.

Non, non, ta proposition semble tout à fait fonctionnelle Smiley cligne
Hermann a écrit :
Euuh et la mienne elle est bidon? C'est drôle on dirait que mon message est resté invisible.

Ben en fait j'avais pas compris ta solution, qui est tournée un peu bizarrement (non?), donc j'avais occulté. Smiley lol

Edit: bon ben j'ai relu, et j'ai toujours rien compris à la solution proposée à base de line-height: 2em. Tu as un code qui marche?
Modifié par Florent V. (19 Mar 2008 - 00:12)
OK. En fait ma solution fonctionne pour les sup, pour les sub je n'ai pas testé.
C'est pratiquement le même code que celui que tu proposais mais avec une valeur de 2em:
sup {line-height:2em}

ce qui me semble d'ailleurs plus logique que 0.8em même si IE et la logique ne se marient pas toujours très bien.
Florent V. a écrit :
Enfin bref, la proposition de Sylvain marche plutôt bien:

Effectivement. Smiley ravi

Voilà le code adopté : 
sub, sup {
  vertical-align : baseline;
  position : relative;
} 

sup {top : -0.5em;}
sub {bottom : -0.25em;}


Merci ! Smiley cligne
Hermann a écrit :
OK. En fait ma solution fonctionne pour les sup, pour les sub je n'ai pas testé.

Euhm... Smiley rolleyes
J'avouerais avoir un peu de mal à comprendre le code que tu proposes Smiley confused
Cygnus a écrit :

Euhm... Smiley rolleyes
J'avouerais avoir un peu de mal à comprendre le code que tu proposes Smiley confused


Et moi a comprendre pourquoi vous ne comprenez pas Smiley cligne J'ai expliqué plus haut ce que je
pensais être le fonctionnement d'IE6 pour l'interlignage de la ligne inférieur (mais je me trompe peut-être en partie).
Ceci dit la solution de 6/20 est valable pour sub et sup, pas la mienne (je crois).

Enfin l'essentiel est que tu aies une solution Smiley cligne
Modifié par Hermann (19 Mar 2008 - 12:50)
Hermann a écrit :
Ceci dit la solution de 6/20 est valable pour sub et sup, pas la mienne (je crois).

Ben en fait quand j'ai testé ta solution ça n'a absolument rien donné, avec aucun navigateur. C'est pour ça que j'étais perplexe et que je voulais voir un code de page complète. Smiley cligne
Florent V. a écrit :
Ben en fait quand j'ai testé ta solution ça n'a absolument rien donné, avec aucun navigateur.

Idem Smiley confused
Hello,

Voici ce que j'avais compris de la proposition d'Hermann :

sub, sup {
  vertical-align : baseline;
  line-height:2em;
  }


Et cela me semble fonctionnel également, non ?
Bonjour 6l20 (et non 6/20 Smiley lol ), ça y est je viens de comprendre 6l20 > Sylvain Smiley lol

En fait non c'est sans le vertical-align mais ce que je comprends pas, c'est que chez moi ça marchait très bien. Smiley rolleyes
Pages :
Sujet clos
Aller à