Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
国际化排版失效的根源在于html结构缺乏弹性，需避免固定宽高和绝对定位，使用语义化标签、弹性容器、正确lang属性及动态文本适配机制。
多语言文本长度差异大（比如德语词比英语长30%、日语汉字密度高），直接写死宽度或用绝对定位，必然导致文字截断、按钮撑开、表格错位——这不是样式问题，是HTML结构没预留弹性空间。
避免固定宽高和绝对定位
国际化排版失效的根源，往往不是CSS写得不好，而是HTML容器本身被锁死了尺寸。
- 别给
<button></button>、<input>、<select></select>设width: 120px或min-width—— 德语“Zurücksetzen”会直接溢出 - 禁用
position: absolute布局表单控件：翻译后文案变长，绝对坐标立刻失准 <table> 不要设 <code>table-layout: fixed；让浏览器按内容自动计算列宽，否则日文“検索”和英文“Search”在同列会互相挤压- 用
max-width: none覆盖某些组件库默认限制（如 Bootstrap 的.btn最大宽度） -
<label></label>必须包裹<input>，而不是靠for属性隔空绑定——否则翻译后 label 宽度变化，点击热区错位 - 按钮文案统一用
<button><span data-i18n="submit"></span></button>，而非把data-i18n直接挂在<button></button>上；避免翻译后内边距崩塌 - 多行文案（如提示语、错误信息）用
<div role="alert"> 而非 <code><p></p>，并确保父容器有word-break: break-word - 图标+文字组合，用
<span class="icon-text"><svg>...</svg><span>保存</span></span>结构，禁止用伪元素生成文字——伪元素无法被 i18n 工具扫描 -
必须存在，且值严格为zh-CN、ja-JP、de-DE等 BCP 47 格式；zh或zh_cn会被忽略 - 中英混排段落里，英文部分必须显式加
<span lang="en">React</span>，否则中文标点（如顿号、书名号）会按英文规则渲染，间距异常 -
<pre class="brush:php;toolbar:false;" lang="bash"></pre>这类代码块保留原有lang值，不要被全局语言切换覆盖——这是合法混排，不是错误 - 动态插入的 DOM（如 AJAX 加载的弹窗）必须手动设置
lang属性，不能依赖继承；否则新节点里的中文会被当英文断行 - W3C Validator 报
Element “button” must not be empty：说明按钮内只有data-i18n却无 fallback 文本，JS 失效时按钮不可用 - CI 扫描发现
<input>有placeholder但没配data-i18n-placeholder：切换语言后 placeholder 不更新，用户看到英文占位符 - HTMLHint 检出
attr-req-lang错误：任意含文本的<p></p>、<h2></h2>、<footer></footer>缺少lang属性，标点/字体回退将不可控 - 自动化截图比对发现某按钮高度突增 12px：大概率是德语文案触发了未设
line-height的<button></button>内部换行
用语义化标签 + 弹性容器承接动态文本
不是所有“能放文字的地方”都适合直接塞翻译文案；结构必须能随内容自然伸缩。
lang 属性与排版行为强绑定
浏览器对不同语言的换行、连字、标点间距处理逻辑完全不同，不声明 lang 就等于放弃排版控制权。
验证与 CI 中必须拦截的硬性红线
这些不是“建议”，是上线前必须卡住的结构性风险点。
真正难的不是写几行 data-i18n，而是让每个可翻译节点都活在语义正确、尺寸自由、语言明确的 HTML 骨架里——漏掉任意一环，本地化就变成修图式补丁。
