Yazma Modları ve CSS Düzeni

Bu, bu özelliğin pratik veya yaratıcı uygulaması hakkında bir makale değildir. Bunun yerine, bir sayfanın veya bileşenin yazma modunu nadiren değiştirmeye ihtiyaç duyanlarımız için bile yazma modlarını anlamanın neden bu kadar önemli olduğunu göstermek istiyorum. Çoklu yazma modlarının desteklenmesi, Flexbox ve Grid Layout'un yeni yerleşim yöntemlerinin tasarlanma biçiminin anahtarıdır. Bunu anlamak, bu yerleşim yöntemlerinin nasıl çalıştığını daha iyi anlamayı sağlayabilir.

Yazma Modları Nelerdir?

Bir belgenin veya bileşenin yazma modu, metnin aktığı yönü ifade eder. CSS'de yazma modlarıyla çalışmak için writing-mode özelliğini kullanırız. Bu özellik aşağıdaki değerleri alabilir:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Bu makaleyi Smashing Magazine'de İngilizce okuyorsanız, bu belgenin yazma modu horizontal-tb veya Yatay Yukarıdan Alta'dır . İngilizce'de cümleler yatay olarak yazılır - her satırın ilk harfi soldan başlar.

Arapça gibi bir dil de horizontal-tb yazma moduna sahiptir. Yukarıdan aşağıya yatay olarak yazılır, ancak Arap alfabesi sağdan sola yazılır ve bu nedenle Arapça cümleler sağdan başlar.

Çince, Japonca ve Korece, ilk cümlenin ilk karakteri sağ üstte olacak şekilde dikey olarak yazılır. Aşağıdaki cümleler sola ekleniyor. Bu nedenle, kullanılan yazma modu vertical-rl . Sağdan sola çalışan dikey bir yazma modu.

Moğolca da dikey olarak yazılır, ancak soldan sağa. Bu nedenle, Moğol alfabesini yazmak istiyorsanız, vertical-lr yazma modunu kullanırsınız.

writing-mode diğer iki değeri, dikey komut dizilerini dizmekten çok yaratıcı amaçlar için tasarlanmıştır. sideways-lr ve sideways-rl kullanmak metni yana doğru çevirir; hatta normalde dikey ve dik olarak yazılan karakterler bile. Değerler ne yazık ki şu anda yalnızca Firefox'ta desteklenmektedir. Aşağıdaki CodePen, write writing-mode tüm farklı değerlerini gösterir, yanlara- sideways-* olanları çalışırken görmek istiyorsanız Firefox kullanmanız gerekir.

Yazma Modları, bu yazma modu kullanılarak yazılmış bir dili kullanan bir belge oluştururken kullanılabilir. Ayrıca, örneğin bazı içeriklerin yan tarafında dikey olarak bir başlık ayarlamak için yaratıcı bir şekilde kullanılabilirler. Ancak bu makalede, dikey dilleri desteklemenin ve dikey metin olasılığının CSS mizanpajında ​​ve genel olarak CSS'de sahip olduğu etkiye bir göz atmak istiyorum.

Bunu yapmadan önce - dikey metin için yazma modlarının kullanımıyla ilgileniyorsanız - işte bazı yararlı kaynaklar:

• W3C Uluslararasılaştırma sitesinde çok sayıda faydalı bilgi bulunmaktadır. RTL komut dosyaları ve dikey metin hakkında bilgi edinin.
• Jen Simmons, CSS Yazma Modları hakkında, kullanımda olan bu modların baskısından birkaç örnek içeren mükemmel bir makale yazdı.
• Dünya ve yazı sistemlerimiz üzerine düşünceler - Chen Hui Jing
• Yazma Moduyla Dikey Dizgi yeniden ziyaret edildi - Chen Hui Jing
• MDN'deki yazma modu özelliği

Blok ve Satır İçi Boyutlar

Bir belgenin yazma modunu değiştirdiğimizde, yaptığımız şey blok akışının yönünü değiştirmektir. Bu nedenle, blok ve satır içi ile ne kastedildiğini anlamak bizim için hızlı bir şekilde çok yararlı hale geliyor.

CSS hakkında öğrendiğimiz ilk şeylerden biri, bazı öğelerin blok öğeler olduğudur, örneğin bir paragraf. Bu elemanlar blok yönünde birbiri ardına görüntülenir. Cümledeki bir sözcük gibi satır içi öğeler satır içi yönde birbiri ardına görüntülenir. Yatay yazma modunda çalışırken, blok boyutunun dikey olarak yukarıdan aşağıya ve satır içi boyutun yatay olarak soldan sağa çalışmasına alışırız.

Blok ve satır içi öğeler belgemizin yazma moduyla ilgili olduğundan, satır içi boyut yalnızca yatay bir yazma modundaysak yataydır. Genişlikle değil, satır içi boyutla ilgilidir. Blok boyutu yalnızca yatay yazma modundayken dikeydir. Bu nedenle yükseklikle değil, blok boyutuyla ilgilidir.

Mantıksal, Akışa İlişkin Özellikler

Bu terimler, satır içi boyut ve blok boyutu, yeni yazma modu bilinçli dünyamızı yansıtmak için tasarlanmış yeni CSS özelliklerinin adları olarak da kullanılmaktadır. Yatay yazma kipinde width yerine inline-size özelliğini kullanırsanız, siz bileşeninizin yazma kipini değiştirene kadar genişlik ile tamamen aynı şekilde hareket edecektir. Her zaman fiziksel bir boyut olacak width kullanırsanız, her zaman bileşenin yatay olarak boyutu olacaktır. inline-size kullanırsanız, bu, aşağıdaki örnekte gösterildiği gibi satır içi boyuttaki boyut olacaktır.

Aynı şey height için de geçerlidir. height özelliği her zaman dikey olarak boyut olacaktır. Öğenin ne kadar uzun olduğu ile ilgilidir. Ancak block-size özelliği, yatay yazma modundaysak dikey olarak ve dikeyde yataysa, blok boyutundaki boyutu verir.

“Mantıksal Özellikleri ve Değerleri Anlamak” makalemde anlattığım gibi, ekranın boyutlarına bağlı olan tüm fiziksel özelliklerin eşlemeleri var. Bunu düşünmeye başladığınızda, bir ekranın fiziksel düzeniyle ilgili olarak çok fazla CSS belirtilir. Üst, sağ, alt ve sol kullanarak konumlandırma, kenar boşlukları, dolgu ve kenarlıklar belirliyoruz. Eşyaları sağa sola sallıyoruz. Bazen bir şeyleri fiziksel boyuta bağlamak istediğimiz şey olabilir, ancak giderek daha fazla fiziksel konuma atıfta bulunmadan düzenlerimizi düşünüyoruz. Mantıksal Özellikler ve Değerler belirtimi, bu yazma modundan bağımsız çalışma biçimini CSS'de kullanıma sunar.

Yazma Modları, Izgara ve Flexbox

Yeni yerleşim yöntemlerimiz sahneye çıktığında, esnek veya ızgara düzeni olarak düzenlenmiş bileşenin yazma moduna bakmanın agnostik bir yolunu getirdiler. İnsanlardan ilk kez sol ve sağ, üst ve alt yerine başlangıç ​​ve bitiş hakkında düşünmeleri istendi.

CSS Grid konusunu ilk sunmaya başladığımda, ilk sunumlarım, spesifikasyondaki tüm özelliklerin bir özetiydi. grid-area özelliğinin, dört satırı da bir ızgara öğesi yerleştirmek üzere ayarlamak için kullanılabileceğinden bahsetmiştim. Ancak bu satırların sırası, dört kenar boşluğunu ayarlamak için kullandığımız tanıdık üst, sağ, alt ve sol değildi. Bunun yerine, üst, sol, alt, sağ kullanmamız gerekiyor - bu sıranın tersi! Izgara ve yazma modları arasındaki bağlantıyı anlayana kadar bu çok garip bir karar gibi görünüyordu. Yaptığımız şeyin her iki başlangıç ​​çizgisini, ardından her iki bitiş çizgisini de ayarlamak olduğunun farkına vardım. Yatay yazma modunda olsaydık üst, sağ, alt ve sol kullanmak iyi olurdu, ancak ızgarayı yana çevirin ve bu hiçbir anlam ifade etmiyor. grid-area: 1 / 2 / 3 / 5; aşağıdaki kalemde olduğu gibi çizgiler aşağıdaki gibi ayarlanmıştır:

• grid-row-start: 1; - blok başlangıcı
• grid-column-start: 2 - satır içi başlangıç
• grid-row-end: 3 - blok sonu
• grid-column-end: 5 - satır içi uç

Flexbox Satırları ve Sütunları

Flexbox kullanır ve bir kapsayıcıya display: flex eklerseniz, flex-direction özelliğinin ilk değeri row olduğundan, öğeleriniz bir satır olarak görüntülenir. Kullanımdaki yazma modunun satır içi boyutunu bir satır takip edecektir. Bu nedenle, yazma horizontal-tb ise, bir satır yatay olarak çalışır. Geçerli komut dosyasının metin yönü soldan sağa ise, öğeler soldan başlayarak sıralanır, sağdan sola ise sağdan başlayarak sıralanır.

Ancak, vertical-rl ve flex-direction: row , satır içi yön dikey olduğundan, öğelerin dikey olarak düzenlenmesine neden olur. Bu sonraki CodePen'de tüm örneklerde flex-direction: row , yalnızca yazma modu veya yönü değişti.

flex-direction: column ve yazma modunuzun blok boyutundaki öğe düzenini ekleyin. Yatay yazma modunda, blok boyutu yukarıdan aşağıya doğrudur, dolayısıyla bir sütun dikeydir. vertical-rl yazma modunda bir sütun yataydır. Önceki örnekte olduğu gibi, aşağıdaki esnek düzenler arasındaki tek fark, kullanılan yazma modudur.

Izgara Otomatik Yerleştirme

Izgarada otomatik yerleştirmeyi kullanırken, esnek düzende buna benzer bir davranış göreceksiniz. Izgara öğeleri, belgenin yazma moduna göre otomatik olarak yerleştirilir. Varsayılan, öğeleri satır içi yön olacak şekilde satırlara yerleştirmektir - yatay yazma modunda yatay ve dikey olarak dikey.

Aşağıdaki örnekte olduğu gibi öğelerin akışını column değiştirmeyi deneyin. Öğeler artık blok boyutunda akacak - yatay yazma modunda dikey ve dikey yazma modunda yatay.

Izgara Çizgisi Yerleştirme Yerleştirme

Satır tabanlı yerleşim ayrıca yazma moduna da uygundur. Izgaramızın çizgileri, hem satırlar hem de sütunlar için 1'den başlar. Bir öğeyi sütun satırı 1'den sütun satırı 3'e konumlandırırsak ve soldan sağa yönde yatay bir yazma modundaysak, bu öğe en soldaki sütun satırından iki ızgara izi boyunca yatay olarak uzanır. Böylece iki sütunu kapsıyor.

Yazma modunu vertical-rl olarak değiştirin ve sütun satırı 1, ızgaranın en üstünde olacak, öğe dikey olarak iki parçayı kapsayacaktır. Hala iki sütunu kapsıyor, ancak sütunlar artık yatay olarak çalışıyor.

Izgara ve Flexbox'ta Hizalama

Birçok kişinin Flexbox'ın yazma modlarıyla uğraşma biçimiyle ilk temas kuracağı yerlerden biri, öğeleri esnek bir düzende hizalarken olacaktır. Yukarıdaki flex-direction: row örneğini alırsak ve tüm öğeleri flex-end için hizalamak için justify-content özelliğini kullanırsak, öğeler satırlarının sonuna taşınır. Bu, soldan sağa yönlendirmeli yatay bir yazma modunda, sıranın sonu sağda olduğu için tüm öğelerin sağa hareket ettiği anlamına gelir. Yön sağdan sola ise, hepsi sola hareket eder.

Dikey yazma modunda, bunu yapabilecekleri bir alan olduğunu varsayarak aşağıya doğru hareket ederler. Hizalamayı çalışırken görmek için esnek kaplarımızda boş alana sahip olduğumuzdan emin olmak için bu örnekteki bileşenlere bir inline-size ayarladım.

Her zaman birlikte oynamamız gereken iki eksene sahip olduğumuz için, ızgara düzeninde hizalamayı anlamak biraz daha kolaydır. Izgara iki boyutludur, bu iki boyut blok ve satır içidir. Bu nedenle, hizalama ile başlayan özelliklerin mi yoksa align- ile başlayan özelliklerin mi kullanılacağını bilmek istiyorsanız bir kuralı justify- . Izgara düzeninde align- özellikleri:- align-content , align-items , align-self hizalama blok ekseni hizalaması yapmak için kullanılır. Dikey olarak anlamına gelen yatay yazma modunda ve yatay olarak dikey yazma modunda.

Bir kez daha, ızgara düzenimizin yazma modu ne olursa olsun tamamen aynı şekilde çalışmasını istediğimiz için sol ve sağ veya üst ve alt kullanmıyoruz. Böylece start ve end kullanarak hizalarız. Blok boyutunda start şekilde hizalarsak, bu horizontal-tb top olacak, ancak vertical-rl right olacaktır. Aşağıdaki örneğe bir göz atın, hizalama değerleri her iki ızgarada da aynıdır, tek fark kullanılan yazma modudur.

justify-content , justify-items , justify-self özellikleri her zaman ızgara düzeninde satır içi hizalama için kullanılır. Bu, yatay yazma modunda yatay ve dikey yazma modunda dikey olacaktır.

Flexbox hizalaması, ana eksenin satırdan sütuna değiştirilebilmesi nedeniyle biraz karmaşıktır. Bu nedenle, Flexbox'ta hizalama yöntemini ana eksene karşı çapraz eksen olarak düşünmemiz gerekir. align- özellikleri çapraz eksende kullanılır. Ana eksende, sahip olduğunuz tek şey justify-content çünkü biz Flexbox'ta öğelerle bir grup olarak ilgileniyoruz. Çapraz eksende, birden fazla esnek çizginiz ve esnek kapta boşluk bırakmak için boşluğunuz olduğu durumlarda align-content kullanabilirsiniz. Ayrıca, çapraz eksendeki esnek öğeleri birbirleriyle ve esnek çizgileriyle ilişki içinde hareket ettirmek için align-items align-self hizala'yı kullanabilirsiniz.

CSS düzeninde hizalama hakkında daha fazla bilgi için önceki Smashing Magazine makalelerime bakın:

• CSS'de Şeyler Nasıl Hizalanır?
• Flexbox'ta Hizalama Hakkında Bilmeniz Gereken Her Şey

Yazma Modu Farkındalığı ve Eski CSS

CSS'nin tamamı, bu akışa bağlı, yazma modundan bağımsız çalışma biçimine tam olarak yetişememiştir. Bir şeyleri blok ve satır içi olarak düşündüğünüzde, alışılmadık olarak öne çıkmaya başlamadığı yerler, başlar ve biter. Örneğin, çok sütunlu bir düzende, dikey yazma modunda çalışırken fiziksel genişliğe eşlenmediğinden, gerçekten sütun satır içi boyutu anlamına gelen sütun column-width belirtiriz.

Gördüğünüz gibi, horizontal-tb dışında bir yazma modu hiç kullanmasak bile, yazma modları CSS'de yaptığımız şeylerin çoğunun temelini oluşturur.

Bu yazma modunda agnostik şekilde CSS düzeni hakkında düşünmeyi inanılmaz derecede yararlı buluyorum. Tüm özelliklerimizi ve değerlerimizi mantıklı olanlara çevirmek için belki biraz erken olsa da, yeni yerleşim yöntemleriyle uğraşırken zaten akışa bağlı bir dünyadayız. Zihinsel modelinizin ekranınızın dört köşesine bağlı olmak yerine blok ve satır içi, başlangıç ​​ve bitiş modellerinden biri olması, FlexBox ve ızgara kullanırken karşılaştığımız birçok şeyi netleştirir.