0Pricing
CSS Academy · Ders

RTL Yerleşimlerinde Mantıksal Özellikler

Mantıksal özellikleri kullanarak Arapça ve İbranice için otomatik olarak yön değiştiren, gerçekten çift yönlü bir yerleşim oluşturun.

RTL Yerleşimlerinde Mantıksal Özellikler, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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.

HTML'de RTL Ayarlama

RTL'yi HTML'de dir özniteliği ve eşleşen lang özniteliğiyle bildirin:

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

CSS'de dir="rtl"

Yönü CSS'de de ayarlayabilirsiniz — bu, sınama veya kısmi RTL bölümleri için kullanışlıdır:

<div dir="rtl">هذا العنصر باتجاه RTL</div>

LTR/RTL Geçişini Sınama

Hızlı bir sınama: dir="rtl" özniteliğini <html> öğesine ekleyin. Mantıksal özelliklerle yerleşim doğru biçimde aynalanmalıdır. Fiziksel özelliklerle ise nelerin düzeltilmesi gerektiğini görürsünüz.

Otomatik Olarak Uyarlananlar

dir="rtl" ayarlandığında, mantıksal özelliklerle şu öğeler otomatik olarak tersine döner:

  • Metin hizalaması (başlangıç/bitiş)
  • Kenar boşlukları ve iç boşluklar (satır içi başlangıç/bitiş)
  • Kenarlıklar (satır içi başlangıç/bitiş)
  • Yüzdürmeler (satır içi başlangıç/bitiş)
  • Konumlandırma (satır içi içe yerleştirme başlangıcı/bitişi)

Otomatik Olarak Uyarlanmayanlar

Mantıksal özellikler kullanılsa bile, RTL'de şu öğelere dikkat etmek gerekir:

  • Yön içeren arka plan görselleri
  • Yön açısından anlam taşıyan SVG simgeleri (oklar, şevronlar)
  • translateX() gibi dönüşümler — bir yön bayrağıyla birlikte translateX(calc(-1 * var(--offset))) kullanın
  • Açık piksel değerleri kullanan mutlak konumlandırma

SVG Simgelerini Aynalama

CSS, RTL'de yönlü simgeleri ters çevirmek için sade bir yol sunar:

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

CSS'te Yöne Duyarlı Değişken

Yöne duyarlı değerler için bir CSS değişkeni tekniği:

<div dir="rtl" class="drawer">Drawer</div>

Uygulamalı RTL Örneği

Mantıksal özellikleri kullanan bir kart bileşeni:

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-size ve RTL

Bazı Arapça yazı tipleri, Latin karşılıklarıyla aynı piksel boyutunda daha büyük veya daha küçük görünür. Gerekirse her yazı sistemi için font-size değerini tanımlayın:

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

Test Araçları

Tarayıcının DevTools'u çift yönlü düzenleri taklit edebilir. Ayrıca ekran okuyucuları için okuma sırasının görsel sırayı değil mantıksal sırayı izlediğini doğrulamak üzere Chrome'un erişilebilirlik ağacını kullanın.

Gerçek Dünya RTL Kontrol Listesi

RTL inceleme kontrol listesi:

  • Tüm kenar boşlukları ve iç boşluklar mantıksal özellikleri kullanıyor
  • Tüm kenarlıklar satır içi başlangıç/bitiş değerlerini kullanıyor
  • Metin hizalaması başlangıç/bitiş değerlerini kullanıyor
  • Yönlü simgeler scaleX(-1) ile ters çevriliyor
  • Mutlak konumlar gerektiğinde inset-inline-* kullanıyor
  • Kaydırılabilir kapsayıcılar doğru kenardan kaydırılıyor

Hızlı Kontrol

RTL düzenlerinde yönlü bir SVG ok simgesini aynalamanın en basit yolu hangi CSS dönüşümüdür?

Özet

RTL düzeni için dir="rtl" değerini html öğesine ayarlayın. Mantıksal özellikler kenar boşluklarını, iç boşlukları, kenarlıkları ve hizalamayı otomatik olarak uyarlar. Dönüşümlerdeki fiziksel piksel değerleri ve mutlak konumlandırma yine de RTL için elle dikkate alınmalıdır. Yönlü simgeleri scaleX(-1) ile aynalayın. Kök öğenizde dir="rtl" değerini değiştirerek test edin.

Sıkça Sorulan Sorular

“RTL Yerleşimlerinde Mantıksal Özellikler” dersi ücretsiz mi?

Evet — “RTL Yerleşimlerinde Mantıksal Özellikler” 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.

“RTL Yerleşimlerinde Mantıksal Özellikler” dersinde ne öğreneceğim?

Mantıksal özellikleri kullanarak Arapça ve İbranice için otomatik olarak yön değiştiren, gerçekten çift yönlü bir yerleşim oluşturun. 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 4. dersidir.

“RTL Yerleşimlerinde Mantıksal Özellikler” 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