Боремся с увеличение высоты строки при использовании <sub> / <sup>

Боремся с увеличение высоты строки при использовании <sub> / <sup>

Наверняка вам известно, что использование элемента <sub> / <sup> увеличивает высоту строку. Это не смотрится, когда в сплошном тексте одна строка пестрит. Решим эту задачу ... Кстати, наглядный пример:

Сразу скажу — решение кроется в первом предложении ☺. Если вы не уловили его, то прежде чем я к нему приду в конце поста я расскажу какие варианты решения данной задачи были перепробованы: для общего развития и чтобы помнить, что всегда нужно хорошо понимать задачу перед поиском её решений.

Абсолютное позиционирование

Когда я впервые столкнулся с таким увеличением строки я даже и не предположил, что всё это из-за <sub> / <sup>; но когда выяснил, то первое, что пришло в голову, это сделать <sub> / <sup> абсолютно позиционированным, а смещение по высоте регулировать с помощью margin-top / margin-bottom. Однако это было мимо, так как при наличии следующего за элементом <sub> / <sup> контента они сливались, понятно почему; хотя при его отсутствии идея имеет место быть:

Относительное позиционирование

Относительное позиционирование и сдвиг содержимого <sub> / <sup> вверх / вниз с помощью bottom / top также не подошло, естественно, так как при таком позиционировании исходное место, которое занимало содержимое элемента, не может быть занято; поэтому строка всё также будет увеличиваться:

Использование <span> и «vertical-align»

Следующее, что я предпринял — это жертвование семантикой и замена <sub> / <sup> на <span>, которому присваивался соответствующий класс (sub / sup), имеющий определённые стили:

Это отлично работает, однако теряется семантика, поэтому я пошёл далее ...

Использование <span> и символов Unicode

Unicode всемогущ ☺ ... Покапавшись в таблицах символов Unicode, вот что я нашёл: ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₙ ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ То есть появился вариант использовать всё тот же <span>, о котором рассказывалось выше, но вместо обычного контента использовать специальные символы Unicode, значение которых понимают или будут понимать машины:

Казалось бы всё должно быть хорошо, однако незначительное увеличение высоты строки наблюдается всё равно ... Идём далее.

Правильное решение

Ещё в начале поста я упомянул, что решение кроется в первом предложении: Наверняка вам известно, что использование элемента <sub> / <sup> увеличивает высоту строки. Ключ — высота строки ...

В CSS за высоту строки отвечает что?.. Правильно — line-height; поэтому, чтобы исключить влияние <sub> / <sup> на высоту строки, нужно прописать ему следующее:

sub, sup {
	line-height: 0;
}