CSS writing-mode属性

最新推荐文章于 2024-05-21 21:13:29 发布

明月几时有666

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量4.2k

点赞数 2

分类专栏： # CSS 文章标签： writing-mode css

本文链接：https://blog.csdn.net/gao_zhennan/article/details/126431764

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了HTML中的writing-mode属性，它定义了文本流向和块级元素布局。重点讲解了三个属性值：默认的horizontal-tb、vertical-rl和vertical-lr，以及它们如何影响文本方向和页面结构。实例演示了不同书写模式在中文和英文中的应用。

摘要由CSDN通过智能技术生成

前言：在学习标准流（或标准文档流，常规流）时，遇到了书写模式(writing-mode)的概念。标准流中块级元素的布局和行内元素的文字书写方向都和书写模式有联系。为了更好的学习标准流这一非常重要的知识，先了解一下书写模式的概念是非常必要的。也有可能你单纯想了解下这部分内容，都没关系。本篇文章会让你对该属性有基本的认识。

一、基本概念

下列内容摘取自MDN官方文档：writing-mode

This property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus, it also determines the ordering of block-level content.

When set for an entire document, it should be set on the root element (html element for HTML documents).

大致意思：writing-mode 属性指定了块流动方向，即块级容器（或块级元素）被堆叠（或排列）的方向。进而，也决定了块级内容的顺序（汉语等大多数语言构成的块级内容，例如p元素，一般是从上往下，一行一行排列）；同时也指定了，在块级容器中，行级内容的流动方向。

简而言之，writing-mode 属性指定块流动方向和行级内容的流动方向。

块级内容是块级容器中所有内容的整体；行级内容是块级容器中的个体内容，例如没有被任何标签包括的文本，a元素包裹的文本，span元素包裹的文本等等。块级内容位于块级容器中，故块级内容的流动方向和块流动方向一致。注意区分块（块级容器或块级元素）和块级内容，即块级元素中包裹的内容。

如下图所示，上下两个段落是p元素（添加了灰色背景），块（块级元素）流动方向和块级内容流动方向是垂直方向从上到下的；上面的段落中的a标签中的文本、普通文本、span标签中的文本（背景黄色）等行级内容流动方向是水平方向从左向右的。

查看源代码及显示效果
在这里插入图片描述

针对汉语，这就是writing-node的默认值的情况。该属性更多值及功能见下文~

二、属性值及功能

writing-mode的取值主要有三个

writing-mode: horizontal-tb; 默认值
writing-mode: vertical-rl;
writing-mode: vertical-lr;

The flow direction in horizontal scripts is also affected by the directionality of that script, either left-to-right (ltr, like English and most other languages) or right-to-left (rtl, like Hebrew or Arabic).

行级内容的流动方向还受到文字方向性的影响。文字方向性要么是从左到右(left-to-right，简写ltr，像汉语、英语等大多数语言)，要么是从右到左(right-to-left，简写rtl，例如希伯来语、阿拉伯语等等)

文字方向性是什么？

例如，使用各国语言书写汉语的“我爱中国”

ltr ，从左往右书写或阅读
汉语：我爱中国
英语：I Love China
俄语：я люблю Китай
日语：私は中国を愛しています
韩语： 나는 중국을 사랑한다

rtl , 从右往左书写或阅读
阿拉伯语： انا احب الصين
希伯来语：אני אוהבת את סין

属性值含义

属性值horizontal-tb，horizontal表示水平的，tb表示Top to Bottom，从上到下；
属性值vertical-lr ， vertical 表示垂直的，lr表示Left to Right，从左到右；
属性值vertical-rl ， vertical 表示垂直的，rl表示Left to Right，从右到左。

如何理解和记忆这些属性呢？

我们可以把属性值以连字符“-”为分隔分为两部分，连字符前半部分horizontal水平的，表示行级内容的流动方向是水平的；然后依据文字方向性，ltr 表示文字在水平方向上从左向右流动，rtl 表示文字在水平方向上从右向左流动。连字符后半部分tb 从上到下，表示块流动方向和块级内容的流动方向是从上到下的。

连字符前半部分vertical垂直的，表示行级内容的流动方向是垂直的；然后依据文字方向相性，ltr 表示文字在垂直方向上从上向下流动，rtl表示文字在垂直方向上从下向上流动。连字符后半部分lr 从左到右，rl 从右到左分别表示块流动方向和块级内容的流动方向为从左到右，从右到左；

属性值前半部分horizontal、vertical和文字方向性ltr、rtl共同决定行级内容文字的流动方向，属性值后半部分lr、rl决定块和块和块级内容的流动方向。

当属性值为writing-mode: horizontal-tb;时，显示效果如下图所示

查看或修改源代码（可以测试另外两个属性的显示效果）

通常，我们会给根元素，HTML文档的根元素是html，添加writing-mode属性，来设置网页整体的书写模式。

在这里插入图片描述

当属性值为：writing-mode: vertical-rl; 显示效果仿佛是上图整体向右旋转90度。水平书写模式中最上面的元素，垂直后在最右边，依此类推。另外，不知道你是否观察到了一个有趣的地方，对于汉语和日语不管是水平还是垂直显示，文字本身并没有旋转。而对于英语等其他语言，文字本身向右旋转了90度。

在这里插入图片描述

当属性值为：writing-mode: vertical-rl; 水平中最上面的元素，垂直后在最左边。由于内容和上图大致相同，故不在重复标记。

在这里插入图片描述

三、内容总结

writing-mode 属性指定块（块级元素）流动方向和行级内容的流动方向；
目前共有三个属性值：horizontal-tb （默认值）、vertical-rl、vertical-lr。通常，在HTML中，给html根元素添加此属性，设置网页整体的书写模式；
属性值连字符的后半部分决定块流动方向，tb从上到下，lr从左到右，rl从右到左。前半部分和文字方向性共同决定行级内容的流动方向。horizontal ltr、rtl分别表示水平从左向右流动、水平从右向左流动。vertical ltr、rtl分别表示垂直从上向下流动，从下向上流动；
汉语、日语等，垂直和水平，文字本身无旋转。英语、俄语等垂直时，文字本身向左旋转90度。

四、书写模式的应用

在中国古代，人们书写文字是从右向左，从上到下的，刚好符合vertical-rl属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
    <style>
        html {
            writing-mode: vertical-rl;
        }

        .box {
            height: 240px;
            margin: auto 100px;
        }

        p:nth-child(1) {
            padding-top:5px;
          
        }

        p:nth-child(2) {
            padding-top:60px;
        }

        p:nth-child(3), p:nth-child(4) {
            border-right: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>《静夜思》</p>
        <p>李白</p>
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </div>
</body>
</html>

显示效果如下：

在这里插入图片描述

五、书写模式对标准流的影响

想起了我最初想要学习该属性的原因：我想学习标准流，而书写模式对标准流有很大影响。前文虽然没有直接说明，但也间接体现了对标准流有何影响。主要体现在对块级元素布局或排列方面，例如，对于默认的水平书写模式，块级元素独占一行，新元素在新的行上显示。而对于垂直书写模式，块级元素独占一列，新元素在新列上显示。块级元素的水平居中方式 margin: 0 auto; 而垂直书写模式则需要垂直居中margin: auto 0。

书写模式影响了标准流的布局行为。

拓展知识

文字（script）、书写系统（writing system）和语言（language）分别是什么含义？