I write stuff. sometimes.

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>
50Clicks

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%CPU Usage 14GBAvailable RAM 🤜🏼fist bump