font-variant-position — верхній і нижній індекс у CSS

HTML

<p>H<span class="sub">2</span>O — індекс через font-variant-position: sub</p>
<p>mc<span class="sup">2</span> — степінь через font-variant-position: super</p>

CSS

.sub {
    font-variant-position: sub;
}

.sup {
    font-variant-position: super;
}

HTML

<h4 class="cap">1. Той самий символ трьома способами</h4>
<div class="cols">
    <div class="card">
        <p class="lbl">font-variant-position</p>
        <p class="big">H<span class="sub">2</span>O · x<span class="sup">2</span> · 10<span class="sup">-9</span></p>
    </div>
    <div class="card">
        <p class="lbl">теґи &lt;sub&gt; і &lt;sup&gt;</p>
        <p class="big">H<sub>2</sub>O · x<sup>2</sup> · 10<sup>-9</sup></p>
    </div>
    <div class="card">
        <p class="lbl">зменшений і зсунутий вручну</p>
        <p class="big">H<span class="manual">2</span>O · x<span class="manual up">2</span> · 10<span class="manual up">-9</span></p>
    </div>
</div>

<h4 class="cap">2. Що робиться з висотою рядка</h4>
<div class="cols">
    <div class="para">Абзац зі степенем x<span class="sup">2</span>, зробленим
        властивістю. Рядки лягли рівно — інтервал не змінився, бо розмір шрифту
        лишився тим самим, змінився лише намальований знак.</div>
    <div class="para">Абзац зі степенем x<sup>2</sup>, зробленим теґом. Рядок із
        ним вищий за сусідні: теґ зменшує шрифт і зсуває базову лінію, і це
        розсуває міжрядковий інтервал.</div>
</div>

<h4 class="cap">3. Як робити правильно</h4>
<div class="right">
    <p>Зміст лишається на теґах — <code>&lt;sub&gt;</code> і
        <code>&lt;sup&gt;</code>, бо саме їх читає програма читання з екрана й
        саме вони потрапляють у пошук. А вигляд їм задає одне правило:</p>
    <p class="big">Формула: H<sub>2</sub>SO<sub>4</sub> · Степінь: a<sup>n</sup> ·
        Виноска: текст<sup>1</sup></p>
    <p class="note">Тут <code>sub</code> і <code>sup</code> перевизначено:
        <code>font-variant-position</code> задано, а типові
        <code>font-size</code> і <code>vertical-align</code> скинуто.</p>
</div>

CSS

.big {
    margin: 6px 0;
    font-family: serif;
    font-size: 1.5rem;
}

.sub {
    font-variant-position: sub;
}

.sup {
    font-variant-position: super;
}

/* «вручну» — так це роблять, коли не знають про властивість */
.manual {
    font-size: .6em;
    vertical-align: sub;
}

.manual.up {
    vertical-align: super;
}

/* правильний спосіб: зміст на теґах, вигляд — правилом */
.right sub,
.right sup {
    font-size: inherit;
    vertical-align: baseline;
    line-height: inherit;
}

.right sub {
    font-variant-position: sub;
}

.right sup {
    font-variant-position: super;
}

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.card {
    flex: 1 1 240px;
    max-width: 280px;
    padding: 2px 14px 10px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.para {
    flex: 1 1 260px;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    font-family: serif;
    font-size: 1.1rem;
    line-height: 1.15;
}

.right {
    max-width: 580px;
    padding: 2px 14px 10px;
    border-left: 4px solid #29713a;
    background: #edf9ef;
}

.lbl {
    margin: 10px 0 0;
    color: #5a6472;
    font-size: .8rem;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #fff;
    border-radius: 3px;
    padding: 0 4px;
}

HTML

<p>Цей приклад показує як працює властивість <code>font-variant-position</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення тексту нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>

<div class="inputs">
  <input id="normal" checked name="font-variant-position" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Без задання. Використовуються стандартні гліфи.</message>
  
  <input id="sub" name="font-variant-position" type="radio"/>
  <label for="sub">sub</label>
  <message for="sub">Вмикає відображення нижніх індексів.</message>
  
  <input id="super" name="font-variant-position" type="radio"/>
  <label for="super">super</label>
  <message for="super">Вмикає відображення верхніх індексів.</message>
</div>

<p id="message">Без задання. Використовуються стандартні гліфи.</p>

<hr>

<p id="block">Це рядок: <span>бац</span>.</p>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 3em; 
  text-align: center;
}

message {
  display: none;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block span').forEach((n) => n.style.setProperty('font-variant-position', this.id));

}));

HTML

<div class="normal">
  <p class="text">Без задання</p>
  <p class="text2">1<span>5</span></p>
</div>
<div class="super">
  <p class="text">Застосована властивість <code> font-variant-position: super;</code></p>
  <p class="text2">1<span>5</span></p>
</div>

CSS

body {
  font-size: 18px;
  display: flex;
}
*{
  margin: 0;
  padding: 0;
}
div{
  text-align: center;
  margin-top: 20px;
}
.normal{
  margin-right: 30px;
}
.text{
  font-size: 18px;
}
.text2{
   font-size: 15em;
}
span {
  color: orange;
 
}
.super span{
  font-variant-position: super;
}