Comment apprivoiser la hauteur de la ligne dans CSS

L'attribut line-height dans CSS est probablement l'un des attributs les plus mal compris mais les plus couramment utilisés. En tant que concepteurs et développeurs, lorsque nous pensons à line-height , nous pouvons penser au concept de «diriger» dans les conceptions imprimées - avec intérêt, ce terme vient en fait de placer des blocs de plomb entre les lignes de composition.

Bien que l'espacement des lignes et line-height soient similaires, il existe des différences importantes. Pour comprendre ces différences, nous devons d'abord en savoir plus sur la composition.

Aperçu des termes de composition

Dans la conception traditionnelle des polices occidentales, une ligne de texte se compose de plusieurs parties:

• Baseline: Il s'agit de la ligne imaginaire où se trouve le texte. Lorsque vous écrivez sur un cahier grillé, la ligne de base est la ligne où vous écrivez.
• Descender: Cette ligne est située sous la ligne de base. Le bas de certains caractères (tels que les lettres minuscules G, J, Q, Y et P) touchera cette ligne.
• X-Height: Il s'agit de la hauteur de la lettre minuscule normale X dans le texte. En règle générale, il s'agit de la hauteur des autres lettres minuscules, bien que certaines lettres puissent avoir des parties au-dessus de la hauteur X. À toutes fins utiles, il représente la hauteur perçue des lettres minuscules.
• Cap-Height: C'est la hauteur de la plupart des majuscules dans une ligne de texte donnée.
• ASCENS: Une ligne qui apparaît souvent au-dessus de la hauteur de capital, certains caractères (tels que la lettre minuscule H ou B) peuvent dépasser la hauteur de capital normale.

Chaque partie du texte décrit ci-dessus est inhérente à la police elle-même. Ces pièces sont prises en compte lors de la conception des polices; Cependant, il y a certaines parties de la typographie qui sont décidées par la dactylo (comme vous et moi!) plutôt que par le designer. L'un d'eux est la tête.

La direction est définie comme la distance entre deux lignes de base dans un ensemble de polices.

Les développeurs de CSS pourraient penser: "OK, l'espacement des lignes est line-height , allons-y." Bien que les deux soient liés, il existe des différences dans certains aspects très importants.

Créons un document vide et ajoutons une "réinitialisation CSS" classique:

 * {
  marge: 0;
  rembourrage: 0;
}

Cela supprimera les marges et les marges intérieures de chaque élément.

Nous utiliserons également Lato de Google Fonts comme famille de polices.

Nous avons besoin de contenu, alors créons un<p></p> Des balises qui contiennent du texte et définissent line-height à une très grande valeur, comme 300px. Le résultat est une ligne de texte, avec une quantité étonnamment importante d'espace au-dessus et en dessous de cette ligne de texte.

Lorsque le navigateur rencontre la propriété line-height , tout ce qu'il fait est de prendre une ligne de texte et de la placer au milieu d' une "boîte de ligne" dont la hauteur correspond à la line-height de l'élément. Au lieu de définir l'espacement de ligne de la police, nous obtenons un effet similaire à l'ajout de rembourrage des deux côtés de la boîte de ligne.

Comme indiqué ci-dessus, le cadre de ligne entoure une ligne de texte et l'espacement de ligne est créé en utilisant l'espace en dessous et au-dessus de la ligne de texte suivante. Cela signifie que pour chaque élément de texte de la page, dans un bloc de texte spécifique, il y aura la moitié de l'espacement de ligne au-dessus de la première ligne et en dessous de la dernière ligne de texte.

Ce qui est encore plus surprenant, c'est que la définition explicite line-height et font-size de la même valeur sur un élément laisse un espace supplémentaire au-dessus et en dessous du texte. Nous pouvons le voir en ajoutant de la couleur d'arrière-plan à l'élément.

En effet, même si font-size est définie sur 32px, la taille réelle du texte est plus petite que cette valeur due à l'espacement généré.

Laissez CSS gérer la hauteur de ligne comme l'espacement des lignes

Si nous voulons que CSS utilise un style de typographie plus traditionnel au lieu d'une boîte de ligne, nous voulons que le texte unique n'a pas d'espace au-dessus ou en dessous - mais permettez aux éléments multi-lignes de conserver leur valeur line-height complète.

Avec un peu d'effort, CSS peut comprendre l'espacement des lignes. Michael Taranto a résolu ce problème en publiant un outil appelé Basekick. Il le fait en appliquant une marge négative au ::before le pseudo-élément et en appliquant translateY à l'élément lui-même. Le résultat final est qu'il n'y a pas d'espace supplémentaire autour d'une ligne de texte.

La dernière version de la formule BaseKick peut être trouvée dans le code source du système de conception de tresse dans Seek. Dans l'exemple ci-dessous, nous écrivons un mixin sass pour faire le levage lourd, mais la même formule peut également être utilisée avec JavaScript, moins, PostCSS Mixin ou tout autre outil qui fournit de telles capacités mathématiques.

 @Function CalculateTypeOffset ($ lh, $ Fontize, $ DescenderHeightScale) {
  $ lineHeightScale: $ lh / $ Fontize;
  @return ($ lineHeightScale - 1) / 2 $ DescenderHeightScale;
}

@Mixin BaseKick ($ TypeSizEModificier, $ BaseFontize, $ DescenderheightScale, $ Typerowspan, $ Gridrowheight, $ capheight) {
  $ FonTSize: $ typeiZemodifier * $ BaseFontize;
  $ lineheight: $ Typerowspan * $ Gridrowheight;
  $ TypeOffset: CalculaTeTypeOffset ($ lineheight, $ FonTSize, $ DescenderHeightScale);
  $ topspace: $ lineheight - $ capheight * $ Fontize;
  $ heightcorrection: 0;

  @if $ topspace> $ gridrowheight {
    $ heightcorrection: $ topspace - ($ topspace% $ gridrowheight);
  }

  $ prévention: 1;

  FONT-SIZE: # {$ FontSize} PX;
  line-height: # {$ lineheight} px;
  transform: tradlatey (# {$ typeoffset} em);
  Padding-top: $ prévention;

  &::avant {
    contenu: "";
    margin-top: # {- ($ heightcorrection $ prévenue)} px;
    Affichage: bloc;
    hauteur: 0;
  }
}

À première vue, ce code doit ressembler à de nombreux numéros magiques assemblés. Cependant, en le considérant dans le contexte d'un système particulier, il peut être décomposé. Jetons un coup d'œil à ce que nous devons savoir:

• $baseFontSize : Il s'agit de la taille normale de la police autour duquel tout le reste de notre système gérera. Nous utiliserons 16px comme valeur par défaut.
• $typeSizeModifier : Il s'agit d'un multiplicateur utilisé avec la taille de la police de référence pour déterminer les règles de taille de police. Par exemple, une valeur de 2 est utilisée en conjonction avec notre taille de police de référence 16px, ce qui nous donnera font-size: 32px .
• $descenderHeightScale : c'est la hauteur de la ligne de naufrage de police exprimée en rapport. Pour Lato, cela semble être d'environ 0,11.
• $capHeight : Il s'agit de la hauteur de capital spécifique de la police exprimée en rapport. Pour Lato, c'est environ 0,75.
• $gridRowHeight : les dispositions reposent généralement sur le rythme vertical par défaut pour créer une expérience de lecture bonne et cohérente. Par exemple, tous les éléments d'une page peuvent être espacés en multiples de 4 ou 5 pixels. Nous utiliserons 4 comme valeur car il peut être facilement divisé par notre $baseFontSize de 16px.
• $typeRowSpan : Similaire à $typeSizeModifier , cette variable est utilisée comme multiplicateur et est utilisée avec la hauteur de la ligne de grille pour déterminer la valeur de hauteur de ligne de la règle. Si notre hauteur de ligne de grille par défaut est de 4 et que notre portée de ligne de type est de 8, nous obtenons line-height: 32px .

Maintenant, nous pouvons remplacer ces nombres dans la formule BaseKick ci-dessus (à l'aide des fonctions SCSS et du mixin), ce qui nous donnera les résultats suivants.

C'est exactement ce que nous voulons. Pour tout ensemble d'éléments de blocs de texte sans marges, ces deux éléments doivent être proches les uns des autres. De cette façon, toutes les marges fixées entre les deux éléments seront parfaites au pixel , car elles ne seront pas en conflit avec l'espacement de la ligne de ligne.

Optimiser le code

Plutôt que de mettre tout votre code dans un seul mixin SCSS, organisez-le mieux. Si nous pensons du point de vue du système, nous remarquerons que nous avons affaire à trois types de variables:

La considération de ces aspects nous aidera à développer notre système plus facilement. Voyons chaque groupe tour à tour.

Premièrement, les variables au niveau du système peuvent être définies à l'échelle mondiale, car ces variables sont peu susceptibles de changer pendant le processus de projet. Cela réduit le nombre de variables dans notre mélange principal à quatre:

 $ BaseFontsize: 16;
$ Gridrowheight: 4;

@Mixin BaseKick ($ TypeSizEModificier, $ Typerowspan, $ DescenderheightScale, $ capheight) {
  / * Identique à ci-dessus * /
}

Nous savons également que les variables au niveau de la police sont spécifiques à leur famille de polices donnée. Cela signifie qu'il est facile de créer des mixins d'ordre supérieur pour les définir sur les constantes:

 @Mixin Lato ($ TypeSizEModifier, $ Typerowspan) {
  $ latodesderheightscale: 0,11;
  $ latocapheight: 0,75;

  @include Basekick ($ TypeIzEModificier, $ Typerowspan, $ latodescencesheightscale, $ latocapheight);
  Font-Family: Lato;
}

Maintenant, sur la base des règles, nous pouvons facilement appeler Lato Mixin:

 .Oise - médium {
  @include lato (2, 10);
}

Cette sortie nous donne la règle pour utiliser les polices Lato avec une taille de police de 32px, une hauteur de ligne de 40px et toutes les conversions et marges connexes. Cela nous permet d'écrire des règles de style simple et de profiter de la cohérence de la grille à laquelle les concepteurs sont habitués lors de l'utilisation d'outils comme Sketch et Figma.

En conséquence, nous pouvons facilement créer des conceptions Web parfaites sur les pixels. Veuillez consulter l'exemple ci-dessous comment s'aligner bien avec notre grille de base 4px. (Vous devrez peut-être zoomer pour voir la grille.)

Cela nous donne une capacité unique lors de la création de dispositions de sites Web: pour la première fois, nous pouvons vraiment créer des pages parfaites de pixels. En combinant cette technique avec certains composants de mise en page de base, nous pouvons commencer à créer des pages comme nous le faisons dans les outils de conception.

Se diriger vers la normalisation

Bien qu'il fasse des efforts pour que CSS se comporte plus comme nos outils de conception, il peut y avoir de bonnes nouvelles à l'avenir. Il a été proposé d'ajouter une fonctionnalité supplémentaire à la spécification CSS pour changer ce comportement localement. L'état actuel de la proposition est qu'une propriété supplémentaire similaire à line-height-trim ou leading-trim sera ajoutée à l'élément texte.

L'une des choses incroyables sur les langues en ligne est que nous avons tous la capacité de participer. Si cela ressemble à une fonctionnalité que vous souhaitez faire partie de votre CSS, vous pouvez participer et ajouter des commentaires au sujet afin que votre voix soit entendue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!