Metin boşluğuyla ilgili CSS özellikleri

Articles

CSS'e Giriş

Bu makale, metin boşluğuyla ilgili CSS özelliklerini açıklamaktadır.

line-height ve word-spacing gibi özelliklerin nasıl yazılacağını ve kullanımını öğrenebilirsiniz.

YouTube Video

Önizleme için HTML oluşturma

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>

Tipografi (Metin Kenar Boşluklarıyla İlgili)

`line-height` özelliği

 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, satır aralığını (satır yüksekliğini) ayarlamak için kullanılan bir CSS özelliğidir. line-height, satırlar arasındaki dikey boşluğu belirler, okunabilirliği artırmak veya tasarımın bir parçası olarak boşlukları ayarlamak için kullanılır.

`line-height`'in temel kullanım alanları

Birimsiz sayılar

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

Yüksekliği yazı tipinin boyutuna göre belirtin. Örneğin, 1.5 belirtildiğinde satır yüksekliğini yazı tipi boyutunun 1.5 katına ayarlar. Bu yöntem, duyarlı tasarım için faydalıdır.

Yüzde oranı

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

Satır yüksekliğini yazı tipi boyutunun yüzdesi olarak belirtin. Örneğin, 150% belirtildiğinde satır yüksekliğini yazı tipi boyutunun %150'si olarak ayarlar.

Sabit değerler (px, em, rem, vb.)

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

Satır yüksekliğini mutlak birimlerde belirtin. Örneğin, 20px gibi somut bir değer belirtebilirsiniz, ancak bu duyarlı tasarımda esneklikten yoksun olabilir.

`normal`

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

normal belirlemek, tarayıcının varsayılan satır boşluğu ayarlarını uygular. Genellikle yazı tipi boyutunun yaklaşık 1.2 ila 1.4 katı olacaktır.

`line-height` Kullanımına Dair Örnekler

Okunabilir paragraflar

line-height değeri genellikle okunabilirlik için 1.5 ile 1.6 arasında önerilir. Satır aralığı çok dar olursa metin sıkışık ve okunması zor hale gelir. Çok geniş olursa ise metin kopuk hissedilir.

Başlık tasarımı

Daha büyük yazı boyutuna sahip başlık ve metinlerde satır aralığı azaltılabilir. 1.1 veya 1.2 gibi ayarlar genellikle kullanılır.

Özet

line-height, metnin hem okunabilirliğini hem de tasarımını iyileştirmek için önemli bir özelliktir.
Göreceli değerler (sayılar veya yüzdeler) kullanmak, duyarlı tasarımlara uyum sağlamayı kolaylaştırır.
Büyük yazılı başlıklar ve küçük yazılı paragraflar için her biri için uygun satır aralığını ayarlamak çok önemlidir.

Bu özelliği kullanarak metnin görünümünü daha okunabilir hale getirebilir ve tasarım kalitesini artırabilirsiniz.

`letter-spacing` özelliği

 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, karakterler arasındaki boşluğu (harf aralığını) ayarlamak için kullanılan bir CSS özelliğidir. Bu özellik, metin tasarımını düzenlemek, okunabilirliği artırmak ve belirli stiller elde etmek için kullanılabilir.

Bu örnekte aşağıdaki şekilde belirtilmiştir.

normal: Varsayılan harf aralığı. Tarayıcı ve font tarafından belirlenen standart bir değerdir.
4px: Genişletilmiş harf aralığına bir örnek. Her karakter arasına 4 piksel boşluk ekler.
-1px: Daraltılmış harf aralığına bir örnek. Her karakter arasındaki boşluğu 1 piksel azaltır.

`letter-spacing` Nasıl Kullanılır

Birimli değerler

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

Pozitif bir değer ayarlamak harf aralığını artırır.
Negatif bir değer ayarlamak harf aralığını azaltır.
Birimler genellikle px (piksel) veya em cinsindendir.

Varsayılan: `normal`

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

Varsayılan harf aralığını kullanın. Normalde, yazı tipi tarafından tanımlanan standart harf aralığı uygulanır.

`letter-spacing` kullanımı örnekleri

Okunabilirlik artırma: Küçük yazı tipi boyutları veya aşırı sıkıştırılmış yazı tiplerinde letter-spacing değerini artırarak okunabilirliği artırabilirsiniz.
Tasarım ayarı: Başlıklar veya logolar gibi tasarım öğelerini görsel olarak vurgulamak için harf aralığını ayarlayabilirsiniz.
Kelime araları yerine: Harf düzeyinde aralıkları ayarlayabilirsiniz. letter-spacing harf düzeyindeki aralıkları ayarlar, ancak kelimeler arasındaki boşluğu genişletmek için word-spacing kullanın.
Tasarım dengesi: Harf aralığını çok fazla artırırsanız, tüm metin fazla gerilmiş görünebilir. Tersine, çok fazla azaltırsanız metin sıkışık hale gelebilir ve okunması zor olabilir, bu nedenle uygun bir denge sağlamak önemlidir.

Özet

letter-spacing harfler arasındaki boşluğu ayarlayan, tasarımı ve okunabilirliği etkileyen bir özelliktir.
Pozitif değerlerle aralığı artırabilir, negatif değerlerle azaltabilirsiniz.
Başlıklar ve belirli tasarım öğeleri için etkilidir, ancak okunabilirliği tehlikeye atmamaya dikkat edin.

Bu özelliği kullanarak metnin görünümünü ayarlayabilir ve çekici tasarımlar elde edebilirsiniz.

`word-spacing` Özelliği

 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, bir metindeki kelimeler arasındaki boşluğu kontrol eden bir CSS özelliğidir. Bu özelliğin doğru kullanımı, görsel dengeyi ve metin okunabilirliğini artırabilir. word-spacing, özellikle tipografiye odaklanan tasarımlar ve responsive (duyarlı) tasarım senaryolarında faydalıdır.

Bu örnekte aşağıdaki şekilde belirtilmiştir.

normal: Varsayılan kelime aralığını uygular. Bu, tarayıcının başlangıç değeridir.
4px: Artırılmış kelime aralığına bir örnek. Her kelime arasına 4 piksel boşluk ekler.
-1px: Azaltılmış kelime aralığına bir örnek. Her kelime arasındaki boşluğu 1 piksel azaltır.
kelime-ve-harf-aralığı: Azaltılmış kelime ve harf aralığına bir örnek. Kelime aralığını normalden 0.1em, harf aralığını ise 0.05em azaltır.

Pozitif ve Negatif Değerlerin Kullanımı

kelime-aralığı için pozitif bir değer belirlemek kelime aralığını genişletecektir. Diğer taraftan, negatif değerler kullanmak kelimeler arasındaki boşlukları daraltır. Negatif değerler, görsel efektleri vurgulamak veya belirli tasarım nedenleri için harf aralığını sıkılaştırmak amacıyla kullanılabilir.

`harf-aralığı` ile Farkı

kelime-aralığı, kelimeler arasındaki boşluğu ayarlayan bir özelliktir, harf-aralığı ise harfler arasındaki boşluğu ayarlar. Bu özellikleri birleştirerek, tüm metinlerin tipografisi üzerinde daha hassas bir kontrol sağlayabilirsiniz.

Uyarılar ve En İyi Uygulamalar

Aşırı Boşluk Ayarı: kelime-aralığı kullanımının aşırıya kaçması okunabilirliği azaltabilir. Özellikle çok büyük veya çok küçük boşluklar kullanıcılar için rahatsız edici olabilir; bu nedenle ölçülü ayarlamalar önemlidir.
Duyarlı Tasarım: em veya rem kullanarak göreceli değerler belirtmek, farklı ekran boyutlarında doğru görüntüleme sağladığı için duyarlı tasarım için etkilidir.
Başlık Stili Ayarı: Başlık metnindeki kelimeler arasındaki boşluğu genişleterek görsel bir vurgu ekleyebilirsiniz. Bu, içeriğin hiyerarşisini netleştirmenizi ve sofistike bir tasarım elde etmenizi sağlar.

`word-break` Özelliği

 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, metin konteynırın genişliğini aştığında metnin nasıl kaydırıldığını kontrol eden bir CSS özelliğidir. Normalde, tarayıcılar satırları kelime sınırlarında böler, ancak uzun kelimeler veya URL'ler olduğunda belirli ayarlar görünümü ve okunabilirliği artırabilir.

word-break özelliği için aşağıdaki değerleri belirtebilirsiniz.

normal

normal varsayılan değerdir. Bir kelime konteynırın genişliğini aştığında, kelime sınırlarında kırılır. Bu ayar İngilizce gibi dillerde yaygındır ve kelimelerin ortasında kırılma olmaz.
break-all

break-all, gerektiğinde herhangi bir karakterden sonra satır sonu kırılmalarının yapılabileceği bir ayardır. Özellikle uzun kelimeler veya URL'ler içerdiğinde, düzen bozulmasını önlemek için satır kırılmaları karakter seviyesinde gerçekleşir.
keep-all

keep-all, özellikle Asya dilleri (Japonca, Çince, Korece vb.) için kullanılan bir ayardır. Bu ayarda, tüm kelime korunur ve kelimelerin ortasında kırılma olmaz. Ancak, İngilizce gibi boşlukla ayrılan dillerde normal kelime sınırı satır kırılmaları uygulanır.

Bu örnek üç farklı word-break ayarını gösterir. word-break-normal ile, tüm kelime korunur ve konteynır genişliğini aşarsa kelime sınırlarında kırılır. word-break-break-all ile kırılmalar kelimelerin ortasında bile gerçekleşir. word-break-keep-all, Japonca gibi Asya dilleri için doğal kırılmalara ve İngilizce için kelime sınırı kırılmalarına izin verir.

`word-break` Uygulama Senaryoları

Mobil Cihazlar ve Duyarlı Tasarım

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

Mobil cihazlarda, ekran genişliği sınırlıdır, bu da URL'ler veya uzun kelimeler içeren metinlerin ekran genişliğini aşmasına neden olabilir. Bu gibi durumlarda, word-break: break-all; uygulamak, ekran genişliğine uyum sağlamak için karakter seviyesinde satır sonu kırılmalarına izin verir ve okunabilirliği artırır.

`hyphens` Özelliği

 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}

hyphens özelliği, metin satırlarının kırılmasında kelime kesme (kelimelerin tire ile ayrılması) işleminin nasıl ele alınacağını belirtmek için CSS'te kullanılır. Bu özelliği uygun şekilde ayarlayarak metnin okunabilirliğini ve görünümünü iyileştirebilirsiniz. Tireleme, özellikle uzun kelimelerin taşınması gerektiğinde çok kullanışlıdır.
Tireleme kuralları dile göre değiştiği için, bu özellik metnin yerel ayarına bağlıdır.

Sözdizimi

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

hyphens özelliği şu değerlere ayarlanabilir:.

none: Herhangi bir tireleme uygulanmaz. Kelimeler genellikle sadece kelimenin sonunda kırılır.
manual: Tireleme elle uygulanır. Bu durumda, HTML içinde tireleme noktalarını manuel olarak belirtmeniz gerekir. Örneğin,  (yumuşak tire) kullanabilirsiniz.
auto: Tarayıcı, uygun konumlarda otomatik olarak tireleme uygular. Bu durumda, belgenin dili (lang özniteliği) doğru bir şekilde belirtilmelidir.

Notlar

Dil Ayarlarının Önemi: hyphens: auto; kullanıldığında, doğru tireleme için HTML belgesinin lang özniteliğinin doğru ayarlanması gerekir.
Yazı Tipi Bağımlılığı: Bazı yazı tipleri tireleme için uygun olmayabilir.
Tireleme Sözlüklerinin Kullanımı: Tireleme kuralları, tarayıcı tarafından kullanılan sözlüklere bağlıdır. Bu nedenle, bazı diller için beklenildiği gibi çalışmayabilir.

Özet

hyphens özelliğini düzgün bir şekilde kullanarak metin düzenini önemli ölçüde iyileştirebilirsiniz. Özellikle çok dilli web siteleri ve mobil uyumlu tasarımlar için auto ve manual seçeneklerini uygun şekilde kullanmak kullanıcı deneyimini geliştirebilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Metinle ilgili CSS özellikleri Kod Görüntüleme ve Alıntılar için CSS Özellikleri

Metin boşluğuyla ilgili CSS özellikleri

YouTube Video

Önizleme için HTML oluşturma

Tipografi (Metin Kenar Boşluklarıyla İlgili)

line-height özelliği

line-height'in temel kullanım alanları

Birimsiz sayılar

Yüzde oranı

Sabit değerler (px, em, rem, vb.)

normal

line-height Kullanımına Dair Örnekler

Okunabilir paragraflar

Başlık tasarımı

Özet

letter-spacing özelliği

letter-spacing Nasıl Kullanılır

Birimli değerler

Varsayılan: normal

letter-spacing kullanımı örnekleri

Özet

word-spacing Özelliği

Pozitif ve Negatif Değerlerin Kullanımı

harf-aralığı ile Farkı

Uyarılar ve En İyi Uygulamalar

word-break Özelliği

word-break Uygulama Senaryoları

Mobil Cihazlar ve Duyarlı Tasarım

hyphens Özelliği

Sözdizimi

Notlar

Özet

YouTube Video

`line-height` özelliği

`line-height`'in temel kullanım alanları

`normal`

`line-height` Kullanımına Dair Örnekler

`letter-spacing` özelliği

`letter-spacing` Nasıl Kullanılır

Varsayılan: `normal`

`letter-spacing` kullanımı örnekleri

`word-spacing` Özelliği

`harf-aralığı` ile Farkı

`word-break` Özelliği

`word-break` Uygulama Senaryoları

`hyphens` Özelliği