Asılı noktalama - CSS Hileleri

Anonim

hanging-punctuationWeb vermeyi mülkiyet amaçları web'de tipografi üzerinde bir ince taneli kontrolü tasarımcıları.

Asılı noktalama işaretinin arkasındaki fikir, okuma akışını korumak için metin öğelerinin başlangıcından (veya sonuna daha az uzantıya) kutunun "dışına" bazı noktalama karakterlerini koymaktır.

Temel olarak, bu alıntıyı, madde işaretini veya her neyse sola (veya rtlmodda sağa ) hafifçe hareket ettirir, böylece ilk harf belgenin geri kalanıyla doğru şekilde hizalanır.

Steve Hickey tarafından yazılan bu makaleden figür

Lütfen bu özelliğin isteğe bağlı olduğunu ve bu nedenle tarayıcı üreticilerinin destekleyip desteklemeyeceğini unutmayın.

Sözdizimi

hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )

none

Hiçbir karakter kilitlenmiyor. Bu, bu özellik için varsayılan değerdir.

first

Bir elemanın ilk biçimlendirilmiş satırının başlangıcında mevcut bir karakter asılı kalıyor.

last

Bir elemanın son biçimlendirilmiş satırının sonunda mevcut bir karakter asılı kalıyor.

force-end

Bir satırın sonunda bir durak veya virgül kilitleniyor.

Noktalama işareti takılmaya zorlanır ve gerekçe için satırı ölçerken dikkate alınmaz.

allow-end

Gerekçelendirmeden önce başka şekilde uymuyorsa, satırın sonundaki bir durdurma veya virgül asılı kalıyor.

İlk satırın sonundaki noktalama işareti asılı kalmadan oturduğu için takılmaz. İkinci satırda ise yeterli alan olmadığı için askıda kalıyor.

Kullanılabilir karakterler

Kod Karakter İsim
U+002C , VİRGÜL
U+002E . TAM DURDURMA
U+060C ، ARAP KOMMA
U+06D4 ۔ ARAPÇA TAM DURDURMA
U+3001 İDEOGRAFİK KOMMA
U+3002 İDEOGRAFİK TAM DURDURMA
U+FF0C TAM GENİŞLİK KOMMA
U+FF0E TAM GENİŞLİK TAM DURDURMA
U+FE50 KÜÇÜK KOMMA
U+FE51 KÜÇÜK İDEOGRAFİK KOMMA
U+FE52 KÜÇÜK TAM DURDURMA
U+FF61 YARIM GENİŞLİK İDEOGRAFİK TAM DURDURMA
U+FF64 YARIM GENİŞLİK İDEOGRAFİK KOMMA

Kullanıcı aracılarının bu listeye herhangi bir karakter eklemesine izin verildiğini unutmayın. Spesifikasyondan alıntı yapmak:

UA, uygun şekilde başka karakterler içerebilir.

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
Hayır Hayır Hayır Hayır 10

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
Hayır Hayır Hayır 10.0-10.2

Desteklenmeyen tarayıcı için iyi bir yedek, şu şekilde bir negatif metin girintisi kullanmak olacaktır:

blockquote p ( text-indent: -0.5em; /* Change according to your font */ )

Madde işareti listeleri için, madde işaretlerinin konumunun olarak ayarlandığından outsideve kapsayıcının taşmasının olarak ayarlanmadığından emin olmak isteyebilirsiniz hidden.