В hanging-punctuationцели собственности на предоставление веб - дизайнеров с зернистой контроль над типографикой тоньше в Интернете.
Идея висячей пунктуации состоит в том, чтобы поместить некоторые знаки препинания от начала (или в меньшей степени в конец) текстовых элементов «за пределами» поля, чтобы сохранить последовательность чтения.
По сути, он немного сдвинет эту цитату, маркер или что-то еще влево (или вправо в rtlрежиме), чтобы первая буква была правильно выровнена с остальной частью документа.
Обратите внимание, что это свойство является необязательным, поэтому производители браузеров могут его поддерживать или не поддерживать.
Синтаксис
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Ни один персонаж не зависает. Это значение по умолчанию для этого свойства.
first
Доступный символ в начале первой отформатированной строки элемента зависает.
last
Свободный символ в конце последней отформатированной строки элемента висит.
force-end
В конце строки висит остановка или запятая.
Знаки препинания вынуждены висеть и не учитываются при измерении линии для выравнивания.
allow-end
Стоп или запятая в конце строки висит, если они не подходят до выравнивания.
Знаки препинания в конце первой строки для не вешаются, потому что подходят без зависания. Однако во второй строке недостаточно места, поэтому она зависает.
Доступные персонажи
| Код | Характер | Имя |
|---|---|---|
U+002C | , | Запятая |
U+002E | . | ПОЛНАЯ ОСТАНОВКА |
U+060C | ، | АРАБСКАЯ ЗАПЯТАЯ |
U+06D4 | ۔ | АРАБСКИЙ ПОЛНЫЙ СТОП |
U+3001 | 、 | ИДЕОГРАФИЧЕСКАЯ ЗАПЯТАЯ |
U+3002 | 。 | ИДЕОГРАФИЧЕСКАЯ ПОЛНАЯ ОСТАНОВКА |
U+FF0C | ， | ПОЛНАЯ ЗАПЯТА |
U+FF0E | ． | ПОЛНАЯ ШИРИНА ПОЛНАЯ ОСТАНОВКА |
U+FE50 | ﹐ | МАЛЕНЬКАЯ ЗАПЯТАЯ |
U+FE51 | ﹑ | МАЛЕНЬКАЯ ИДЕОГРАФИЧЕСКАЯ ЗАПЯТА |
U+FE52 | ﹒ | МАЛЕНЬКАЯ ПОЛНАЯ ОСТАНОВКА |
U+FF61 | ｡ | ПОЛОВИНА ИДЕОГРАФИЧЕСКАЯ ПОЛНАЯ ОСТАНОВКА |
U+FF64 | ､ | ПОЛОВИДНАЯ ИДЕОГРАФИЧЕСКАЯ ЗАПЯТА |
Обратите внимание, что пользовательские агенты могут добавлять любой символ в этот список. Цитата из спецификации:
При необходимости UA может включать другие символы.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| Нет | Нет | Нет | Нет | 10 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Нет | Нет | Нет | 10,0-10,2 |
Приличным откатом для неподдерживаемого браузера было бы использование отрицательного текстового отступа:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )Для маркированных списков вы можете убедиться, что положение маркеров установлено на, outsideа переполнение контейнера не установлено hidden.