Maison > interface Web > tutoriel CSS > Propriétés CSS pour contrôler la typographie Web

Propriétés CSS pour contrôler la typographie Web

Joseph Gordon-Levitt
Libérer: 2025-02-23 10:12:10
original
166 Les gens l'ont consulté

Propriétés CSS pour contrôler la typographie Web

Les plats clés

  • Les propriétés CSS permettent une manipulation précise de la typographie Web, reflétant la riche tradition de la typographie imprimée tout en s'adaptant aux aspects uniques des médias Web.
  • La propriété «Text-Transform» dans CSS permet la manipulation du boîtier des lettres, offrant des options telles que «Capitalize», «Uppercase», «minuscules» et «pleine largeur», chacun servant différents besoins de conception.
  • La gestion de l'espace blanc dans les documents HTML peut être contrôlé via la propriété `` White-Space ', avec des valeurs comme `` normal' ', `pré`,` pré-wrap »,` `pré-ligne' et« Nowrap »pour gérer différents scénarios de formatage.
  • Pour contrôler les ruptures de ligne dans les mots, CSS fournit la propriété «Word-Wrap» ou «Overflow-Wrap» avec des options «normales» et «brevet-mot», aux côtés de la propriété «Hyphens» pour le contrôle des traits de traits.
  • CSS propose des propriétés «d'espacement des mots» et «d'espacement des lettres» pour ajuster l'espace entre les mots et les lettres, améliorant la lisibilité et l'attrait esthétique du texte.
  • L'alignement et l'indentation du texte avancé sont gérés à travers des propriétés comme «Text-Align», «Text-Align-Last» et «Text-Indent», donnant aux concepteurs un contrôle à grain fin sur la présentation du texte.

La typographie Web a l'avantage de s'appuyer sur la richesse des connaissances appartenant à la tradition séculaire de la typographie imprimée. De même, cette tradition comporte des normes de meilleures pratiques et d'excellence que la typographie Web est appelée à vivre.

Cependant, le Web en tant que moyen de communication est livré avec ses propres particularités. À tel point que nous sommes amenés à penser qu'un passage transparent de l'impression à la typographie Web est un appel difficile. Dans son livre sur la typographie Web, p.110, Jason Santa Maria explique:

Les livres imprimés sont un format statique. De la disposition initiale du concepteur du livre à son voyage au lit de presse, à l'entrepôt, à la bibliothèque et à vos mains, la sortie de ce livre ne change pas. Il est livré exactement comme le concepteur l'a conçu.

En ce qui concerne le Web, le même site peut être vécu très différemment en fonction d'un certain nombre de facteurs, par exemple, différents types d'appareils, des résolutions d'écran, des paramètres de navigateur personnalisés, etc. Certains de ces facteurs, comme Jason plus loin plus loin explique…

… peut nous donner l'impression que le type est trop petit, d'autres peuvent nous faire manquer quelque chose d'important juste hors écran, et d'autres peuvent rendre presque impossible de visualiser la page Web.

Cela dit, il est également vrai que «le Web est le meilleur endroit pour le texte», comme le prétend Tim Brown dans son discours sur la typographie universelle. Le texte sur Internet peut être «recherché, copié, traduit, lié à d'autres documents, il peut être imprimé, il est pratique, il est accessible».

La flexibilité du Web ne signifie pas de renoncer au contrôle. Au contraire, en tant que concepteurs de sites Web, nous devons toujours faire des choix éclairés sur tout ce que nous mettons dans notre travail, et le texte ne fait pas exception. La façon dont les éléments de texte sont présentés, leur couleur, leur taille, leur police, tout cela et plus communiquent le message et la marque de base d'un site Web.

pour manipuler l'apparence du texte sur le Web, notre principal outil de choix est CSS.

Les propriétés CSS que je vais présenter dans cet article se trouvent dans la spécification du module de texte CSS.

Ce module décrit les contrôles de composition de CSS; c'est-à-dire le
Caractéristiques de CSS qui contrôlent la traduction du texte source en
Texte formaté, enveloppé de ligne.

En d'autres termes, le module de texte CSS traite de l'affichage des caractères et des mots dans le navigateur, et comment ils sont espacés, alignés, ameurés, etc., en utilisant CSS.

Ce qui constitue une unité de base de texte ou de mot, ainsi que lorsque exactement un mot est autorisé à se briser dans un morceau de texte donné, dépend considérablement des règles de la langue utilisée sur un site Web. Pour cette raison, il est important de déclarer ces informations dans le document HTML (généralement dans l'attribut Lang de l'élément ).

Ici, je ne discuterai pas des deux sujets suivants:

  • polices, c'est-à-dire les représentations visuelles des caractères, c'est-à-dire les glyphes et leurs propriétés;
  • Caractéristiques du CSS liées à la décoration de texte, telles que des soulignements, des ombres de texte et des marques d'emphase.

Si vous êtes curieux, vous trouverez la dernière documentation sur les propriétés des polices et de la décoration de texte dans le module des polices CSS niveau 3 et le module de décoration de texte CSS respectivement.

manipuler le cas de lettre

Il peut y avoir des moments où les éléments de texte doivent être affichés en majuscules, par exemple le nom et le nom de famille. CSS nous donne le contrôle sur le boîtier des lettres avec la propriété de transformation de texte.

La valeur par défaut de la propriété de transformation de texte n'est aucune, c'est-à-dire qu'aucun effet sur le boîtier des lettres n'est appliqué.

La valeur de capitalisation

Si vous souhaitez que la première lettre de chaque mot soit affichée en majuscules tout en quittant l'apparence de toutes les autres lettres non affectées (quel que soit leur cas dans le document HTML), en utilisant la valeur capitalisée, cela y parviendra:

le html:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

le CSS:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

Remarquez comment Capitalize ne suit pas les conventions de cas de titre: en fait, toutes les premières lettres de l'exemple ci-dessus semblent capitalisées, y compris le mot «in». Les auteurs qui ont l'intention de suivre une convention littéraire concernant les titres devront manipuler manuellement les lettres dans le texte source.

La valeur majuscules

Si votre objectif est d'avoir toutes les lettres affichées en majuscules, peu importe leur cas dans le document HTML, la majuscule est la valeur appropriée à utiliser:

le html:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

le CSS:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

La valeur minuscule

L'utilisation de la valeur en minuscules entraînera une affichage de toutes les lettres en minuscules. Naturellement, cela n'affectera pas l'apparence de lettres qui sont déjà en minuscules dans le document source d'origine.

le html:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

le CSS:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Propriétés CSS pour contrôler la typographie Web

la valeur pleine largeur

La spécification a ajouté une nouvelle valeur, pleine largeur. Cette valeur contraint le caractère à apparaître à l'intérieur d'un carré comme s'il s'agissait d'un caractère idéographique, par exemple, japonais, chinois, etc.

Tous les caractères n'ont pas une forme de largeur complète correspondante, auquel cas les caractères ne seront pas affectés par la valeur pleine largeur.

le html:

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
le CSS:

<span>h2 {
</span>  <span>text-transform: lowercase;
</span><span>}</span>
Copier après la connexion
Voici à quoi ressemblent les personnages dans Firefox lorsque la pleine largeur est appliquée:

Propriétés CSS pour contrôler la typographie Web

Remarques supplémentaires

La prise en charge du navigateur pour la propriété de transformation de texte est excellente. En fait, tous les principaux navigateurs le soutiennent.

La seule exception est la valeur pleine largeur, qui ne fonctionne actuellement que dans Firefox. Peut-être compréhensible, étant donné la probabilité que la pleine largeur risque d'être abandonnée au stade de recommandation des candidats de la spécification

De plus, j'ai remarqué une petite incohérence entre Firefox (v.39) et d'autres navigateurs majeurs pour rendre la valeur de capitalisation sur un mot en trait d'union.

Voici à quoi il ressemble dans Firefox:

Propriétés CSS pour contrôler la typographie Web

Remarquez comment la première lettre après un trait d'union n'est pas capitalisée. D'un autre côté, ci-dessous est le même texte affiché dans Chrome:

Propriétés CSS pour contrôler la typographie Web

Dans ce cas, les lettres qui suivent un caractéristique de trait d'union ne font pas exception; Ils sont également affichés avec une majuscule. J'ai observé ce même comportement dans la dernière version de tous les autres navigateurs majeurs, sauf, comme indiqué ci-dessus, Firefox.

Enfin, faites attention à la cascade! Si vous définissez la propriété de transformation de texte sur un élément de conteneur, sa valeur est héritée par tous ses éléments enfants. Pour éviter les résultats indésirables, réinitialisez la valeur de la propriété de transformation de texte des éléments de l'enfant à aucun.

Affichez une démo pour les valeurs de propriété de transformation de texte.

comment gérer l'espace blanc

Lorsque vous appuyez sur la touche Tab, la touche d'espace ou obligez un peu de texte à passer à la ligne suivante (en utilisant la touche Entrez ou la balise
), vous créez un espace blanc dans votre source document.

Par défaut, les navigateurs effondrent les séquences d'espace blanc dans un seul espace, les pauses de ligne sont supprimées et les lignes de pellicule pour s'adapter à leur conteneur. Cela nous est pratique car il nous permet de mettre en place et de séparer des morceaux de texte pour garder notre document source lisible et maintenu sans avoir un impact sur la façon dont le contenu est affiché dans le navigateur.

Cependant, que se passe-t-il si ce n'est pas votre objectif? Disons, par exemple, que vous souhaitez préserver l'espace blanc que vous créez dans le document HTML. Un scénario commun est lorsque vous écrivez un texte conçu pour être affiché comme un extrait de code correctement en retrait. Ou, vous souhaitez qu'un texte soit affiché tous sur une seule ligne, sans se casser.

à de telles occasions, lorsque vous avez l'intention de remplacer le comportement par défaut du navigateur, la propriété d'espace blanc offre des options intéressantes.

Le mot-clé normal réinitialise le navigateur à son comportement par défaut: tout espace blanc supplémentaire est effondré en un seul caractère et les lignes enveloppent lorsqu'ils atteignent le bord de leur récipient.

la pré-valeur

Le mot clé Pre permet d'afficher du texte en préservant tous les espaces blancs et les nouvelles lignes forcées présentes dans le document source. Le texte ne se terminera pas dans une nouvelle ligne lors du débordement de son conteneur.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

Propriétés CSS pour contrôler la typographie Web

Si vous utilisez des onglets pour créer un espace blanc, vous pouvez contrôler leur taille avec la propriété de taille d'onglet en la définissant sur une valeur entière.

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

TAB-Size est une propriété avec une prise en charge incohérente du navigateur, mais si vous ne pouvez vraiment pas supporter la longueur de caractère de l'onglet par défaut, voici un polyfill pour couvrir toutes vos bases.

la valeur pré-wrap

Supposons que vous aimeriez l'espace blanc dans le document source à conserver dans l'affichage du navigateur. Cependant, vous aimeriez également laisser les lignes envelopper lorsqu'ils atteignent le bord de leur conteneur.

Le mot-clé pré-wrap vous aidera à atteindre le résultat souhaité.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Remarquez comment chaque ligne affichée dans le navigateur reflète les pauses forcées dans le code source, bien que le conteneur ait beaucoup de place pour s'adapter à plus de texte:

Propriétés CSS pour contrôler la typographie Web

Propriétés CSS pour contrôler la typographie Web

Cependant, rétrécissez l'écran de votre navigateur et vous remarquerez les lignes enveloppées pour s'adapter à leur conteneur.

Propriétés CSS pour contrôler la typographie Web

la valeur de pré-ligne

Une valeur intéressante finale pour la propriété White Space est pré-ligne. Dans la mesure où il effondre les séquences d'espace en un seul espace et permet un enveloppement, il se comporte comme normal. Cependant, lorsqu'un nouveau caractère de ligne ou une balise
est présent dans le document HTML, ceux-ci sont conservés dans l'affichage du navigateur.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

Propriétés CSS pour contrôler la typographie Web

Essayez la démo de codepen pour les mots clés pré, pré-wrap et pré-ligne.

La valeur Nowrapn

Nowrap est peut-être la valeur de l'espace blanc la plus connue. Votre conception nécessite-t-elle qu'un morceau de contenu en ligne ne soit jamais enveloppé? Utilisation de l'espace blanc: Nowrap; sur votre élément fait l'affaire.

Louis Lazaris pointe vers le cas d'utilisation suivant pour cette valeur.

Propriétés CSS pour contrôler la typographie Web

ci-dessus est un lien suivi du »symbole. Le fait que ce personnage tombe sur la ligne suivante, par exemple dans les dispositions Web fluides, ne serait pas souhaitable.

Propriétés CSS pour contrôler la typographie Web

Dans cette circonstances et similaires (pensez aux icônes, par exemple), la valeur Nowrap est assez pratique.

Un autre cas d'utilisation intéressant nous est apporté par Sara Soueidan dans la référence CORORPS CSS. Sara souligne que la propriété White Space peut être appliquée à tout contenu en ligne, y compris les images.

Il est utilisé avec la valeur NowPrap pour créer une liste horizontale d'images dans un élément de défilement, en empêchant les images de les emballer et de les forcer à être affichés sur une seule ligne à l'intérieur de leur conteneur.

J'ai agrandi cette suggestion en créant un carrousel jQuery de base en utilisant White Space: Nowrap. Voici la démo:

Voir le stylo à l'aide de la propriété Word-Wrap sur un carrousel d'image par SitePoint (@SitePoint) sur Codepen.

prendre le contrôle des ruptures de ligne à l'intérieur des mots

Parfois, il arrive qu'un design regarde car un long mot ne parvient pas à envelopper la ligne suivante, débordant ainsi son conteneur. Les URL longues ou certains longs mots générés par l'utilisateur dans les commentaires de blog sont des scénarios courants.

Les propriétés CSS suivantes sont conçues pour nous donner une certaine mesure de contrôle lors de la manipulation de longs mots sur le Web.

La propriété Word-Wrap / Overflow-Wrap

La propriété de débordement de débordement (précédemment appelé Word-Wrap, entièrement prise en charge et fonctionnant dans tous les principaux navigateurs pour des raisons hérités) prend effet si la propriété de l'espace blanc permet un emballage de texte. Il peut avoir l'une des deux valeurs: normal et rupture.

En utilisant la valeur normale, les mots se cassent aux points de rupture autorisés, par exemple, les espaces, les traits de tir, etc.

La valeur du mot de rupture permet des points de rupture arbitraires à l'intérieur d'un mot si la ligne ne peut pas être brisée autrement à un autre point acceptable.

L'image ci-dessous montre l'affichage d'un long mot qui déborde son conteneur:

Propriétés CSS pour contrôler la typographie Web

Définissons la propriété de débordement de débordement, et aussi, à des fins héritées, la propriété Word-Wrap, à la valeur de rupture:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

… et l'affichage du long mot est désormais divisé en plusieurs lignes pour s'adapter à l'espace disponible.

Propriétés CSS pour contrôler la typographie Web

La propriété Hyphens

Rompre les longs mots est bien bien. Cependant, le texte qui en résulte pourrait être déroutant pour les lecteurs. Une meilleure option consiste à faire du terrain de trait du mot lorsqu'elle se casse à la ligne suivante. De cette façon, il est immédiatement clair pour les lecteurs qu'ils regardent un mot enveloppé sur plusieurs lignes. Pour y parvenir, CSS propose la propriété Hyphens, que vous pouvez utiliser en conjonction avec Word-Wrap: Break-Word.

Plus précisément, la valeur automatique de la propriété Hyphens vous permet d'afficher un trait d'union au point où les mots entrent en ligne à la ligne suivante, si les règles linguistiques du document le permettent ou traitaient dans la source HTML. Pour que cela fonctionne, assurez-vous de définir l'attribut Lang à votre langue souhaitée dans le document HTML:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

Vous pouvez également empêcher l'affichage de caractères de trait d'union. Dans ce cas, définissez la propriété Hyphens sur aucun:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

De plus, vous pouvez afficher des caractères de trait d'union sur les ruptures de ligne dans les mots, si les mots sont tracés dans le balisage et que le texte s'enroule à la ligne suivante. Cela se fait avec une valeur de manuel:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

Propriétés CSS pour contrôler la typographie Web

Aidé par les préfixes des fournisseurs, la prise en charge du navigateur pour la propriété Hyphens est bonne sur tous les principaux navigateurs, mais non sans de légères incohérences. Les dernières versions de Chrome (V.44) et Opera (V.30) au moment de la rédaction ne prennent pas en charge la valeur de la propriété Auto.

Affichez les exemples ci-dessus sur Codepen

manipulant l'espace entre les mots et les lettres

Ce qui rend un texte plus ou moins lisible dépend souvent d'un certain nombre de facteurs. Dans certains cas, l'augmentation ou la diminution de l'espace entre chaque mot ou chaque lettre, c'est-à-dire suivi , apporte d'énormes améliorations.

CSS propose les propriétés d'espacement des mots et d'espacement des lettres pour contrôler respectivement l'apparence de l'espacement entre les mots et les lettres.

la propriété d'espacement des mots

Voici les valeurs de la propriété d'espacement des mots:

  • normal
  • pourcentage

Normal Affiche l'espace par défaut entre les lettres. La quantité d'espace dépend de la police utilisée ou du navigateur.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

vous permet d'ajouter un espacement inter-mots en plus de l'espacement par défaut défini par la police ou le navigateur.

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Le pourcentage fonctionne de la même manière que mais en utilisant des valeurs de pourcentage. Je n'ai trouvé aucune mise en œuvre du navigateur pour celui-ci et les pourcentages risquent d'être supprimés des futures ébauches de la spécification.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

La propriété d'espacement des lettres

Vous pouvez définir la propriété d'espacement des lettres sur l'une des deux valeurs: Normal ou .

Utilisation normale laisse l'espacement de la police par défaut entre les lettres. Il réinitialise également toute longueur d'espacement des lettres précédemment spécifié à sa valeur par défaut. Par exemple, si vous spécifiez une valeur d'espacement des lettres de 1EM sur un élément parent mais souhaitez afficher la valeur par défaut sur les éléments enfants, Normal est votre ami.

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

La valeur est une unité de mesure, par ex. PX ou EMS, par lequel vous pouvez augmenter l'espacement entre les lettres en plus de l'espacement par défaut déjà fourni par la police.

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

Plus de détails

L'espacement des mots ne s'applique pas seulement aux mots. Vous pouvez l'utiliser sur tout type de contenu en ligne ou en ligne.

De plus, vous pouvez animer à la fois l'espacement des mots et l'espacement des lettres. Cependant, l'utilisation de transitions CSS sur l'espacement des lettres montre que la valeur normale n'est pas reconnue par la version actuelle de Firefox (v.39). Pour surmonter cela, remplacez simplement la normale par 0EM.

Voici une démo avec du texte animé en utilisant l'espacement des mots et l'espacement des lettres:

Voir le stylo Animer les propriétés d'espacement des lettres et d'espacement des mots CSS par SitePoint (@SitePoint) sur Codepen.

Dernières options CSS pour l'alignement du texte

La propriété Text-Align existe depuis un certain temps. Il contrôle comment le contenu en ligne comme le texte et les images sont alignés dans un conteneur de bloc. Les Kewords à gauche et à droite alignent respectivement le contenu en ligne à gauche et à droite. La définition du texte-aligne pour centrer aligne le contenu au centre de son conteneur. Enfin, le mot clé Justify justifie le contenu afin que chaque ligne soit de la même longueur (sauf pour la dernière ligne, si elle n'est pas suffisamment longue pour atteindre le bord de son conteneur).

La spécification ajoute deux nouvelles valeurs qui pourraient être très utiles sur les sites Web internationalisés à l'aide de systèmes linguistiques de droite à gauche (RTL): Début et fin.

Pour les lecteurs de gauche à droite (LTR), ils correspondent respectivement à la gauche et à la droite. Lorsqu'un site Web utilise une langue RTL, le démarrage correspond à droite et à la fin correspond à gauche.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Propriétés CSS pour contrôler la typographie Web

Appliquer le texte-alignement: Match-Parent à un élément enfant en ligne garantit que l'enfant hérite du même alignement que le parent. La valeur de début ou de fin héritée est calculée sur la direction du langage du parent, ce qui entraîne une sortie de gauche ou de droite.

la propriété text-aligne-allonge

Nouveau sur CSS est également la propriété text-aligne-allonge. Cette propriété contrôle l'alignement de la dernière ligne de texte justifié avant la fin d'un paragraphe ou avant une balise
. Il a les mêmes valeurs de mot-clé que Text-Align, à l'exception de l'auto, qui est la valeur par défaut. La valeur automatique vous permet d'aligner la dernière ligne de texte en fonction de la valeur de la propriété textuelle de l'élément, si elle est définie. Si aucune propriété texte-aligne n'est appliquée, le texte par défaut une valeur de démarrage.

Au moment de la rédaction, la prise en charge du navigateur pour le texte-alignement du texte est plutôt médiocre. Par conséquent, je pense qu'il devrait être utilisé avec parcimonie, voire pas du tout.

Afficher une démo de codepen montrant ces fonctionnalités en action

Indentation de texte

Imposer une ligne de texte, généralement la première ligne d'un paragraphe, n'est pas quelque chose que vous rencontrez souvent sur des sites Web. Au lieu de cela, une ligne vide est placée comme une marque visuelle commune de séparation entre les paragraphes.

Néanmoins, induire la première ligne d'un paragraphe est parfois utilisé pour créer un look classique adapté aux conceptions spécifiques.

Propriétés CSS pour contrôler la typographie Web

Si votre conception est améliorée par cette technique, CSS propose la propriété Text-Indent. Considérons les valeurs possibles.

Une valeur de longueur est généralement définie à l'aide d'unités PX ou EM:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Un pourcentage est défini en utilisant un pourcentage de valeur:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Une valeur de chaque ligne indente l'apparence de la première ligne à l'intérieur d'un conteneur de bloc ainsi que chaque ligne après une pause de ligne forcée, c'est-à-dire une pause de ligne causée en frappant la touche Entrez ou Insertion d'une balise
dans la source HTML. Cependant, l'affichage de la première ligne après une pause enveloppe douce, c'est-à-dire que le texte qui s'enroule à la ligne suivante pour s'adapter à son conteneur n'est pas affecté.

Une valeur de suspension provoque toutes les lignes, à l'exception de la première ligne à afficher comme en retrait.

Les valeurs de toutes les lignes et de suspension sont des valeurs expérimentales, non encore implémentées dans aucun navigateur au moment de la rédaction.

Affichez cette démo pour voir un indent de texte en action

Conclusion

CSS a fait d'énormes progrès vers la manipulation du texte Web, bien que davantage devrait être fait. Outre la prise en charge du navigateur sommaire pour certaines des nouvelles propriétés, ce serait bien, par exemple, si CSS offrait des capacités de transfert, c'est-à-dire la possibilité de manipuler la distance entre deux lettres en un mot donné.

Dans cet article, j'ai plongé dans un certain nombre de propriétés CSS qui contrôlent le formatage, l'enveloppement de lignes et l'alignement du texte sur le Web. N'hésitez pas à en expérimenter en utilisant les démos.

J'attends avec impatience vos commentaires!

Questions fréquemment posées (FAQ) sur les propriétés CSS pour contrôler la typographie Web

Comment puis-je utiliser les propriétés CSS pour contrôler la typographie Web?

Les propriétés CSS offrent une large gamme d'options pour contrôler la typographie Web. Vous pouvez ajuster la taille de la police, la famille des polices, la hauteur de la ligne, l'alignement du texte, la couleur du texte et bien plus encore. Par exemple, pour modifier la taille de la police, vous pouvez utiliser la propriété «-Size» et spécifier la taille des pixels, des EM ou des pourcentages. De même, pour changer la famille des polices, vous pouvez utiliser la propriété «Font-Family» et spécifier le nom de police. N'oubliez pas d'inclure des polices de secours au cas où le premier choix n'est pas disponible sur le système de l'utilisateur.

Quel est le rôle de la propriété 'Adignez' dans CSS?

La 'Adigne de texte «La propriété dans CSS est utilisée pour aligner le contenu en ligne d'un élément de bloc. Il peut prendre des valeurs comme «gauche», «droite», «centre» ou «justifier». Par exemple, «Text-Align: Center» centrera le texte dans son élément contenant. Cette propriété est particulièrement utile lorsque vous souhaitez contrôler l'alignement du texte dans les en-têtes, paragraphes ou autres éléments contenant du texte.

Comment puis-je contrôler l'espace blanc dans CSS?

Le ' La propriété de l'espace blanc dans CSS est utilisée pour contrôler comment les espaces blancs à l'intérieur d'un élément sont manipulés. Il peut prendre des valeurs telles que «normal», «nowrap», «pré», «pré-ligne» ou «pré-wrap». Par exemple, «White-Espace: Nowrap» empêchera le texte de s'envelopper à la ligne suivante, faisant apparaître tout le texte en une seule ligne.

Comment puis-je aligner les éléments de liste sur la gauche en CSS?

Pour aligner les éléments de liste sur la gauche dans CSS, vous pouvez utiliser la propriété «Text-Align» avec la valeur «gauche». Par exemple, «Text-Align: Left» alignera les éléments de la liste à gauche. Il s'agit de l'alignement par défaut pour la plupart des navigateurs, mais en spécifiant qu'il peut aider à garantir la cohérence entre différents navigateurs.

Comment puis-je utiliser CSS pour contrôler la hauteur de la ligne du texte?

L'-hauteur de ligne de la ligne «La propriété dans CSS est utilisée pour contrôler l'espace entre les lignes de texte. Vous pouvez spécifier la hauteur de la ligne dans des unités absolues comme les pixels, les unités relatives comme les pourcentages ou les nombres sans unité qui sont multipliés avec la taille de la police actuelle pour définir la hauteur de la ligne. Par exemple, «la hauteur de ligne: 1,5» définira la hauteur de la ligne à 1,5 fois la taille de la police actuelle.

Comment puis-je modifier la couleur du texte dans CSS?

La propriété «couleur» dans CSS est utilisée pour modifier la couleur du texte. Vous pouvez spécifier la couleur de différentes manières, comme par son nom (comme «rouge»), la valeur hexadécimale (comme «# ff0000»), la valeur RGB (comme «RGB (255, 0, 0)»), ou valeur HSL (comme 'HSL (0, 100%, 50%)').

Comment puis-je rendre le texte en gras dans CSS?

Le La propriété «Font-Weight» dans CSS est utilisée pour rendre le texte audacieux. Vous pouvez définir sa valeur sur «gras» ou un nombre de 100 à 900 en multiples de 100, où des nombres plus élevés correspondent au texte plus audacieux. Par exemple, «Font-Weight: Bold» ou «Font-Weight: 700» rendra le texte en gras.

Comment puis-je italique du texte dans CSS?

Le «style de police» La propriété dans CSS est utilisée pour le texte en italique. Vous pouvez définir sa valeur sur «italique» pour faire du texte italique. Par exemple, «style de police: italique» italique le texte.

Comment puis-je souligner le texte dans CSS?

La propriété «text-décoration» dans CSS est utilisée pour souligner le texte. Vous pouvez définir sa valeur sur «souligner» pour souligner le texte. Par exemple, «Text-Decoration: soulignera» soulignera le texte.

Comment puis-je contrôler l'espacement des lettres dans CSS?

La propriété «Espacement des lettres» dans CSS est utilisée pour contrôler l'espace entre les lettres. Vous pouvez spécifier l'espacement des lettres dans des unités absolues comme des pixels ou des unités relatives comme EMS. Par exemple, «l'espacement des lettres: 0,1em» augmentera l'espace entre les lettres de 0,1 fois la taille de la police actuelle.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal