Test native font stack on tabular numbers

tnum.R

library(knitr)
library(htmltools)
library(webshot2)

df <- mtcars[2:7, c("mpg", "disp", "drat", "wt", "qsec")]
rownames(df) <- NULL
colnames(df) <- NULL

tnum <- function(font, title, output) {
  tags$html(
    tags$head(
      tags$style(paste0(
        "body { font-family: \"", font, "\"; font-size: 18px; }"
      )),
      tags$style(".tnum { font-variant-numeric: tabular-nums; }"),
      tags$style(".flex-container { display: flex; }"),
      tags$style("td { border-right: 1px solid #dc3545; }"),
      tags$style("caption { text-align: right; } ")
    ),
    tags$body(
      tags$div(
        class = "flex-container",
        tags$div(
          df |>
            kable(caption = paste0(title, " - default"), format = "html") |>
            as.character() |>
            HTML()
        ),
        tags$div(
          paste0(rep("&nbsp;", 10), collapse = "") |>
            HTML()
        ),
        tags$div(
          class = "tnum",
          df |>
            kable(caption = paste0(title, " - tnum"), format = "html") |>
            as.character() |>
            HTML()
        )
      )
    )
  ) |>
    html_print() |>
    webshot2::webshot(file = output, vwidth = 560, vheight = 560, zoom = 3)
}

tnum("system-ui", title = "SF Pro Text", output = "tnum-sf-pro.png")
tnum("Helvetica Neue", title = "Helvetica Neue", output = "tnum-helvetica-neue.png")
tnum("Lucida Grande", title = "Lucida Grande", output = "tnum-lucida-grande.png")
tnum("Segoe UI", title = "Segoe UI", output = "tnum-segoe-ui.png")
tnum("Roboto", title = "Roboto", output = "tnum-roboto.png")