28172 sujets

CSS et mise en forme, CSS3

[Résolu] Rapport entre font-size et line-heigth pour obtenir heigth

Pages :
Bonjour,

Une question très basique mais je n'ai pas trouvé de réponse claire.

<p>Étanche L'intérêt d'un cordon étanche est de pouvoir être installé en extérieur sans être protégé par une gaine. Si vous disposez d'une gaine, il existe infiniment plus de choix dans les cordons standards. Attention cependant à vérifier la température minimale de fonctionnement du câble. En-dessous de cette température, généralement 0°C pour un cordon standard, les performances sont plus ou moins affectées. Les câbles étanches supportent généralement jusqu'à -20°C, de même que certains cordons standards haut de gamme.</p>
<h1>Un titre qui doit faire deux fois la hauteur d'une ligne normale</h1>
<p>Étanche L'intérêt d'un cordon étanche est de pouvoir être installé en extérieur sans être protégé par une gaine. Si vous disposez d'une gaine, il existe infiniment plus de choix dans les cordons standards. Attention cependant à vérifier la température minimale de fonctionnement du câble. En-dessous de cette température, généralement 0°C pour un cordon standard, les performances sont plus ou moins affectées. Les câbles étanches supportent généralement jusqu'à -20°C, de même que certains cordons standards haut de gamme.</p>


p {font-size: 1em; line-height: 1.2em}
h1 {font-size: 1.2em; line-height: ????? em}


Je veux que h1 occupe l'espace de deux lignes, donc sauf erreur 2.4em

Mais je ne sais pas comment calculer la valeur de line-height pour arriver à ce résultat...

Peut-être plus facile avec des rem ?

Merci d'avance.
Bonjour,

Donc à la base ça dépend de la taille de ta police de caractères.

https://www.w3.org/Style/Examples/007/units.fr.html

Ensuite pour savoir qui fait quoi il existe un moyen très simple.

Clic-Droit sur la page, inspecter.

Une fois dedans on va rechercher "calculé", à chaque fois que l'on passe sur un élément cela nous donne le calcule.
Chez moi avec une police de base sous FireFox ça me donne çà pour p.

font-size: 16px;

inline:3
Meilleure correspondance p
1em
line-height: 19.2px;

inline:3
Meilleure correspondance p
1.2em

et ceci pour H1 avec line-height: à 2.4em

font-size: 19.2px;

inline:4
Meilleure correspondance h1
1.2em

élément
Correspondance h1
2em
line-height: 46.0833px;

inline:4
Meilleure correspondance h1
2em


A ces résultats tu ajoute ton margin que tu va retrouver dans l'onglet mise en page
Modifié par uniuc (29 May 2023 - 18:53)
Bonjour,

Merci de ton suivi.

J'ai produit un codepen pour expliquer le problème.

1) La taille de la police est fixée par une valeur small pour grand écran et medium pour petit écran.

2) Je suis sur deux colonnes et l'objectif un peu maniaque et que les lignes soient à la même hauteur sur chaque colonne.

Avec cette déclaration : 
h1 {font-size: 1.2em; line-height: 2em}


Je suis au pif très proche du résultat voulu sauf quand je rétrécis un peu l'écran et que le h1 prend plusieurs lignes l'interligne est trop grand.

Je me demande s'il existe une solution quel que soit le nombre de lignes occupées par h1 donc avec un line-height moins important.

Et pour ne pas mourir idiot j'aimerais connaitre et comprendre la formule qui permet de connaitre la hauteur à partir de font-size et line-heigth...
Modifié par boteha_2 (29 May 2023 - 19:17)
comme çà çà fonctionne que ton h1 soit sur une ou 2 lignes

p {font-size: 1rem; line-height: 1.2rem; margin: 0}
h1 {font-size: 1.2rem; line-height: 1.2rem; margin: 0}


upload/1685383163-47649-capturedaeacran2023-05-29aa19.png
Bonjour drphilgood,

Ah oui, très intéressant.

L'unité rem (root em)
Le fonctionnement de rem est le même que celui de em, à l'exception qu'il n'est pas relatif à la taille de texte de son parent, mais à la taille de texte de la racine (d'où "root em").

Cela marche parfaitement dans le codepen

Afin d'aérer un peu le h1 je l'ai doté d'une margin-bottom de 1.2rem, ainsi que les p.

Si margin-top il y a décalage d'une ligne quand le h1 se trouve en haut de colonne.

Merci beaucoup, comme d'habitude j'attends un peu avant de cocher Résolu.
Je reprend

1 em est égale à la taille originel de ta police quand elle à été crée, toutes les police ne font pas la même taille.

- Je me demande s'il existe une solution quel que soit le nombre de lignes occupées par h1 donc avec un line-height moins important.

Oui, avec le magique "pixelruler" tu vire line-height de h1, tu ne le laisse que sur <p>, tu va regarder combien mesure l'interligne de <p> en pixel avec pixelruler, et tu va l'appliquer sur la marge basse de h1.
Dans ton exemple ça donnerais ceci.


body {font-size: medium}

@media screen and (min-width: 800px)
{
body {font-size: small}
}

div {column-count: 2}

p {
font-size: 1em;
line-height: 1.2em;
margin: 0;
}
h1 {
font-size: 1.2em;
/*line-height: 2em;*/
margin: 0 0 2px 0;
}


Ici tu va trouver le calcule de line-height

https://www.zonecss.fr/proprietes-css/line-height-css.html
font-size donne la taille du caractere et line-height la hauteur de la ligne
Modifié par drphilgood (29 May 2023 - 21:24)
Bonjour Uniuc,

C'est une autre approche intéressante, merci.

drphilgood a écrit :
font-size donne la taille du caractere et line-height la hauteur de la ligne


D'accord, j'y reviendrai plus tard.

Autrement, j'ai fait une découverte qui m'a étonné.

body {font-size: small}

1rem = taille de la police avant ou après cette déclaration ?
Il semble que ce soit AVANT cette déclaration.

De ce fait 1em est plus petit que 1rem.

Pour convertir 1rem à la taille de 1em il faudrait connaître la facteur de rétrécissement de small en supposant qu'il soit le même sur tous les navigateurs.

Avez-vous des informations à ce sujet ?
@drphilgood
Non en fait ce n'est pas aussi simple.

Si tu as un caractère, de 13px

font-size: 13px;

Sa valeur réel seras de 15.2px.
Le rem.

Il fonctionne comme un em, mais il se base sur l’nuitée de mesure définit dans le root.
Pour le mémoriser: Relative(root, racine) em
rem

Si tu ne définis pas d'unités de mesure dans le root, tu utilise em.
root = racine
<html>= racine

si j'ai une page avec dans le css sur html une déclaration font-size 10px

html{
        font-size: 10px;
    }


Tout les rem que j'utiliserais par la suite se baserons sur 1rem = 10px

[EDIT] L'histoire du small je l'avais zappé, et bien ça fonctionne comme em, si ma police fait 10px en initial, le small appliqueras une valeur en dessous de 10px, le coef de calcule en %, je ne le connais pas, mais ça doit pouvoir se trouver.
Modifié par uniuc (29 May 2023 - 22:44)
Modérateur
Bonjour,

Si l'on veut que le line-height du h1 soit 2 fois le line-height du p :

:root {--lineHeightP: 1.2; --fontSizeH1: 1.2;}
p {font-size: 1.2em; line-height: calc(1em * var(--lineHeightP));}
h1 {font-size: calc(1em * var(--fontSizeH1)); line-height: calc(1em * 2 * var(--lineHeightP) / var(--fontSizeH1));}

La valeur du line-height du h1 en px sera alors 2 fois la valeur du line-height du p en px.

Vérification : supposons que le parent du p et du h1 ait une font-size de 1rem=16px.
calc(--lineHeightP * 1em) vaudra 19,2 px
calc(--fontSizeH1 * 1em) vaudra 19,2 px
calc(1em * 2 * var(--lineHeightP) / var(--fontSizeH1)) vaudra 19,2*2*1,2/1.2=38.4px (qui est bien 2 fois la valeur du line-height du p). Il faut faire attention ici : le 1em du h1 vaut 19,2 px et non pas 16px.

Et quand par hasard --lineHeightP et -fontSizeH1 ont la même valeur 1.2, on peut se contenter de :

p {font-size: 1.2em; line-height: 1.2em;}
h1 {font-size: 1.2em; line-height: 2em;}

C'est ce que tu avais découvert expérimentalement.

Si maintenant l'effet visuel obtenu quand le h1 est affiché sur plusieurs lignes ne te convient pas, il faudrait me semble-t-il changer les spécifications du départ (qui était que le line-height du h1 soit 2 fois le line-height du p). Smiley cligne

Une solution pourrait être un line-height du h1 plus petit (par exemple 1.2em) couplé avec un padding sur le h1 qui rajouterait de l'espace pour que la hauteur totale du h1 soit de 2em si ce h1 ne faisait qu'une ligne. Ceci veut dire qu'un padding de 0.4em en haut et bas ferait l'affaire. On obtient finalement :

p {font-size: 1.2em; line-height: 1.2em;}
h1 {font-size: 1.2em; line-height: 1.2em; padding: 0.4em 0; margin: 0;}

Attention aux éventuels margin et padding sur le p qui pourraient modifier le résultat attendu.

Amicalement,
Modifié par parsimonhi (30 May 2023 - 07:53)
Bonjour,

Pour le facteur de rétrécissement de SMALL j'ai trouvé cela.

Si j'ai compris.

medium : 1em = 1rem
small : 1em = 1rem x 8 / 9

En supposant bien sûr que le font-size ne soit pas affecté par un parent.
Modifié par boteha_2 (31 May 2023 - 22:07)
Bonjour,

Sans passer les REM, avec EM :

p {font-size: 1em; line-height: 1.2em; margin: 0 0 1.2em}
h1 {font-size: 1.2em; line-height: 1em; margin: 0 0 1em}


De cette manière la hauteur d'une ligne p est égale à celle d'une ligne h1.

Et la marge basse de p à 1.2em est égale à la marge basse de h1 à 1em.

Cela fonctionne que body soit small, medium ou tout autre mot-clé.

Voir le codepen.
Bonjour,

Sur le codepen j'ai introduit une difficulté supplémentaire avec des images flottantes à gauche et pour chaque image un texte de légende qui habille l'image.

Quand l'image est moins haute que le texte de légende la hauteur du container est déterminée par le line-height du texte, tour va bien.

Par contre, quand l'image est plus haute, c'est sa hauteur en px qui détermine la hauteur du container et on perd l'alignement des lignes entre les deux colonnes.

Je peux repérer les images trop hautes, il n'y en pas des tonnes.
Le plus simple serait d'ajouter un texte fictif en visibility: hidden mais c'est assez horrible sur le plan sémantique, un peu comme les spacers du siècle dernier.

Voyez-vous autre chose mais qui ne soit pas une usine à gaz en JS ?
Bonjour Dave-Hiock ,

Merci de ton lien, une bonne compréhension de line-height et vertical-align est indispensable pour les boites inline.

Par contre je ne comprends pas ta remarque sur le %, je ne vois pas ce que cela change à mon problème avec mes hauteurs d'images en px et de ligne en em.
Bonjour,

Je pense avoir trouvé une solution qui faute d'être élégante n'est pas trop difficile à mettre en œuvre.

Quand l'image est plus haute que le texte, j'estime le nombre minimal de lignes qu'il faudrait pour que le texte soit plus haut que l'image et j'applique au container une hauteur qui est égale à ce nombre de lignes multiplié par le line-height de 1.2 em.

// 5 lignes
.cinq {min-height: 6em}
// 6 lignes
.six {min-height: 7.2em}


Voir le codepen, cela semble marcher.
Modifié par boteha_2 (17 Jun 2023 - 21:02)
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à