Typographie CSS

Comment travailler avec la typographie en CSS

Dans cet article, je parlerai de la mise en forme du texte avec CSS, en utilisant les propriétés suivantes:

  • text-transform
  • text-decoration
  • text-align
  • vertical-align
  • line-height
  • text-indent
  • text-align-last
  • word-spacing
  • letter-spacing
  • text-shadow
  • white-space
  • tab-size
  • writing-mode
  • hyphens
  • text-orientation
  • direction
  • line-break
  • word-break
  • overflow-wrap

text-transform

Cette propriété peut transformer la casse d'un élément.

Il existe 4 valeurs valides:

  • capitalizepour mettre en majuscule la première lettre de chaque mot
  • uppercasepour mettre tout le texte en majuscule
  • lowercasepour minuscules tout le texte
  • nonepour désactiver la transformation du texte, utilisé pour éviter d'hériter de la propriété

Exemple:

p {
  text-transform: uppercase;
}

text-decoration

Cette propriété permet d'ajouter des décorations au texte, y compris

  • underline
  • overline
  • line-through
  • blink
  • none

Exemple:

p {
  text-decoration: underline;
}

Vous pouvez également définir le style de la décoration et la couleur.

Exemple:

p {
  text-decoration: underline dashed yellow;
}

Les valeurs de style valides sontsolid,double,dotted,dashed,wavy.

Vous pouvez tout faire sur une seule ligne ou utiliser les propriétés spécifiques:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

Exemple:

p {
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-style: dashed;
}

text-align

Par défaut, le texte align a lestartvaleur, ce qui signifie que le texte commence au «début», origine 0, 0 de la boîte qui le contient. Cela signifie en haut à gauche dans les langues de gauche à droite et en haut à droite dans les langues de droite à gauche.

Les valeurs possibles sontstart,end,left,right,center,justify(agréable d'avoir un espacement cohérent aux extrémités de la ligne):

p {
  text-align: right;
}

vertical-align

Détermine comment les éléments en ligne sont alignés verticalement.

Nous avons plusieurs valeurs pour cette propriété. Tout d'abord, nous pouvons attribuer une valeur de longueur ou de pourcentage. Ceux-ci sont utilisés pour aligner le texte dans une position supérieure ou inférieure (en utilisant des valeurs négatives) à la ligne de base de l'élément parent.

Ensuite, nous avons les mots-clés:

  • baseline(valeur par défaut), aligne la ligne de base sur la ligne de base de l'élément parent
  • subrend un élément en indice, simulant lesubRésultat de l'élément HTML
  • superrend un élément en exposant, simulant lesupRésultat de l'élément HTML
  • topaligner le haut de l'élément sur le haut de la ligne
  • text-topaligner le haut de l'élément sur le haut de la police de l'élément parent
  • middlealigner le milieu de l'élément sur le milieu de la ligne du parent
  • bottomaligner le bas de l'élément sur le bas de la ligne
  • text-bottomaligner le bas de l'élément sur le bas de la police de l'élément parent

line-height

Cela vous permet de modifier la hauteur d'une ligne. Chaque ligne de texte a une certaine hauteur de police, mais il y a alors un espacement supplémentaire verticalement entre les lignes. C'est la hauteur de la ligne:

p {
  line-height: 0.9rem;
}

text-indent

Mettez en retrait la première ligne d'un paragraphe d'une longueur définie ou d'un pourcentage de la largeur du paragraphe:

p {
  text-indent: -10px;
}

text-align-last

Par défaut, la dernière ligne d'un paragraphe est alignée après letext-alignévaluer. Utilisez cette propriété pour modifier ce comportement:

p {
  text-align-last: right;
}

word-spacing

Modifie l'espacement entre chaque mot.

Vous pouvez utiliser lenormalmot-clé, pour réinitialiser les valeurs héritées ou utiliser une valeur de longueur:

p {
  word-spacing: 2px;
}

span { word-spacing: -0.2em; }

letter-spacing

Modifie l'espacement entre chaque lettre.

Vous pouvez utiliser lenormalmot-clé, pour réinitialiser les valeurs héritées ou utiliser une valeur de longueur:

p {
  letter-spacing: 0.2px;
}

span { letter-spacing: -0.2em; }

text-shadow

Appliquez une ombre au texte. Par défaut, le texte a maintenant une ombre.

Cette propriété accepte une couleur facultative et un ensemble de valeurs qui définissent

  • le décalage X de l'ombre par rapport au texte
  • le décalage Y de l'ombre par rapport au texte
  • le rayon de flou

Si la couleur n'est pas spécifiée, l'ombre utilisera la couleur du texte.

Exemples:

p {
  text-shadow: 0.2px 2px;
}

span { text-shadow: yellow 0.2px 2px 3px; }

white-space

Définit la manière dont CSS gère l'espace blanc, les nouvelles lignes et les tabulations à l'intérieur d'un élément.

Les valeurs valides qui réduisent l'espace blanc sont:

  • normalréduit l'espace blanc. Ajoute de nouvelles lignes si nécessaire lorsque le texte atteint la fin du conteneur
  • nowrapréduit l'espace blanc. N'ajoute pas de nouvelle ligne lorsque le texte atteint la fin du conteneur et supprime tout saut de ligne ajouté au texte
  • pre-lineréduit l'espace blanc. Ajoute de nouvelles lignes si nécessaire lorsque le texte atteint la fin du conteneur

Les valeurs valides qui préservent les espaces blancs sont:

  • prepréserve les espaces blancs. N'ajoute pas de nouvelle ligne lorsque le texte atteint la fin du conteneur, mais préserve le saut de ligne ajouté au texte
  • pre-wrappréserve les espaces blancs. Ajoute de nouvelles lignes si nécessaire lorsque le texte atteint la fin du conteneur

tab-size

Définit la largeur du caractère de tabulation. Par défaut, il est 8, et vous pouvez définir une valeur entière qui définit les espaces de caractères qu'elle prend, ou une valeur de longueur:

p {
  tab-size: 2;
}

span { tab-size: 4px; }

writing-mode

Définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.

Les valeurs que vous pouvez utiliser sont

  • horizontal-tb(défaut)
  • vertical-rlle contenu est disposé verticalement. Les nouvelles lignes sont placées à gauche de la précédente
  • vertical-lrle contenu est disposé verticalement. Les nouvelles lignes sont placées à droite de la précédente

hyphens

Détermine si les traits d'union doivent être ajoutés automatiquement lors du passage à une nouvelle ligne.

Les valeurs valides sont

  • none(défaut)
  • manualajouter un trait d'union uniquement lorsqu'il y a déjà un trait d'union visible ou un trait d'union masqué (un caractère spécial)
  • autoajoutez des traits d'union lorsque déterminé, le texte peut avoir un trait d'union.

text-orientation

Lorsquewriting-modeest en mode vertical, détermine l'orientation du texte.

Les valeurs valides sont

  • mixedest la valeur par défaut, et si une langue est verticale (comme le japonais), elle conserve cette orientation, tout en faisant pivoter le texte écrit dans les langues occidentales
  • uprightfait que tout le texte soit orienté verticalement
  • sidewaysrend tout le texte orienté horizontalement

direction

Définit la direction du texte. Les valeurs valides sontltretrtl:

p {
  direction: rtl;
}

word-break

Cette propriété spécifie comment couper les lignes dans les mots.

  • normal(par défaut) signifie que le texte n'est interrompu qu'entre les mots, pas à l'intérieur d'un mot
  • break-allle navigateur peut casser un mot (mais aucun trait d'union n'est ajouté)
  • keep-allsupprimer l'emballage souple. Principalement utilisé pour le texte CJK (chinois / japonais / coréen).

En parlant de texte CJK, la propriétéline-breakest utilisé pour déterminer la rupture des lignes de texte. Je ne suis pas un expert de ces langues, donc j'éviterai de le couvrir.

overflow-wrap

Si un mot est trop long pour tenir sur une ligne, il peut déborder en dehors du conteneur.

Cette propriété est également connue sous le nom deword-wrap, bien que ce ne soit pas standard (mais fonctionne toujours comme un alias)

Ceci est le comportement par défaut (overflow-wrap: normal;).

On peut utiliser:

p {
  overflow-wrap: break-word;
}

pour le casser à la longueur exacte de la ligne, ou

p {
  overflow-wrap: anywhere;
}

si le navigateur voit qu'il y a une opportunité de soft wrap quelque part plus tôt. Aucun trait d'union n'est ajouté, dans tous les cas.

Cette propriété est très similaire àword-break. Nous pourrions vouloir choisir celui-ci sur les langues occidentales,word-breaka un traitement spécial pour les langues non occidentales.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: