The hanging-punctuationbertujuan properti untuk memberikan web designer lebih halus kontrol berbutir lebih tipografi di web.
Ide di balik tanda baca gantung adalah untuk meletakkan beberapa karakter tanda baca dari awal (atau lebih sedikit diperpanjang di akhir) elemen teks "di luar" kotak untuk mempertahankan aliran membaca.
Pada dasarnya, ini akan sedikit memindahkan kutipan itu, peluru atau apapun ke kiri (atau kanan dalam rtlmode) sehingga huruf pertama sejajar dengan seluruh dokumen.
Harap diperhatikan bahwa properti ini opsional sehingga pembuat browser mungkin mendukungnya atau mungkin juga tidak.
Sintaksis
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Tidak ada karakter yang hang. Ini adalah nilai default untuk properti ini.
first
Karakter yang tersedia di awal baris pertama yang diformat dari elemen hang.
last
Karakter yang tersedia di akhir baris terakhir yang diformat dari elemen hang.
force-end
Berhenti atau koma di akhir baris hang.
Tanda baca dipaksa untuk digantung dan tidak dipertimbangkan saat mengukur garis untuk pembenaran.
allow-end
Berhenti atau koma di akhir baris akan hang jika tidak pas sebelum pembenaran.
Tanda baca di akhir baris pertama untuk tidak menggantung karena pas tanpa menggantung. Namun pada baris kedua, tidak ada cukup ruang sehingga hang.
Karakter yang tersedia
| Kode | Karakter | Nama |
|---|---|---|
U+002C | , | KOMA |
U+002E | . | TITIK |
U+060C | ، | KOMMA ARAB |
U+06D4 | ۔ | BERHENTI PENUH ARAB |
U+3001 | 、 | KOMMA IDEOGRAFIS |
U+3002 | 。 | BERHENTI LENGKAP IDEOGRAFIS |
U+FF0C | ， | KOMMA Lebar Penuh |
U+FF0E | ． | BERHENTI PENUH |
U+FE50 | ﹐ | KOMMA KECIL |
U+FE51 | ﹑ | KOMMA IDEOGRAFIS KECIL |
U+FE52 | ﹒ | BERHENTI PENUH KECIL |
U+FF61 | ｡ | BERHENTI LENGKAP IDEOGRAFIS SETENGAH |
U+FF64 | ､ | KOMMA IDEOGRAFIS SETENGAH |
Perhatikan bahwa agen pengguna diizinkan untuk menambahkan karakter apa pun ke daftar ini. Mengutip spesifikasi:
UA dapat menyertakan karakter lain yang sesuai.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| Tidak | Tidak | Tidak | Tidak | 10 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Tidak | Tidak | Tidak | 10.0-10.2 |
Sebuah fallback yang layak untuk browser yang tidak didukung akan menggunakan teks-indentasi negatif sebagai:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )Untuk daftar poin, Anda mungkin ingin memastikan posisi poin diatur ke outsidedan luapan penampung tidak diatur ke hidden.