Sağdan Sola Metin için dir=rtl
Arapça, İbranice ve diğer RTL dilleri için RTL yerleşimini etkinleştirin
Sağdan Sola Metin için dir=rtl, CoddyKit'te ücretsiz bir HTML 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
dir Ne İşe Yarar
dir özniteliği, bir öğenin temel metin yönünü belirtir. dir="ltr" (soldan sağa; çoğu dil için varsayılandır) veya dir="rtl" (Arapça, İbranice, Farsça ve Urduca için sağdan sola).
Tüm Siteyi RTL Yapmak için html Üzerinde Ayarlama
Arapça, İbranice, Farsça ve Urduca sitelerde kök öğe üzerinde dir="rtl" ayarlayın. Bu, her bloktaki varsayılan akışı tersine çevirir: metin sağa hizalanır, listeler sağdan girintilenir, kaydırma çubukları sola taşınır ve düzenler modern CSS altında otomatik olarak aynalanır.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Çift Yönlü Metin
Karışık yönlü metin (içinde İngilizce marka adları bulunan Arapça metin) Unicode Çift Yönlü Algoritması'nı otomatik olarak izler. Temel yön (dir'den alınır), tek yönlü bölümlerin satır düzeyinde nasıl düzenleneceğini belirler; karakter dizileri kendi yazı sistemlerinin doğal yönünde akar.
CSS Mantıksal Özellikleri
Modern CSS, yöne uyum sağlayan mantıksal özellikler kullanır: margin-inline-start (LTR'de sol, RTL'de sağ), padding-inline-end, border-inline-start. Sol/sağ değerlerini start/end ile değiştirmek, tek bir stil sayfasının her iki yönde de kullanılmasını sağlar.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox ve Grid Otomatik Olarak Uyum Sağlar
Flexbox'ın satır yönü dir'yi dikkate alır: RTL'de öğeler sağdan sola akar. Izgara şablonu sütunları da tersine döner. Bu, flex veya grid ile yazılmış çoğu düzenin yöne özel CSS olmadan RTL'de çalıştığı anlamına gelir; modern düzen yön bağımsızdır.
Tersine Çevrilmesi Gereken Simgeler
Yön belirten simgeler (geri oku, ileri oku, geri al/yinele) RTL'de tersine çevrilmelidir. RTL SVG'nin ayrı sürümlerini sağlamak yerine [dir="rtl"] içinde CSS transform: scaleX(-1) kullanın. Yön belirtmeyen simgeler (arama, ayarlar, dişli) aynı kalır.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Metin Hizalama
text-align: left yerine text-align: start kullanmayı tercih edin; start, LTR'de sola ve RTL'de sağa çözülür. Aynı durum end için de geçerlidir. Yöne duyarlı hizalama, RTL desteği eklerken ortaya çıkan bir hata sınıfını ortadan kaldırır.
Öğe Bazında dir Geçersiz Kılma
Tarayıcının yönü ilk güçlü yön karakterinden algılamasını sağlamak için bir öğe üzerinde dir="auto" ayarlayın: <p dir="auto">{user.name}</p>, Arapça, İngilizce veya karışık olabilen kullanıcı tarafından gönderilmiş adları özel durum gerektirmeden işler.
Bidi Yerleştirmesi
bdi (çift yönlü yalıtım) ve bdo (çift yönlü geçersiz kılma) öğeleri, çift yönlü algoritmanın belirli metinleri nasıl ele alacağını ayrıntılı biçimde denetlemenizi sağlar. Bu, kullanıcı girdisini olduğu gibi yeniden üretirken veya akış hâlindeki metin içinde bir kod parçası için belirli bir yönü zorunlu kılarken kullanışlıdır.
Form Alanları
Girdiler, dir değerini üst öğelerinden devralır. Yönün değişebildiği kullanıcı tarafından sağlanan metinlerde (çok dilli kullanıcıları olan bir sohbet uygulaması gibi), her girdinin içeriğine göre doğru görüntülenmesi için ayrı girdiler üzerinde dir="auto" ayarlayın.
RTL Düzenlerini Sınama
Tarayıcılar, DevTools konsolunda geçici olarak document.documentElement.dir = "rtl" ayarlayarak RTL önizlemesi yapmanıza olanak tanır. Simge yönünü, iç ve dış boşlukları, kaydırma çubuğu konumunu ve hiçbir öğede start/end yerine sabit sol/sağ değerleri kullanılmadığını kontrol edin.
CSS Yönü Düzen Yönünden Farklıdır
CSS direction özelliği ve HTML dir özniteliği, çoğu düzende aynı etkiye sahiptir. HTML özniteliğini tercih edin; çünkü yardımcı teknolojiler, e-posta istemcileri ve diğer tüketiciler bunu okuyabilir, CSS özelliği ise yalnızca tarayıcılardaki görsel oluşturmayı etkiler.
Bilginizi Sınayın
RTL dillerini desteklerken margin-inline-start gibi CSS mantıksal özellikleri neden margin-left yerine tercih edilir?
Özet
<html> üzerinde dir="rtl" kullanılması, Arapça/İbranice/Farsça/Urduca sitelerin temel yönünü tersine çevirir. CSS mantıksal özellikleri (margin-inline-start, padding-block-end) otomatik olarak uyum sağlar. Flexbox/grid düzenleri değişiklik yapılmadan aynalanır. Yön belirten simgeleri tersine çevirin, text-align: start/end kullanın ve yönü bilinmeyen kullanıcı içeriği için dir="auto" kullanın.
Sıkça Sorulan Sorular
“Sağdan Sola Metin için dir=rtl” dersi ücretsiz mi?
Evet — “Sağdan Sola Metin için dir=rtl” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Sağdan Sola Metin için dir=rtl” dersinde ne öğreneceğim?
Arapça, İbranice ve diğer RTL dilleri için RTL yerleşimini etkinleştirin HTML 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.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML 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.
“Sağdan Sola Metin için dir=rtl” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML 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
- lang Özniteliği ve Ekran Okuyucular
- Sağdan Sola Metin için dir=rtl
- bdi ve bdo Öğeleri
- charset ve Unicode Yönetimi: Özel Karakterler