Line-height

Signaler
-
declique69
Messages postés
7
Date d'inscription
mardi 17 mai 2016
Statut
Membre
Dernière intervention
2 février 2020
-
Bonjour,

Après des heures et des heures de recherche, je ne trouve toujours pas de solution, je me remets à votre expertise.

J'ai un formulaire avec un textarea qui s'adapte en hauteur selon le contenu, et ce grâce à un script java.

Sur Firefox, la hauteur (height) calculée du textarea est toujours = line-height * row.

Sur Chrome, la hauteur (height) calculée du textarea n'est pas = line-height * row. Toujours un peu plus petite. Chaque navigateur calcule sa line-height particulièrement ai-je appris ailleurs. Et puis, aussi, il semblerait, la line-height a une parenté avec la police choisie.

Dans mon textarea, j'ai un background-image (un svg) dont la hauteur est égale à la line-height. Sur Firefox le rendu est parfait. Mais sur Chrome le décalage est visible, et d'autant plus visible que j'augmente le nombre de row évidemment.

J'ai essayé beaucoup de choses, auriez-vous une piste à me suggérer pour obliger Chrome à faire des rows à l'exacte même hauteur que mon svg (ou line-height) ?

Je me réjouis de vous lire, et vous remercie d'ores et déjà pour votre précieuse aide.

Ndrea

12 réponses

Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Bonjour,

Et en mettant un important ?

Ex :

line-height: XXpx !important;

Cordialement,
Bonjour,

Merci pour votre retour cs_PaTaTe.

J'ai essayé, malheureusement ça ne change rien.

Bien cordialement,
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Le but est de faire quoi concrètement ?

Cordialement,
D'avoir un textarea avec une hauteur qui serait un multiple de la line-height.

En arrière-plan de mon textarea j'ai une image répétée (en svg) de même hauteur que la line-height. L'image ajoute des lignes de séparation entre chaque row. Ça donne, si l'on veut, un style "cahier ligné".

Si la hauteur n'est pas un multiple de la line-height, et bien mon texte n'est pas aligné.

Merci pour votre aide, c'est gentil de prendre du temps.

Cordialement,
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Essais de coller le code HTML+CSS+ éventuellement l'image du textarea pour que que l'on se fasse une idées plus précise, j'essayerai de trouver une solution ^^


Volontiers! Pour éviter que l'on se noie dans mon code, j'ai reproduit cela sur un formulaire épuré.
A essayer sur https://codepen.io/pen/ par exemple, d'abord sur Firefox, puis sur Chrome ;

HTML :

<textarea></textarea> 


CSS :

textarea {
 width:1000px;
 overflow:hidden;
 color:black;
 font-size:30px;
 resize:none;
 line-height:45px;
 font-family: Verdana, Geneva, sans-serif;
 background-image:
 repeating-linear-gradient(green, green 44px, red 44px, red 45px);
 padding:0px;
 border:0px;
 margin:0px;
}


JAVA :

var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}


Voilà, plus qu'à écrire plein de texte pour pouvoir observer le phénomène qui me préoccupe. :(
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Personnellement j'ai mon teste centré entre chaque ligne sur Chrome et Firefox ...
Aha...intéressant...

Même après une cinquantaine de lignes insérées ?

Chez moi, ça se décale très très nettement au fur et à mesure. D'ailleurs, sans même ajouter une seule ligne (quand il n'y a que les deux rows en somme) et que j'inspecte l'élément sur Chrome, j'ai une height de 89px. Alors que sur Firefox, j'ai bien mes 2x45px = 90px...

Et vous?
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Etrange ...

Si chez moi l'écartement est bon, tu dois avoir une règle CSS qui interfère. Bootstrap est le champion pour se mêler de tout par exemple ^^
Je suis perdu! ^^

Sur mon site original peut-être oui, mais sur https://codepen.io/pen/, je n'ai rien mis d'autres que les lignes précitées. Un problème avec mon navigateur chrome? ^^
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Codepen est un service en ligne de partage de code et le lien donné est seulement l'interface vide.

Attention à perdre le code.

Codepen n'est pas un outils de développement est peut faire quelques "interprétations" selon les navigateurs.

Personnellement, je suis développeur web et j'utilise un IDE. J'en utilise un payant (phpStorm) mais il en existe des gratuits tel que Visual Studio Code de Microsoft.
Oui, tout à fait, j'ai conscience que le lien donné pointe vers l'interface vide de codepen. C'était simplement pour donner un lieu où tester le code.

Vous avez raison, peut-être que codepen fausse les résultats. Je vais faire encore et encore des tests en local, j'utilise Brackets et Wamp pour travailler mon site Internet.

J'ai la cruelle impresson d'avoir tout essayé, mais ça ne peut évidemment pas être le cas. Je garde un maigre espoir. Ce qui ne me rassure pas, ce sont les nombreux résultats de recherche pour les mots-clés "line-height textarea height difference between Firefox and Chrome". Et malgré les nombreux cas relatés que j'ai consultés, je ne trouve aucune solution pour le moment.

Dans tous les cas merci pour votre aide! C'est super gentil!

Tout cordialement,
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Vous utilisez un framework CSS dans le style de Bootstrap, bulma ou autre ?

Car ce genre de chose peut fausser un affichage
J'aimerais tant vous répondre que oui, mais non! ^^

Je viens d'essayer sur Edge, et ça fonctionne parfaitement, tout comme sur Firefox!
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
La cas Edge ne serait que temporaire car Microsoft va utiliser le moteur Chromium bientôt (celui qu'utilise Chrome)

Après sans le code complet c'est difficile de déboguer plus que ça
Merci pour cette info, je ne savais pas!

Je viens de faire un nouveau projet dans Brackets ;

HTML :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<textarea></textarea> 
<script>
var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}    
</script>
</body>
</html>


CSS :

textarea {
 width:1000px;
 overflow:hidden;
 color:black;
 font-size:30px;
 resize:none;
 line-height:45px;
 font-family: Verdana, Geneva, sans-serif;
 background-image:
 repeating-linear-gradient(green, green 44px, red 44px, red 45px);
 padding:0px;
 border:0px;
 margin:0px;
}


Tout le code du nouveau projet est là. Je n'ai rien d'autre. =/ En examinant l'élément textarea sur ;
Firefox: 90 px de height (2x45px);
Chrome: 89px de height;

Précision : j'ai la dernière version de Chrome.

Est-ce possible qu'il s'agisse d'un paramètre de mon navigateur Chrome ?
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Je ne sais pas si une option de Chrome est en cause ou non mais personnellement, la valeur dans Chrome est bien de 90px ...
C'est fou! Merci d'avoir essayé encore une fois!

Cela dit je viens de trouver une "solution". Quand j'insère une line-height avec un nombre pair, ça fonctionne...
A peine crédible, je sais bien! Mais je n'avais fait des essais qu'avec des nombres impairs jusqu'ici...

Solution qui ne me convainc pas tout à fait bien entendu. Mais enfin...

Aussi je dois faire attention, il me semble (et ça fait écho aux différentes théories que j'ai lues), au rapport entre la taille de la line-height et la font-size. Au-dessus de 1.4 ça joue bien chez moi. Je peux descendre un peu, mais après je commence à avoir des problèmes...
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Peut être qu'en changeant de police ...
Messages postés
7
Date d'inscription
mardi 17 mai 2016
Statut
Membre
Dernière intervention
2 février 2020

Plutôt que de travailler en px (pixels) il y a des unités spécialement faites pour être proportionnelle à la taille des caractères ou la hauteur des lignes de texte : emet lh.
Je ne sais pas si ça résoudra le problème des décalages mais au moins ça évitera de se prendre la tête.

Les unités CSS : http://stylescss.free.fr/v2-references/units.php#size