Articles
Introductie tot CSS
CSS-eigenschappen met betrekking tot tekstafstand

CSS-eigenschappen met betrekking tot tekstafstand

Dit artikel legt CSS-eigenschappen uit die betrekking hebben op tekstafstand.

U kunt leren hoe u eigenschappen zoals line-height en word-spacing kunt gebruiken en schrijven.

YouTube Video

HTML maken voor voorbeeldweergave

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>

Typografie (Gerelateerd aan Tekstmarges)

line-height eigenschap 

 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 is een CSS-eigenschap die wordt gebruikt om de regelafstand (regelhoogte) in te stellen. line-height specificeert de verticale ruimte tussen regels, gebruikt om de leesbaarheid te verbeteren of de afstand aan te passen als deel van het ontwerp.

Belangrijkste toepassingen van line-height

Eenheidsloze getallen 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Geef een hoogte op in verhouding tot de lettergrootte. Bijvoorbeeld, het specificeren van 1.5 stelt de regelhoogte in op 1,5 keer de lettergrootte. Deze methode is nuttig voor responsief ontwerp.
Percentage 
1p {
2    line-height: 150%;
3}
  • Specificeer de regelhoogte als een percentage van de lettergrootte. Bijvoorbeeld, het specificeren van 150% stelt de regelhoogte in op 150% van de lettergrootte.
Vaste waarden (px, em, rem, enz.) 
1p {
2    line-height: 20px;
3}
  • Specificeer de regelhoogte in absolute eenheden. Bijvoorbeeld, u kunt een concrete waarde zoals 20px specificeren, maar dit kan flexibiliteit missen in responsief ontwerp.
normal 
1p {
2    line-height: normal;
3}
  • Het specificeren van normal past de standaardregelafstandinstellingen van de browser toe. Doorgaans zal dit ongeveer 1,2 tot 1,4 keer de lettergrootte zijn.

Voorbeelden van het gebruik van line-height

Leesbare paragrafen
  • Een line-height van ongeveer 1.5 tot 1.6 wordt meestal aanbevolen voor leesbaarheid. Als de regelafstand te klein is, wordt de tekst samengeperst en moeilijk leesbaar. Als deze te groot is, voelt de tekst onsamenhangend aan.
Ontwerp van koppen
  • Voor koppen en titels, waar de tekst groter is, kan de regelafstand worden verkleind. Instellingen zoals 1.1 of 1.2 worden vaak gebruikt.

Samenvatting

  • line-height is een belangrijke eigenschap om zowel de leesbaarheid als het ontwerp van tekst te verbeteren.
  • Het gebruik van relatieve waarden (nummers of percentages) maakt het eenvoudiger om aan te passen aan responsieve ontwerpen.
  • Voor koppen met grote tekst en paragrafen met kleinere tekst is het essentieel om voor elk de juiste regelafstand in te stellen.

Het benutten van deze eigenschap kan de tekst leesbaarder maken en de ontwerpkwaliteit verbeteren.

Eigenschap 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 is een CSS-eigenschap die wordt gebruikt om de afstand tussen karakters (letterafstand) aan te passen. Deze eigenschap kan worden gebruikt om het ontwerp van de tekst op te schonen, de leesbaarheid te verbeteren en specifieke stijlen te bereiken.

In dit voorbeeld wordt het als volgt gespecificeerd.

  • normal: De standaard letterafstand. Het is een standaardwaarde die door de browser en het lettertype wordt bepaald.
  • 4px: Een voorbeeld van vergrote letterafstand. Voegt 4 pixels ruimte toe tussen elke karakter.
  • -1px: Een voorbeeld van verkleinde letterafstand. Vermindert de ruimte tussen elke karakter met 1 pixel.

Hoe letter-spacing te gebruiken

Waarden met eenheden 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Het instellen van een positieve waarde vergroot de letterafstand.
  • Het instellen van een negatieve waarde verkleint de letterafstand.
  • Eenheden worden meestal in px (pixels) of em gebruikt.
Standaard: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Gebruik de standaard letterafstand. Normaal gesproken wordt de standaard letterafstand die door het lettertype is gedefinieerd toegepast.

Voorbeelden van het gebruik van letter-spacing

  • Verbeterde leesbaarheid: Bij kleine lettergroottes of te samengedrukte lettertypes kun je de leesbaarheid verbeteren door letter-spacing te verhogen.
  • Ontwerpaanpassing: Je kunt de letterafstand aanpassen om ontwerpelementen zoals titels of logo's visueel te benadrukken.
  • Aanpassing tussen woorden: Je kunt de afstand aanpassen op letterniveau in plaats van tussen woorden. letter-spacing past de afstand tussen letters aan, maar gebruik word-spacing om de ruimte tussen woorden te vergroten.
  • Ontwerpevenwicht: Als je de letterafstand te veel vergroot, kan de tekst te uitgerekt ogen. Omgekeerd, als je het te veel verkleint, kan de tekst te krap en moeilijk leesbaar worden, dus is het belangrijk om een goed evenwicht te bewaren.

Samenvatting

  • letter-spacing is een eigenschap die de ruimte tussen letters aanpast en zowel het ontwerp als de leesbaarheid beïnvloedt.
  • Je kunt de afstand vergroten met positieve waarden en verkleinen met negatieve waarden.
  • Het is effectief voor titels en specifieke ontwerpelementen, maar let erop dat de leesbaarheid niet in het gedrang komt.

Door deze eigenschap te gebruiken, kun je het uiterlijk van tekst aanpassen en aantrekkelijke ontwerpen maken.

word-spacing Eigenschap 

 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 is een CSS-eigenschap die de ruimte tussen woorden in een tekst regelt. Goed gebruik van deze eigenschap kan het visuele evenwicht en de leesbaarheid van tekst verbeteren. word-spacing is vooral nuttig in typografiegerichte ontwerpen en in scenario's voor responsief design.

In dit voorbeeld wordt het als volgt gespecificeerd.

  • normal: Past de standaard woordafstand toe. Dit is de initiële waarde van de browser.
  • 4px: Een voorbeeld van vergrote woordafstand. Voegt 4 pixels marge toe tussen elk woord.
  • -1px: Een voorbeeld van verkleinde woordafstand. Vermindert de ruimte tussen elk woord met 1 pixel.
  • woord-en-letterafstand: Een voorbeeld van verminderde woord- en letterafstand. Vermindert de ruimte tussen woorden met 0,1em en tussen letters met 0,05em in vergelijking met normaal.

Gebruik van Positieve en Negatieve Waarden

Het instellen van een positieve waarde voor woordafstand zal de woordafstand vergroten. Aan de andere kant verkleinen negatieve waarden de ruimte tussen woorden. Negatieve waarden kunnen worden gebruikt om visuele effecten te benadrukken of om de letterafstand te verkleinen voor specifieke ontwerpdoeleinden.

Verschil met letterafstand

woordafstand is een eigenschap die de ruimte tussen woorden aanpast, terwijl letterafstand de ruimte tussen letters aanpast. Door deze eigenschappen te combineren, kunt u preciezer controle hebben over de typografie van volledige teksten.

Voorzichtigheid en beste praktijken

  • Overmatige Ruimteaanpassing: Overmatig gebruik van woordafstand kan leiden tot een afname in leesbaarheid. Vooral te grote of te kleine ruimtes kunnen stressvol zijn voor gebruikers, waardoor gematigde aanpassingen belangrijk zijn.
  • Responsief Ontwerp: Het specificeren van relatieve waarden met behulp van em of rem is effectief voor een responsief ontwerp omdat het zorgt voor een correcte weergave op verschillende schermformaten.
  • Aanpassing van Kopstijl: Door de ruimte tussen woorden in kopteksten te vergroten, kunt u visuele nadruk toevoegen. Hierdoor kunt u de hiërarchie van inhoud verduidelijken en een verfijnd ontwerp bereiken.

Eigenschap 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 is een CSS-eigenschap die bepaalt hoe tekst wordt afgebroken als deze breder is dan de container. Normaal gesproken breken browsers regels af bij woordgrenzen, maar specifieke instellingen kunnen de weergave en leesbaarheid verbeteren bij lange woorden of URL's.

U kunt de volgende waarden opgeven voor de eigenschap word-break.

  • normal

    normal is de standaardwaarde. Als een woord de breedte van de container overschrijdt, wordt het afgebroken bij woordgrenzen. Deze instelling is gebruikelijk in talen zoals Engels, en afbrekingen komen niet midden in woorden voor.

  • break-all

    break-all is een instelling waarbij regelafbrekingen na elk karakter kunnen worden ingevoegd, indien nodig. Vooral bij lange woorden of URL's gebeuren regelafbrekingen op karakterniveau om layoutverstoringen te voorkomen.

  • keep-all

    keep-all is een instelling die met name wordt gebruikt voor Aziatische talen (Japans, Chinees, Koreaans, etc.). Bij deze instelling wordt het hele woord behouden, en komen er geen breuken midden in woorden voor. Voor op spaties gescheiden talen zoals Engels worden normale regelafbrekingen op woordgrenzen toegepast.

Dit voorbeeld toont drie verschillende word-break instellingen. Met word-break-normal wordt het hele woord behouden en afgebroken bij woordgrenzen als het de breedte van de container overschrijdt. Met word-break-break-all treden breuken zelfs midden in woorden op. word-break-keep-all staat natuurlijke afbrekingen toe voor Aziatische talen zoals Japans en afbrekingen op woordgrenzen voor Engels.

Toepassingsscenario's voor word-break

Mobiele apparaten en responsief ontwerp 

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

Op mobiele apparaten is de schermbreedte beperkt, wat ertoe kan leiden dat tekst, inclusief URL's of lange woorden, de schermbreedte overschrijdt. In dergelijke gevallen kunt u met word-break: break-all; regelafbrekingen op karakterniveau toepassen om de schermbreedte aan te passen, wat de leesbaarheid verbetert.

hyphens Eigenschap 

 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}

  • De hyphens-eigenschap wordt in CSS gebruikt om aan te geven hoe woordafbreking (het splitsen van woorden met een koppelteken) moet worden behandeld bij het afbreken van tekstregels. Door deze eigenschap correct in te stellen, kunt u de leesbaarheid en het uiterlijk van de tekst verbeteren. Woordenafbreking is vooral handig wanneer lange woorden moeten worden overgebroken.

  • Omdat regels voor woordenafbreking per taal verschillen, is deze eigenschap afhankelijk van de locatie van de tekst.

Syntax 

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

De hyphens-eigenschap kan worden ingesteld op de volgende waarden:.

  • none: Er wordt geen woordafbreking toegepast. Woorden breken meestal alleen aan het einde van het woord.
  • manual: Woordafbreking wordt handmatig toegepast. In dit geval moet u breekpunten handmatig specificeren binnen de HTML. U kunt bijvoorbeeld &shy; (zacht koppelteken) gebruiken.
  • auto: De browser past automatisch woordafbreking toe op geschikte posities. In dit geval moet de taal van het document (het lang-attribuut) correct worden opgegeven.

Notities

  • Belang van taalinstellingen: Bij gebruik van hyphens: auto; is een correcte instelling van het lang-attribuut van het HTML-document noodzakelijk voor juiste woordafbreking.
  • Afhankelijkheid van het lettertype: Sommige lettertypen zijn mogelijk niet geschikt voor woordafbreking.
  • Gebruik van woordenafbrekingswoordenboeken: Regels voor woordafbreking zijn afhankelijk van de woordenboeken die door de browser worden gebruikt. Daarom werkt het mogelijk niet zoals verwacht voor bepaalde talen.

Samenvatting

Door de hyphens-eigenschap correct te gebruiken, kunt u de lay-out van tekst aanzienlijk verbeteren. Vooral voor meertalige websites en mobielvriendelijke ontwerpen kan het juiste gebruik van auto en manual de gebruikerservaring verbeteren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Tekstgerelateerde CSS-eigenschappenCSS-eigenschappen voor codeweergave en citaten