Missed HTML: ruby
A quick win for otherwise complicated typography.
<ruby>
The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text... - MDN
HTML
<ruby>
<ruby>50<rt>Clicks</rt></ruby>
</ruby>
50
And with a little css.
<style>
ruby.css {
padding: 10px;
margin: 15px
}
ruby.css {
font-size: 2rem;
}
ruby.css rt {
font-size: 0.75rem;
}
ruby.css.under {
ruby-position: under
}
ruby.css.over {
ruby-position: over
}
</style>
<ruby class="css over">50%<rt>CPU Usage</rt></ruby>
<ruby class="css under">14GB<rt>Available RAM</rt></ruby>
<ruby class="css under">🤜🏼<rt>fist bump</rt></ruby>
50% 14GB 🤜🏼