Şimdiye kadar CSS öğrenmemizde karşılaştığımız birçok özellik ve değer, ekranımızın fiziksel boyutlarına bağlandı. Örneğin bir kutunun üstünde, sağında, altında ve solunda kenarlıklar oluşturduk. Bu fiziksel boyutlar, yatay olarak görüntülenen içeriğe düzgün bir şekilde eşlenir ve varsayılan olarak web, soldan sağa dilleri (örneğin İngilizce veya Fransızca) sağdan sola dillerden (Arapça gibi) daha iyi destekleme eğilimindedir.
Bununla birlikte, son yıllarda CSS, sağdan sola ve aynı zamanda yukarıdan aşağıya içerik (Japonca gibi) de dahil olmak üzere farklı içerik yönlerini daha iyi desteklemek için bir hayli gelişti. Bu farklı yönlere yazma modları denir. Çalışmanızda ilerledikçe ve düzenle ilgili çalışmaya başladığınızda yazma modlarını anlamanız size çok yardımcı olacaktır. Bu yüzden şimdi bu modları tanıtacağız.
Yazma modları nelerdir?
CSS’deki bir yazma modu, metnin yatay mı yoksa dikey mi çalıştığını ifade eder. writing-mode özelliği ile bir yazı modundan diğerine geçiş yapabiliriz. Üstelik bunu yapmak için illa dikey yazma modunu kullanan bir dilde çalışmanıza da gerek yok. Yaratıcı amaçlar için düzeninizin bazı bölümlerinin yazma modunu değiştirebilirsiniz.
Aşağıdaki örnekte writing-mode:vertical-rl kullanan bir başlığımız var. Bu başlıktaki metin dikey olarak gösterilecek. Dikey metin, grafik tasarımda yaygındır ve web tasarımınıza daha ilginç bir görünüm ve his katmanın bir yolu olabilir.
h1 {
writing-mode: vertical-rl;
}<h1>Play with writing modes</h1>
writing-mode için olası üç değer bulunur:
horizontal-tb: Yukarıdan aşağıya blok akış yönü. Cümleler yatay olarak çalışır.vertical-rl: Sağdan sola blok akış yönü. Cümleler dikey olarak çalışır.vertical-lr: Soldan sağa blok akış yönü. Cümleler dikey olarak çalışır.
Bu nedenle writing-mode özelliği, gerçekte, yukarıdan aşağıya, sağdan sola veya soldan sağa, blok düzeyindeki öğelerin sayfada görüntülenme yönünü belirler. Bu daha sonra cümlelerdeki metin akışının yönünü belirler.
Yazma modları ve blok ve satır içi düzen
Blok ve satır içi yerleşimi ile bazı öğelerin blok ve bazılarının ise satır içi elemanlar olarak görüntülendiğini zaten tartışmıştık. Yukarıda açıkladığımız gibi, blok ve satır içi, fiziksel ekrana değil, belgenin yazma moduna bağlıdır. İngilizce gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyorsanız, bloklar yalnızca sayfanın üstünden altına doğru görüntülenir.
Bir örneğe bakarak bunu daha açık hale getirelim. Bu sonraki örnekte, bir başlık ve bir paragraf içeren iki kutumuz var. İlki writing-mode: horizontal-tb, yatay olarak ve sayfanın üstünden altına yazılan bir yazma modunu kullanır. İkincisi writing-mode:vertical-rl ile dikey olarak ve sağdan sola yazılan bir yazma modunu işler.
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
</div>
</div>
Yazma modunu değiştirdiğimizde aslında hangi yönün blok hangisinin ise 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 ise blok yönü yatay olarak sağdan sola çalışır. Yani blok yönü her zaman kullanımda olan yazma modundaki gösterilen blokların yönüdür. Satır içi yönü ise her zaman bir cümlenin yöndür.
Yatay yazma modundayken yönlerimiz aşağıdaki gibidir.
Dikey yazma modunda ise aşağıdaki yönlere döneriz.
CSS düzenine, ve özellikle yeni düzen yöntemlerine, bakmaya başladığınızda, blok ve satır içi çok önemli hale gelir. Bunu daha sonra tekrar gözden geçireceğiz.
Yön
Yazma moduna ek olarak metin yönümüzle de ilgilenebiliriz. Yukarıda bahsedildiği gibi, Arapça gibi bazı diller yatay, ancak sağdan sola yazılır. Bu, yaratıcılık anlamında kullanabileceğiniz bir şey değildir. Eğer bir şeyi sağda sıralamak istiyorsanız, bunu yapmanın başka yolları bulunur. Ancak bu yöntemi de CSS doğasının bir parçası olarak anlamak önemlidir. Web yalnızca soldan sağa görüntülenen diller için değildir!
Yazma modu ve metnin yönü değişebildiği için, yeni CSS özellikleri sol ve sağ, üst ve alt değerlerini kullanmaz. Bunun yerine, başlangıç ve bitiş değerleri alırlar. Şu anda bunun için çok fazla endişelenmeyin, ancak yerleşim düzenine bakmaya başladığınızda bu fikirleri aklınızda bulundurun; CSS’yi anlamanıza gerçekten yardımcı olduğunu göreceksiniz.
Mantıksal özellikler ve değerler
Öğrenmenizin bu noktasında yazma modları ve yönü hakkında konuşmamızın nedeni, ekranın fiziksel boyutlarına bağlı birçok özelliğe zaten bakmış olmamızdır ve bunlar yatay yazma modundayken daha anlamlıdır.
Şimdi iki kutumuza tekrar bir göz atalım – biri horizontal-tb yazma modunda ve diğeri ise vertical-rl modunda. Bu kutuların her ikisine de bir width verelim. Kutunun dikey yazma modundayken hala bir genişliği olduğunu ve bu durumun metnin taşmasına neden olduğunu görebilirsiniz.
.box {
width: 150px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
</div>
Bu senaryoda gerçekten istediğimiz şey, yazma moduna göre yüksekliği genişlikle değiştirebilmektir. Dikey yazma modundayken, kutunun yatay modda olduğu gibi blok boyutunda genişlemesini istiyoruz.
Bunu kolaylaştırmak için CSS yakın zamanda bir dizi özellik geliştirdi. Bu yeni özellikler width ve height gibi temel fiziksel özellikleri mantıksal veya akışa özgü versiyonlar ile değiştirir.
Yatay yazma modundayken width ile eşlenen özellik inline-size‘dır — satır içi boyuttaki boyutu ifade eder. height özelliği block-size olarak adlandırılmıştır ve blok yönündeki boyuttur. width ile inline-size‘ı değiştirdiğimiz aşağıdaki örnekte bunun nasıl çalıştığını görebilirsiniz.
.box {
inline-size: 150px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have inline-size.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have inline-size.</p>
</div>
</div>
Mantıksal kenar boşluğu, kenarlık ve dolgu özellikleri
Son iki yazıda CSS kutu modeli ve CSS kenarlıkları hakkında bilgi edindik. Kenar boşluğu, kenarlık ve dolgu özelliklerinde de fiziksel özelliklerin bir eşleştirilmesini bulacaksınız. Örneğin margin-top, padding-left veya border-bottom yazdığımızda yazma modumuza göre kutunun neresini değiştiriyoruz? Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu özellikler için de eşleşmeler bulunur.
margin-top için margin-block-start kullanırız. padding-left için ise padding-inline-start kullanılır. Bu, cümlelerin yazma modunda başladığı yer olacaktır. border-bottom özelliği ile eşleştirilen border-block-end da blok boyutunun sonuna işaret eder.
Aşağıda fiziksel ve mantıksal özellikler arasında bir karşılaştırma görebilirsiniz.
.box sınıfındaki writing-mode özelliğini vertical-rl‘ye dönüştürürseniz fiziksel özelliklerin fiziksel yönlerine bağlı kaldığını, mantıksal özelliklerin ise yazma modu ile değiştiğini göreceksiniz.
Ayrıca <h2> öğesinin siyah border-bottom özelliği olduğunu da görebilirsiniz. Her iki yazma modunda da bu alt kenarlığın her zaman metnin altına nasıl geleceğini çözebilir misiniz?
.box {
inline-size: 200px;
writing-mode: horizontal-tb;
}
.logical {
margin-block-start: 20px;
padding-inline-end: 2em;
padding-block-start: 2px;
border-block-start: 5px solid pink;
border-inline-end: 10px dotted rebeccapurple;
border-block-end: 1em double orange;
border-inline-start: 1px solid black;
}
.physical {
margin-top: 20px;
padding-right: 2em;
padding-top: 2px;
border-top: 5px solid pink;
border-right: 10px dotted rebeccapurple;
border-bottom: 1em double orange;
border-left: 1px solid black;
}
h2 {
border-bottom: 5px solid black;
}<div class="wrapper">
<div class="box physical">
<h2>Physical Properties</h2>
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
</div>
<div class="box logical">
<h2>Logical Properties</h2>
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
</div>
</div>
mantıksal değerler
Şimdiye kadar mantıksal özellik adlarına baktık. Ayrıca top, right, bottom, ve left gibi fiziksel değerleri alan bazı özelliklerle de ilgilendik. Bu değerler aynı zamanda mantıksal değerlere – block-start, inline-end, block-end, ve inline-start gibi eşlemeşmelere de sahipti.
Örneğin, metnin görselin etrafına sarılmasına neden olmak için bir görüntüyü sola kaydırabilirsiniz. Aşağıdaki örnekte gösterildiği gibi left özelliğini inline-start ile değiştirebilirsiniz.
Görsele ne olduğunu görmek için bu örnekteki yazma modunu vertical-rl olarak değiştirin. Kaymayı değiştirmek için inline-start‘ı inline-end olarak değiştirin.
.box {
inline-size: 200px;
writing-mode: horizontal-tb;
}
img{
float: inline-start;
margin-inline-end: 10px;
margin-block-end: 10px;
}<div class="wrapper">
<div class="box logical">
<img src="big-star.png" alt="star">
<p>This box uses logical properties. The star image has been floated inline-start, it also has a margin on the inline-end and block-end.</p>
</div>
</div>
Burada ayrıca, yazma modu ne olursa olsun, kenar boşluğunun doğru yerde olmasını sağlamak için mantıksal kenar boşluğu değerlerini kullanıyoruz.
Şu anda yalnızca Firefox için akış göreli float değerleri desteklenir. Google Chrome veya Microsoft Edge kullanıyorsanız, görselin kaymadığını görebilirsiniz.
Fiziksel veya mantıksal özellikleri kullanmalı mısınız?
Mantıksal özellikler ve değerler, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle tarayıcılarda ancak son sürümlerde desteklenmiştir. Birden fazla yazma modu kullanmıyorsanız, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsiniz. Bununla birlikte, flexbox ve grid gibi mizanpaj yöntemleriyle uğraşmaya başladığınızda, çoğu şey için mantıksal sürümlere geçmek gerekiyor.
Becerilerinizi test edin!
Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizden emin olun.
Özet
Bu yazıda açıklanan kavramlar CSS’de giderek daha önemli hale geliyor. Blok ve satır içi yönün ve yazma modundaki bir değişiklikle metin akışının nasıl değiştiğinin anlaşılması, ileriye dönük olarak çok faydalı olacaktır. Bu yatay moddan başka bir yazma modu kullanmasanız bile CSS’yi anlamanız için önemlidir.
Bir sonraki modülde CSS’deki taşmaya göz atacağız.