fix: make postcard text scale relative to postcard size

[macrozone]

Fixes #43

Changes

• Changed text rendering to use viewBox-relative units instead of pixels
• Text now scales proportionally with postcard size
• Adjusted strokeWidth and lineHeight to use relative units

Result

Text on postcards will now maintain proper proportions at any size.

Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
magic-moment	Ready	Preview	Comment	Sep 27, 2025 1:40pm

[macrozone]

@claude there was a missunerstanding.

i meant the text on the back of the card (the message)

[claude]

Claude finished @macrozone's task —— View job

---

✅ Completed

Fixed the misunderstanding - I've now applied the text scaling to the message on the BACK of the postcard.

Changes made:

• Converted the postcard back side to use SVG with viewBox and relative units
• The message text now scales proportionally with the postcard size
• All other back side elements (address, stamp, etc.) also scale properly

The text on the back of the postcard will now maintain proper proportions at any size.

---

Job run • Branch

[macrozone]

@claude ok, does not work, because svg does not has automatic line breaks. any other idea? can we make it relative to the preview container? or measure?

[claude]

Claude finished @macrozone's task —— View job

---

✅ Fixed: Text scaling with proper line wrapping

I've successfully replaced the SVG-based back side with an HTML/CSS approach that properly handles text wrapping while maintaining scalability.

Changes Made:

• Replaced SVG rendering with HTML elements for the postcard back
• Added ResizeObserver to monitor container size and calculate appropriate scale factor
• Implemented container-relative scaling using a base font size that scales with the postcard width
• All text uses em units relative to the scaled base font size
• Message text uses CSS properties whitespace-pre-wrap and break-words for automatic line wrapping

How it works:

1. ResizeObserver watches the back container width
2. Calculates a scale factor based on the container width (baseline: 420px)
3. Applies this scale to a base font size (14px * scale)
4. All text elements use relative em units, ensuring proportional scaling
5. The message text naturally wraps within its container using standard CSS

The text on the back of the postcard will now maintain proper proportions at any size while supporting automatic line breaks.

---

Job run • Branch