Metin yönlendirme - CSS Hileleri

text-orientationBir çizgi CSS hizalar metinde mülkiyet dikey çalışırken writing-mode. Temel olarak, dikey dillerin nasıl görüntülendiğini kontrol etmeye yardımcı olmak için ya satırı saat yönünde 90 ° döndürür - tıpkı text-combine-uprightdikey bir komut dosyasındaki bir metin satırı içindeki karakter gruplarını, ancak tam metin satırları için döndürme biçimine benzer .

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

İki yönlü metni işlemek için - örneğin hem soldan sağa hem de sağdan sola metin içeren bir blok - unicode-bidiözelliği kontrol edin . directionTarayıcının metni görüntülemeye nasıl karar verdiğini geçersiz kılmak için özellik ile birleştirilir .

Sözdizimi

text-orientation: mixed | upright | sideways

İlk: mixed
Şunlar için geçerlidir: tablo satırı grupları, satırlar, sütun grupları ve sütunlar dışındaki tüm öğeler
Devralındı: evet
Yüzdeler: n / a
Hesaplanan değer: belirtilen değer
Animasyon türü: canlandırılamaz

Değerler

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Varsayılan değer. Yatay bir komut dosyasındaki karakterler saat yönünde 90 ° döndürülür. Dikey komut dizisindeki karakterler, doğal dikey yönlerinde görüntülenir.
upright: Yatay yazıdaki karakterler, bazı glifler de dahil olmak üzere doğal yatay dik konumlarına ayarlanır. Dolayısıyla, dikey bir yazma modunun bir metin satırını, karakterlerin yanlamasına olacak şekilde döndürdüğü durumlarda, bu değer karakterleri 90 ° doğal konumlarına döndürür. Bu değerin, directionözelliği kullanılan bir değere zorladığını ltr, yani tüm karakterlerin soldan sağa yazma modundaymış gibi değerlendirildiğini unutmayın.
sideways: Dikey yazma modundaki tüm metin, yatay bir düzendeymiş gibi yanlamasına görüntülenir, ancak tüm satır saat yönünde 90 ° döndürülür.
sideways-right: Bazı tarayıcılar sideways, geriye dönük uyumluluk için tutulan değer için bu değere bir takma ad olarak saygı duyar.

use-glyph-orientationAralık 2015'te bir anahtar kelime değeri olarak kaldırıldı. SVG özelliklerini tanımlamak için SVG öğelerinde kullanıldı glyph-orientation-verticalve glyph-orientation-horizontalbunlar artık kullanımdan kaldırıldı. glyph-orientation-verticalartık için bir takma addır text-orientation.

Tarayıcı desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom	Firefox	IE	Kenar	Safari
48	41	Hayır	79	10.1 *

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10.0-10.2

Şartname

CSS Yazma Modları Seviye 3 (Editörün taslağı)

Daha fazla bilgi

Dikey Metin Yönlendirmesi Neden Çapraz Tarayıcı Uyumluluğunun Kabusu? by Nikhil - text-orientationve hakkında kapsamlı bir açıklama writing-mode.
Adi Purdila'nın "yazma modu" CSS Özelliğini Kullanarak Kolayca Yan Metinler Oluşturun - Kullanmanın yanı sıra farklı yaklaşımları keşfedin text-orientation.
WS Toh'den CSS'de Dikey Metin Oluşturmanın 2 Yolları - writing-modeve kullanan yaklaşımlar arasında daha doğrudan bir karşılaştırma text-orientation.
Metin Döndürme, Chris Coyier - veya transformyerine kullanılan dikey metne bir yaklaşım .writing-modetext-orientation