Line-height
Ndrea
-
declique69 Messages postés 21 Statut Membre -
declique69 Messages postés 21 Statut Membre -
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
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:
- Line-height
- Command line mac - Guide
- Line in ✓ - Forum carte son
- Spec ops the line patch fr - Forum Jeux PC
- Line in c'est quoi ✓ - Forum Windows
- Expected value at line 1 column 1 firefox ✓ - Forum MacOS
12 réponses
Le but est de faire quoi concrètement ?
Cordialement,
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,
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,
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 :
CSS :
JAVA :
Voilà, plus qu'à écrire plein de texte pour pouvoir observer le phénomène qui me préoccupe. :(
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. :(
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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?
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?
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 ^^
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 ^^
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.
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,
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,
Vous utilisez un framework CSS dans le style de Bootstrap, bulma ou autre ?
Car ce genre de chose peut fausser un affichage
Car ce genre de chose peut fausser un affichage
Merci pour cette info, je ne savais pas!
Je viens de faire un nouveau projet dans Brackets ;
HTML :
CSS :
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 ?
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 ?
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...
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...
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
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
Merci pour votre retour cs_PaTaTe.
J'ai essayé, malheureusement ça ne change rien.
Bien cordialement,