Dik metin birleştirme - CSS Hileleri

text-combine-uprightCSS özelliği tek karakterin uzaya karakterleri birleştirir. Spesifikasyon, kullanım durumunu açıklamanın güzel bir yolu olan bu "yatayda yatay" kompozisyonu çağırıyor: aynı satırda yatay olarak görüntülemek için dikey bir yazma modunda bazı karakterlere ihtiyaç duyabileceğiniz durumlar.

span ( text-combine-upright: all; )

Dikey metin içindeki yatay metin tekniği, tate-chū-yoko adı verilen bir Japon tekniğidir. İşte böyle görünüyor:

`writing-mode: vertical-rl;`Bu resmin sol tarafı gibi dikey bir soldan sağa yazma modu ( ) ile çalışırken , `text-combine-upright`özellik birden çok karakter alabilir ve bunları yatay olarak görüntüleyebilir, temelde karakter alanını kaç karakterin seçildiğine göre eşit parçalara bölebilir. Bu örnekte, sağ taraf, dikey bir yazma modunun içinde aynı karakter alanını paylaşan iki karakteri göstermektedir.

Sözdizimi

text-combine-upright: none | all | ( digits ? )

Başlangıç değeri: none
Şunlar için geçerlidir: değiştirilmemiş satır içi öğeler
Devralındı: evet
Yüzdeler: n / a
Hesaplanan değer: belirtilen anahtar kelime, artı tamsayı eğerdigits
Animasyon türü: canlandırılamaz

Değerler

text-combine-upright aşağıdaki değerleri kabul eder:

none: Bu başlangıç değeridir. Dikey yazma modunda hiçbir karakter yatay olarak görüntülenmez.
all: Dikey içeren kutudaki tüm ardışık tipografik karakterler, dikey kutuda tek bir karakter kadar yer kaplayarak aynı satırda yatay olarak görüntülenir.
digits ?: Dikey içeren kutudaki tüm ardışık ASCII rakamları, dikey kutuda belirtilen tam sayıya kadar tek bir karakterin yerini alarak aynı satır üzerinde yatay olarak görüntülenir. Hiçbir tamsayı belirli değilse, varsayılan değer 2 hanedir. 2'nin altında ve 4'ün üzerindeki her şey geçersizdir.

/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* 2 digits */ text-combine-upright: digits 4; /* 4 digits */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;

Kullanım

Dikey yazma moduna sahip bir öğe olan spesifikasyondan doğrudan örnek aldığımızı varsayalım .

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Tamam, tarihteki sayıların yatay olarak görüntülenmesini istiyoruz. text-combine-uprightDoğrudan öğenin üzerine eklemenin işe yarayacağını varsaymak mantıklıdır :

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

Buuuuut, çok değil. Yazma sırasında, bunun çalışması için özelliği rakamların üzerine uygulamamız gerekir. Bir aralık yeterli olacaktır.

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

Oraya gidiyoruz!

Tarayıcı desteği

Az önce örnekte gördüğümüz gibi, tarayıcı desteği şu anda biraz dağınık. Çoğu tarayıcı için en azından kısmi destek sunarken text-combine-upright, digitsdeğer için olduğundan çok daha az destek vardır all.

IE	Kenar	Firefox	Krom	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5.1 + ³	35+

Android Chrome	Android Firefox	Android Tarayıcı	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Kaynak: caniuse

Standart olmayan adı kullanır: -ms-text-combine-horizontal
Deneysel bayrağın digitsarkasındaki değeri tanır layout.css.text-combine-upright-digits.enabled, ancak henüz tate-chū-yoko için düzen desteğini uygulamaz
Standart olmayan adı kullanır: -webkit-text-combine