css властивість hanging-punctuation
CSS властивість hanging-punctuation спрямована на надання веб-дизайнерам більш тонкого контролю над типографікою в Інтернеті.
На кожному краю рядка, може розміщуватися лише один розділовий знак.
Відоме як оптичне вирівнювання, цей прийом може зробити текст більш читабельним, так як кожний рядок у тексті вирівнюється відносно попереднього, незалежно від того, чи має той розділові знаки, чи ні.
Синтаксис властивості:
hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]
blockquote p {
hanging-punctuation: first;
}
Доступні символи
| Code | Character | Name |
|---|---|---|
| U+002C | , | COMMA |
| U+002E | . | FULL STOP |
| U+060C | ، | ARABIC COMMA |
| U+06D4 | ۔ | ARABIC FULL STOP |
| U+3001 | 、 | IDEOGRAPHIC COMMA |
| U+3002 | 。 | IDEOGRAPHIC FULL STOP |
| U+FF0C | ， | FULLWIDTH COMMA |
| U+FF0E | ． | FULLWIDTH FULL STOP |
| U+FE50 | ﹐ | SMALL COMMA |
| U+FE51 | ﹑ | SMALL IDEOGRAPHIC COMMA |
| U+FE52 | ﹒ | SMALL FULL STOP |
| U+FF61 | ｡ | HALFWIDTH IDEOGRAPHIC FULL STOP |
| U+FF64 | ､ | HALFWIDTH IDEOGRAPHIC COMMA |
- Нотатка
-
Наразі властивість
автор: Svitlanahanging-punctuationне працює в жодному браузері, й можливо буде виключена із специфікації CSS.
Синтаксис
hanging-punctuation: none|first|last|allow-end|force-end|initial|inherit;Властивість hanging-punctuation може отримувати 7 значень:
-
none -
Розділові знаки не можуть бути розміщені за межами rонтейнера. Без задання.
автор: Svitlana -
first -
Розділові знаки можуть розміщуватися за межами початкового краю першого рядка.
автор: Svitlana -
last -
Розділові знаки можуть розміщуватися за межами останнього рядка контейнера.
автор: Svitlana -
allow-end -
Якщо розділові знаки не поміщаються в контейнері, вони можуть бути розміщені за межами рядка.
автор: Svitlana -
force-end -
Розділові знаки можуть розміщуватися за межами контейнера.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання.
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.hangingPunctuation="first" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| — | — | 26.5 | — | — | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| — | — | — | 26.5 |
Приклади
+ запропонувати свій приклад у пісочниці
Початкові лапки вивішуються у поле ліворуч, і перша літера всіх рядків стоїть на одній вертикалі. Підтримка: Safari; в інших переглядачах абзаци виглядатимуть однаково.
HTML
<p class="hang">«Лапки цього абзацу висунуто за лівий край колонки, тож текст першого рядка починається врівень з рештою рядків».</p>
<p>«А тут лапки стоять у колонці, і перший рядок виглядає трохи втиснутим порівняно з наступними рядками цього ж абзацу».</p>CSS
p {
width: 260px;
padding-left: 12px;
border-left: 2px solid #ccc;
}
.hang {
hanging-punctuation: first;
}Значення last вивішує фінальний розділовий знак цитати за правий край останнього рядка. Підтримка: Safari.
HTML
<blockquote>
<p>«Цитата, фінальний знак якої вивішено за правий край останнього рядка».</p>
</blockquote>CSS
blockquote p {
hanging-punctuation: last;
width: 260px;
}Коментарі
Коментарів ще немає — будьте першим!