Боремся с увеличение высоты строки при использовании <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;
}