Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
stof opened this issue Jan 23, 2019 · 0 comments

Comments

@stof
Copy link

stof commented Jan 23, 2019

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants