CSS: font variant numeric

by Julien Roche

HTML

<article class="num1"></article>
<article class="num2"></article>

CSS

html,
body {
  border: 0;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  display: grid;
  grid-gap: 5rem;
  grid-template-columns: 1fr 1fr;
}

article {
  border: 1px solid red;
  background: lightpink;
  border-radius: 3rem;
  margin-top: 5rem;
  font-size: 5rem;
  font-weight: bolder;
  text-align: center;

  &.num1 {
    font-variant-numeric: proportional-nums;
  }

  &.num2 {
    font-variant-numeric: tabular-nums;
  }
}

JavaScript

const elements = Array.from(document.querySelectorAll('article'));
const formatter = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });
let value = 123456.789;
let token = setInterval(decrement, 15);

function format() {
  for(const element of elements) {
    element.textContent = formatter.format(value);
  }
}

function decrement() {
  if (value <= 0) {
    clearInterval(token);
    return;
  }
  
  value -= 0.01;

  format();
}