properties
changelog

Numeric Formatting

Set numeric glyph styling (tabular, lining, etc.).

Usage:

  • @text nums-*;

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    text: {
      nums: {
        property: "font-variant-numeric: <v><i>;",
        values: {
          // font-variant-numeric: [ordinal] [slashed zero] [figure] [spacing] [fractional];
          normal: "normal", // reset
          ordinal: "ordinal",
          slashed: {
            zero: "slashed-zero",
          },
          // figure
          lining: "lining-nums",
          old: {
            style: "oldstyle-nums",
          },
          // spacing
          proportional: "proportional-nums",
          tabular: "tabular-nums",
          // fractional
          diagonal: "diagonal-fractions",
          stacked: "stacked-fractions",
        },
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at: