Propriétés CSS liées à l'espacement du texte

Articles

Cet article explique les propriétés CSS liées à l'espacement du texte.

Vous pouvez apprendre l'utilisation et comment écrire des propriétés comme line-height et word-spacing.

YouTube Video

Création de HTML pour aperçu

css-text-space.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Typographie (liée aux marges du texte)

Propriété `line-height`

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height est une propriété CSS utilisée pour définir l'espacement des lignes (hauteur de ligne). line-height spécifie l'espace vertical entre les lignes, utilisé pour améliorer la lisibilité ou ajuster l'espacement dans le cadre du design.

Principaux usages de `line-height`

Nombres sans unité

1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}

Spécifiez une hauteur relative à la taille de la police. Par exemple, spécifier 1.5 définit la hauteur de ligne à 1,5 fois la taille de la police. Cette méthode est utile pour un design réactif.

Pourcentage

1p {
2    line-height: 150%;
3}

Spécifiez la hauteur de ligne comme un pourcentage de la taille de la police. Par exemple, spécifier 150% définit la hauteur de ligne à 150% de la taille de la police.

Valeurs fixes (px, em, rem, etc.)

1p {
2    line-height: 20px;
3}

Spécifiez la hauteur de ligne en unités absolues. Par exemple, vous pouvez spécifier une valeur concrète comme 20px, mais cela peut manquer de flexibilité dans un design réactif.

`normal`

1p {
2    line-height: normal;
3}

Spécifier normal applique les paramètres d'espacement des lignes par défaut du navigateur. En général, cela représente environ 1,2 à 1,4 fois la taille de la police.

Exemples d'utilisation de `line-height`

Paragraphes lisibles

Une line-height d'environ 1.5 à 1.6 est généralement recommandée pour une meilleure lisibilité. Si l'espacement des lignes est trop étroit, le texte sera serré et difficile à lire, et s'il est trop large, le texte semblera déstructuré.

Conception des en-têtes

Pour les titres et les en-têtes, où le texte est plus grand, l'espacement des lignes peut être réduit. Des réglages comme 1.1 ou 1.2 sont souvent utilisés.

Résumé

line-height est une propriété importante pour améliorer à la fois la lisibilité et le design du texte.
Utiliser des valeurs relatives (nombres ou pourcentages) facilite l'adaptation aux designs réactifs.
Pour les titres avec un texte large et les paragraphes avec un texte plus petit, il est crucial de définir un espacement des lignes approprié pour chacun.

Exploiter cette propriété peut rendre l'apparence du texte plus lisible et améliorer la qualité de son design.

Propriété `letter-spacing`

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing est une propriété CSS utilisée pour ajuster l'espacement entre les caractères (espacement des lettres). Cette propriété peut être utilisée pour améliorer la mise en page du texte, renforcer la lisibilité, et obtenir des styles spécifiques.

Dans cet exemple, il est spécifié comme suit.

normal : L'espacement des lettres par défaut. C'est une valeur standard déterminée par le navigateur et la police.
4px : Un exemple d'espacement des lettres élargi. Ajoute 4 pixels d'espace entre chaque caractère.
-1px : Un exemple d'espacement des lettres réduit. Réduit 1 pixel d'espace entre chaque caractère.

Comment utiliser `letter-spacing`

Valeurs avec unités

1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}

Définir une valeur positive augmentera l'espacement des lettres.
Définir une valeur négative réduira l'espacement des lettres.
Les unités sont généralement en px (pixels) ou en em.

Défaut : `normal`

1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}

Utiliser l'espacement par défaut entre les lettres. Normalement, l'espacement standard défini par la police est appliqué.

Exemples d'utilisation de `letter-spacing`

Amélioration de la lisibilité : Pour des tailles de police petites ou des polices trop condensées, vous pouvez améliorer la lisibilité en augmentant le letter-spacing.
Ajustement du design : Vous pouvez ajuster l'espacement des lettres pour mettre visuellement en valeur des éléments de design comme les titres ou les logos.
Ajustement entre les mots : Vous pouvez ajuster l'espacement au niveau des lettres, plutôt qu'entre les mots. letter-spacing ajuste l'espacement au niveau des lettres, mais utilisez word-spacing pour étendre l'espace entre les mots.
Équilibre du design : Si vous augmentez trop l'espacement entre les lettres, tout le texte pourrait sembler trop étiré. À l'inverse, si vous le réduisez trop, le texte peut devenir serré et difficile à lire, il est donc important de maintenir un équilibre approprié.

Résumé

letter-spacing est une propriété qui ajuste l'espace entre les lettres, affectant à la fois le design et la lisibilité.
Vous pouvez augmenter l'espacement avec des valeurs positives et le diminuer avec des valeurs négatives.
Elle est efficace pour les titres et les éléments de design spécifiques, mais faites attention à ne pas compromettre la lisibilité.

En utilisant cette propriété, vous pouvez ajuster l'apparence du texte et obtenir des designs attrayants.

Propriété `word-spacing`

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing est une propriété CSS qui contrôle l'espace entre les mots dans un texte. Une utilisation appropriée de cette propriété peut améliorer l'équilibre visuel et la lisibilité du texte. word-spacing est particulièrement utile dans les conceptions axées sur la typographie et dans les scénarios de conception réactive.

Dans cet exemple, il est spécifié comme suit.

normal : Applique l'espacement par défaut des mots. C'est la valeur initiale du navigateur.
4px : Un exemple d'espacement accru entre les mots. Ajoute une marge de 4 pixels entre chaque mot.
-1px : Un exemple d'espacement réduit entre les mots. Réduit l'espace entre chaque mot de 1 pixel.
word-and-letter-spacing : Un exemple d'espacement réduit entre les mots et les lettres. Réduit l'espace entre les mots de 0,1em et entre les lettres de 0,05em par rapport à la normale.

Utilisation de valeurs positives et négatives

Définir une valeur positive pour word-spacing augmentera l'espacement des mots. D'autre part, utiliser des valeurs négatives réduit l'espace entre les mots. Des valeurs négatives peuvent être utilisées pour mettre en valeur des effets visuels ou resserrer l'espacement des lettres pour des raisons de conception spécifiques.

Différence avec `letter-spacing`

word-spacing est une propriété qui ajuste l'espace entre les mots, tandis que letter-spacing ajuste l'espace entre les lettres. En combinant ces propriétés, vous pouvez avoir un contrôle plus précis de la typographie de textes entiers.

Précautions et Meilleures Pratiques

Ajustement excessif des espaces : Une surutilisation de word-spacing peut entraîner une diminution de la lisibilité. Des espaces trop grands ou trop petits peuvent être gênants pour les utilisateurs, rendant les ajustements modérés importants.
Design réactif : Spécifier des valeurs relatives en utilisant em ou rem est efficace pour un design réactif car cela garantit un affichage approprié sur différents formats d'écran.
Ajustement du style des en-têtes : En élargissant l'espace entre les mots dans le texte des en-têtes, vous pouvez ajouter un accent visuel. Cela vous permet de clarifier la hiérarchie du contenu et d'obtenir un design sophistiqué.

Propriété `word-break`

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break est une propriété CSS qui contrôle la manière dont le texte se renvoie à la ligne lorsqu'il dépasse la largeur du conteneur. Normalement, les navigateurs renvoient à la ligne aux limites des mots, mais des réglages spécifiques peuvent améliorer l'apparence et la lisibilité en présence de mots longs ou d'URL.

Vous pouvez spécifier les valeurs suivantes pour la propriété word-break.

normal

normal est la valeur par défaut. Lorsqu'un mot dépasse la largeur du conteneur, il sera coupé aux limites des mots. Ce réglage est courant dans les langues comme l'anglais, et les coupures ne se produisent pas au milieu des mots.
break-all

break-all est une option où des retours à la ligne peuvent être insérés après n'importe quel caractère, selon les besoins. En particulier lorsque des mots longs ou des URL sont inclus, les retours à la ligne se produisent au niveau des caractères pour éviter toute perturbation de la mise en page.
keep-all

keep-all est un réglage qui s'utilise particulièrement pour les langues asiatiques (japonais, chinois, coréen, etc.). Dans ce réglage, le mot entier est préservé, et aucune coupure ne se produit au milieu des mots. Cependant, pour les langues avec des espaces séparateurs comme l'anglais, des coupures normales aux limites des mots sont appliquées.

Cet exemple montre trois réglages différents pour word-break. Avec word-break-normal, le mot entier est préservé et il est coupé aux limites des mots s'il dépasse la largeur du conteneur. Avec word-break-break-all, des coupures peuvent se produire même au milieu des mots. word-break-keep-all permet des coupures naturelles dans les langues asiatiques comme le japonais et des coupures aux limites des mots pour l'anglais.

Scénarios d'application de `word-break`

Appareils mobiles et design réactif

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

Sur les appareils mobiles, la largeur de l'écran est limitée, ce qui peut provoquer le dépassement de la largeur par des textes comme des URL ou des mots longs. Dans de tels cas, appliquer word-break: break-all; permet des coupures au niveau des caractères pour s'adapter à la largeur de l'écran, améliorant ainsi la lisibilité.

Propriété `hyphens`

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

La propriété hyphens est utilisée en CSS pour spécifier comment la césure des mots (séparation des mots avec des traits d’union) doit être gérée lors de la coupure des lignes de texte. En réglant cette propriété de manière appropriée, vous pouvez améliorer la lisibilité et l’apparence du texte. La césure est particulièrement utile lorsque des mots longs doivent être coupés.
Étant donné que les règles de césure varient selon les langues, cette propriété dépend de la locale du texte.

Syntaxe

1element {
2    hyphens: none | manual | auto;
3}

La propriété hyphens peut être définie sur les valeurs suivantes :.

none: Aucune césure n’est appliquée. Les mots se coupent généralement uniquement à la fin du mot.
manual: La césure est appliquée manuellement. Dans ce cas, vous devez spécifier manuellement les points de césure dans le HTML. Par exemple, vous pouvez utiliser  (trait d’union conditionnel).
auto: Le navigateur applique automatiquement la césure aux positions appropriées. Dans ce cas, la langue du document (attribut lang) doit être correctement spécifiée.

Notes

Importance des paramètres de langue : Lors de l’utilisation de hyphens: auto;, une césure correcte nécessite que l’attribut lang du document HTML soit correctement défini.
Dépendance à la police : Certaines polices peuvent ne pas convenir à la césure.
Utilisation des dictionnaires de césure : Les règles de césure dépendent des dictionnaires utilisés par le navigateur. Par conséquent, cela peut ne pas fonctionner comme prévu pour certaines langues.

Résumé

En utilisant correctement la propriété hyphens, vous pouvez améliorer considérablement la mise en page du texte. En particulier pour les sites Web multilingues et les conceptions adaptées aux mobiles, l'utilisation appropriée de auto et manual peut améliorer l’expérience utilisateur.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées au texte Propriétés CSS pour l'affichage de code et les citations

Propriétés CSS liées à l'espacement du texte

YouTube Video

Création de HTML pour aperçu

Typographie (liée aux marges du texte)

Propriété line-height

Principaux usages de line-height

Nombres sans unité

Pourcentage

Valeurs fixes (px, em, rem, etc.)

normal

Exemples d'utilisation de line-height

Paragraphes lisibles

Conception des en-têtes

Résumé

Propriété letter-spacing

Comment utiliser letter-spacing

Valeurs avec unités

Défaut : normal

Exemples d'utilisation de letter-spacing

Résumé

Propriété word-spacing

Utilisation de valeurs positives et négatives

Différence avec letter-spacing

Précautions et Meilleures Pratiques

Propriété word-break

Scénarios d'application de word-break

Appareils mobiles et design réactif

Propriété hyphens

Syntaxe

Notes

Résumé

YouTube Video

Propriété `line-height`

Principaux usages de `line-height`

`normal`

Exemples d'utilisation de `line-height`

Propriété `letter-spacing`

Comment utiliser `letter-spacing`

Défaut : `normal`

Exemples d'utilisation de `letter-spacing`

Propriété `word-spacing`

Différence avec `letter-spacing`

Propriété `word-break`

Scénarios d'application de `word-break`

Propriété `hyphens`