This commit includes two major improvements:
1. Physical Abacus Logic for Bead Positioning:
- Rewrote bead positioning to accurately model physical soroban behavior
- Active beads positioned close to reckoning bar in sequence
- Inactive beads positioned after active beads + gap, or after bar + gap if no active beads
- Consistent 5pt gaps maintain proper visual separation
- Fixes PDF/SVG positioning inconsistencies
2. Individual Digit Coloring for Place-Value Scheme:
- Fixed regression where numerals showed single color instead of per-digit colors
- Added get_colored_numeral_html() for proper multi-color numeral rendering
- Place-value scheme now colors each digit by its place value (ones=blue, tens=magenta, etc.)
- Other schemes (heaven-earth, alternating) use single color spans
- Maintains backwards compatibility with existing tests
Technical Changes:
- templates/flashcards.typ: Complete rewrite of bead positioning logic
- src/web_generator.py: New HTML generation for colored numerals
- tests/test_web_generation.py: Updated tests for new coloring behavior
- tests/references/: Updated visual regression baseline
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add new web output format that generates a static HTML page with:
- Inline SVG abacus representations using existing Typst->SVG pipeline
- Hover functionality to reveal numerals on cards
- Responsive grid layout that works on desktop and mobile
- Print-friendly styles for offline practice
- Support for all existing configuration options (colors, shapes, etc.)
Usage: python3 src/generate.py --format web --range 1-10 --output cards.html
The web format reuses the existing visual generation code, ensuring
consistency with PDF/PNG/SVG outputs while providing an interactive
learning experience in the browser.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Thomas Hallock