CSS yazma modu için kapsamlı bir rehber. Uluslararasılaştırma (i18n) için metin yönünü kontrol etmeyi ve görsel olarak çekici, küresel olarak erişilebilir web siteleri oluşturmayı keşfedin.
CSS Yazma Modu: Küresel Web Siteleri İçin Uluslararası Metin Yönünde Uzmanlaşma
Günümüzün birbirine bağlı dünyasında, web sitelerinin çeşitli bir kitleye hitap etmesi gerekir ve bunun kritik bir yönü de farklı metin yönlerini ele almaktır. CSS writing-mode, geliştiricilerin metnin akış yönünü kontrol etmelerine olanak tanıyan güçlü bir araçtır ve onların gerçekten uluslararasılaştırılmış (i18n) ve görsel olarak ilgi çekici web deneyimleri oluşturmalarını sağlar. Bu kapsamlı rehber, writing-mode'un inceliklerini keşfedecek, küresel web siteleri için metin yönünde uzmanlaşmanıza yardımcı olacak pratik örnekler ve eyleme geçirilebilir içgörüler sunacaktır.
Yazma Modlarını Anlamak
writing-mode CSS özelliği, metin satırlarının yatay mı yoksa dikey mi yerleştirileceğini ve blokların hangi yönde ilerleyeceğini belirtir. Aşağıdaki gibi farklı yazma yönleri kullanan diller için web sayfalarını uyarlamada çok önemli bir rol oynar:
- Soldan sağa (LTR): İngilizce, İspanyolca, Fransızca, Almanca ve diğer birçok Batı dili.
- Sağdan sola (RTL): Arapça, İbranice, Farsça ve Urduca.
- Dikey: Geleneksel Çince, Japonca ve Moğolca.
Varsayılan olarak, web tarayıcıları metni yatay olarak yukarıdan aşağıya doğru düzenleyen horizontal-tb yazma modunu kullanır. Ancak, writing-mode bu varsayılan davranışı değiştirmenize ve farklı metin yönlerine uyum sağlayan düzenler oluşturmanıza olanak tanır.
`writing-mode` Özelliğinin Değerleri
writing-mode özelliği, her biri farklı bir metin yönü ve blok akışı belirten birkaç değeri kabul eder:
horizontal-tb: Yatay yukarıdan aşağıya. Metin satırları yataydır ve yukarıdan aşağıya doğru akar. Bu varsayılan değerdir.vertical-rl: Dikey sağdan sola. Metin satırları dikeydir ve sağdan sola doğru akar. Bloklar aşağı doğru ilerler.vertical-lr: Dikey soldan sağa. Metin satırları dikeydir ve soldan sağa doğru akar. Bloklar aşağı doğru ilerler.sideways-rl:vertical-rliçin kullanımdan kaldırılmış takma ad.sideways-lr:vertical-lriçin kullanımdan kaldırılmış takma ad.
Aşağıdaki değerler de mevcuttur ancak daha az kullanılır:
block-flow: Diğer özelliklerden etkilenebilen blok biçimlendirme bağlamının yönünü kullanın.
Temel Örnekler
writing-mode kullanımını bazı basit örneklerle gösterelim:
Yatay Metin (Varsayılan)
Bu varsayılan davranıştır, bu nedenle açık bir writing-mode gerekmez:
<p>This is horizontal text.</p>
Dikey Metin (Sağdan Sola)
Metni dikey olarak sağdan sola görüntülemek için vertical-rl kullanın:
<p style="writing-mode: vertical-rl;">Bu dikey metindir (sağdan sola).</p>
Dikey Metin (Soldan Sağa)
Metni dikey olarak soldan sağa görüntülemek için vertical-lr kullanın:
<p style="writing-mode: vertical-lr;">Bu dikey metindir (soldan sağa).</p>
`writing-mode`'un Pratik Uygulamaları
Temel metin yönünün ötesinde, writing-mode görsel olarak ilgi çekici ve uluslararası düzeyde erişilebilir web siteleri oluşturmak için bir dizi pratik uygulama sunar:
1. RTL Dillerine Uyum Sağlama
Arapça veya İbranice gibi RTL dillerini destekleyen web siteleri için, metni doğru bir şekilde görüntülemek amacıyla writing-mode esastır. Dil özelliğine dayalı olarak belirli öğelere veya tüm belgeye direction: rtl; uygulamak için CSS seçicilerini kullanabilirsiniz:
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
Temel yönü ayarlamak için direction: rtl; çok önemli olsa da, karışık yönlü metinlerin doğru işlenmesini sağlamak için unicode-bidi: bidi-override;'a da ihtiyacınız olabilir. Modern yaklaşımlar genellikle daha sonra tartışılacak olan mantıksal özellikleri tercih eder.
2. Dikey Gezinme Menüleri Oluşturma
writing-mode, genellikle Japon ve Çin web sitelerinde görülen dikey gezinme menüleri oluşturmak için kullanılabilir. Bu, sitenize benzersiz bir görsel hava katabilir:
<ul class="vertical-menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
Bu örnekte, dikey menü öğelerindeki metnin döndürülmek yerine dik görüntülenmesini sağlamak için text-orientation: upright; kullanılır.
3. Dergi Tarzı Düzenler Tasarlama
writing-mode, dergi tarzı düzenler elde etmek için dahil edilebilir. Örneğin, çarpıcı bir görsel efekt oluşturmak için üzerinde dikey metin bulunan büyük bir resminiz olabilir.
<div class="magazine-section">
<img src="image.jpg" alt="Magazine Image">
<div class="vertical-text">Özel Röportaj</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* Tarayıcılar arasında doğru görüntülenmesi için gereklidir */
}
Farklı tarayıcılarda, özellikle de eski sürümlerde tutarlı bir görüntüleme sağlamak için transform: rotate(180deg); genellikle gereklidir.
4. Veri Görselleştirmeyi Geliştirme
Veri görselleştirmede, writing-mode özellikle alan sınırlı olduğunda grafiklerdeki ve diyagramlardaki eksenleri etiketlemek için yararlı olabilir. Örneğin, çakışmalarını önlemek için dikey bir eksendeki etiketleri döndürebilirsiniz.
İleri Teknikler ve Dikkat Edilmesi Gerekenler
writing-mode'un gücünden tam olarak yararlanmak için bu ileri teknikleri ve önemli faktörleri göz önünde bulundurun:
1. Mantıksal Özellikler ve Değerler
Modern CSS, düzen ve yönü ele almak için daha esnek ve anlamsal bir yol sağlayan mantıksal özellikleri ve değerleri sunar. left ve right gibi fiziksel özellikler yerine, yazma yönüne uyum sağlayan start ve end gibi mantıksal özellikler kullanılır. Örneğin:
margin-inline-start: LTR'demargin-left'e ve RTL'demargin-right'e eşdeğerdir.padding-block-start: Yatay yazma modlarındapadding-top'a ve dikey yazma modlarındapadding-leftveyapadding-right'a eşdeğerdir.
Mantıksal özellikleri kullanmak, özellikle birden fazla yazma yönüyle uğraşırken CSS'inizi daha uyarlanabilir ve sürdürülebilir hale getirir.
2. `writing-mode`'u Diğer CSS Özellikleriyle Birleştirme
writing-mode, metnin görünümünü ve davranışını kontrol etmek için text-orientation, direction ve unicode-bidi gibi diğer CSS özellikleriyle etkileşime girer. İstenen sonuçları elde etmek için bu etkileşimleri anlamak çok önemlidir.
text-orientation: Dikey yazma modlarındaki karakterlerin yönünü belirtir. Değerler arasındaupright,sideways,mixedveuse-glyph-orientationbulunur.direction: Metnin temel yönünü (LTR veya RTL) belirtir.unicode-bidi: Unicode çift yönlü algoritmasının öğeye nasıl uygulanacağını kontrol eder.
3. Karışık Yönlü Metinleri İşleme
Hem LTR hem de RTL karakterleri içeren metinlerle (örneğin, Arapça bir paragraf içindeki İngilizce metin) uğraşırken, doğru görüntülemeyi sağlamak için unicode-bidi özelliğini kullanmak önemlidir. bidi-override değeri genellikle belirli bir yönü zorlamak için kullanılır.
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>
4. Font Konuları
Tüm fontlar dikey yazım için uygun değildir. Bazı fontlar dikey yazım için glifler içermeyebilir veya doğru şekilde görüntülenmeyebilir. Dikey yazma modlarını kullanırken, dikey metin için özel olarak tasarlanmış veya dikey glifler için iyi desteği olan fontları seçin.
Doğu Asya ülkelerinden (Çin, Japonya, Kore) gelen fontlar genellikle dikey yazım için çok iyi desteğe sahiptir.
5. Erişilebilirlik
writing-mode kullanımınızın erişilebilirliği olumsuz etkilemediğinden emin olun. Resimler ve diğer metin olmayan içerikler için alternatif metin sağlayın ve metnin engelli kullanıcılar için okunabilir ve anlaşılır olduğundan emin olun. Erişilebilirliği artırmak için anlamsal HTML öğeleri ve ARIA nitelikleri kullanın.
6. Tarayıcı Uyumluluğu
writing-mode modern tarayıcılarda iyi bir desteğe sahiptir, ancak eski tarayıcılar satıcı önekleri (örneğin, -webkit-writing-mode, -ms-writing-mode) gerektirebilir. Satıcı öneklerinin eklenmesini otomatikleştirmek için Sass veya Less gibi bir CSS ön işlemcisi kullanın veya Autoprefixer gibi bir araç kullanın.
`writing-mode` Kullanımı İçin En İyi Uygulamalar
writing-mode'u etkili bir şekilde kullanmak ve küresel olarak erişilebilir web siteleri oluşturmak için şu en iyi uygulamaları izleyin:
- Mümkün olduğunca mantıksal özellikleri ve değerleri kullanın. Bu, CSS'inizi daha uyarlanabilir ve sürdürülebilir hale getirecektir.
- Dikey yazma modları için uygun fontları seçin. Fontlarınızın dikey metinde doğru görüntülendiğinden emin olmak için test edin.
- Erişilebilirliği göz önünde bulundurun.
writing-modekullanımınızın engelli kullanıcılar için erişilebilirliği olumsuz etkilemediğinden emin olun. - Düzenlerinizi farklı tarayıcılarda ve cihazlarda test edin. Düzenlerinizin farklı platformlarda doğru görüntülendiğinden emin olun.
- Satıcı öneklerini işlemek için CSS ön işlemcileri veya Autoprefixer kullanın. Bu size zaman ve çaba kazandıracak ve CSS'inizin eski tarayıcılarla uyumlu olmasını sağlayacaktır.
- İçeriği sunumdan ayırın. İçeriğinizin sunumunu kontrol etmek için CSS kullanın ve stil amaçlı HTML kullanmaktan kaçının.
`writing-mode` Kullanan Küresel Web Sitelerinden Örnekler
Dünyanın dört bir yanındaki birçok web sitesi, RTL dillerine uyum sağlamaktan görsel olarak benzersiz düzenler oluşturmaya kadar çeşitli amaçlar için writing-mode'u kullanır. İşte birkaç örnek:
- Arapça veya İbranice Haber Web Siteleri: Bu siteler, metnin doğru görüntülenmesi için
direction: rtlve potansiyel olarakwriting-modeayarlamalarını kullanır. - Japon ve Çin Sanat ve Kültür Web Siteleri: Genellikle başlıklar, menüler ve dekoratif öğeler için dikey yazımı içerir.
- Moda Dergileri: Stilistik etkiler için görsel düzenlerde sık sık dikey metin kullanır.
Sonuç
CSS writing-mode, uluslararasılaştırılmış ve görsel olarak ilgi çekici web siteleri oluşturmak için güçlü bir araçtır. Özelliğin farklı değerlerini ve diğer CSS özellikleriyle nasıl etkileşime girdiğini anlayarak, farklı metin yönlerine uyum sağlayan ve küresel bir kitle için kullanıcı deneyimini geliştiren düzenler oluşturabilirsiniz. Web sitelerinizin tüm kullanıcılar için erişilebilir ve görsel olarak çekici olmasını sağlamak için erişilebilirliği, tarayıcı uyumluluğunu ve font seçimini göz önünde bulundurmayı unutmayın.
Web geliştirme geliştikçe, writing-mode gibi tekniklerde uzmanlaşmak, gerçekten küresel ve kapsayıcı çevrimiçi deneyimler yaratmak için giderek daha önemli hale geliyor. Uluslararasılaştırmanın gücünü benimseyin ve dünyanın dört bir yanından kullanıcılarla rezonans kuran web siteleri oluşturun.