Responsive strategy
E-Ink rationale: Tables on E-Ink devices should scroll horizontally rather
than reflow into card layouts. Reflowing triggers massive layout shifts that
cause full-page ghosting. The .eink-table-wrap container provides
overflow-x: auto, allowing the user to swipe/scroll. This is the
simplest no-JS responsive strategy.
Basic table
E-Ink display specifications
| Device |
Screen size |
Resolution |
PPI |
| Kindle Paperwhite |
6.8" |
1236 × 1648 |
300 |
| Kindle Scribe |
10.2" |
1860 × 2480 |
300 |
| Kobo Libra 2 |
7.0" |
1264 × 1680 |
300 |
| Tolino Vision 6 |
7.0" |
1264 × 1680 |
300 |
| reMarkable 2 |
10.3" |
1404 × 1872 |
226 |
Striped table
E-Ink rationale: Alternating row backgrounds use a very subtle shade to avoid
large filled areas that would cause ghosting. The stripe color is a token
(--eink-table-stripe) that adjusts per theme.
Font stack priority
| Priority |
Font name |
Platform |
Category |
| 1 |
-apple-system |
macOS / iOS |
Sans-serif |
| 2 |
BlinkMacSystemFont |
Chrome on macOS |
Sans-serif |
| 3 |
Segoe UI |
Windows |
Sans-serif |
| 4 |
Roboto |
Android / Chrome OS |
Sans-serif |
| 5 |
Noto Sans |
Linux / CJK |
Sans-serif |
| 6 |
Arial |
Universal fallback |
Sans-serif |
Bordered table
CSS token mapping
| Token |
Default |
Inverted |
High contrast |
--eink-fg |
gray-900 |
gray-100 |
black |
--eink-bg |
white |
gray-900 |
white |
--eink-border-color |
gray-300 |
gray-600 |
black |
--eink-focus-color |
black |
white |
black |
Compact table
Smaller padding and font for data-dense layouts.
Spacing scale
| Token |
rem |
px |
Usage |
--eink-space-1 |
0.25 |
4 |
Inline gaps, icon padding |
--eink-space-2 |
0.5 |
8 |
Tight component padding |
--eink-space-3 |
0.75 |
12 |
Button padding, form gaps |
--eink-space-4 |
1 |
16 |
Default component padding |
--eink-space-5 |
1.5 |
24 |
Section gaps, stack default |
--eink-space-6 |
2 |
32 |
Page sections, dialog padding |
--eink-space-7 |
3 |
48 |
Large section spacing |
--eink-space-8 |
4 |
64 |
Page-level spacing |
Wide table (horizontal scroll)
This table has many columns to demonstrate horizontal scrolling. On narrow
screens, swipe left/right to see all columns.
E-Ink rationale: Horizontal scroll is the preferred responsive strategy
because it preserves the table's grid structure. CSS-only reflow techniques
(using display: block) create tall single-column layouts that
require many page-turns on E-Ink and lose the ability to compare columns
visually.
E-Ink refresh modes comparison
| Mode |
Speed |
Ghosting |
Flashing |
Grayscale levels |
Best for |
UI impact |
Notes |
| GC16 (full) |
~450ms |
None |
Full flash |
16 |
Page turns |
Full repaint |
Clears all ghosting artifacts |
| DU (direct) |
~120ms |
Low |
None |
2 (B&W) |
Text only |
Partial update |
No grayscale support |
| A2 (fast) |
~80ms |
High |
None |
2 (B&W) |
Typing, menus |
Minimal repaint |
Heavy ghosting, needs periodic GC16 |
| GL16 |
~450ms |
Low |
Minimal |
16 |
Images + text |
Partial update |
Good balance for mixed content |
Theme comparison
Tables inherit theme tokens from their ancestor.
