css.in.ua
Підтримати

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
Нотатка:

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

Синтаксис

hanging-punctuation: none|first|last|allow-end|force-end|initial|inherit;

Властивість hanging-punctuation може отримувати 7 значень:

none

Розділові знаки не можуть бути розміщені за межами rонтейнера. Без задання.

first

Розділові знаки можуть розміщуватися за межами початкового краю першого рядка.

last

Розділові знаки можуть розміщуватися за межами останнього рядка контейнера.

allow-end

Якщо розділові знаки не поміщаються в контейнері, вони можуть бути розміщені за межами рядка.

force-end

Розділові знаки можуть розміщуватися за межами контейнера.

initial

Встановлює цю властивість в значення без задання.

inherit

Успадкує значення властивості від свого батьківського елемента.

Значення без задання: none
Наслідує: Так
Анімується: Ні
JavaScript синтаксис: object.style.hangingPunctuation="first"

Переглядачі

Переглядач
hanging-punctuation

10.0

Не підтримується

Не підтримується

Не підтримується

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

Не підтримується

Не підтримується

Не підтримується

Мобільних переглядачів ще не додано.

Приклади


Застовування властивості

p {


    hanging-punctuation: first;


}

Застовування властивості

blockquote p {


  hanging-punctuation: last;


}

Додаткові посилання

Спільнота

Зв'язок