{
  "id": "measure",
  "type": "foundation",
  "status": "published",
  "name": {
    "zh": "行宽",
    "en": "Measure"
  },
  "aliases": [
    "行宽",
    "行长",
    "每行字数",
    "一行多少字",
    "字符数每行",
    "measure",
    "characters per line"
  ],
  "category": [
    "Typography",
    "Foundation"
  ],
  "description": {
    "zh": "一段文字每行容纳的字符数，决定眼睛回行是否省力。舒适区大约 45～75 个拉丁字符（中文 28～40 字），最常用 65ch 左右。行太窄回行太频繁，太宽则跟丢行；用 max-width 以 ch 为单位控制，比按像素猜更可靠。",
    "en": "How many characters fit on one line — it decides whether the eye can return to the next line without effort. The comfort zone is roughly 45–75 Latin characters (28–40 CJK glyphs), with 65ch the usual target. Too narrow and the eye turns constantly; too wide and it loses the line. Control it with max-width in ch rather than guessing in pixels."
  },
  "use_when": [
    {
      "zh": "长文阅读、文章正文、帮助文档等逐行阅读场景",
      "en": "Long-form reading — articles, docs, help centre copy"
    },
    {
      "zh": "容器宽度随屏幕变化，需要给正文一个稳定上限",
      "en": "Containers grow with the viewport and body copy needs a hard cap"
    },
    {
      "zh": "多栏排版，每栏正文需要独立约束行长",
      "en": "Multi-column layouts where each column caps its own measure"
    }
  ],
  "avoid_when": [
    {
      "zh": "表格、数据密集列表——行宽由列结构决定",
      "en": "Tables and data grids — column structure dictates width"
    },
    {
      "zh": "单行输入框、按钮标签等非段落文字",
      "en": "Single-line fields and button labels — not paragraph text"
    },
    {
      "zh": "在 65ch 上继续做复杂断行调优，收益极低",
      "en": "Fancy line-breaking tuning on top of a 65ch cap — diminishing returns"
    }
  ],
  "tags": [
    "typography",
    "foundation",
    "readability",
    "layout"
  ],
  "api": [
    "max-width",
    "ch",
    "text-wrap",
    "hyphens"
  ],
  "framework_names": [
    {
      "framework": "CSS",
      "name": "max-width: 65ch",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch",
      "note": {
        "zh": "以零字宽为单位的行长上限",
        "en": "Line cap measured in zero-glyph width"
      }
    },
    {
      "framework": "Tailwind CSS",
      "name": "max-w-prose",
      "url": "https://tailwindcss.com/docs/max-width",
      "note": {
        "zh": "约 65ch 的预设",
        "en": "The ~65ch preset"
      }
    }
  ],
  "variants": [
    {
      "id": "optimal",
      "name": {
        "zh": "舒适 65ch",
        "en": "Optimal 65ch"
      },
      "note": {
        "zh": "长文默认档，回行省力",
        "en": "The long-form default — easy on the return sweep"
      }
    },
    {
      "id": "narrow",
      "name": {
        "zh": "窄栏",
        "en": "Narrow column"
      },
      "note": {
        "zh": "侧栏说明、引文块，45ch 上下",
        "en": "Sidebars and pull quotes — around 45ch"
      }
    },
    {
      "id": "wide",
      "name": {
        "zh": "宽界面文字",
        "en": "Wide UI text"
      },
      "note": {
        "zh": "设置页、表单说明，可放到 80ch",
        "en": "Settings and form help — may stretch to 80ch"
      }
    }
  ],
  "anatomy": [
    "行长（Line length）",
    "每行字数（CPL）",
    "舒适区（Comfort zone）"
  ],
  "related": [
    {
      "id": "line-height",
      "relation": "used_with"
    },
    {
      "id": "type-scale",
      "relation": "used_with"
    },
    {
      "id": "editorial",
      "relation": "used_with"
    }
  ],
  "demo": {
    "component": "measure",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "compare": {
    "group": "typography-trio",
    "dimensions": {
      "适用文本": {
        "zh": "长文正文与说明段落",
        "en": "Long-form body and explanatory copy"
      },
      "调节粒度": {
        "zh": "按容器宽度拖动，以 ch 为单位",
        "en": "Drag container width, measured in ch"
      },
      "响应式": {
        "zh": "高，max-width 加流体容器",
        "en": "High — max-width inside a fluid container"
      }
    }
  },
  "sources": [
    {
      "name": "Practical Typography — Line length",
      "url": "https://practicaltypography.com/line-length.html"
    },
    {
      "name": "MDN — ch unit",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch"
    },
    {
      "name": "web.dev — CSS",
      "url": "https://web.dev/learn/css"
    }
  ],
  "implementation": {
    "css": [
      "max-width: 65ch",
      "max-width: 45rem",
      "text-wrap",
      "hyphens"
    ],
    "notes": {
      "zh": "正文容器写 max-width: 65ch（或 36rem 上下），放进流体外层让左右留白随屏变化。ch 单位跟随当前字体的零字宽，换字体后行长自动重算，比写死 px 稳。中文行长用字数估：28～40 字约等于 56ch～80ch 的视觉长度。多栏每栏单独限宽，不要让整页宽度决定行长。",
      "en": "Cap body containers at max-width: 65ch (or about 36rem) inside a fluid shell so side margins breathe with the viewport. The ch unit tracks the current font's zero width and recalculates on font swap — steadier than pixels. For CJK, 28–40 glyphs is the target. Cap each column individually; never let whole-page width decide the measure."
    }
  },
  "prompts": {
    "basic": {
      "zh": "为长文正文设置合适的行宽：限制每行字数，保证阅读舒适。",
      "en": "Set an optimal measure for long-form body copy — cap characters per line for comfortable reading."
    },
    "design": {
      "zh": "行宽规范：长文正文 65ch（约 28～40 个汉字）；侧栏与引文 45ch；表单说明可放宽至 80ch。行长与行高 1.6～1.75 成对使用；窄屏下让容器自然收窄，不要再加额外缩进；英文段落开启 hyphens: auto 前先确认断词表。",
      "en": "Measure spec: long-form body at 65ch (≈28–40 CJK glyphs); sidebars and pull quotes at 45ch; form help up to 80ch. Pair measure with 1.6–1.75 leading. On narrow screens let the container shrink naturally — no extra indents. Enable hyphens: auto on Latin paragraphs only after checking the dictionary."
    },
    "implementation": {
      "zh": "用 max-width: 65ch 限制 .prose 类正文容器，外层保持 width: 100% 做流体布局；多栏用 minmax(45ch, 1fr) 定义栅格列。Tailwind 可用 max-w-prose。调试时在控制台用元素宽度除以平均字宽估算 CPL，或临时用 Intl.Segmenter 统计。",
      "en": "Cap .prose body containers with max-width: 65ch while the outer shell stays width: 100%. Define grid columns as minmax(45ch, 1fr) in multi-column layouts. Tailwind offers max-w-prose. When tuning, estimate CPL from element width over average glyph width, or count with Intl.Segmenter."
    },
    "agent": {
      "zh": "在当前项目中实现行宽。\n先检查现有组件体系和 Design Token，优先复用当前组件。\n要求：\n- 长文正文容器 max-width 65ch 左右，外层保持流体\n- 多栏每栏独立限宽\n- 与行高、字号阶梯配套，不写死像素行长\n保持现有项目视觉风格。不要新增不必要依赖。\n尊重 prefers-reduced-motion。\n完成后运行项目现有检查，并列出修改的文件。",
      "en": "Implement measure in the current project.\nInspect the existing component system and design tokens first; reuse what is already there.\nRequirements:\n- Long-form body containers capped near 65ch inside a fluid shell\n- Each multi-column column capped independently\n- Paired with leading and the type scale; no pixel-locked measure\nKeep the project's existing visual style. Do not add unnecessary dependencies.\nRespect prefers-reduced-motion.\nRun existing project checks when done and list the modified files."
    }
  }
}