| 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 | ## Platform Keep-clear |
| 46 | |
| 47 | Canvas dimensions do not imply a title band, content topology, or recurring |
| 48 | chrome. Reserve space only for a real output obstruction. For `story`, keep |
| 49 | meaning-bearing text, identity, and calls to action within `y=120..1740` by |
| 50 | default because common mobile story controls occupy the top and bottom; images, |
| 51 | backgrounds, and nonessential texture may remain full bleed. An exact target- |
| 52 | platform overlay guide or installed template overrides this advisory band. |
| 53 | |
| 54 | ## Typography Scale Start |
| 55 | |
| 56 | **Hard rule — normative owner**: This section owns the initial body-size anchor |
| 57 | and sanity band for every registered or custom canvas. Strategist and Quick |
| 58 | consume it directly. Confirm UI maintains an exact executable mirror and must |
| 59 | not infer alternate canvas classes or values. All values are unitless SVG px. |
| 60 | |
| 61 | **PPT reading modes**: |
| 62 | |
| 63 | | Canvas | Reading mode | Advisory body band | Initial body | |
| 64 | |---|---|---:|---:| |
| 65 | | `ppt169` / `ppt43` | `text` | 18–21 | 20 | |
| 66 | | `ppt169` / `ppt43` | `balanced` | 22–25 | 24 | |
| 67 | | `ppt169` / `ppt43` | `presentation` | 28–32 | 32 | |
| 68 | |
| 69 | **Non-PPT registered and custom canvases**: derive one effective canvas span |
| 70 | from the canonical or custom `W x H`, then calculate the advisory band and |
| 71 | initial body anchor: |
| 72 | |
| 73 | ```text |
| 74 | short = min(W, H) |
| 75 | long = max(W, H) |
| 76 | span = min(long, 3 * short) |
| 77 | low = round(span * 0.025) |
| 78 | start = round(span * 0.029) |
| 79 | high = round(span * 0.033) |
| 80 | ``` |
| 81 | |
| 82 | | Canvas | Effective span | Advisory body band | Initial body | |
| 83 | |---|---:|---:|---:| |
| 84 | | `wechat` | 900 | 23–30 | 26 | |
| 85 | | `moments` | 1080 | 27–36 | 31 | |
| 86 | | `xiaohongshu` | 1660 | 42–55 | 48 | |
| 87 | | `story` | 1920 | 48–63 | 56 | |
| 88 | | `banner` | 1920 | 48–63 | 56 | |
| 89 | | `a4` | 1754 | 44–58 | 51 | |
| 90 | |
| 91 | **Default — starting anchor, not a floor (may override when confirmed identity, |
| 92 | source fidelity, or target viewing conditions require it)**: Start from the |
| 93 | table or formula, then resolve the complete role ramp and page density from the |
| 94 | active content and delivery context. The advisory band only surfaces unusual |
| 95 | values; falling outside it is not a validation failure. Apply the |
| 96 | viewing-distance baseline in |
| 97 | [`shared-standards-core.md`](./shared-standards-core.md) instead of silently |
| 98 | shrinking a recurring role to make content fit. |
| 99 | |
| 100 | ## ViewBox Examples |
| 101 | |
| 102 | ```xml |
| 103 | <svg width="1280" height="720" viewBox="0 0 1280 720"> <!-- PPT 16:9 --> |
| 104 | <svg width="1242" height="1660" viewBox="0 0 1242 1660"> <!-- Xiaohongshu --> |
| 105 | <svg width="1080" height="1080" viewBox="0 0 1080 1080"> <!-- WeChat Moments --> |
| 106 | <svg width="1080" height="1920" viewBox="0 0 1080 1920"> <!-- Story --> |
| 107 | <svg width="900" height="383" viewBox="0 0 900 383"> <!-- WeChat Article Header --> |
| 108 | ``` |
| 109 |