掌握 `writing-mode`:实现垂直文本与混合排版

旋转、跳跃、我不停歇:关于CSS writing-mode 的一场排版奇幻漂流 最近,我迷上了一项有点冷门,但潜力无限的 CSS 属性:writing-mode。 乍一听,你可能会觉得这不过是另一个枯燥的技术术语,但在我看来,它更像是一把开启排版新世界大门的钥匙。就像爱丽丝掉进了兔子洞,我一头扎进了 writing-mode 的世界,体验了一场充满惊喜、困惑和最终顿悟的排版奇幻漂流。 最初,我对 writing-mode 的理解仅仅停留在“让文字竖着显示”的层面。 就像小时候,我们偷偷把妈妈的化妆品拿出来乱涂乱抹,以为自己就能变成仙女一样,我也天真地以为,只要简单地把 writing-mode 设置为 vertical-rl 或 vertical-lr,就能立刻做出充满古风韵味的垂直排版。 然而,现实给了我当头一棒。文字确实竖起来了,但整个页面也跟着“翻了个儿”,各种元素的位置都变得奇奇怪怪,简直像刚经历了一场地震。 我这才意识到,writing-mode 远不止是将文字简单地旋转90度那么简单,它改变的是整个文档的流动方向,影响的是元素的定位、布局和渲染。 这就像学习一门新的语言,光 …