将自动扩展“concertina”CSS 网格行行为复制为列

Question

Michelle Barker 写了 \xe2\x80\x9cSolving a Tricky Layout Problem with CSS Grid\xe2\x80\x9d。她的代码在垂直方向上工作得很好，但我\xe2\x80\x99m很难在水平方向上适应它。

\n

随着视口变窄（或者当您添加更多文本或增加等），顶部/底部版本成功地缩放其文本\xe2\x80\x99s 网格行font-size。但是当调整视口、文本或font-size左/右版本\xe2\x80\xa6时，我\xe2\x80\x99m不知道如何描述发生的情况：

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n

视口	顶部对齐	底部对齐	右对齐尝试	左对齐尝试
宽的
狭窄的

\n

\n

\r\n

\r\n

* {\n  box-sizing: border-box;\n}\n\n.grid {\n  border: 2px dashed;\n  margin: 40px 0;\n}\n\n.grid__media {\n  background: darkgray;\n  font: 2em monospace;\n  alignment-baseline: middle;\n  text-anchor: middle;\n}\n\n.grid__text {\n  background: rgba(95, 158, 160, 0.7);\n}\n\n:root {\n  --static-areas: repeat(8, minmax(0, 1fr));\n  --autoexpanding-areas: [text-start] 1fr [media-start] auto [text-end] 40px [heading-start] auto [heading-end] 40px auto [media-end];\n  --reversed-autoexpanding-areas: [media-start] auto 40px [heading-start] auto [heading-end] 40px [text-start] auto [media-end] 1fr [text-end];\n}\n\n.grid {\n  display: grid;\n  grid-template-rows: var(--autoexpanding-areas);\n  grid-template-columns: var(--static-areas);\n}\n\n.grid__media {\n  grid-row: media;\n  grid-column: 1/-1;\n  max-width: 100%;\n}\n\n.grid__text {\n  grid-row: text;\n  grid-column: span 4/-1;\n  align-self: start;\n}\n\n.grid--text-bottom {\n  grid-template-rows: var(--reversed-autoexpanding-areas);\n}\n\n.grid--text-bottom>.grid__text {\n  grid-column: 1/span 4;\n  align-self: end;\n}\n\n.grid--text-left,\n.grid--text-right {\n  grid-template-rows: var(--static-areas);\n  grid-template-columns: var(--autoexpanding-areas);\n}\n\n.grid--text-left>.grid__media,\n.grid--text-right>.grid__media {\n  grid-row: 1/-1;\n  grid-column: media;\n}\n\n.grid--text-left>.grid__text,\n.grid--text-right>.grid__text {\n  grid-row: span 4/-1;\n  grid-column: text;\n  align-self: end;\n}\n\n.grid--text-right {\n  grid-template-columns: var(--reversed-autoexpanding-areas);\n}\n\n.grid--text-right>.grid__text {\n  grid-row: 1/span 4;\n}

\r\n

<div class="grid">\n  <svg class="grid__media"><text x="50%" y="50%">top text</text></svg>\n  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>\n</div>\n\n<div class="grid grid--text-bottom">\n  <svg class="grid__media"><text x="50%" y="50%">bottom text</text></svg>\n  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus metus, venenatis egestas diam tempus, venenatis ornare sem. Duis maximus erat eget dui aliquet tempor id nec arcu.</div>\n</div>\n\n<div class="grid grid--text-left">\n  <svg class="grid__media"><text x="50%" y="50%">left text</text></svg>\n  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>\n</div>\n\n<div class="grid grid--text-right">\n  <svg class="grid__media"><text x="50%" y="50%">right text</text></svg>\n  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus metus, venenatis egestas diam tempus, venenatis ornare sem. Duis maximus erat eget dui aliquet tempor id nec arcu.</div>\n</div>

\r\n

\r\n

\r\n

\n

这是 CSS\xe2\x80\x99s 块轴和内联轴之间的已知差异吗？或者我错过了一些基本概念？

\n

为什么我首先要实现这个目标

\n

您可以看到真实的文本/图稿/代码 I\xe2\x80\x99m 尝试在此 CodePen \xe2\x80\x94 中使用它们，因为它们\xe2\x80\ x99分散注意力。

\n

我想以适应未知文本尺寸的方式将语音气球/其他文本叠加在漫画图稿上。本质上，我想赋予网络漫画网页固有的灵活性，适用于以下用例：

\n

\n
• 翻译：浏览器内自动翻译，translate.google.com\ bing.com/translatorxe2\x80\xa6
\n
• 辅助功能：浏览器/操作系统文本设置、页面缩放、字体替换\xe2\x80\xa6
\n
• 响应能力：媒体查询的变化，基于视口的字体大小\xe2\x80\xa6
\n

\n

这个想法是使用 CSS 网格重叠让文本在所需的位置和大小开始，然后随着字体的变化大小/文本被翻译等。它会沿着特定的 \xe2\x80\x9csafe\xe2\x80\x9d 方向 \xe2\x80\x94 生长，例如进入排水沟。如果文本在安全方向上足够长，那么面板周围的装订线/边距/任何其他间距应该扩展，以便文本\xe2\x80\x99t开始重叠并模糊其他面板/文本/内容。（此外，如果可能的话，请避免水平滚动条。）

\n

我已经尝试过的其他事情：

\n

\n
• SVG <text>（无自动换行且可以\xe2\x80\x99t 回流）
\n
• 使用 SVG，但切换回 HTML+CSS <foreignObject>（Google Translate、Bing Translate 或内置浏览器翻译都不会触及它）
\n
• ComicA11y\xe2\x80\x99s JavaScript 实现（需要 JS 并且 it\xe2\x80\x99s 并不完美；尝试翻译为德语并增加字体大小）
\n
• CSS 形状（仅靠shape-outsidehack 就太脆弱了，需要shape-inside强大）
\n
• 具有负边距的 Flexbox（can\xe2\x80\x99t 正确表达零件应如何改变尺寸）
\n

\n