0Pricing
CSS Academy · Ders

Blok ve Satır İçi Yönler

Blok ve satır içi akış yönlerini ve bunların dikey ve yatay eksenlere nasıl eşlendiğini öğrenin.

Blok ve Satır İçi Yönler, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Blok Yönü

Blok yönü, blok düzeyindeki kutuların istiflendiği yöndür. Yatay yazı sistemlerinde (LTR/RTL) blok yönü yukarıdan aşağıyadır. Dikey yazma modlarında ise soldan sağa veya sağdan sola değişir.

Satır İçi Yön

Satır içi yön, metnin bir satır içinde aktığı yöndür. LTR dillerde satır içi yön soldan sağadır. RTL'de sağdan soladır. Dikey yazma modlarında yukarıdan aşağıya dönüşür.

writing-mode Özelliği

writing-mode, metin akışının temel yönelimini ayarlar:

  • horizontal-tb — yatay metin, yukarıdan aşağıya (varsayılan)
  • vertical-rl — dikey metin, sütunlar sağdan sola
  • vertical-lr — dikey metin, sütunlar soldan sağa

Yatay Yazı Sistemi

writing-mode: horizontal-tb (varsayılan) değerinde:

  • Blok yönü = dikey (üst → alt)
  • Satır içi yön = yatay (LTR'de sol → sağ, RTL'de sağ → sol)
  • Blok başlangıcı = üst, blok sonu = alt
  • Satır içi başlangıç = sol (LTR) veya sağ (RTL)

Dikey Yazı Sistemi

writing-mode: vertical-rl değerinde:

  • Blok yönü = yatay (sağ → sol)
  • Satır içi yön = dikey (üst → alt)
  • Blok başlangıcı = sağ, blok sonu = sol
  • Satır içi başlangıç = üst, satır içi sonu = alt

Eksenleri Görselleştirme

Bunu yazma moduyla birlikte dönen bir koordinat sistemi olarak düşünün. Mantıksal özellikler, sabit ekrana göre değil, döndürülebilen bu sisteme göre konumları tanımlar.

text-orientation

Dikey yazma modlarında text-orientation, tek tek karakterlerin yönelimini denetler:

  • mixed: Latin karakterlerini döndürür; CJK karakterlerini dik tutar
  • upright: Tüm karakterleri dik tutar (dikey CJK için)
  • sideways: Tüm karakterleri yan döndürür

Yatay Dikey Etiketler

Pratik bir kullanım alanı: yatay yazı bağlamlarında döndürülmüş kenar çubuğu etiketleri veya grafik ekseni etiketleri:

<div class="chart-label">Revenue</div>

Yazma Modlarını Birleştirme

Bir kapsayıcıda bir yazma modu bulunurken, tek tek satır içi öğelerde başka bir yazma modu bulunabilir. Bu yöntem, aynı paragrafta Latin ve CJK metinlerini birleştirmek için kullanılır.

Blok Boyutu ve Satır İçi Boyut

Genişlik ve yüksekliğin mantıksal karşılıkları:

  • inline-size = horizontal-tb değerinde genişlik (satır içi boyut)
  • block-size = horizontal-tb değerinde yükseklik (blok boyutu)
<div class="box">inline-size sets the width in LTR</div>

text-combine-upright Özelliği

Sayılar veya kısaltmalar içeren dikey metinlerde text-combine-upright (tcy), kısa karakter dizilerini dik tutar ve tek bir dikey metin hücresine sığacak şekilde sıkıştırır.

Hızlı Kontrol

LTR bir dil ile kullanılan writing-mode: horizontal-tb değerinde hangi eksen “blok” eksenidir?

Özet

Blok ekseni, blok kutularının istiflendiği yöndür; satır içi eksen ise metin akışının yönüdür. Yatay yazı sistemlerinde blok = dikey, satır içi = yataydır. Dikey yazıda bunlar yer değiştirir. writing-mode, temel eksen yönelimini denetler. Mantıksal özellikler, o anda blok ve satır içi olan eksenlere uyarlanır.

Sıkça Sorulan Sorular

“Blok ve Satır İçi Yönler” dersi ücretsiz mi?

Evet — “Blok ve Satır İçi Yönler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Blok ve Satır İçi Yönler” dersinde ne öğreneceğim?

Blok ve satır içi akış yönlerini ve bunların dikey ve yatay eksenlere nasıl eşlendiğini öğrenin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Blok ve Satır İçi Yönler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma
  2. Blok ve Satır İçi Yönler
  3. Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık
  4. RTL Yerleşimlerinde Mantıksal Özellikler
← CSS Academy Sayfasına Dön