| 1 | # Canvas Format Specification |
| 2 | |
| 3 | > See [`shared-standards-core.md`](./shared-standards-core.md) §4.1 for the normative root |
| 4 | > `viewBox` grammar, compatibility spellings, and fail-closed validation rules. |
| 5 | |
| 6 | ## Format Quick Reference |
| 7 | |
| 8 | | ID | Format | Size | viewBox | Ratio | Use Case | |
| 9 | |----|--------|------|---------|-------|----------| |
| 10 | | `ppt169` | PPT 16:9 | `1280x720` | `0 0 1280 720` | 16:9 | Business presentations, meetings | |
| 11 | | `ppt43` | PPT 4:3 | `1024x768` | `0 0 1024 768` | 4:3 | Traditional projectors, academic talks | |
| 12 | | `xiaohongshu` | Xiaohongshu (RED) | `1242x1660` | `0 0 1242 1660` | 3:4 | Image-text sharing, knowledge posts | |
| 13 | | `moments` | WeChat Moments / IG | `1080x1080` | `0 0 1080 1080` | 1:1 | Square posters, brand showcases | |
| 14 | | `story` | Story / TikTok | `1080x1920` | `0 0 1080 1920` | 9:16 | Vertical stories, short video covers | |
| 15 | | `wechat` | WeChat Article Header | `900x383` | `0 0 900 383` | 2.35:1 | WeChat article cover images | |
| 16 | | `banner` | Landscape Banner | `1920x1080` | `0 0 1920 1080` | 16:9 | Web banners, digital screens | |
| 17 | | `a4` | A4 Print | `1240x1754` | `0 0 1240 1754` | 1:sqrt(2) | Print posters, flyers | |
| 18 | |
| 19 | The table lists canonical root spellings. New custom canvases likewise use |
| 20 | `0 0 W H` with positive integer pixels. A fractional positive canvas is accepted |
| 21 | only as compatible input for an imported custom PowerPoint slide size; it is not |
| 22 | the default authoring form. All pages and internal Layout prototypes in one |
| 23 | export use the same numeric canvas and stay within PowerPoint's supported slide |
| 24 | range (914,400–51,206,400 EMU per side, approximately 96–5,376 SVG px). |
| 25 | |
| 26 | `ppt169` is the canonical PPT wide-screen canvas in this repo: `1280x720`, not any arbitrary 16:9 size. Same-ratio canvases such as `banner` (`1920x1080`) must be treated as different coordinate systems. |
| 27 | |
| 28 | ## Format Selection Decision Tree |
| 29 | |
| 30 | ``` |
| 31 | Content purpose? |
| 32 | ├── Presentation |
| 33 | │ ├── Modern devices → PPT 16:9 (1280x720) |
| 34 | │ └── Traditional devices → PPT 4:3 (1024x768) |
| 35 | ├── Social sharing |
| 36 | │ ├── Xiaohongshu (RED) → 1242x1660 |
| 37 | │ ├── WeChat Moments / IG → 1080x1080 |
| 38 | │ └── Story / TikTok → 1080x1920 |
| 39 | └── Marketing materials |
| 40 | ├── WeChat Article Header → 900x383 |
| 41 | ├── Banner → 1920x1080 |
| 42 | └── Print → 1240x1754 |
| 43 | ``` |
| 44 | |
| 45 | ## Layout Principles |
| 46 | |
| 47 | ### Landscape (16:9, 4:3, 2.35:1) |
| 48 | - Visual flow: Z-pattern, left to right |
| 49 | - Margins: 40-80px |
| 50 | - Layouts: multi-column, left-right split, grid |
| 51 | - Card dimensions (16:9): single-row 530-600px, double-row 265-295px |
| 52 | |
| 53 | ### Portrait (3:4, 9:16) |
| 54 | - Visual flow: top to bottom |
| 55 | - Margins: 60-120px |
| 56 | - Layouts: single-column, top-bottom split, card stacking |
| 57 | - Card dimensions (3:4): height 400-600px, gap 40-60px |
| 58 | |
| 59 | ### Square (1:1) |
| 60 | - Visual flow: center-radiating |
| 61 | - Margins: 60-100px |
| 62 | - Core area: ~800x800px |
| 63 | |
| 64 | ## Format-specific Design |
| 65 | |
| 66 | | Format | Title Area | Content Area | Special Notes | |
| 67 | |--------|-----------|--------------|---------------| |
| 68 | | PPT | 80-100px | Full width utilization | Page number bottom-right | |
| 69 | | Xiaohongshu (RED) | 180-240px (bold) | Generous top/bottom whitespace | Brand area at bottom 120-160px | |
| 70 | | WeChat Moments | 200-280px | Center 500-600px | QR code area at bottom 150-200px | |
| 71 | | Story | — | Middle 1500px | Top safe zone 120px, bottom 180px | |
| 72 | | WeChat Article Header | Center/left-aligned 48-72px | — | Image on right or as background | |
| 73 | |
| 74 | > **Body font baseline scales with canvas and reading mode** — a PPT 16:9 baseline confirmed for read-close / business / projection cannot be carried onto tall canvases (Xiaohongshu / Story / A4). Pick the baseline from the confirmed canvas, not the recommended one; see the per-canvas px anchors in [`strategist.md`](strategist.md) §g "Typography Plan Confirmation" (the system is px-only — all sizes are unitless px on every canvas). |
| 75 | |
| 76 | ## ViewBox Examples |
| 77 | |
| 78 | ```xml |
| 79 | <svg width="1280" height="720" viewBox="0 0 1280 720"> <!-- PPT 16:9 --> |
| 80 | <svg width="1242" height="1660" viewBox="0 0 1242 1660"> <!-- Xiaohongshu --> |
| 81 | <svg width="1080" height="1080" viewBox="0 0 1080 1080"> <!-- WeChat Moments --> |
| 82 | <svg width="1080" height="1920" viewBox="0 0 1080 1920"> <!-- Story --> |
| 83 | <svg width="900" height="383" viewBox="0 0 900 383"> <!-- WeChat Article Header --> |
| 84 | ``` |
| 85 |