Farklı metin yönlerini kullanma

CSS öğrenimimizde şimdiye kadar karşılaştığımız özelliklerin çoğu, ekranımızın fiziksel boyutlarına bağlanmıştır. Örneğin bir kutunun üstünde, sağında, altında ve solunda kenarlıklar oluşturmak gibi. Bu fiziksel boyutlar, yatay olarak görüntülenen içeriğe çok düzgün bir şekilde eşleşir ve HTML varsayılan olarak, soldan sağa dilleri(örn. Türkçe veya İngilizce), sağdan sola yazılan dillere(Arapça gibi) göre daha iyi destekleme eğilimindedir.

Ancak son yıllarda, sağdan sola ve aynı zamanda yukarıdan aşağıya içerikleri de(Japonca gibi) dahil olmak üzere farklı içerik yönlerine daha iyi destek vermek için CSS gelişti — bu farklı yönlerin görüntülenmesine yazma modu denir. Çalışmanızda ilerledikçe ve mizanpajla çalışmaya başladığınızda, yazma modlarını anlamak size çok yardımcı olacaktır, bu nedenle şimdi onu tanıtacağız.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: Modern CSS için yazma modlarının önemini anlamak.

Yazma modları nelerdir?

CSS'de bir yazma modu, metnin yatay mı yoksa dikey mi çalıştığını ifade eder.  writing-mode niteliği bize mevcut yazma modundan başka bir yazma moduna geçiş yapmamıza olanak sağlar. Bunu yapmak için dikey yazı modu kullanan bir dilde çalışmanıza gerek yoktur — tasarımınızın bölümlerinin yazma moduna yaratıcı amaçlala da değiştirebilirsiniz.

Aşağıdaki örnekte writing-mode: vertical-rl kullanılarak görüntülenen bir bağlığımız var. Metin artık dikey olarak çalışıyor. Dikey metin, grafik tasarımında yaygındır ve web tasarımınıza daha ilginç bir görünüm ve his katmanın bir yolu olabilir.

writing-mode niteliği için olası üç değer şunlardır:

  • horizontal-tb: Yukarıdan aşağıya blok akış yönü. Cümleler yatay olarak ilerler.
  • vertical-rl: Sağdan sola blok akış yönü. Cümleler dikey olarak ilerler.
  • vertical-lr: Soldan sağa blok akış yönü. Cümleler dikey olarak ilerler.

Yani writing-mode niteliği öğelerin sayfada, bloklar halinde görüntülendiği yönü belirler — yukarıdan aşağıya, sağdan sola veya soldan sağa. Bu daha sonra metnin cümlelerde aktığı yönü belirler.

Yazma modları ve blok ve satır içi düzen

Blok ve satır içi düzeni, daha önce bazı öğelerin blok ve bazılarının da satır içi öğeler olarak götüntülendiğini tartıştık. Yukarıda açıkladığımız gibi blok ve satır içi yönler fiziksel ekrana değil, belgenin yazma moduna bağlıdır. İncilizce gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyosanız,  bloklar sayfanın üstünden altına doğru görüntülenir.

Bir örneğe bakarsak, bu daha da netleşecektir. Bir sonraki örnekte, bir başlık ve bir paragraf içeren iki kutum var. İlki writing-mode: horizontal-tb, sayfanın üstünden altına doğru yatay eksende hareket eden bir yazma modu kullanır. İkincisi writing-mode: vertical-rl; sayfanın sağından sola doğru dikey eksende hareket eden bir yazma modudur.

Yazma modunu değiştirdiğimizde, hangi yönün blok ve hangisinin satır içi olduğunu değiştiriyoruz. Bir horizontal-tb yazma modunda blok yönü yukarıdan aşağıya doğru ilerler; bir vertical-rl yazma modunda blok yönü yatay olarak sağdan sola ilerler. Daha iyi açıklamak istersek; block dimension: yazım modunda bloğu paragraf gibi düşünebiliriz. blok yönü paragrafların sayfada dizileceği yönü belirler. Yukarıdan aşağıya, soldan sağa veya sağdan sola. inline dimension: Satır içi ise paragradların içerisindeki satırlar(dizeler) olarak düşünebiliriz, satır içi cümlenin satır içerisindeki akış yönünü belirler.

Bu şekil, yatay yazma modundayken iki boyutu göstermektedir.

,Showing the block and inline axis for a horizontal writing mode.

Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.

Showing the block and inline axis for a vertical writing mode.

CSS mizanpajına ve özellikle yeni mizanpaj yöntemlerine bakmaya başladığınızda, bu blok ve satır içi fikri çok önemli hale gelir. Daha sonra tekrar ziyaret edeceğiz.

Yön

Yazma moduna ek olarak metin  yönümüz de var. Yukarıda belirtildiği gibi, Arapça gibi bazı diller yatay olarak ancak sağdan sola yazılır. Bu, kreatif anlamda kullanacağınız bir uygulama değildir — bir metni sağ taraftan başlatmak istiyoranız, bunu yapmanın başka yolları da vardır — ancak bunu CSS'in doğasının bir parçası olarak anlamak önemlidir. Web sadece soldan sağa gösterilen diller için değildir.

Yazma modu ve metnin yönünün değişebilmesi nedeniyle, yeni CSS mizanpaj yöntemleri sola ve sağa, yukarı ve sağıya atıfta bulunmaz. Bunun yerine, bu satır içi ve bu blok ayrımıyla birlikte başlangıç ve bitiş  tanımlarıyla bu işi çözer. Şu anda bunun için fazla endişelenmeyin, ancak düzene bakmaya başlarken bu fikirleri aklınızda blundurun; bunu CSS anlayışınızda gerçekten yararlı bulacaksınız.

Mantıksal özellikler ve değerler

Öğreniminizin bu noktasında yazma modları ve yönü hakkında konuşmamın nedeni, ekranın fiziksel boyutlarına bağlı bir çok özelliğe zaten bakmış olmamız ve konu hakkında bir fikir sahibi olmanızdır.

İki kutumuza tekrar bir göz atalım — biri horizontal-tb ve diğeride vertical-rl değerlerine sahip. Bu iki kutuya da bir width değeri verdim. Gördüğünüz gibi kutu dikey yazma modundayken bir genişliğe sahiptir ve bu metnin taşmasına neden olmuştur.

Aslında burada olmasını istediğimiz şey, yazma moduyla birlikte yükseği de, genişliği de değiştirmek. Dikey yazma modundayken, yatay modda olduğu gibi kutunun, blok boyutunda genişlemesini istiyoruz.

Bunu kolaylaştırmak için, CSS yakın zamanda bir dizi eşlenmiş özellik geliştirdi. Bunlar esasen fiziksel özellikleri — width ve height gibi — mantıksal veya  akışla ilgili sürümlerle değiştirir.

Yatay yazma modundayken çağırılan inline-size niteliği satır içi boyuttaki width'yi ifade eder.  block-size niteliği ise blok boyuttaki height boyutunu ifade eder. Bunların nasıl çalıştığını aşağıdaki örnekte görebilirsiniz. width ile inline-size.

Mantıksal kenar boşluğu, kenarlık ve dolgu nitelikleri

Son iki derste CSS kutu modeli ve CSS kenarlıkları hakkında konuştuk. Kenar boşluğu, kenarlık ve dolgu niteliklerinde, fiziksel özelliklerin bir çok örneklerini bulacaksınız margin-top, padding-left, ve border-bottom. Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu özellikler için de eşlemeler vardır.

margin-top niteliğinin eşlemesi olan margin-block-start, her zaman kenar boşluğunun blok boyutunun başında olmasını sağlayacaktır.

padding-left niteliğinin eşlemesi olan padding-inline-start, satır içi yönüne başlamadan uygulanacak olan dolguyu ayarlayacak. border-bottom nitelğinin eşlemsi olan border-block-end ise blok boyutunun sonunda bir sınır koymamızı sağlayacaktır.

Aşağıda fiziksel ve mantıksal özellikler arasında bir karşılaştırma görebilirsiniz.

Eğer .box sınıfı içerisindeki writing-mode'u vertical-rl olarak değiştirirseniz, fiziksel boyut ile mantıksal özelliklerin yazma modu üzerindeki etkisini daha iyi anlayabilirsiniz.

Ayrıca <h2> etiketinin border-bottom özelliğine sahip olduğunu görebilirsiniz. Her iki yazma modunda da alt kenarlığın her zaman metnin altında kalmasını nasıl sağalayacağınızı bulabilir misiniz?

Tek tek kenarlık uzuntanımları göz önünde bulundurduğunuzda çok sayıda özellik vardı ve Mantıksal Özellikler ve Değerler için MDN sayfasında eşlenen tüm özellikleri görebilirsiniz.

Mantıksal değerler

Şimdiye kadar mantıksal özellik adlarına baktık. Fiziksel yönleri belirten bazı nitelik son ekleri vardır top, right, bottom, ve left. Bu yönleri belirten eklerin de eşleştirmeleri vardır — mantıksal son eklerine bakacak olursa, block-start, inline-end, block-end, ve inline-start.

Örneğin, metnin resmin etrafına sarılmasına neden olmak için bir resmi sola kaydırmak isteyebilirsiniz. left değerinin yerini  inline-start değerinin aldığını görebilirsiniz

Resim üzerinde nasıl bir etkisi olduğunu görebilmek için horizontal-tb değerini vertical-rl ile değiştirebilirsiniz. Ayrıca float niteliğindeki inline-start değerini inline-end ile değiştirin.

Burada ayrıca, yazma modu ne olursa olsun kenar boşluklarının doğru yerde olmasını sağlamak için mantıksal kenar boşluk değerlerini kullanıyoruz.

Şu anda, yalnızca Firefox için float akış kontrol değerleri desteklenmektedir. Eğer Google Chrome veya Microsoft Edge kullanıyorsanız, metnin kaymadığını fark edebilirsiniz.

Fiziksel veya mantıksal özellikleri kullanmalı mısınız?

Mantıksal özellikler ve değerleri, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle yarayıclarda yakın zamanda uygulanmıştır. Tarayıcı değsteğinin ne kadar geriye gittiğini görmek için MDN'deki herhangi bir özellik sayfasını kontrol edebilirsiniz. Birden fazla yazma modu kullanmıyorsanız, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsiniz. Bununla birlikte, nihayetinde insanların çoğu için mantıksal versioyonlara geçiş yapmasını bekliyoruz, çünkü flexbox ve grid gibi düzen yöntemleriyel de uğraşmaya başladığınızda çok mantıklı geliyorlar.

Becerilerinizi test edin!

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizi doğrulamak için bazı testler hazırladık. — bkz. Becerilerinizi test edin: yazma modları.

Özet

Bu derste açıklanan kavramlar CSS'de giderek daha önemli hale geliyor. Blok ve satır içi yönün ve yazma modunda bir değişiklikle metnin akışını nasıl değiştiğinin anlaşılması, ileride çok faydalı olacaktır. Yatay mod dışında bir yazma modu kullanmasanız bile CSS'i anlamanıza yardımcı olacaktır.

Bir sonraki modülde, CSS'deki taşmayı derinlemesine ele alacağız.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'inizi düzenleme
  13. /ol>