Skip to content

Use font-variant-numeric tabular-nums for table cells, with a font supporting it #120

Open
@stof

Description

@stof

Currently, the rendering of the table visualization uses the Gotham Rounded SSm A custom font (as almost everything). But this makes it quite hard to compare numbers in the table.

Browsers (except IE and Edge) support the font-variant-numeric CSS property to render numbers in a tabular way (similar to what happens for a monospace font, but only for numbers) for fonts supporting it: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric#Browser_Compatibility
This makes the table a lot more readable. But the Gotham Rounded SSm A font does not support that feature. So it would require using a different font for that rendering.

Current rendering:
keen_dataviz_current

Rendering with ``font-variant-numeric: tabular-numsapplied on.keen-dataviz-table tbody td`, and disabling the custom fonts (the system fonts are supporting that feature at least on Firefox on Ubuntu where I took that screenshot, but probably also for other OS):
keen_dataviz_tabular

I find the tabular rendering much easier to read to compare the different rows (and that case is precisely the use case described on MDN for that feature btw).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions