Sujet Précédent Sujet Suivant

Line-height

Fermé
Ndrea - 28 janv. 2020 à 11:41
declique69 Messages postés 14 Date d'inscription mardi 17 mai 2016 Statut Membre Dernière intervention 4 mai 2020 - 2 févr. 2020 à 22:43
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
A voir également:

12 réponses

Réponse 1 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 12:19
Bonjour,

Et en mettant un important ?

Ex :

line-height: XXpx !important;

Cordialement,
0
Ndrea
28 janv. 2020 à 12:27
Bonjour,

Merci pour votre retour cs_PaTaTe.

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

Bien cordialement,
0
Réponse 2 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 12:41
Le but est de faire quoi concrètement ?

Cordialement,
0
Ndrea
28 janv. 2020 à 13:00
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,
0
Réponse 3 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 13:08
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 ^^


0
Réponse 4 / 12
Ndrea
Modifié le 28 janv. 2020 à 17:59
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. :(
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 18:22
Personnellement j'ai mon teste centré entre chaque ligne sur Chrome et Firefox ...
0
Ndrea
28 janv. 2020 à 18:37
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?
0
Réponse 6 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 19:24
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 ^^
0
Ndrea
28 janv. 2020 à 19:38
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? ^^
0
Réponse 7 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 19:45
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.
0
Ndrea
28 janv. 2020 à 20:44
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,
0
Réponse 8 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 20:48
Vous utilisez un framework CSS dans le style de Bootstrap, bulma ou autre ?

Car ce genre de chose peut fausser un affichage
0
Ndrea
28 janv. 2020 à 20:59
J'aimerais tant vous répondre que oui, mais non! ^^

Je viens d'essayer sur Edge, et ça fonctionne parfaitement, tout comme sur Firefox!
0
Réponse 9 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 21:03
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
0
Ndrea
28 janv. 2020 à 21:17
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 ?
0
Réponse 10 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 22:07
Je ne sais pas si une option de Chrome est en cause ou non mais personnellement, la valeur dans Chrome est bien de 90px ...
0
Ndrea
28 janv. 2020 à 23:15
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...
0
Réponse 11 / 12
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
29 janv. 2020 à 00:25
Peut être qu'en changeant de police ...
0
Réponse 12 / 12
declique69 Messages postés 14 Date d'inscription mardi 17 mai 2016 Statut Membre Dernière intervention 4 mai 2020 2
2 févr. 2020 à 22:43
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
0

Discussions similaires

minimal bash-like line editing is supported
Mass -
brucine -

1 réponse
Différence sortie "line-in" et sortie "casque"
Cabby -
Cabby -

4 réponses
MySQL error in file: /engine/classes/mysql.php at line 53
mela30100 -
jordane45 -

3 réponses
CPU tourne à 100% avec Visual Basic Command Line Compiler
IKeroZI -
bazfile -

10 réponses
que signifie vty ??
sirin -
Ange190 -

4 réponses