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çeriklerde(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ışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarını anlamak ç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ışmana gerek de yoktur — tasarımının bölümlerinin yazma moduna yaratıcı amaçlala da değiştirebilirsin.

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ına 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 yazma modunda ki blok ve satır içi yönler fiziksel ekrana değil, belgeye bağlıdır bağlıdır. Türkçe gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyosan,  bloklar sayfanın üstünden altına doğru görüntülenir.

Bir örneğe bakarsak, bu daha da netleşecektir. Bu örneğimizde, 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, aslın hangi yönün blok ve hangisinin de satır içi olduğunu belirliyoruz. 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 paragrafları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 geliştirmeye başladığında, bu blok ve satır içi fikri çok önemli hale gelir. Tekrardan bu konuya değineceğ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 bir uygulama değildir — bir metni sağ taraftan başlatmak istiyoran, 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ında blundurun; bunu CSS anlayışında gerçekten yararlı bulacaksın.

Mantıksal özellikler ve değerler

Öğreniminin 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 fikir sahibi olmandı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 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 boyutunun da 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örebilirsin. inline-size ile width.

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 niteliklerin bir çok örneklerini bulacaksın margin-top, padding-left, ve border-bottom. Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu nitelikler için de eşlemelerimiz var.

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 ayarlar. border-bottom niteliğinin eşlemsi olan border-block-end ise blok boyutunun sonunda bir sınır koymamızı sağlar.

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

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

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

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

Mantıksal değerler

Şimdiye kadar mantıksal nitelik 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 isteyebilirsin. left değerinin yerini  inline-start değerinin aldığını görebilirsin

Resim üzerinde nasıl bir etkisi olduğunu görebilmek için horizontal-tb değerini vertical-rl ile değiştirebilirsin. 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ız"ca Firefox için float akış kontrol değerleri desteklenmektedir. Eğer Google Chrome veya Microsoft Edge kullanıyorsan, metnin kaymadığını fark edebilirsin.

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

Mantıksal özellikler ve değerleri, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle tarayıclarda yakın zamanda desteklenmiştir. Tarayıcı desteğinin ne kadar geriye gittiğini görmek için MDN'deki herhangi bir özellik sayfasını kontrol edebilirsin. Birden fazla yazma modu kullanmıyorsan, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsin. Bununla birlikte, nihayetinde insanların çoğu için mantıksal versiyonlara geçiş yapmalarını bekliyorum, çünkü flexbox ve grid gibi düzen yöntemleriyle de uğraşmaya başladığında çok mantıklı geliyorlar.

Becerilerini test et!

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini 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 bile CSS'i anlamana 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 öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme
  13. /ol>