From 4af761c74116dfcd39aaa4f3b70aa69f0416ebcc Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 24 Jul 2026 07:23:48 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20HTML=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8F=AC=ED=8A=B8=EC=97=90=20tabular-nums=20=EC=A0=81=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EA=B0=80=EB=8F=85=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

HTML 리포트의 데이터 테이블에서 숫자가 수직으로 올바르게 정렬되도록 CSS `body`에 `font-variant-numeric: tabular-nums;`를 추가했습니다. 이를 통해 사용자가 열(column) 형태의 데이터를 더 쉽고 빠르게 읽을 수 있습니다. `.Jules/palette.md`에 관련된 UX 학습 내용을 기록했습니다.
---
 .Jules/palette.md            | 4 ++++
 python/fast_mlsirm/report.py | 1 +
 2 files changed, 5 insertions(+)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a5a46f6c..5762582ab 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -8,3 +8,7 @@
 ## 2024-10-24 - CSS Bar Chart Animation
 **Learning:** CSS animations can enhance static data visualizations without requiring JavaScript, providing visual polish and reducing perceived loading times for data.
 **Action:** Use CSS keyframe animations for simple visual improvements in static reports.
+
+## 2024-11-20 - HTML Report Tabular Numbers
+**Learning:** Data-heavy reports with columns of numbers can be hard to read when numbers don't align perfectly vertically due to default proportional font spacing.
+**Action:** Always include `font-variant-numeric: tabular-nums;` in body styles or data-heavy components within HTML reports to ensure numbers align properly vertically for improved readability and scanning.
diff --git a/python/fast_mlsirm/report.py b/python/fast_mlsirm/report.py
index 30ee4276b..b34ae5839 100644
--- a/python/fast_mlsirm/report.py
+++ b/python/fast_mlsirm/report.py
@@ -467,6 +467,7 @@ def _css() -> str:
   color: var(--text);
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
+  font-variant-numeric: tabular-nums;
 }
 
 .skip-link {