Temel metin yönünü ayarlamak için HTML dir'yi, bir flex satırının akışını tersine çevirmek için CSS flex-direction: row-reverse'i kullanın. Mac'inizden herkese açık bir sayfada kartları düzenlerken önce metin yönünü mü, öğe sırasını mı yoksa hizalamayı mı değiştirmeniz gerektiğine karar verin.

Bu kılavuz, bir sayfanın HTML ve CSS'sini metin düzenleyicisinde düzenlediğinizi ve masaüstü tarayıcıda önizlediğinizi varsayar. Amaç, metin davranışını ve belge sırasını bilinçli biçimde koruyarak Alpha, Beta ve Gamma adlı üç nötr kutucuğu düzenlemektir.

Her yön ayarı gerçekte neyi değiştirir?

HTML'nin dir özniteliği, bir öğenin metninin temel yönünü belirtir. Açık değerleri ltr ve rtl'tir; auto ise tarayıcıdan yönü içeriğe bakarak belirlemesini ister. WHATWG, bu bilginin CSS olmadan da kullanılabilir kalması için yazarların metin yönünü HTML üzerinden belirtmesini önerir. HTML Standardı: dir özniteliği.

CSS direction da temel metin yönünü denetler ve yerleşim davranışını etkiler. Kalıtıldığı için bir kapsayıcıya direction: rtl ayarı vermek alt öğelerini etkileyebilir. MDN, mümkün olduğunda HTML dir kullanılmasını önerir. CSS yön geçersiz kılmasını kutuları taşımak için kullanışlı bir yol olarak değil, bilinçli bir metin yönü kararı olarak değerlendirin. MDN: direction.

CSS flex-direction, flex kapsayıcısının ana eksenini denetler. row, geçerli yazım kipinin satır içi eksenini izler; row-reverse ise ana başlangıç ve ana bitiş yönlerini değiştirir. Kaynak sırasını korurken öğelerin yerleştirilme yönünü değiştirir. W3C: Flex akış yönü.

Bu mekanizmalar birbiriyle etkileşir. Yatay yazımda ltr flex satırı soldan başlarken, rtl flex satırı sağdan başlar. row-reverse eklemek, başlangıç yönünü her iki durumda da tersine çevirir. Bu nedenle row-reverse her zaman ilk öğenin sağda görüneceği anlamına gelmez. MDN: flex-direction.

Hedeflediğiniz sonuç hangi ayara karşılık geliyor?

Düzenlemeden önce istediğiniz sonucu somut biçimde yazın: “İngilizce etiketleri değiştirme, kutucukları görsel sırada ters çevir ve grubu sağda tut.” Bu ifade; metin, öğe akışı ve hizalamayla ilgili ayrı kararları belirtir.

Hedeflenen sonuç Uygun başlangıç noktası Kontrol edilecekler
İçeriğin temel metin yönünü ayarlamak HTML dir="ltr" veya dir="rtl" Bu ayarı, metni o yönde olması gereken kapsamda uygulayın.
Flex satırındaki tüm öğelerin görsel ilerleme yönünü tersine çevirmek flex-direction: row-reverse Önce kapsayıcının mevcut yönünü kontrol edin.
Değiştirilmemiş bir satırı ana bitiş kenarına taşımak justify-content: flex-end Hizalama için boş alan bulunduğundan emin olun.
Anlamlı sırayı her yerde değiştirmek Kaynak öğeleri yeniden sıralamak Ortaya çıkan okuma sırasının anlamlı olduğunu doğrulayın.
Seçilmiş öğeleri görsel olarak yeniden konumlandırmak Öğe bazında order değerleri Görsel sıra ile kaynak sırası arasındaki farkı gözden geçirin.

Tersine çevirme ile hizalama arasındaki fark önemlidir. ltr satırında justify-content: flex-end, Alpha, Beta ve Gamma öğelerini sıralarını tersine çevirmeden birlikte sağa yerleştirebilir. Hizalama, kullanılabilir ana eksen alanını dağıtır; flex-end, flex kapsayıcısının ana bitiş tarafını ifade eder. Esnek öğeler bu alanı tükettiğinde etkisi ortadan kalkabilir. MDN: justify-content.

Okuyucuların belirli bir sırayla karşılaşması gereken bir dizide bu sırayı belgenin kendisinde oluşturun. W3C, yanlış kaynak sırasını telafi etmek için flex yönünü tersine çevirmeye veya order kullanmaya karşı açıkça uyarır. W3C: Sıralama ve yönlendirme.

Sayfayı değiştirmeden önce dört birleşimi öngörün

Aşağıdaki karşılaştırma, belgelenmiş eksen kurallarından çıkarılmıştır. writing-mode: horizontal-tb, tek bir flex satırı, eşit order değerleri ve Alpha, Beta, Gamma kaynak sırası varsayılır. “Soldan sağa görünüm”, kutucukların ekran üzerindeki fiziksel konumlarını belirtir.

Kapsayıcı yönü Flex yönü İlk kutucuğun başlangıç konumu Soldan sağa görünüm
ltr row Sol Alpha, Beta, Gamma
ltr row-reverse Sağ Gamma, Beta, Alpha
rtl row Sağ Gamma, Beta, Alpha
rtl row-reverse Sol Alpha, Beta, Gamma

İçerikleri basit dikdörtgenlerden oluştuğunda ikinci ve üçüncü satırlar birbirine benzeyebilir. Ancak metin yönü ayarları farklıdır. Dördüncü birleşim sık karşılaşılan bir sürprizi açıklar: Hem rtl hem de row-reverse uygulandığında öğeler soldan sağa ilerler. MDN, yöne bağlı bu davranışı belgeliyor. MDN: flex-direction.

Temel metin yönü, noktalama işaretlerini ve yönlü metin parçalarının sıralanışını da etkiler. rtl ayarı, İngilizce bir sözcüğün her karakterini basitçe tersine çevirmez. Etiket tanınabilir kalırken noktalama işareti beklenmedik bir konumda görünebilir. Bu nedenle düz kutucuklar, kutuların yerleşimini incelemek için yararlıdır ancak metin davranışını değerlendirmek için yeterli değildir. MDN: dir kullanım notları.

Mac'inizde eksiksiz bir karşılaştırma sayfası deneyin

Aşağıdaki tam belgeyi bir düz metin düzenleyicisi kullanarak direction-demo.html adıyla kaydedin, ardından dosyayı tarayıcınızda açın. Dış bağımlılık kullanmadan yapay etiketlerden ve CSS dikdörtgenlerinden yararlanır. Beklenen sonuçlar belgelenmiş kurallara dayanır; örnek, tarayıcıda test edilmiş bir sonuç olarak sunulmamaktadır.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Dört satırı öngörü tablosuyla karşılaştırın. Dördünün de kaynak sırası aynıdır. Yalnızca kapsayıcı yönleri ve tersine çevirme sınıfları farklıdır. Açık yatay yazım kipi, bu gösterimi olağan yatay masaüstü durumuna odaklar.

Ardından yalnızca justify-content: flex-start değerini justify-content: flex-end olarak değiştirin, kaydedin ve yeniden yükleyin. Gruplar, her satırdaki öğe ilerleme yönünü koruyarak ana eksenin karşı kenarlarına taşınmalıdır. Böylece başka bir metin yönü ayarı eklemeden yerleşimi tersine çevirmeden ayırabilirsiniz. MDN: justify-content.

Son olarak hizalama ayarını eski hâline getirin ve her satırda Alpha sözcüğünden sonra bir nokta ekleyin. Noktalamanın yanı sıra kutucukların konumlarını da karşılaştırın. Bu, metin yönünü inceleyen açıklayıcı bir denemedir; sıradan İngilizce etiketlere rtl atama önerisi değildir. MDN'nin temel yön açıklaması, sınırdaki noktalama işaretlerinin neden ayrıca kontrol edilmesi gerektiğini anlatır. MDN: dir.

Gerçek düzende beklenmedik sonuçları teşhis edin

Üst öğenin flex kapsayıcısı olduğunu doğrulayın

Kutucukları içeren öğeyi kontrol edin. flex-direction, yalnızca öğenin display değeri flex veya inline-flex olduğunda uygulanır. Sıradan bir blok kapsayıcıdaki bildirim, flex yerleşimi oluşturmaz. Ayrıca daha sonraki bir kuralın tarayıcının geçerli genişliğinde etkin değeri değiştirip değiştirmediğini kontrol edin. MDN: flex-direction açıklaması.

Başka bir tersine çevirme eklemeden önce kalıtılan yönü kontrol edin

Kapsayıcıyı ve üst öğelerini dir açısından inceleyin, ardından CSS direction bildirimlerini kontrol edin. dir atlanırsa yön genellikle üst öğeden kalıtılır; değerin atlanması otomatik algılama isteği anlamına gelmez. Kaynak sırası beklenmedik biçimde sağdan başlıyorsa kalıtılan yön bunun nedeni olabilir. MDN: dir kalıtımı.

Düzen anahtarı olarak dir="auto" kullanmaktan kaçının. WHATWG bunu, başlıca ilk güçlü yönlü karakteri temel alan içerik yönü algılama olarak tanımlar ve yalnızca metin yönünün gerçekten bilinmediği durumlarda kullanılmasını önerir. Bir düzen gereksinimi, önce hangi etiketin geldiğine bağlı olmamalıdır. HTML Standardı: dir özniteliği.

Öğe sırasının tersine çevrilmesini satırların tersine çevrilmesinden ayırın

Sorun yalnızca pencereyi daralttıktan sonra ortaya çıkıyorsa satır kaydırmayı inceleyin. row-reverse ana eksendeki ilerleme yönünü değiştirir; wrap-reverse ise flex satırlarının dizilme yönünü değiştirir. Varsayılan nowrap tek bir satırı koruyabilir ve taşmaya yol açabilir. Bunlar ayrı denetimlerdir; bu yüzden başlangıçtaki masaüstü genişliğinin yanı sıra dar bir pencerede de deneyin. MDN: flex-wrap.

Öğelere özgü sıralama kurallarını arayın

Herhangi bir kutucuğun order değeri olup olmadığını kontrol edin. Flex yerleşimi öğeleri bu tamsayıya göre gruplandırır: önce en küçük değerler gelir ve eşit değerli gruplar içinde kaynak sırası korunur. Ardından tersine çevirme, ortaya çıkan dizinin hangi yönden yerleştirileceğini değiştirir. Kapsayıcının yönünün yanlış olduğuna karar vermeden önce öğe düzeyindeki beklenmedik sıralamayı sıfırlayın. MDN: Flex öğelerini sıralama.

Değişikliği korumadan önce okuma sırasını denetleyin

Nötr ve dekoratif kutucuklarda görsel tersine çevirme tek başına gereksinimi karşılayabilir. Bağlantı veya denetim öğeleri için kaynak sırasını inceleyin ve bileşende klavye odağını izleyin. Flex yönünü tersine çevirmek, sıralı gezinme veya sesli okuma sırasını değiştirmez. Dolayısıyla görsel olarak ters çevrilmiş bir grup özgün etkileşim sırasını koruyabilir. W3C: Flex akış yönü.

Kaynağın değişmesi gerekip gerekmediğine bu denetimle karar verin. İstenen anlamlı sıra Gamma, Beta, Alpha ise öğeleri bu sırayla yerleştirin. Okuma sırasının doğru hâli Alpha, Beta, Gamma olarak kalıyor ve yalnızca sunumun ters çevrilmesi gerekiyorsa görsel düzeni bu farkı göz önünde bulundurarak değerlendirin. MDN, odaklanılabilir bağlantılarla kaynak sırasının davranışını gösteriyor. MDN: Flex öğelerini sıralama.

Mekanizmayı gereksinime göre seçin: temel metin yönü için HTML dir, flex eksenindeki akış için flex-direction, değişmeyen bir diziyi konumlandırmak için hizalama. Sonucu korumadan önce kutucukların yerleşimini, noktalama işaretlerini, satır kaydırmayı ve kaynak sırasını ayrı ayrı karşılaştırın. Böylece yalnızca ters görünmekten ibaret bir düzen sorununu tekrarlanabilir biçimde çözebilirsiniz.

Kaynaklar