写入模式

这个写入模式 CSS公司属性设置文本行是水平还是垂直布局,以及块前进的方向。为整个文档设置时,应在根元素上设置(html格式元素)。

试试看

此属性指定阻塞流向,这是块级容器的堆叠方向,以及块容器中内联级内容的流动方向。因此,它还决定块级内容的顺序。

语法

css公司
/*关键字值*/
写入模式:水平结核;
写入模式:垂直rl;
写入模式:垂直lr;

/*全局值*/
写入模式:继承;
写入模式:最初的;
写入模式:恢复;
写入模式:回复层;
写入模式:未设置;

这个写入模式属性被指定为下面列出的值之一。水平脚本中的流向也受脚本的方向性,从左到右(液体火箭发动机(如英语和大多数其他语言)或从右向左(实时通讯(如希伯来语或阿拉伯语)。

水平结核

对于液体火箭发动机脚本,内容从左向右水平流动。对于实时通讯脚本,内容从右向左水平流动。下一条水平线位于前一条线的下方。

垂直rl

对于液体火箭发动机脚本,内容从上到下垂直流动,下一个垂直行位于上一行的左侧。对于实时通讯脚本,内容从下到上垂直流动,下一垂直行位于前一行的右侧。

垂直lr

对于液体火箭发动机脚本,内容从上到下垂直流动,下一垂直行位于前一行的右侧。对于实时通讯脚本,内容从下到上垂直流动,下一垂直行位于前一行的左侧。

侧向-rl

对于液体火箭发动机脚本,内容从上到下垂直流动。对于实时通讯脚本,内容从下到上垂直流动。所有的象形文字,甚至是垂直文字中的象形符号,都被设置在右侧。

人行道-lr

对于液体火箭发动机脚本,内容从下到上垂直流动。对于实时通讯脚本,内容从上到下垂直流动。所有的象形文字,甚至是垂直文字中的象形符号,都被设置为侧向左侧。

爱尔兰

不推荐使用,SVG1文档除外。对于CSS,使用水平结核而不是。

lr-tb型

除SVG1文件外,已弃用。对于CSS,请使用水平结核而不是。

爱尔兰

不推荐使用,SVG1文档除外。对于CSS,请使用水平结核而不是。

结核

不推荐使用,SVG1文档除外。对于CSS,请使用垂直lr而不是。

tb-lr(待定)

不推荐使用,SVG1文档除外。对于CSS,请使用垂直lr而不是。

tb-rl型

不推荐使用,SVG1文档除外。对于CSS,请使用垂直rl而不是。

形式化定义

初始值水平结核
适用于除表行组、表列组、表行和表列之外的所有元素
继承
计算值按规定
动画类型不可设置动画

形式语法

写入模式=
水平结核 |
垂直rl |
垂直lr |
侧向rl |
人行道-lr

示例

使用多种书写模式

这个示例演示了所有的书写模式,每个模式都用不同语言的文本显示。

HTML格式

HTML是一个<表格>每种书写模式都在一行中,其中一列显示使用该书写模式的各种脚本中的文本。

html格式
<桌子>
  <标题>使用多种写入模式</标题>
  <信托收据>
    <第个>价值</第个>
    <第个>垂直脚本</第个>
    <第个>水平(LTR)脚本</第个>
    <第个>水平(RTL)脚本</第个>
    <第个>混合脚本</第个>
  </信托收据>
  <信托收据 ="文本1">
    <第个>水平结核</第个>
    <td(时域)>我家没有电脑。</td(时域)>
    <td(时域)>示例文本</td(时域)>
    <td(时域)>מלל ארוך לדוגמא</td(时域)>
    <td(时域)>1994年に至っては</td(时域)>
  </信托收据>
  <信托收据 ="文本2">
    <第个>垂直lr</第个>
    <td(时域)>我家没有电脑。</td(时域)>
    <td(时域)>示例文本</td(时域)>
    <td(时域)>מלל ארוך לדוגמא</td(时域)>
    <td(时域)>1994年</td(时域)>
  </信托收据>
  <信托收据 ="文本3">
    <第个>垂直rl</第个>
    <td(时域)>我家没有电脑。</td(时域)>
    <td(时域)>示例文本</td(时域)>
    <td(时域)>מלל ארוך לדוגמא</td(时域)>
    <td(时域)>1994年に至っては</td(时域)>
  </信托收据>
  <信托收据 ="实验文本4">
    <第个>人行道-lr</第个>
    <td(时域)>我家没有电脑。</td(时域)>
    <td(时域)>示例文本</td(时域)>
    <td(时域)>מלל ארוך לדוגמא</td(时域)>
    <td(时域)>1994年に至っては</td(时域)>
  </信托收据>
  <信托收据 ="实验文本5">
    <第个>侧向rl</第个>
    <td(时域)>我家没有电脑。</td(时域)>
    <td(时域)>示例文本</td(时域)>
    <td(时域)>Şרית</td(时域)>
    <td(时域)>1994年に至っては</td(时域)>
  </信托收据>
</桌子>
<第页 ="通知">您的浏览器不支持<代码>人行道-lr</代码><代码>侧向-rl</代码>值。</第页>

CSS公司

调整内容方向性的CSS如下所示:

css公司
.text1时间 {
  写入模式:水平结核;
}

.text2时域 {
  写入模式:垂直lr;
}

.text3时间 {
  写入模式:垂直rl;
}

.text4时域 {
  写入模式:侧向lr;
}

.text5时域 {
  写入模式:侧向rl;
}

结果

对转换使用写入模式

如果您的浏览器不支持人行道-lr,解决方法是使用转型根据脚本方向实现类似效果。影响垂直rl与相同人行道-lr,所以从左到右的脚本不需要转换。在某些情况下,将文本旋转180度就足以实现人行道-lr,但字体glyph可能未设计为旋转,因此这可能会产生意外的定位或渲染。

HTML格式

html格式
<桌子>
  <标题>对转换使用写入模式</标题>
  <头部>
    <信托收据>
      <第个>垂直LR</第个>
      <第个>带变换的垂直LR</第个>
      <第个>左后侧面</第个>
      <第个>仅旋转</第个>
    </信托收据>
  </头部>
  <表格主体>
    <信托收据>
      <td(时域)>
        <跨度 ="垂直lr">我家没有电脑。</跨度>
        <跨度 ="垂直lr">示例文本</跨度>
      </td(时域)>
      <td(时域)>
        <跨度 ="垂直旋转lr">我家没有电脑。</跨度>
        <跨度 ="垂直旋转lr">示例文本</跨度>
      </td(时域)>
      <td(时域)>
        <跨度 ="人行道-lr">我家没有电脑。</跨度>
        <跨度 ="人行道-lr">示例文本</跨度>
      </td(时域)>
      <td(时域)>
        <跨度 ="仅旋转">是的</跨度>
        <跨度 ="仅旋转">示例文本</跨度>
      </td(时域)>
    </信托收据>
  </表格主体>
</桌子>

CSS公司

css公司
.垂直lr {
  写入模式:垂直lr;
}

.旋转 {
  转型: 旋转(180度);
}

.侧边-lr {
  写入模式:人行道-lr;
}

.仅旋转 {
  内联尺寸:适合的;
  转型: 旋转(-90度);
}

结果

规格

规范
CSS写入模式级别4
#阻塞流

浏览器兼容性

BCD表仅在浏览器中加载

另请参见