Mga katangian ng CSS na may kaugnayan sa pagpuwang ng teksto

Articles

Ang artikulong ito ay nagpapaliwanag ng mga pag-aari ng CSS na nauugnay sa espasyo sa pagitan ng teksto.

Maaari mong matutunan ang paggamit at kung paano isulat ang mga pag-aari tulad ng line-height at word-spacing.

YouTube Video

Paglikha ng HTML para sa preview

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>

Tipograpiya (May Kaugnayan sa Margin ng Teksto)

Ari-arian ng `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}

Ang line-height ay isang property ng CSS na ginagamit upang itakda ang espasyo sa pagitan ng mga linya (taas ng linya). Ang line-height ay tumutukoy sa patayong espasyo sa pagitan ng mga linya, na ginagamit upang mapabuti ang nababasa ng teksto o ayusin ang espasyo bilang bahagi ng disenyo.

Pangunahing gamit ng `line-height`

Mga numerong walang unit

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

Tukoyin ang taas na may kaugnayan sa laki ng font. Halimbawa, ang pagtukoy ng 1.5 ay nagtatakda ng taas ng linya sa 1.5 na beses ang laki ng font. Ang pamamaraang ito ay kapaki-pakinabang sa responsive na disenyo.

Porsiyento

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

Tukoyin ang taas ng linya bilang porsyento ng laki ng font. Halimbawa, ang pagtukoy ng 150% ay nagtatakda ng taas ng linya sa 150% ng laki ng font.

Nakasaad na halaga (px, em, rem, atbp.)

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

Tukoyin ang taas ng linya gamit ang absolutong yunit. Halimbawa, maaari kang tumukoy ng konkretong halaga tulad ng 20px, ngunit maaaring kulang ito sa flexibility para sa responsive na disenyo.

`normal`

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

Ang pagtukoy ng normal ay gumagamit ng default na mga setting ng espasyo ng linya ng browser. Karaniwan, ito ay magiging mga 1.2 hanggang 1.4 na beses ang laki ng font.

Mga Halimbawa ng Paggamit ng `line-height`

Mga nababasang talata

Ang isang line-height na nasa mga 1.5 hanggang 1.6 ay karaniwang inirerekomenda para sa nababasa ng teksto. Kung ang espasyo sa pagitan ng mga linya ay masyadong makitid, ang teksto ay magiging masikip at mahirap basahin; kung masyadong malawak, ang teksto ay tila hindi magkaugnay.

Disenyo ng heading

Para sa mga heading at pamagat, kung saan ang teksto ay mas malaki, maaaring bawasan ang espasyo sa pagitan ng linya. Mga setting tulad ng 1.1 o 1.2 ang madalas na ginagamit.

Buod

line-height ay isang mahalagang property upang mapabuti ang parehong nababasa at disenyo ng teksto.
Ang paggamit ng mga relative na value (mga numero o porsyento) ay nagpapadali sa pag-akma sa responsive na disenyo.
Para sa mga heading na may malalaking teksto at mga talata na may mas maliliit na teksto, mahalagang magtakda ng tamang espasyo para sa bawat isa.

Ang paggamit ng property na ito ay maaaring gawing mas kaaya-aya sa paningin ang teksto at mapahusay ang kalidad ng disenyo nito.

Ari-arian ng `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}

Ang letter-spacing ay isang property ng CSS na ginagamit upang ayusin ang espasyo sa pagitan ng mga karakter (espasyo ng letra). Ang property na ito ay maaaring gamitin upang gawing mas maayos ang disenyo ng teksto, mapahusay ang nababasa, at makamit ang mga tiyak na estilo.

Sa halimbawang ito, ito ay tinukoy tulad ng sumusunod.

normal: Ang default na espasyo ng letra. Ito ay isang karaniwang halaga na itinakda ng browser at font.
4px: Isang halimbawa ng maluwag na espasyo sa mga letra. Nagdadagdag ng 4 na pixel ng espasyo sa pagitan ng bawat karakter.
-1px: Isang halimbawa ng masikip na espasyo sa mga letra. Binabawasan ng 1 pixel ang espasyo sa pagitan ng bawat karakter.

Paano Gamitin ang `letter-spacing`

Mga halagang may yunit

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

Ang pagtatakda ng positibong halaga ay magpapaluwag ng espasyo sa mga letra.
Ang pagtatakda ng negatibong halaga ay magpapasikip ng espasyo sa mga letra.
Ang mga unit ay karaniwang nasa px (pixels) o em.

Default: `normal`

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

Gamitin ang default na espasyo ng letra. Karaniwan, ang karaniwang espasyo ng letra na tinukoy ng font ay ginagamit.

Mga halimbawa ng paggamit ng `letter-spacing`

Pinahusay na nababasa: Para sa maliliit na sukat ng font o sobrang pinagsama-samang mga font, maaari mong pagbutihin ang nababasa sa pamamagitan ng pagpapataas ng letter-spacing.
Pagsasaayos ng disenyo: Maaari mong isaayos ang espasyo ng letra upang biswal na i-emphasize ang mga elementong disenyo tulad ng mga pamagat o logo.
Pagsasaayos sa pagitan ng mga salita: Maaari mong isaayos ang espasyo sa antas ng letra, sa halip na sa pagitan ng mga salita. Inaayos ng letter-spacing ang espasyong antas-letra, ngunit gamitin ang word-spacing upang palawakin ang espasyo sa pagitan ng mga salita.
Balanse ng disenyo: Kung sobra mong tinaasan ang espasyo ng letra, ang buong teksto ay maaaring magmukhang masyadong banat. Sa kabilang banda, kung sobrang pinababa mo ito, ang teksto ay maaaring maging siksik at mahirap basahin, kaya't mahalagang panatilihin ang angkop na balanse.

Buod

letter-spacing ay isang katangian na nag-aayos ng espasyo sa pagitan ng mga letra, na nakakaapekto sa parehong disenyo at nababasa.
Maaari mong dagdagan ang espasyo gamit ang positibong halaga at bawasan ito gamit ang negatibong halaga.
Ito ay epektibo para sa mga pamagat at tiyak na mga elemento ng disenyo, ngunit maging maingat na huwag isakripisyo ang nababasa.

Sa pamamagitan ng paggamit ng katangiang ito, maaari mong isaayos ang anyo ng teksto at makamit ang kaakit-akit na mga disenyo.

Ari-arian ng `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 ay isang katangian ng CSS na kumokontrol sa espasyo sa pagitan ng mga salita sa isang teksto. Ang wastong paggamit ng katangiang ito ay maaaring magpaganda ng balanse ng biswal at nababasa ng teksto. Ang word-spacing ay partikular na kapaki-pakinabang sa mga disenyo na nakatuon sa tipograpiya at mga senaryong tumutugon na disenyo.

Sa halimbawang ito, ito ay tinukoy tulad ng sumusunod.

normal: Nag-aaplay ng default na espasyo ng salita. Ito ang inisyal na halaga ng browser.
4px: Isang halimbawa ng pinalaking espasyo ng salita. Nagdadagdag ng 4 na pixel ng margin sa pagitan ng bawat salita.
-1px: Isang halimbawa ng nabawasang espasyo ng salita. Binabawasan ang espasyo sa pagitan ng bawat salita ng 1 pixel.
word-and-letter-spacing: Isang halimbawa ng nabawasang espasyo ng salita at letra. Binabawasan ang espasyo sa pagitan ng mga salita ng 0.1em at sa pagitan ng mga letra ng 0.05em kumpara sa normal.

Paggamit ng Positibo at Negatibong Halaga

Ang pagtatakda ng positibong halaga para sa word-spacing ay magpapalawak sa espasyo ng salita. Sa kabilang banda, ang paggamit ng negatibong halaga ay nagpapasikip ng mga espasyo sa pagitan ng mga salita. Ang mga negatibong halaga ay maaaring gamitin upang bigyang-diin ang mga visual effects o upang pasikipin ang espasyo ng mga letra para sa partikular na mga layunin ng disenyo.

Pagkakaiba sa `letter-spacing`

Ang word-spacing ay isang property na inaayos ang espasyo sa pagitan ng mga salita, habang ang letter-spacing ay inaayos ang espasyo sa pagitan ng mga letra. Sa pamamagitan ng pagsasama ng mga property na ito, maaari kang magkaroon ng mas tiyak na kontrol sa typograpiya ng buong teksto.

Mga Pag-iingat at Pinakamahuhusay na Gawain

Sobrang Pagsasaayos ng Espasyo: Ang sobrang paggamit ng word-spacing ay maaaring magresulta sa pagbaba ng nababasa ng teksto. Lalo na ang sobrang laki o sobrang liit na espasyo ay maaaring magdulot ng stress sa mga gumagamit, kaya mahalaga ang katamtamang pagsasaayos.
Disenyo na Tumutugon: Ang pagtukoy ng mga relatibong halaga gamit ang em o rem ay epektibo para sa disenyo na tumutugon dahil tinitiyak nito ang wastong pagpapakita sa iba't ibang laki ng screen.
Pagsasaayos ng Estilo ng Heading: Sa pamamagitan ng pagpapaluwag ng espasyo sa pagitan ng mga salita sa heading text, maaari kang magdagdag ng visual na diin. Ito ay nagbibigay-daan upang linawin ang hierarchy ng nilalaman at makamit ang isang sopistikadong disenyo.

`word-break` na Ari-arian

 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}

Ang word-break ay isang CSS property na kumokontrol kung paano magbalot ang teksto kapag lumampas ito sa lapad ng container. Karaniwan, ang mga browser ay nagbe-break ng mga linya sa mga hangganan ng salita, ngunit ang mga partikular na setting ay maaaring magpabuti sa hitsura at pagiging madaling basahin kapag may mahahabang salita o mga URL.

Maaari mong tukuyin ang mga sumusunod na halaga para sa property na word-break.

normal

Ang normal ay ang default na halaga. Kapag ang isang salita ay lumampas sa lapad ng container, ito ay mababali sa mga hangganan ng salita. Ang setting na ito ay karaniwan sa mga wika tulad ng English, at ang break ay hindi nangyayari sa gitna ng mga salita.
break-all

Ang break-all ay isang setting kung saan ang mga line break ay maaaring ilagay pagkatapos ng anumang karakter, kung kinakailangan. Lalo na kapag may kasamang mahahabang salita o mga URL, ang mga line break ay nangyayari sa antas ng karakter upang maiwasan ang pagkasira ng layout.
keep-all

Ang keep-all ay isang setting na ginagamit partikular para sa mga wikang Asyano (Japanese, Chinese, Korean, atbp.). Sa setting na ito, ang buong salita ay pinapanatili, at walang mga break na nangyayari sa gitna ng mga salita. Gayunpaman, para sa mga wikang naghihiwalay gamit ang espasyo tulad ng English, ang normal na word-boundary line breaks ay inilalapat.

Ang halimbawang ito ay nagpapakita ng tatlong magkaibang setting ng word-break. Sa word-break-normal, ang buong salita ay pinapanatili at mababali sa mga hangganan ng salita kung ito ay lumampas sa lapad ng container. Sa word-break-break-all, ang mga break ay nangyayari kahit sa gitna ng mga salita. Ang word-break-keep-all ay nagbibigay-daan sa natural na breaks para sa mga wikang Asyano tulad ng Japanese at word-boundary breaks para sa English.

Mga Sitwasyon ng Paglalapat ng `word-break`

Mga Mobile na Device at Disenyong Tumutugon

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

Sa mga mobile device, ang lapad ng screen ay limitado, na maaaring magdulot ng teksto kabilang ang mga URL o mahahabang salita na lumampas sa lapad ng screen. Sa mga ganitong kaso, ang paggamit ng word-break: break-all; ay nagbibigay-daan sa mga line break sa antas ng karakter upang umakma sa lapad ng screen, na nagpapabuti sa pagiging madaling basahin.

Ari-arian ng `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}

Ang ari-arian ng hyphens ay ginagamit sa CSS upang tukuyin kung paano hahawakan ang paghahati ng mga salita (paglalagay ng gitling sa mga salita) kapag naghahati ng mga linya ng teksto. Sa wastong pagtatakda ng ari-arian na ito, maaari mong mapaganda ang kababasa at anyo ng teksto. Ang paggamit ng hyphenation ay kapaki-pakinabang lalo na kapag kailangang balutin ang mahahabang salita.
Dahil nagkakaiba-iba ang mga patakaran sa hyphenation depende sa wika, ang ari-arian na ito ay nakadepende sa lokalisasyon ng teksto.

Sintaks

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

Ang ari-arian ng hyphens ay maaaring itakda sa mga sumusunod na halaga:.

none: Walang hyphenation na inilalapat. Karaniwang naghahati lang ang mga salita sa dulo ng salita.
manual: Ang hyphenation ay inilalapat nang mano-mano. Sa kasong ito, kailangang tukuyin nang mano-mano ang mga punto ng hyphenation sa loob ng HTML. Halimbawa, maaari mong gamitin ang  (malambot na gitling).
auto: Awtomatikong inilalapat ng browser ang hyphenation sa mga angkop na posisyon. Sa kasong ito, kailangang tama ang pagtukoy ng wika ng dokumento (lang attribute).

Mga Tala

Kahalagahan ng Mga Setting ng Wika: Kapag gumagamit ng hyphens: auto;, kailangan ang tamang hyphenation sa pamamagitan ng tamang pagtukoy ng lang na attribute ng HTML na dokumento.
Pagdepende sa Font: Ang ilang font ay maaaring hindi akma para sa hyphenation.
Paggamit ng Mga Diksyunaryo para sa Hyphenation: Ang mga patakaran sa hyphenation ay nakadepende sa mga diksyunaryo na ginagamit ng browser. Kaya naman, maaaring hindi ito gumana ayon sa inaasahan para sa ilang wika.

Buod

Sa wastong paggamit ng ari-arian ng hyphens, maaari mong lubos na mapaganda ang layout ng teksto. Lalo na para sa mga multilingual na website at mga disenyo na angkop sa mobile, ang tamang paggamit ng auto at manual ay maaaring mapabuti ang karanasan ng gumagamit.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga katangian ng CSS na may kaugnayan sa teksto Mga Katangian ng CSS para sa Pagpapakita ng Kodigo at mga Quotations

Mga katangian ng CSS na may kaugnayan sa pagpuwang ng teksto

YouTube Video

Paglikha ng HTML para sa preview

Tipograpiya (May Kaugnayan sa Margin ng Teksto)

Ari-arian ng line-height

Pangunahing gamit ng line-height

Mga numerong walang unit

Porsiyento

Nakasaad na halaga (px, em, rem, atbp.)

normal

Mga Halimbawa ng Paggamit ng line-height

Mga nababasang talata

Disenyo ng heading

Buod

Ari-arian ng letter-spacing

Paano Gamitin ang letter-spacing

Mga halagang may yunit

Default: normal

Mga halimbawa ng paggamit ng letter-spacing

Buod

Ari-arian ng word-spacing

Paggamit ng Positibo at Negatibong Halaga

Pagkakaiba sa letter-spacing

Mga Pag-iingat at Pinakamahuhusay na Gawain

word-break na Ari-arian

Mga Sitwasyon ng Paglalapat ng word-break

Mga Mobile na Device at Disenyong Tumutugon

Ari-arian ng hyphens

Sintaks

Mga Tala

Buod

YouTube Video

Ari-arian ng `line-height`

Pangunahing gamit ng `line-height`

`normal`

Mga Halimbawa ng Paggamit ng `line-height`

Ari-arian ng `letter-spacing`

Paano Gamitin ang `letter-spacing`

Default: `normal`

Mga halimbawa ng paggamit ng `letter-spacing`

Ari-arian ng `word-spacing`

Pagkakaiba sa `letter-spacing`

`word-break` na Ari-arian

Mga Sitwasyon ng Paglalapat ng `word-break`

Ari-arian ng `hyphens`