hanging-punctuation у CSS — лапки за краєм рядка тексту
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Наразі властивість
автор: 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;
}Три однакові цитати вздовж однієї напрямної. Перша — без нічого: видно, що лапка відсуває літери від краю. Друга — з hanging-punctuation: first, і в Firefox та Chrome вона виглядає точно так само, бо властивості там немає. Третя — ручна імітація від'ємним text-indent в em: лапка вийшла за напрямну, а літери стали з нею врівень. Саме цього й домагаються оптичним вирівнюванням.
HTML
<p class="cap">Пунктирна лінія — ліва межа тексту. Дивіться, де починається літера «Т» і де стоїть лапка:</p>
<div class="rule">
<blockquote class="q plain">
«Так і буває: рядок стоїть рівно за розрахунком, а око бачить, що він утік управо — і винна в цьому лапка.»
</blockquote>
</div>
<div class="rule">
<blockquote class="q hang">
«Те саме з hanging-punctuation: first — у Safari лапка вийде за край, у Firefox і Chrome не зміниться нічого.»
</blockquote>
</div>
<div class="rule">
<blockquote class="q manual">
«Та сама цитата з ручним зсувом на 0.5em: лапка звисає, а літери стоять урівень із напрямною скрізь.»
</blockquote>
</div>CSS
.cap {
margin: 0 0 12px;
max-width: 620px;
font: 600 .9em/1.45 system-ui, sans-serif;
color: #5a6472;
}
.rule {
width: 450px;
margin-bottom: 18px;
padding-left: 30px;
}
.q {
margin: 0;
padding: 10px 12px 10px 0;
border-left: 2px dashed #c0392b;
background: #eef1f5;
font: 19px/1.65 Georgia, "Times New Roman", serif;
color: #2c3440;
}
.hang {
hanging-punctuation: first;
}
.manual {
text-indent: -0.5em;
}Коментарі
Коментарів ще немає — будьте першим!