Proprietà CSS relative alla spaziatura del testo

Articles

Proprietà CSS relative alla spaziatura del testo

Questo articolo spiega le proprietà CSS relative alla spaziatura del testo.

Puoi imparare l'uso e come scrivere proprietà come line-height e word-spacing.

YouTube Video

Creazione di HTML per l'anteprima

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>

Tipografia (relativa ai margini del testo)

Proprietà `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 è una proprietà CSS usata per impostare la spaziatura tra le righe (altezza della riga). line-height specifica lo spazio verticale tra le righe, utilizzato per migliorare la leggibilità o regolare la spaziatura come parte del design.

Principali usi di `line-height`

Numeri senza unità

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

Specifica un'altezza relativa alla dimensione del carattere. Ad esempio, specificare 1.5 imposta l'altezza della riga a 1,5 volte la dimensione del carattere. Questo metodo è utile per il design reattivo.

Percentuale

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

Specifica l'altezza della riga come una percentuale della dimensione del carattere. Ad esempio, specificare 150% imposta l'altezza della riga al 150% della dimensione del carattere.

Valori fissi (px, em, rem, ecc.)

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

Specifica l'altezza della riga in unità assolute. Ad esempio, puoi specificare un valore concreto come 20px, ma potrebbe mancare di flessibilità nel design reattivo.

`normal`

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

Specificare normal applica le impostazioni predefinite di spaziatura delle righe del browser. Tipicamente, sarà circa 1,2-1,4 volte la dimensione del carattere.

Esempi di utilizzo di `line-height`

Paragrafi leggibili

Un line-height di circa 1.5 a 1.6 è di solito raccomandato per la leggibilità. Se la spaziatura tra le righe è troppo stretta, il testo sarà compresso e difficile da leggere; se è troppo ampia, il testo sembrerà scollegato.

Design dell'intestazione

Per intestazioni e titoli, dove il testo è più grande, la spaziatura tra le righe può essere ridotta. Impostazioni come 1.1 o 1.2 sono spesso utilizzate.

Riepilogo

line-height è una proprietà importante per migliorare sia la leggibilità che il design del testo.
Usare valori relativi (numeri o percentuali) rende più semplice adattarsi a design reattivi.
Per intestazioni con testo grande e paragrafi con testo più piccolo, è fondamentale impostare una spaziatura tra le righe appropriata per ciascuno.

Utilizzare questa proprietà può rendere l'aspetto del testo più leggibile e migliorare la qualità del design.

Proprietà `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 è una proprietà CSS usata per regolare la spaziatura tra i caratteri (spaziatura tra lettere). Questa proprietà può essere usata per ordinare il design del testo, migliorare la leggibilità e ottenere stili specifici.

In questo esempio, è specificato come segue.

normale: La spaziatura delle lettere predefinita. È un valore standard determinato dal browser e dal font.
4px: Un esempio di spaziatura delle lettere aumentata. Aggiunge 4 pixel di spazio tra ogni carattere.
-1px: Un esempio di spaziatura delle lettere ridotta. Riduce di 1 pixel lo spazio tra ogni carattere.

Come usare `letter-spacing`

Valori con unità

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

Impostare un valore positivo aumenterà la spaziatura delle lettere.
Impostare un valore negativo ridurrà la spaziatura delle lettere.
Le unità sono tipicamente in px (pixel) o em.

Predefinito: `normal`

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

Utilizzare la spaziatura delle lettere predefinita. Normalmente, viene applicata la spaziatura standard definita dal font.

Esempi di utilizzo di `letter-spacing`

Leggibilità migliorata: Per dimensioni di carattere ridotte o font eccessivamente compressi, è possibile migliorare la leggibilità aumentando letter-spacing.
Regolazione del design: È possibile regolare la spaziatura delle lettere per enfatizzare visivamente elementi di design come titoli o loghi.
Regolazione tra lettere: È possibile regolare la spaziatura a livello di lettere, anziché tra le parole. letter-spacing regola la spaziatura a livello di lettere, ma utilizzare word-spacing per espandere lo spazio tra le parole.
Equilibrio nel design: Se si aumenta troppo la spaziatura delle lettere, il testo complessivo potrebbe sembrare troppo allungato. Invece, se si riduce troppo, il testo potrebbe risultare compresso e difficile da leggere, quindi è importante mantenere un equilibrio adeguato.

Riepilogo

letter-spacing è una proprietà che regola lo spazio tra le lettere, influenzando sia il design che la leggibilità.
È possibile aumentare la spaziatura con valori positivi e ridurla con valori negativi.
È efficace per titoli ed elementi di design specifici, ma occorre fare attenzione a non compromettere la leggibilità.

Utilizzando questa proprietà, è possibile regolare l'aspetto del testo e ottenere design attraenti.

Proprietà `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 è una proprietà CSS che controlla lo spazio tra le parole in un testo. Un uso corretto di questa proprietà può migliorare l'equilibrio visivo e la leggibilità del testo. word-spacing è particolarmente utile nei design incentrati sulla tipografia e negli scenari di progettazione responsive.

In questo esempio, è specificato come segue.

normale: Applica la spaziatura predefinita tra le parole. Questo è il valore iniziale del browser.
4px: Un esempio di spaziatura aumentata tra le parole. Aggiunge 4 pixel di margine tra ogni parola.
-1px: Un esempio di spaziatura ridotta tra le parole. Riduce lo spazio tra ogni parola di 1 pixel.
spaziatura-parole-e-lettere: Un esempio di riduzione della spaziatura tra parole e lettere. Riduce lo spazio tra le parole di 0.1em e tra le lettere di 0.05em rispetto al normale.

Utilizzo di Valori Positivi e Negativi

Impostare un valore positivo per word-spacing aumenterà la spaziatura tra le parole. D'altra parte, l'uso di valori negativi riduce gli spazi tra le parole. Valori negativi possono essere usati per enfatizzare effetti visivi o per stringere la spaziatura tra lettere per specifiche ragioni di design.

Differenza con `letter-spacing`

word-spacing è una proprietà che regola la spaziatura tra parole, mentre letter-spacing regola la spaziatura tra lettere. Combinando queste proprietà, è possibile avere un controllo più preciso sulla tipografia dell'intero testo.

Avvertenze e migliori pratiche

Regolazione eccessiva degli spazi: Un uso eccessivo di word-spacing può ridurre la leggibilità. Spazi troppo grandi o troppo piccoli possono stressare gli utenti, rendendo importanti regolazioni moderate.
Design Responsivo: Specificare valori relativi usando em o rem è efficace per il design responsivo perché garantisce una visualizzazione corretta su diverse dimensioni di schermo.
Regolazione dello stile dei titoli: Allargando la spaziatura tra le parole nei titoli, è possibile aggiungere enfasi visiva. Ciò consente di chiarire la gerarchia del contenuto e ottenere un design sofisticato.

Proprietà `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 è una proprietà CSS che controlla come il testo va a capo quando supera la larghezza del contenitore. Normalmente, i browser interrompono le righe ai confini delle parole, ma impostazioni specifiche possono migliorare l'aspetto e la leggibilità in presenza di parole lunghe o URL.

È possibile specificare i seguenti valori per la proprietà word-break.

normal

normal è il valore predefinito. Quando una parola supera la larghezza del contenitore, verrà interrotta ai confini della parola. Questa impostazione è comune in lingue come l'inglese, e le interruzioni non si verificano nel mezzo delle parole.
break-all

break-all è un'impostazione in cui le interruzioni di riga possono essere inserite dopo qualsiasi carattere, se necessario. In particolare, quando sono presenti parole lunghe o URL, le interruzioni di riga avvengono a livello di carattere per evitare problemi al layout.
keep-all

keep-all è un'impostazione utilizzata in particolare per le lingue asiatiche (giapponese, cinese, coreano, ecc.). Con questa impostazione, l'intera parola viene preservata e non si verificano interruzioni nel mezzo delle parole. Tuttavia, per le lingue con separazione delle parole tramite spazi, come l'inglese, vengono applicate interruzioni di riga normali ai confini delle parole.

Questo esempio mostra tre impostazioni diverse di word-break. Con word-break-normal, l'intera parola viene preservata e si verifica un'interruzione ai confini delle parole se supera la larghezza del contenitore. Con word-break-break-all, le interruzioni si verificano anche nel mezzo delle parole. word-break-keep-all consente interruzioni naturali per lingue asiatiche come il giapponese e interruzioni ai confini delle parole per l'inglese.

Scenari di Applicazione di `word-break`

Dispositivi Mobili e Design Responsivo

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

Sui dispositivi mobili, la larghezza dello schermo è limitata, il che può causare la sovrapposizione del testo, inclusi URL o parole lunghe, alla larghezza dello schermo. In questi casi, applicare word-break: break-all; consente di fare interruzioni di riga a livello di carattere per adattare la larghezza dello schermo, migliorando la leggibilità.

Proprietà `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 proprietà hyphens viene utilizzata in CSS per specificare come gestire la sillabazione delle parole (suddivisione delle parole con trattini) durante l'interruzione delle righe di testo. Impostando correttamente questa proprietà, è possibile migliorare la leggibilità e l'aspetto del testo. La sillabazione è particolarmente utile quando è necessario andare a capo con parole lunghe.
Poiché le regole di sillabazione variano a seconda della lingua, questa proprietà dipende dalla localizzazione del testo.

Sintassi

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

La proprietà hyphens può essere impostata sui seguenti valori:.

none: Non viene applicata alcuna sillabazione. In genere, le parole si interromperanno solo alla fine della parola.
manual: La sillabazione viene applicata manualmente. In questo caso, è necessario specificare manualmente i punti di sillabazione all'interno dell'HTML. Ad esempio, è possibile utilizzare  (trattino morbido).
auto: Il browser applica automaticamente la sillabazione nei punti appropriati. In questo caso, la lingua del documento (attributo lang) deve essere specificata correttamente.

Note

Importanza delle impostazioni linguistiche: Quando si utilizza hyphens: auto;, una corretta sillabazione richiede che l'attributo lang del documento HTML sia impostato correttamente.
Dipendenza dai font: Alcuni font potrebbero non essere adatti alla sillabazione.
Utilizzo dei dizionari di sillabazione: Le regole di sillabazione dipendono dai dizionari utilizzati dal browser. Pertanto, potrebbe non funzionare come previsto per alcune lingue.

Riepilogo

Utilizzando correttamente la proprietà hyphens, è possibile migliorare significativamente l'impaginazione del testo. Soprattutto per siti web multilingue e design ottimizzati per dispositivi mobili, l'uso appropriato di auto e manual può migliorare l'esperienza utente.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative al testo Proprietà CSS per la Visualizzazione del Codice e le Citazioni

Proprietà CSS relative alla spaziatura del testo

YouTube Video

Creazione di HTML per l'anteprima

Tipografia (relativa ai margini del testo)

Proprietà line-height

Principali usi di line-height

Numeri senza unità

Percentuale

Valori fissi (px, em, rem, ecc.)

normal

Esempi di utilizzo di line-height

Paragrafi leggibili

Design dell'intestazione

Riepilogo

Proprietà letter-spacing

Come usare letter-spacing

Valori con unità

Predefinito: normal

Esempi di utilizzo di letter-spacing

Riepilogo

Proprietà word-spacing

Utilizzo di Valori Positivi e Negativi

Differenza con letter-spacing

Avvertenze e migliori pratiche

Proprietà word-break

Scenari di Applicazione di word-break

Dispositivi Mobili e Design Responsivo

Proprietà hyphens

Sintassi

Note

Riepilogo

YouTube Video

Proprietà `line-height`

Principali usi di `line-height`

`normal`

Esempi di utilizzo di `line-height`

Proprietà `letter-spacing`

Come usare `letter-spacing`

Predefinito: `normal`

Esempi di utilizzo di `letter-spacing`

Proprietà `word-spacing`

Differenza con `letter-spacing`

Proprietà `word-break`

Scenari di Applicazione di `word-break`

Proprietà `hyphens`