Use tabular figures for the numbers in the result tables
The scores are compared column by column, which only works when the
digits line up. Fira Sans and Fira Sans Condensed set their digits
proportionally by default, where the widths differ by almost a third,
from 433 to 558 units for Fira Sans, so the columns came out ragged.
Both fonts carry tabular figures in their tnum feature, also in the
subsets Google Fonts serves, so no other font is needed:
font-variant-numeric: tabular-nums is enough, with font-feature-settings
as the fallback for browsers that do not know it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Change-Id: I13ddaa2a2d5ea7282fc53112441249f83f3bc18f
diff --git a/css/derekovecs.css b/css/derekovecs.css
index 6b0f0e6..c049257 100644
--- a/css/derekovecs.css
+++ b/css/derekovecs.css
@@ -201,6 +201,16 @@
// border-bottom: 1px solid #111;
}
+/* The scores in the result tables are read column by column, which only works
+ if the digits line up. Fira Sans and Fira Sans Condensed both carry tabular
+ figures in their tnum feature - without it their digits vary in width by
+ almost a third, from 433 to 558 units. font-feature-settings is the fallback
+ for browsers that do not know font-variant-numeric. */
+table.dataTable {
+ font-variant-numeric: tabular-nums;
+ font-feature-settings: "tnum" 1;
+}
+
.dataTables_filter input { width: 16ex }
.dt-button {