I write stuff. sometimes.

Missed HTML: ruby

A quick win for otherwise complicated typography.


The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text... - MDN



And with a little css.

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

<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