Wisząca interpunkcja - CSS-Tricks

Ta hanging-punctuationwłaściwość ma na celu zapewnienie projektantom stron internetowych dokładniejszej kontroli nad typografią w sieci.

Ideą wiszącej interpunkcji jest umieszczenie niektórych znaków interpunkcyjnych od początku (lub w mniejszym stopniu na końcu) elementów tekstowych „poza” ramką, aby zachować płynność czytania.

Zasadniczo przesunie nieznacznie ten cytat, punktor lub cokolwiek w lewo (lub w prawo w rtltrybie), aby pierwsza litera była odpowiednio wyrównana z resztą dokumentu.

Rysunek z tego artykułu autorstwa Steve Hickey

Należy pamiętać, że ta właściwość jest opcjonalna, więc twórcy przeglądarek mogą ją obsługiwać lub nie.

Składnia

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

`none`

Żadna postać się nie zawiesza. To jest domyślna wartość tej właściwości.

`first`

Dostępny znak na początku pierwszej sformatowanej linii elementu zawiesza się.

`last`

Dostępny znak na końcu ostatniej sformatowanej linii elementu zawiesza się.

`force-end`

Zatrzymuje się lub przecinek na końcu wiersza.

Interpunkcja jest zmuszona do zawieszenia się i nie jest brana pod uwagę podczas pomiaru linii w celu uzasadnienia.

`allow-end`

Zatrzymanie lub przecinek na końcu wiersza zawiesza się, jeśli w inny sposób nie pasuje przed justowaniem.

Interpunkcja na końcu pierwszej linii nie zawiesza się, ponieważ pasuje bez zawieszania. Jednak w drugiej linii nie ma wystarczająco dużo miejsca, więc zawiesza się.

Dostępne postacie

Kod	Postać	Nazwa
`U`+`002C`	,	PRZECINEK
`U`+`002E`	.	KROPKA
`U`+`060C`	،	PRZECINEK ARABSKI
`U`+`06D4`	۔	ARABSKI PEŁNY STOP
`U`+`3001`	、	KOMMA IDEOGRAFICZNA
`U`+`3002`	。	IDEOGRAPHIC FULL STOP
`U`+`FF0C`	，	KOMMA PEŁNA SZEROKOŚĆ
`U`+`FF0E`	．	FULLWIDTH FULL STOP
`U`+`FE50`	﹐	MAŁA KOMMA
`U`+`FE51`	﹑	MAŁA KOMMA IDEOGRAFICZNA
`U`+`FE52`	﹒	MAŁY PEŁNY PRZYSTANEK
`U`+`FF61`	｡	IDEOGRAFICZNY PÓŁ SZEROKOŚCI PEŁNY STOP
`U`+`FF64`	､	KOMMA IDEOGRAFICZNA PÓŁ SZEROKOŚCI

Należy pamiętać, że programy użytkownika mogą dodawać dowolny znak do tej listy. Cytując specyfikację:

W razie potrzeby UA może zawierać inne znaki.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom	Firefox	TO ZNACZY	Brzeg	Safari
Nie	Nie	Nie	Nie	10

Telefon komórkowy / tablet

Android Chrome	Android Firefox	Android	iOS Safari
Nie	Nie	Nie	10,0-10,2

Przyzwoitą alternatywą dla nieobsługiwanej przeglądarki byłoby użycie negatywnego wcięcia tekstu, tak jak:

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

W przypadku list punktowanych warto upewnić się, że pozycja punktorów jest ustawiona na, outsidea przepełnienie kontenera nie jest ustawione na hidden.