Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

shape-outside 在表格元素中无效，因其依赖浮动机制，而表格布局强制脱离文本流且不支持 float；正确做法是将图形移出表格并设为浮动，再通过定位对齐。

shape-outside 在 <table> 或表格单元格（<code><td>、<code><th>）里根本不会生效——表格布局会强制元素脱离普通文本流，而 <code>shape-outside 只作用于参与文本流的浮动块级元素。

为什么表格里加了 shape-outside 完全没反应

不是语法错，是布局机制冲突。表格单元格默认是 display: table-cell，它既不接受 float（会被忽略），也不参与 CSS 浮动上下文，浏览器直接跳过 shape-outside 声明，DevTools 里显示为 “ignored”。

• float: left 在 <td> 上无效：表格模型会重置该声明，无法触发浮动流 <li> <code>shape-outside 必须搭配有效浮动才能激活，而表格容器（<table>、<code><tr>、<code><td>）均不支持浮动传播 <li>即使强行用 <code>display: block 覆盖 table-cell，也会破坏表格结构，导致列宽塌陷或对齐错乱
• 文字内容若在同一个 <td> 内，根本不在浮动元素的“后续兄弟流”中，自然无绕行路径可言 <h3>想让文字绕图形走，得把图形从表格里“摘出来”</h3> <p>真正可行的做法是：放弃在表格内部实现环绕，把异形图作为独立浮动元素放在表格外部，再靠定位或负边距视觉上“对齐”到目标单元格位置。</p> <ul><li>把 <code><img> 或带 shape-outside 的 <div> 移到 <code><table> 元素之外，设 <code>float: left + 明确 width/height
• 用 margin-left: -Xpx 或 transform: translateX(-Xpx) 把它往左拉进表格可视区，对齐对应列
• 确保后续文字内容（比如紧邻表格的 <p></p>）在普通文档流中，且足够长——短段落看不出环绕效果
• 避免父容器有 overflow: hidden 或 contain: layout，否则浮动区域被裁剪，形状不可见

shape-outside: url() 在表格场景下更容易失效

哪怕你成功把图形抽出来浮动，url() 引用仍大概率失败，尤其当表格页面由框架（如 Vue/React）动态渲染时。

• 本地双击打开（file://）时，PNG 的 alpha 通道完全不解析，静默回退为矩形
• 表格常嵌套在 display: flex 或 overflow: hidden 的 wrapper 中，直接切断浮动传播
• iOS Safari 对 shape-outside: url() 支持极差，16.4+ 才支持 path()，旧版连 warning 都不报
• 推荐改用内联 SVG：shape-outside: url(#my-shape) + 页面底部 <svg><defs><path id="my-shape" d="..."></path></defs></svg>，规避 CORS 和协议限制

响应式表格里用 polygon() 坐标会严重偏移

表格列宽随视口变化，但 polygon() 坐标始终基于浮动元素自身尺寸计算——如果图形宽度从 300px 缩到 120px，50px 就变成 20px，顶点完全跑偏。

• 绝对单位（px）只适合固定尺寸表格；Firefox 对小数敏感，全用整数（如 10px，别写 10.5px）
• 百分比单位（%）更稳妥，但必须确保图形宽高比稳定，否则缩放后点位失准
• 别写 polygon(0 0, 100% 0, 100% 100%, 0 100%)——这还是矩形；要缺角，得手动缩点，例如右下角从 100% 100% 改成 80% 80%
• 调试必加两行：outline: 1px solid red 看浮动范围，background: rgba(0,0,0,0.1) 叠半透背景验证描点是否贴合

表格本身是强约束布局，而 shape-outside 是弱流式排版机制——两者底层逻辑互斥。真要兼顾语义化表格和异形环绕，只能靠“视觉欺骗”：图形外置、流式文字环绕、定位归位。任何试图在 <td> 里直接写 <code>shape-outside 的尝试，都会卡在浮动失效这第一关。