CSS通过direction和writing-mode控制文本方向，前者决定行内文本流向（如ltr/rtl），后者定义文本块排列方向（如horizontal-tb/vertical-rl）。2. direction用于处理阿拉伯语等RTL语言的逻辑流向，常与text-align配合；writing-mode则实现垂直排版，改变文本物理布局，适用于中文竖排或创意设计。3. 垂直排版需设置writing-mode为vertical-rl或vertical-lr，并配合text-orientation控制字符方向，同时注意width/height在垂直模式下的含义翻转。4. 现代浏览器对writing-mode支持良好，无需前缀，可安全使用于实际项目中。
CSS中控制字体文本方向，核心在于两个属性：
direction和
writing-mode。简单来说，
direction决定了文本内容在行内的流向，是从左到右（我们常见的英文、中文）还是从右到左（比如阿拉伯语、希伯来语）。而
writing-mode则更宏观，它定义了整个文本块的排列方向，是水平铺开还是垂直排列，甚至影响到文字的排版方向本身。理解它们，就能掌控页面上文字的“姿态”。
解决方案： 要细说CSS如何控制文本方向，我们得从
direction和
writing-mode这两个核心属性入手。
direction属性主要用于设置块级元素或行内元素中文字、表格单元格等内容的水平流向。它的值很简单，但作用却很关键：
ltr
(left-to-right)：这是默认值，文本从左向右排列，比如英文、中文。rtl
(right-to-left)：文本从右向左排列，这对于阿拉伯语、希伯来语等语言至关重要。
举个例子，如果你有一个段落需要显示阿拉伯语，仅仅改变字体是远远不够的，还需要设置
direction: rtl;才能确保文本、标点符号乃至数字的正确流向。
.arabic-text {
direction: rtl;
text-align: right; /* 通常与rtl配合使用，让文本右对齐 */
}而
writing-mode属性则更为强大，它定义了文本行是水平还是垂直排列，以及文本块的整体流向。这不仅仅是方向问题，它甚至改变了我们对“行”和“列”的传统认知。
立即学习“前端免费学习笔记（深入）”；
horizontal-tb
：默认值，文本水平排列，从上到下。这是我们最常见的排版方式。vertical-rl
：文本垂直排列，从右向左。想象一下古代卷轴或日文漫画，文字是竖着写，一行写完后从右边开始下一行。vertical-lr
：文本垂直排列，从左向右。这在某些特定的设计中可能会用到，比如一些垂直的导航菜单。
当一个元素的
writing-mode被设置为垂直方向时，它的宽度和高度概念也会发生“翻转”，比如
width可能实际上控制了垂直方向的长度。这确实有点烧脑，但一旦理解了，就能玩出很多花样。
.vertical-text-rl {
writing-mode: vertical-rl;
text-orientation: mixed; /* 配合使用，控制字符方向 */
}
.vertical-text-lr {
writing-mode: vertical-lr;
text-orientation: upright; /* 保持字符直立 */
}这两个属性的结合使用，几乎能满足所有文本方向的控制需求。但要注意，它们各有侧重，
direction更多是处理行内内容的逻辑流向，而
writing-mode则是改变整个文本块的物理排版方向。
direction
和writing-mode
：核心差异与应用场景解析
很多人在初学CSS时，可能会觉得
direction和
writing-mode有点相似，都和“方向”有关。但实际上，它们处理的是不同层面的问题，理解它们的根本区别，才能在实际开发中游刃有余。
在我看来，
direction更像是在微观层面调整文本的“阅读顺序”。它主要影响的是行内内容的逻辑流向，比如字符、单词、数字的排列，以及标点符号的位置。想象一下，你有一串字符，
direction决定了你是从左手边开始写到右手边，还是从右手边开始写到左手边。它不会改变文本块本身的物理朝向，一个设置了
direction: rtl;的段落，仍然是水平铺开的，只不过它的“起点”在右边了。它最典型的应用场景就是支持从右到左书写（RTL）的语言，如阿拉伯语、希伯来语、波斯语等。如果你的网站需要国际化，处理这类语言时，
direction是必不可少的。同时，
text-align: right;也常常与
direction: rtl;配合使用，以获得更自然的视觉效果。
而
writing-mode则是在宏观层面，重新定义了整个文本块的物理排版方向。它不仅仅是改变阅读顺序，它甚至能让你的文本从水平变成垂直。当
writing-mode被设置为
vertical-rl或
vertical-lr时，整个文本流的方向都被旋转了90度。原本的“行”变成了“列”，文本从上到下排列，然后从右到左（或从左到右）依次排列新的“列”。这就像把一张纸旋转了90度再写字一样。它最常用于：
- 日文、中文等传统垂直书写风格的排版，尤其是在一些文学作品、海报设计中。
- 特殊的用户界面设计，比如一些垂直的导航栏、侧边栏标题，或者需要节省水平空间的文字展示。
- 创意排版，为页面增加独特的视觉效果。
所以，如果你只是想让文本从右边开始写，但整体布局依然是水平的，用
direction。如果你想让文本竖着写，甚至让整个文本区域都旋转起来，那就需要
writing-mode了。它们是互补的，而非替代关系。
如何在CSS中实现垂直文本排版？深入解析与兼容性考量
实现垂直文本排版，CSS的
writing-mode属性是核心，几乎没有替代方案。但要做好，光设置一个属性还不够，还需要考虑一些细节和潜在的兼容性问题。
最直接的方法就是使用
writing-mode：
.vertical-section {
writing-mode: vertical-rl; /* 文本垂直，从右向左排列新列 */
/* 或者 vertical-lr; 文本垂直，从左向右排列新列 */
text-orientation: mixed; /* 控制字符方向，通常配合垂直书写 */
/* 还有 upright, sideways 等值，根据需求选择 */
height: 300px; /* 在垂直模式下，这可能成为内容的“宽度” */
width: 50px; /* 这可能成为内容的“高度” */
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}这里需要注意几点：
-
text-orientation
：这是writing-mode
的好搭档。当文本垂直排列时，字符本身是应该保持直立（upright
），还是应该随着文本流方向旋转（mixed
，这是默认值，有些字符如中文会直立，英文会旋转），或者全部旋转（sideways
）？这在处理混合语言内容时尤其重要。比如，如果你想让中文和英文都垂直且直立，text-orientation: upright;
会很有用。 -
尺寸与布局：当
writing-mode
改变时，元素的width
和height
的含义也会发生“翻转”。例如，在vertical-rl
模式下，你设置的width
实际上控制的是文本块从右到左排列时的“行高”（或者说，单列的宽度），而height
则控制了文本块的垂直长度。这需要我们在布局时重新思考尺寸的设定。 -
text-align
与对齐：在垂直模式下，text-align
的行为也会变得“垂直”。text-align: center;
会将文本行在垂直方向上居中，而不是水平居中。如果你想让文本在水平方向（也就是垂直书写模式下的“列”方向）上对齐，你可能需要使用justify-content
或align-items
等Flexbox或Grid属性来辅助。
关于兼容性，好消息是现代浏览器对
writing-mode的支持已经非常成熟了。主流的Chrome、Firefox、Safari、Edge都支持得很好，通常不需要添加前缀。不过，如果你需要支持非常老的浏览器（比如IE11以下），可能需要考虑使用
Ms前缀（
writing-mode: -ms-vertical-lr;等），但这种情况在今天的开发中已经非常罕见了。我个人在项目中几乎没遇到过兼容性问题，所以可以放心地用。
实际应用中
