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