28234 sujets

CSS et mise en forme, CSS3

Hauteur de police vs hauteur de ligne

Bonjour à tous,

j'utilise des caractères unicode pour dessiner des bordures et j'ai un problème de décalage vertical lorsque j'ai des lignes avec des input de type text. Je suspecte une sorte de conflit entre la hauteur de la police et la hauteur de ligne mais je n'ai pas réussi à trouver la bonne combinaison...

dernière remarque : je cherche une solution compatible avec IE6


<html>
<style>
body {
	font-family: Courier New;
	font-weight: normal;
	font-size: 16px;
	color: #000000;	
	line-height: 16px;
}

input.text {
	font-family: Courier New;
	font-weight: normal;
	font-size-adjust: 16px;
	color: #000066;
	background: #D4D0C8;
	border: none;	
	width: expression(this.size * 10 + 'px');
}
</style>
<body>
<form>
<pre>
A &#9474; B
C &#9474; D
<input type="text" class="text" name="A" size="1" maxlength="1" value="A" > &#9474; <input type="text" class="text" name="B" size="1" maxlength="1" value="B" >
<input type="text" class="text" name="C" size="1" maxlength="1" value="C" > &#9474; <input type="text" class="text" name="D" size="1" maxlength="1" value="D" >
</pre>
</form>
</body>
</html>
upload/2330-test.GIF

merci pour votre aide.
Modifié par loobiecore (07 Mar 2006 - 11:39)
Je crois qu'un petit cours sur la constitution d'une fonte informatique s'impose Smiley cligne

Par contre, je n'ai pas vraiment les compétences pour.
Mais vu que hauteur de ligne et taille de la fonte sont deux choses différentes, et qu'il y a des fontes pour lesquelles la hauteur de ligne fait à peu près 100% de la taille de la fonte, et d'autres où c'est plus proche du 160%, ça ne m'étonne pas plus que ça.

Donc on fixe la hauteur de ligne en la réduisant d'autant que nécessaire et ça marche, non ?

Au fait, c'est quoi cette idée saugrenue d'utiliser des pipes pour dessiner des bordures ? Smiley eek
a écrit :
Donc on fixe la hauteur de ligne en la réduisant d'autant que nécessaire et ça marche, non ?

j'avais déjà essayé tout un nombre de combinaison sans succès. Smiley decu
as-tu une proposition précise ?

a écrit :
Au fait, c'est quoi cette idée saugrenue d'utiliser des pipes pour dessiner des bordures ?

je travaille sur une solution de reverse d'écrans Mainframe (les fameux écrans verts en mode caractère) qui génère du HTML ou des feuilles de style XSL.
loobiecore a écrit :
Donc on fixe la hauteur de ligne en la réduisant d'autant que nécessaire et ça marche, non ?

j'avais déjà essayé tout un nombre de combinaison sans succès. Smiley decu
as-tu une proposition précise ?

a écrit :
Au fait, c'est quoi cette idée saugrenue d'utiliser des pipes pour dessiner des bordures ?

je travaille sur une solution de reverse d'écrans Mainframe (les fameux écrans verts en mode caractère) qui génère du HTML ou des feuilles de style XSL.
Ah ben du coup je comprends mieux l'utilité du truc.
Par contre je n'ai pas de proposition particulière à faire Smiley sweatdrop . J'aurais pensé qu'en fixant la hauteur du texte (1em) et en réduisant la hauteur de ligne (.8em ou .9em), on serait arrivé au résultat voulu. Mais si tu as déjà essayé ce genre de combinaison...
Ben en fait, chez moi ça marche parfaitement bien.

<pre class="a">| TEST |
| test |</pre>
<pre class="b">| TEST |
| test |</pre>
<pre class="c">| TEST |
| test |</pre>
<pre class="d">| TEST |
| test |</pre>


pre.a {font-family: "Nimbus Mono L", serif; line-height: .7em;}
pre.b {font-family: "Courier New", serif; line-height: .75em;}
pre.c {font-family: "Lucida Console", serif; line-height: .9em;}
pre.d {font-family: "Andale Mono", serif; line-height: .85em;}


La taille du texte reste la taille par défaut (1em, donc).
Les hauteurs de ligne peuvent aussi s'exprimer en pourcentages plutôt qu'en fractions d'em.

Testé avec Firefox (1.0 et 1.5), Konqueror, Opera et IE win 6.
Fonctionne partout sauf avec Opera, qui n'a pas l'air de prendre en compte les hauteurs de ligne en dessous de 1em...

Voilà, ça répond à la question ou alors j'ai tapé à côté ?
merci pour tes réponses mpop,

les exemples que tu m'as fournis sont corrects effectivement mais si tu reviens à mon exemple initial, tu constateras que le problème apparaît lorsqu'on a deux lignes successives qui contiennent des input de type text.
loobiecore a écrit :
merci pour tes réponses mpop,

les exemples que tu m'as fournis sont corrects effectivement mais si tu reviens à mon exemple initial, tu constateras que le problème apparaît lorsqu'on a deux lignes successives qui contiennent des input de type text.


Ah d'accord Smiley sweatdrop

pour les input, tu as essayé en supprimant toutes les marges, bordures et paddings possibles ? Parce que si tu as deux input l'un en dessous de l'autre, le moindre petit padding de 1 pixel crée un écart de deux pixels, forcément.
je te confirme que j'ai bien un écart de deux pixels lorsque j'ai deux input l'un au dessus de l'autre. Pourtant, j'ai bien mis le padding, le margin et le border à zéro. Penses-tu que ces deux pixels sont incompressibles ?

j'ai essayé de diminuer la propriété height de l'input text mais c'est sans succès...
loobiecore a écrit :
je te confirme que j'ai bien un écart de deux pixels lorsque j'ai deux input l'un au dessus de l'autre. Pourtant, j'ai bien mis le padding, le margin et le border à zéro. Penses-tu que ces deux pixels sont incompressibles ?

Il faudrait réussir à savoir à quoi ils correspondent en réalité. Mais j'avoue que là je suis un peu dépassé...
Sujet clos
Aller à