properties
changelog

Numeric Formatting

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

Usage:

  • @text nums-*;

Reference

shilp.config.js
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;