writing-mode是css中用于控制文本排版方向及块级排列方向的属性。其主要值包括horizontal-tb（默认，横排从左到右）、vertical-rl（竖排从右到左）和vertical-lr（竖排从左到右），分别适用于不同语言及设计需求；它不仅影响文字走向，还改变盒模型中width、height及padding等属性的方向逻辑；与direction属性不同，writing-mode控制整体书写维度，而direction仅调整行内文字流向；常见应用场景包括多语言支持（如日文、中文竖排）、创意视觉排版及图表标签布局；使用时需注意text-orientation设置以控制字符朝向，理解盒模型变化，处理文本换行与对齐问题，并关注浏览器兼容性。
CSS中的writing-mode属性，简单来说，就是用来控制文本的排版方向和行块的排列方向。它决定了文字是横着写还是竖着写，以及新的一行或一个块从哪个方向开始排列。
writing-mode 属性是CSS中一个非常强大的排版工具，它定义了文本的行内方向（inline progression）以及块级容器的块方向（block progression）。这不仅仅是文字旋转那么简单，它改变了整个布局的“重力”方向。
它的主要值包括：
立即学习“前端免费学习笔记（深入）”；
horizontal-tb (默认值): 文本从左到右水平排列，新行从上到下。这是我们最熟悉的西方语言排版模式。vertical-rl: 文本从上到下垂直排列，新行从右到左。常用于传统的日文、中文竖排。vertical-lr: 文本从上到下垂直排列，新行从左到右。偶尔用于一些特殊的垂直排版需求。
举个例子：
/* 默认的横向排版 */.horizontal-text { writing-mode: horizontal-tb;}/* 垂直排版，新列从右向左 */.vertical-text-rl { writing-mode: vertical-rl; /* 垂直排版时，文字方向可能需要调整 */ text-orientation: upright; /* 让每个字符都正立 */}/* 垂直排版，新列从左向右 */.vertical-text-lr { writing-mode: vertical-lr; text-orientation: mixed; /* 默认值，字母和数字横向，汉字竖向 */}
当你设置了 writing-mode，整个盒模型的概念其实也跟着变了。比如，width 和 height 的含义，在垂直书写模式下，可能会感觉像是互换了。padding 和 margin 的“top”、“bottom”、“left”、“right”也需要重新理解，它们会根据新的书写模式来决定其物理方向。这背后其实是逻辑属性（logical properties）的概念在起作用，但我们暂时不深入那个。
writing-mode 和 direction 有什么区别？
这是一个特别容易混淆的地方，但它们处理的层级和目的完全不同。writing-mode，如前面所说，它定义的是整个文本流的方向，包括行内文字的走向（比如是从左到右还是从上到下），以及块级元素（比如段落）的排列方向（是从上到下还是从右到左）。它改变的是整个文档的“轴向”。想象一下，你把一本书从横着翻变成了竖着翻，这就是 writing-mode 在做的事。它对整个布局的维度都有影响，比如一个块元素的“宽度”在垂直书写模式下，实际上控制的是其在水平方向上的尺寸。
而 direction 属性，它控制的仅仅是行内内容的流向，也就是文字的阅读方向，以及表格列的布局方向。它通常用于支持从右到左书写的语言，比如阿拉伯语（direction: rtl）。它不会改变块级元素的堆叠方向，块级元素依然是从上到下堆叠。direction 只是改变了行内文字的“起点”和“终点”。比如，你把一本书的文字从左到右读变成了从右到左读，但书页还是从上到下排列的。
简单来说：
writing-mode：管的是“书写方向”和“行/块的堆叠方向”，影响的是整个布局的“维度”。direction：管的是“文字的阅读方向”和“行内元素的排列顺序”，不改变块的堆叠方向。
举个例子，即使你设置了 writing-mode: vertical-rl，如果再给一个元素设置 direction: rtl，那在垂直模式下，行内文字的逻辑方向会从右到左（视觉上可能是从下到上），但这种组合通常比较少见，也容易造成理解上的混乱。通常在垂直书写模式下，direction 的作用会被 writing-mode 内部的逻辑方向所覆盖或改变其解释。
在实际项目中，writing-mode 有哪些常见的应用场景？
说实话，在大多数以拉丁语系为主的网页设计里，writing-mode 确实不常用。但一旦你遇到需要它的场景，它就是唯一的解决方案。
多语言支持（特别是亚洲语言）：这是最核心的应用。日文、中文等传统上就有竖排书写的习惯。如果你的网站需要支持这些语言的传统排版，vertical-rl 或 vertical-lr 就是必需的。这不仅仅是为了美观，更是为了符合当地用户的阅读习惯。
android rtsp流媒体播放介绍 中文WORD版
本文档主要讲述的是android rtsp流媒体播放介绍；实时流协议（RTSP）是应用级协议，控制实时数据的发送。RTSP提供了一个可扩展框架，使实时数据，如音频与视频，的受控、点播成为可能。数据源包括现场数据与存储在剪辑中数据。该协议目的在于控制多个数据发送连接，为选择发送通道，如UDP、组播UDP与TCP，提供途径，并为选择基于RTP上发送机制提供方法。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
0 查看详情
これは縦書きの日本語です。
.japanese-vertical { writing-mode: vertical-rl; text-orientation: upright; /* 确保所有字符（包括数字、英文）都正立 */}
创意排版和视觉设计：有时候，设计师会为了达到独特的视觉效果，将标题、侧边栏文字或者导航项做成垂直排版。比如，一个艺术画廊网站的侧边导航，或者一个海报风格的页面标题。
艺 术 画 廊
.vertical-title { writing-mode: vertical-lr; /* 文字从上到下，新列从左到右 */ text-orientation: upright; font-size: 3em; letter-spacing: 0.5em; /* 调整字间距 */ margin: 20px;}
这种方式比用 transform: rotate() 更语义化，也对文本选择、复制和SEO更友好，因为它没有真的“旋转”文字，只是改变了它的书写方向。
图表标签或复杂布局的辅助：在一些数据可视化或图表设计中，轴标签如果太长，横向显示会占用太多空间，这时就可以考虑将其垂直显示。或者在一些需要紧凑布局的区域，比如一个侧边信息卡片的标题。
年度销售额趋势
.chart-label { writing-mode: vertical-rl; text-orientation: mixed; /* 默认，英文数字横着，汉字竖着 */ width: 2em; /* 限制宽度，让文字自然换行（垂直方向的“行”） */ height: 100px; /* 限制高度 */ border-right: 1px solid #ccc; padding-right: 5px;}
它提供了一种优雅的解决方案，避免了使用复杂的定位和旋转技巧。
使用 writing-mode 时需要注意哪些兼容性或布局问题？
尽管 writing-mode 已经是一个成熟的CSS属性了，但在实际应用中还是有些“坑”需要注意。
与 text-orientation 的配合：这是个大头。当你把文本设置为垂直排版时（vertical-rl 或 vertical-lr），英文字母、数字和标点符号是会跟着一起旋转90度呢，还是保持正立？这就需要 text-orientation 来决定了。
text-orientation: mixed (默认值): 汉字、日文假名等全角字符会保持正立，而拉丁字母、数字、半角标点等会旋转90度。这在日文竖排中很常见。text-orientation: upright: 所有字符都会保持正立。这在中文竖排或创意设计中更常用，看起来更整齐。text-orientation: sideways-right / sideways-left: 不常用，了解即可。如果忘记设置 text-orientation，你的英文数字可能会“歪着脖子”看，体验会很糟糕。
盒模型理解的转变：前面提到了，writing-mode 会改变“内联轴”和“块轴”的方向。这意味着你习惯的 width 和 height、padding 和 margin 的 top/bottom/left/right，在视觉上可能会感觉“互换”了。比如，在 vertical-rl 模式下，元素的“宽度”实际上是其垂直方向的尺寸，而“高度”则是水平方向的尺寸。这要求开发者在布局时，脑子里要跟着切换一下“坐标系”。解决这个问题的一种思路是，尽量使用逻辑属性，比如 inline-size (对应 width 或 height，取决于 writing-mode)，block-size，以及 padding-block-start 等。但目前逻辑属性的普及度还不如物理属性。
文本溢出和换行：在垂直书写模式下，文本的“行”是垂直的，而“列”是水平的。如果文本过长，它会在垂直方向上换行。如果容器的“高度”（在垂直模式下是水平方向的限制）不足，就可能出现水平方向的溢出。你需要像处理水平排版时的宽度一样，去考虑垂直排版时的“高度”限制。
对齐和定位：当 writing-mode 改变时，text-align、vertical-align、float、flexbox、grid 的行为都会根据新的书写模式进行调整。例如，text-align: center 在 vertical-rl 模式下，会将文本在垂直方向上居中。这通常是符合预期的，但也意味着你需要重新思考这些属性在不同书写模式下的具体表现。position: absolute 这样的物理定位，其 top/left 等值依然是相对于物理坐标系，不会因为 writing-mode 改变而改变，这可能需要更精细的计算。
浏览器兼容性：虽然主流浏览器对 writing-mode 的支持已经很好了，但在一些老旧浏览器或者特定版本中，可能存在一些细微的差异或bug。在使用前，最好查阅 caniuse.com 确认目标用户群的兼容性情况。
总的来说，writing-mode 是一个强大但需要细致理解的属性。它不仅仅是视觉上的旋转，更是对整个文本流和布局模型的深层改变。用好了，能为你的网页带来更丰富的表现力。
以上就是CSS中如何控制文本方向_writing_mode应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1103261.html
微信扫一扫 
支付宝扫一扫 
