Виносити лапки за межі основної цитати — правило хорошого тону в типографії. Ця техніка сприяє кращому візуальному сприйняттю інформації.
Проте, часто дизайнери та верстальщики нехтують нею, не звертаючи уваги на таку дрібну але важливу деталь.
Приклад відсутності вирівнювання тексту цитати з основним. Неправильно вирівняна лапка зміщує оптичну вагу і тому це виглядає некрасиво
Так набагато краще 🙂
Реалізувати вирівнювання можна за допомогою від’ємного значення властивості text-indent.
p.quote::before {
content: open-quote;
}
p.quote::after {
content: close-quote;
}
p.quote {
text-indent: -7px;
}
Варто зазначити, що text-indent застосовується лише до блочних елементів.
Демо використання text-indent для вирівнювання цитати можна глянути тут.
Мені цей підхід не подобається, бо він містить магічне значення -7px, яке потрібно підбирати для кожного розміру і сімейства шрифта.
Ось приклад того, як можна легко реалізувати вирівнювання з цитатою використовуючи абсолютне позиціювання псевдо-елемента ::before.
q.stand-out {
position: relative;
}
q.stand-out::before {
position: absolute;
right: 100%;
}
Суть полягає у винесенні відкриваючої лапки за межі потоку і вирівнюванні її справа до тексту. На відміну від використання text-indent, цей підхід не вимагає вираховування точної ширини, яка виділяється для символа лапки.
Варто зазначити, що при рендерінгу тега <q> більшість сучасних браузерів додають лапки автоматично, створюючи псевдо-елементи ::before та ::after.
Для підтримки решти браузерів — потрібно дописати правила:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
Демо можна глянути тут.
Оригінальний пост.