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üklenmesi, dosyalarla ç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.
,
Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.
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
- Kaynak sırası ve miras
- CSS seçicileri
- Kutu modeli
- Arka planlar ve kenarlıklar
- Farklı metin yönleri kullanma
- Taşan içerik
- Değerler ve birimler
- CSS'de elemanların boyutları
- Görseller, medya ve form öğeleri
- Tabloları şekillendirme
- CSS'de hata ayıklama
- CSS'inizi düzenleme
- /ol>