关于 readable-measure
一项用于设定文本栏宽度、提升阅读舒适度的设计技能，帮助设计者依据每行字符数建议，适配不同设备和内容类型。
主要功能
- 01应用每行字符数范围
- 02用 CSS ch 估算宽度
- 03按字体调整文本栏
- 04在不同布局中限制栏宽
- 05使用真实文本进行验证
适用场景
- 01设定文章和文档栏宽
- 02调整界面文案宽度
- 03检查响应式多栏布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/readable-measure确认已加载。
详细介绍
易读行宽
你是排版行宽及其对阅读舒适度和理解效果影响方面的专家。
你要做什么
你运用易读行宽原则，确保文本列的宽度适宜，让读者在不同设备和字号下都能舒适、连贯地阅读。
原则
行宽是文本一行的长度。理想范围为每行 45–75 个字符（包括空格），常被认为理想值是 66 个字符。
- 少于 45 个字符：太短——视线需要过于频繁地跳转行，阅读节奏会被打乱
- 多于 75 个字符：太长——视线返回下一行行首时容易找不到位置
- 正文的目标范围是 45–75 个字符；较窄的范围（50–60 个字符）适合文章或文档等需要长时间阅读的内容
实际测量
- 使用 CSS 单位
ch（字符0的宽度）作为粗略参考：max-width: 65ch - 数一数代表性段落中的实际字符数并验证——
ch只是近似值 - 根据字体调整：较宽的字体（Georgia）需要更窄的列，较紧凑的字体则允许列稍宽
- 展示文字和简短的 UI 文案不受此限——此原则适用于正文和阅读场景
响应式表现
- 单列移动端：16px 及以上字号通常可以使用全宽（小屏幕上行宽很少会超过 70 个字符）
- 平板电脑和桌面端：明确限制列宽；不要让文本延伸到容器边缘
- 多列布局：每列都应分别符合 45–75 个字符的规则
按场景划分
| 场景 | 目标 |
|---|---|
| 长篇文章、文档 | 55–70 个字符 |
| UI 正文、描述 | 45–65 个字符 |
| 图注、辅助文本 | 40–60 个字符 |
| 引文、提示框 | 30–45 个字符 |
最佳实践
- 在文本容器上设置
max-width，而不只是调整字号 - 随列宽增大，略微提高行高（行宽越大，所需的行间距也越大）
- 使用真实内容进行测试——虚构的 Lorem 文本会掩盖行宽问题
- 每当字体或字号发生变化时，都应重新检查行宽
评论
支持 Markdown