CSS书写模式设置详解

CSS书写模式，由`writing-mode`属性控制，是网页排版中一项强大的技术，它决定了文本的流动方向，无论是常见的横向排版，还是更具创意的纵向排版。本文将深入讲解`writing-mode`的用法，包括`horizontal-tb`、`vertical-rl`和`vertical-lr`等关键值的含义与应用，助你轻松实现文本的竖排效果。同时，还将探讨`writing-mode`对布局的影响，如`width`、`height`、`margin`和`text-align`等属性的行为变化。更重要的是，我们将结合实际案例，解析如何在日文、中文竖排、创意设计和紧凑导航栏等场景中灵活运用CSS书写模式，打造更具吸引力和专业性的网页。掌握CSS书写模式，让你的网页设计更上一层楼。

CSS书写模式由writing-mode属性控制，决定文本横排或竖排及流向。其值包括horizontal-tb（默认，水平从左到右）、vertical-rl（垂直从上到下，列从右向左）和vertical-lr（垂直从上到下，列从左向右）。该属性改变块轴与行内轴方向，影响width/height、margin、padding、text-align等属性的行为逻辑。在vertical-rl或vertical-lr下，width控制垂直高度，height控制水平宽度；text-align沿行内轴对齐，竖排时居中为垂直居中。常用于中文日文竖排、创意设计、紧凑导航栏、图表标签等场景。需配合text-orientation控制字符旋转，推荐使用逻辑属性如margin-block-start、padding-inline-end、block-size、inline-size等以适应不同书写模式。direction用于设置行内文本方向（ltr/rtl），影响双语混排。Flexbox与Grid布局的轴向也随writing-mode变化，flex-direction: row在竖排模式下表现为水平排列。关键是从物理方向思维转向逻辑轴思维，提升多语言与多方向布局灵活性。

CSS的书写模式，说白了，就是决定了文本内容在页面上是横着排还是竖着排，是从左往右还是从右往左流动的。我们主要通过writing-mode这个CSS属性来设置它，它就像给文本流定了一个大方向。对我来说，这东西乍一看可能觉得没啥用，但一旦你遇到多语言排版，比如日文、中文的竖排，或者一些特别的创意设计需求，那它简直就是救星。

解决方案

要设置CSS的书写模式，核心就是使用writing-mode属性。这个属性有几个常用的值，它们分别对应不同的文本流动方向：

1. horizontal-tb (默认值): 这是我们最熟悉的模式，文本从左到右水平流动，行从上到下垂直堆叠。大部分网页内容都采用这种模式。

   .element {
       writing-mode: horizontal-tb;
   }

2. vertical-rl: 文本从上到下垂直流动，列从右到左水平堆叠。这是日文、中文等语言常见的竖排方式，通常用于从右往左阅读的场景。

   .element {
       writing-mode: vertical-rl;
   }

3. vertical-lr: 文本同样从上到下垂直流动，但列是从左到右水平堆叠。这在某些特定的设计中也会用到，比如一些垂直的导航或者侧边栏标签。

   .element {
       writing-mode: vertical-lr;
   }

设置起来很简单，你只需要把这个属性应用到你想要改变书写模式的元素上就行。比如，你有一个div或者p标签，想让里面的文字竖着排，并且从右往左堆叠，那就直接给它加上writing-mode: vertical-rl;。但要注意，这个属性会影响整个元素内部的文本流，以及它子元素的布局行为，所以用的时候得想清楚。

CSS书写模式对布局和文本流有什么影响？

writing-mode可不只是简单地把文字转个方向，它骨子里改变了我们对“水平”和“垂直”的理解，进而深刻影响了整个布局模型。说白了，它重新定义了块轴（block axis）和行内轴（inline axis）。

在默认的horizontal-tb模式下，行内轴是水平的（文本从左到右），块轴是垂直的（块级元素从上到下堆叠）。但当你切换到vertical-rl或vertical-lr时，情况就完全反过来了：行内轴变成了垂直的（文本从上到下），块轴则变成了水平的（块级元素从右到左或从左到右堆叠）。

这意味着什么呢？

• 尺寸的颠倒：原本的width和height属性，在垂直书写模式下，它们的含义会发生逻辑上的互换。width会控制块级元素在行内轴上的尺寸（也就是竖排文本的“高度”），而height则控制块级元素在块轴上的尺寸（也就是竖排文本的“宽度”）。这听起来有点绕，但理解了行内轴和块轴的概念就清楚了。
• 外边距、内边距和边框：传统的margin-top、margin-left这些，在垂直模式下，它们的“方向”也会跟着变。为了更清晰地处理这种变化，CSS引入了逻辑属性（logical properties），比如margin-block-start、margin-inline-end。这些逻辑属性会根据当前的writing-mode自动调整其物理方向。比如，在vertical-rl模式下，margin-block-start就相当于物理上的margin-right。
• 文本对齐：text-align属性也会受到影响。它始终是沿着行内轴进行对齐。在horizontal-tb中，text-align: center是水平居中；而在vertical-rl或vertical-lr中，text-align: center则会变成垂直居中。
• 浮动和定位：浮动（float）在垂直书写模式下的行为会变得复杂且不那么直观，通常不建议混合使用。定位（position）的top、left等属性，虽然物理位置不变，但它们相对的“起始点”和“方向”也需要重新考量。

举个例子，假设你有一个div，里面有几行文字：

<div class="vertical-text-container">
    <p>第一行文字</p>
    <p>第二行文字</p>
</div>

.vertical-text-container {
    writing-mode: vertical-rl;
    /* 这里的width实际上控制的是垂直方向的“高度” */
    width: 200px;
    /* 这里的height实际上控制的是水平方向的“宽度” */
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
}
p {
    margin: 0;
    /* text-align: center 在 vertical-rl 模式下会使文本在垂直方向上居中 */
    text-align: center;
}

你会发现，width现在控制的是文本从上到下的显示范围，而height则控制了整个块从右到左的堆叠宽度。这和我们习惯的认知完全不同，所以理解其对轴向的改变是关键。

什么时候会用到CSS的垂直书写模式？具体场景有哪些？

垂直书写模式虽然不常用，但在一些特定场景下却能发挥奇效，甚至可以说是不可或缺。

1. 日文、中文等语言的传统排版：这是最主要的应用场景。很多东亚语言的传统书籍、报纸、诗歌，都是从右往左、从上到下竖排的。在网页上需要模拟这种阅读体验时，writing-mode: vertical-rl;就派上用场了。比如一个展示古诗词的页面，或者一个模拟日式漫画阅读的网站。

2. 创意网页设计和艺术排版：设计师有时候为了追求独特的视觉效果，会刻意使用垂直文本。比如，一个网站的标题、一个宣传语、或者某个特定的UI元素，通过垂直排版能带来更强的视觉冲击力或艺术感。这在一些品牌网站、艺术作品集或者个人博客中比较常见。

3. 紧凑的UI元素和侧边栏导航：在一些空间有限的UI设计中，垂直书写模式可以帮助我们更有效地利用空间。例如，一个左侧或右侧的导航栏，如果导航项名称较长，但横向空间又不足，可以考虑将其设置为垂直文本。这样既能展示完整内容，又能保持布局的紧凑。

   <nav class="vertical-nav">
       <a href="#">产品介绍</a>
       <a href="#">服务项目</a>
       <a href="#">联系我们</a>
   </nav>

   .vertical-nav {
       writing-mode: vertical-rl; /* 文本从上到下，导航项从右往左堆叠 */
       width: 30px; /* 导航条的“宽度” */
       height: 100%; /* 导航条的“高度” */
       background-color: #333;
       color: white;
       display: flex; /* 使用Flexbox辅助布局 */
       flex-direction: column; /* 导航项垂直排列 */
       justify-content: center; /* 导航项垂直居中 */
       align-items: center; /* 导航项水平居中 */
   }
   .vertical-nav a {
       display: block;
       padding: 10px 5px;
       text-decoration: none;
       color: inherit;
       white-space: nowrap; /* 防止文本自动换行 */
   }

   这个例子中，导航链接会竖着排，并且整个导航栏是窄窄的一条。

4. 图表标签或数据展示：在一些数据可视化图表中，轴标签或者数据点标签可能需要垂直显示，以避免重叠或节省空间。虽然通常会用transform: rotate()来实现，但在某些情况下，writing-mode也是一种选择，尤其当标签本身就是多行文本时。

总的来说，垂直书写模式的应用场景虽然小众，但它提供了一种强大的排版能力，让我们能够跳出传统的横向思维，探索更多样化的网页布局和内容呈现方式。

配合writing-mode，还有哪些CSS属性需要注意和调整？

当writing-mode改变了文本流的方向后，很多我们习以为常的CSS属性的行为都会发生变化，或者需要配合调整，才能达到预期的效果。这就像是换了一套度量衡，你得适应新的规则。

1. text-orientation：这个属性在垂直书写模式下尤为关键。它控制着垂直文本中字符的方向。

   • text-orientation: mixed; (默认值): 保持字符正常的横向方向，但标点符号和数字可能会旋转。
   • text-orientation: upright;: 所有字符（包括拉丁字母和数字）都保持“直立”方向，这在日文和中文的竖排中很常见，能让西文字符看起来不那么别扭。
   • text-orientation: sideways;: 所有字符都旋转90度，使其侧向显示。

     .vertical-text {
     writing-mode: vertical-rl;
     text-orientation: upright; /* 让英文字母和数字也保持直立 */
     }

     没有text-orientation的配合，垂直文本中的英文或数字可能会横着显示，阅读体验会很差。

2. 逻辑属性（Logical Properties）：前面也提到了，为了更好地适应writing-mode带来的轴向变化，CSS引入了一系列逻辑属性。我个人强烈建议在处理多书写模式或需要更灵活布局时，尽量使用这些逻辑属性。

   • 外边距：margin-block-start, margin-block-end, margin-inline-start, margin-inline-end
   • 内边距：padding-block-start, padding-block-end, padding-inline-start, padding-inline-end
   • 边框：border-block-start, border-block-end, border-inline-start, border-inline-end
   • 定位：inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
   • 尺寸：block-size (对应块轴尺寸), inline-size (对应行内轴尺寸) 使用这些属性，你就不必担心writing-mode切换后，margin-top到底对应哪个物理方向了，它们会自动适应。

3. direction：这个属性控制的是行内文本的基线方向（比如从左到右或从右到左）。它主要用于处理像阿拉伯语、希伯来语这类从右到左书写的语言。虽然writing-mode决定了块的堆叠方向和文本流的整体方向，但direction仍然可以控制每一行内部字符的顺序。在vertical-rl模式下，如果文本内容中包含需要从右到左书写的语言，direction: rtl;仍然是必要的。

4. line-height 和 text-align：

   • line-height：在垂直书写模式下，它控制的是文本行在行内轴上的间距，也就是“行高”在垂直方向上的表现。
   • text-align：如前所述，它始终是沿着行内轴对齐。所以，如果你想让垂直文本在“横向”上居中（也就是在块轴上居中），你需要将text-align设置在父元素上，并且父元素需要有足够的inline-size（在垂直模式下，这通常是height）。

5. Flexbox 和 Grid 布局：当父元素设置了writing-mode时，其子元素作为Flex项或Grid项的布局行为也会受到影响。Flex容器和Grid容器的轴向会根据writing-mode重新定义。这意味着flex-direction: row;在vertical-rl模式下，实际上会使子元素沿着块轴（水平方向）排列。所以，在使用这些布局系统时，要时刻记住当前writing-mode对轴向的定义。

处理writing-mode的时候，关键在于转换思维，从物理方向（上、下、左、右）转向逻辑方向（起始、结束、块轴、行内轴）。一旦掌握了这一点，你会发现它并没有想象中那么难以驾驭。

好了，本文到此结束，带大家了解了《CSS书写模式设置详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！