css властивість hanging-punctuation

CSS властивість hanging-punctuation спрямована на надання веб-дизайнерам більш тонкого контролю над типографікою в Інтернеті.

На кожному краю рядка, може розміщуватися лише один розділовий знак.

Відоме як оптичне вирівнювання, цей прийом може зробити текст більш читабельним, так як кожний рядок у тексті вирівнюється відносно попереднього, незалежно від того, чи має той розділові знаки, чи ні.

Синтаксис властивості:

hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]

blockquote p {
  hanging-punctuation: first;
}

Доступні символи

правити

Нотатка

Наразі властивість hanging-punctuation не працює в жодному браузері, й можливо буде виключена із специфікації CSS.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
hanging-punctuation	Не підтримується	Не підтримується	10.0	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
hanging-punctuation	Не підтримується	Не підтримується	Не підтримується

Приклади

+ запропонувати свій приклад у пісочниці

<p class="hang">«Лапки цього абзацу висунуто за лівий край колонки, тож текст першого рядка починається врівень з рештою рядків».</p>
<p>«А тут лапки стоять у колонці, і перший рядок виглядає трохи втиснутим порівняно з наступними рядками цього ж абзацу».</p>

p {
    width: 260px;
    padding-left: 12px;
    border-left: 2px solid #ccc;
}

.hang {
    hanging-punctuation: first;
}

<blockquote>
    <p>«Цитата, фінальний знак якої вивішено за правий край останнього рядка».</p>
</blockquote>

blockquote p {
    hanging-punctuation: last;
    width: 260px;
}