受印刷版面影响的网页布局

Jen Simmons 做了一个 引人注目的演讲（视频），她在演讲中指出，网页设计过于依赖我们都熟悉的 HEADER CONTENT SIDEBAR FOOTER 模式。尽管我们这些从事网页设计的人经常称印刷设计“已死”或大幅衰落，但它在布局质量和多样性方面仍然表现出色。

当然，我们可以在网页上学习印刷设计，对吧？

我们是否有网页工具可以做到这一点？

我想说：**是的。** 从某种意义上说，我们不需要非常花哨的 CSS 能力就能实现比现在更有趣的布局。像浮动和绝对定位这样的老式工具能够完成非常酷的事情。特别是结合我们今天常用的稍微现代一点的 Web 技术，比如网络字体、媒体查询和 Flexbox。

有哪些现代工具可以让我们更进一步？

CSS 形状非常酷！Razvan Caliman 写了一篇文章介绍它们。您可以强制元素内的文本沿着特定路径环绕。这些路径可以是曲线椭圆、多边形，甚至可以是图像蒙版。

.element {
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
}

Sara Soueidan 为 A List Apart 撰写了关于此的文章。Chen Hui Jing 也 撰写了一篇很棒的文章。查看该博文中的演示。

注意到它的回退效果很好吗？

CSS 形状的一大优点是它具有自然的回退机制。没什么大不了的。用一个正方形。 https://#/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP

— Jen Simmons (@jensimmons) 2015年2月11日

视口单位对于印刷风格的布局也很有用。例如，它们使调整容器的大小以精确匹配屏幕尺寸变得非常容易。

header.full-screen-hero {
  height: 100vh;
  background: url(/images/supergirl.jpg);
  background-size: cover;
}

更不用说布局的最佳朋友——Flexbox了。如果您投入一些时间学习 Flexbox，我认为它会赋予您超级布局能力，因为您的大脑会很自然地使用它来解决几乎任何类型的布局问题。

令人遗憾的是，我们没有哪些功能？

最重要的是可能“CSS 区域”，它几乎成为现实。Adobe 为此付出了很多努力。有一些 用例（杂志布局是一个非常可靠的用例）。有一些垫片。它们允许您将内容从一个元素流到另一个元素。这些元素可以根据您的需要进行定位和样式设置。超级酷。

然后它们有点 被压制了（在我看来是不公平的），并且 Blink 取消了支持。Sara Soueidan 在 CSS 区域很重要 中出色地证明了它们的重要性，但可惜的是，它们似乎已经被扔进了历史的垃圾堆。

我认为 :nth-everything 也会非常有用。

未来是否有新的功能可以提供帮助？

也许吧

@chriscoyier 我认为最接近在 Web 上实现印刷效果的是将 CSS Figures + Regions 与 Overflow 模块结合使用 https://#/UvcR97kiLi

— Sara Soueidan (@SaraSoueidan) 2016年1月13日

图形规范 CSS 页面浮动 似乎直接针对印刷布局！

此规范描述了如何使用 CSS 格式化印刷中常见的图形——例如表格、带标题的照片和摘录。

溢出规范似乎正在寻找一种方法来实现 CSS 区域试图实现的功能（内容流）

continue 属性使作者能够请求将不适合元素内部的内容进行分段，并提供内容应继续显示的其他位置的备选方案。

……尽管听起来您似乎无法为内容流向指定一个完全不同的元素。

想练习一下吗？购买或借阅一本杂志，试一试。

上周末我就这么做了。我买了一本Gourmet杂志，并 复制了其中一个版面。

这并不意味着您需要放弃 Web 的优势。

通用访问、响应式设计，所有这些好东西。我的演示使用了一些 Flexbox 来简化布局，并最终使其更加严格。我使用了一点background-size: cover; 来使汉堡包尽可能地适应空间。最后添加了一些媒体查询，这个印刷版面很好地转换到了 Web 上。

更多示例

这是我做的另一个示例

查看 Chris Coyier（@chriscoyier）在 CodePen 上创作的 Pen 杂志布局尝试 #2。

这个示例来自Scientific American。

它甚至包含 一个 SVG 文字排版。

---

Stuart Robson 根据他在 Lagom 杂志中看到的文章 创建了一个布局。

---

Helen V. Holmes 对这个想法很感兴趣

@chriscoyier 我很喜欢这种风格（https://#/oPPnKAvvXR）。计划做更多。真的受到了 https://#/l07e3NHX9R 的启发。

— Helen (@helenvholmes) 2016年1月13日

而且她说的 The Great Discontent 是对的。

---

这是 Bart Veneman 的另一个示例

查看 Bart Veneman（@bartveneman）在 CodePen 上创作的 Pen 杂志布局 - Pierce 作品。

这有点像“艺术指导文章”，对吧？

在某种程度上是的。我认为这些是独立的，并且有意与其他文章有所不同。它似乎 成为了一种趋势，但回顾过去 5-6 年，它可能不那么像是一种趋势，而更像是网页设计师偶尔伸展一下筋骨。

从印刷版面汲取灵感可以体现在独立的文章中，也可以体现在整个网站中。

过去尝试过的另一件事：Treesaver。它试图自动化这类布局，但可能有点超前了。

这个想法也有一些反对意见。

有些人根本不喜欢它。

@chriscoyier 这是一项徒劳的练习，会导致无谓的浪费时间和金钱。

— John V. Petersen (@johnvpetersen) 2016年1月13日

好吧。你不可能说服所有人。

延伸阅读

• 设计机器 如何在数字末日中生存 by Travis Gertz
• 网络的纹理 by Frank Chimero