Веб-типографія: вирівнювання цитати з основним текстом

Виносити лапки за межі основної цитати — правило хорошого тону в типографії. Ця техніка сприяє кращому візуальному сприйняттю інформації.

Проте, часто дизайнери та верстальщики нехтують нею, не звертаючи уваги на таку дрібну але важливу деталь.

Приклад відсутності вирівнювання тексту цитати з основним. Неправильно вирівняна лапка зміщує оптичну вагу і тому це виглядає некрасиво

Так набагато краще :)

Реалізувати вирівнювання можна за допомогою від’ємного значення властивості 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;
}

Демо можна глянути тут: