×

带您详细了解CSS中writing-mode的属性以及应用

作者:Web前端之家2022.05.30来源:Web前端之家浏览:1431评论:0
关键词:htmlcsswriting-mode
微信公众号

微信公众号

500.jpg

谈到数字排列,我们经常会设计师排文案的时候,很漂亮,文字可以按照各种方向去设计。其实在前端开发的技术中,我们也可以这样去实现的。今天我们一起学下如何用代码去实现文字在不同方向上的排版。

首先我们来看张图,如下:

image.png

我们可以看到,文字按照不同方向的排列。那么如何操作呢?

writing-mode 属性定义

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时,应在根元素上设置它(对于 HTML 文档应该在 html 元素上设置)

此属性指定块流动方向,即块级容器堆叠的方向,以及行内内容在块级容器中的流动方向。因此,它也确定块级内容的顺序。

语法

/* 关键值 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* 全局值 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

将 write-mode 属性指定为下面列出的值之一。水平流动方向也受文本的方向影响,从左到右(ltr,类似于英语和大多数其他语言)或从右到左(rtl,类似于希伯来语或阿拉伯语)。

Values

  • horizontal-tb

  • 对于左对齐(ltr)文本,内容从左到右水平流动。对于右对齐(rtr)文本,内容从右到左水平流动。下一水平行位于上一行下方。

  • vertical-rl

  • 对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行左侧。对于右对齐(rtr)文本,内容从下到上垂直流动,下一垂直行位于上一行右侧。

  • vertical-lr

  • 对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行右侧。对于右对齐(rtr)文本,内容从下到上垂直流动,下一垂直行位于上一行左侧。

  • sideways-rl

  • 对于左对齐(ltr)文本,内容从下到上垂直流动。对于右对齐(rtr)文本,内容从上到下垂直流动。所有字形(即使是垂直文本中的字形)都朝向右侧。

  • sideways-lr

  • 对于左对齐(ltr)文本,内容从上到下垂直流动。对于右对齐(rtr)文本,内容从下到上垂直流动。所有字形(即使是垂直文本中的字形)都朝向左侧。

  • lr 

  • 除 SVG1 文档外,已弃用。对于 CSS,请改用 horizontal-tb

  • lr-tb 

  • 除 SVG1 文档外,已弃用。对于 CSS,请改用 horizontal-tb

  • rl

  • 除 SVG1 文档外,已弃用。对于 CSS,请改用 horizontal-tb

  • tb

  • 除 SVG1 文档外,已弃用。对于 CSS,请改用 vertical-lr

  • tb-rl

  • 除 SVG1 文档外,已弃用。对于 CSS,请改用 vertical-rl

正式语法

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

示例

该例子展现了所有writing-mode语法,以及不同语言的展示情况。

HTML

以下 HTML 只是一个简单的  <table>,每个单元格展示了不同的 writing-mode 的文本。

<table>
        <tr>
          <th>Value</th>
          <th>Vertical script</th>
          <th>Horizontal script</th>
          <th>Mixed script</th>
        </tr>
        <tr>
          <td>horizontal-tb</td>
          <td class="example Text1"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text1"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text1"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>vertical-lr</td>
          <td class="example Text2"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text2"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text2"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>vertical-rl</td>
          <td class="example Text3"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text3"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text3"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>sideways-lr</td>
          <td class="example Text4"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text4"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text4"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>sideways-rl</td>
          <td class="example Text5"><span>欢迎来到欢迎来到Web前端之家</span></td>
          <td class="example Text5"><span>欢迎来到欢迎来到Web前端之家</span></td>
          <td class="example Text5"><span>欢迎来到欢迎来到Web前端之家</span></td>
        </tr>
      </table>

CSS

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

.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}

效果就是我们刚开始的截图效果。

我们可以看下完整的DEMO,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字排版 - Web前端之家 www.jiangweishan.com</title>
    <style type="text/css">
        table {
        border-collapse:collapse;
        }
        td, th {
        border: 1px black solid; padding: 3px;
        }
        th {
        background-color: lightgray;
        }

        .example.Text1 span, .example.Text1 {
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
        }

        .example.Text2 span, .example.Text2 {
        writing-mode: vertical-lr;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
        }

        .example.Text3 span, .example.Text3 {
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        }

        .example.Text4 span, .example.Text4 {
        writing-mode: sideways-lr;
        -webkit-writing-mode: sideways-lr;
        -ms-writing-mode: sideways-lr;
        }

        .example.Text5 span, .example.Text5 {
        writing-mode: sideways-rl;
        -webkit-writing-mode: sideways-rl;
        -ms-writing-mode: sideways-rl;
        }
    </style>
</head>
<body>
    <table>
        <tr>
          <th>Value</th>
          <th>Vertical script</th>
          <th>Horizontal script</th>
          <th>Mixed script</th>
        </tr>
        <tr>
          <td>horizontal-tb</td>
          <td class="example Text1"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text1"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text1"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>vertical-lr</td>
          <td class="example Text2"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text2"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text2"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>vertical-rl</td>
          <td class="example Text3"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text3"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text3"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>sideways-lr</td>
          <td class="example Text4"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text4"><span>欢迎来到Web前端之家</span></td>
          <td class="example Text4"><span>欢迎来到Web前端之家</span></td>
        </tr>
        <tr>
          <td>sideways-rl</td>
          <td class="example Text5"><span>欢迎来到欢迎来到Web前端之家</span></td>
          <td class="example Text5"><span>欢迎来到欢迎来到Web前端之家</span></td>
          <td class="example Text5"><span>欢迎来到欢迎来到Web前端之家</span></td>
        </tr>
      </table>
</body>
</html>

兼容性

我们使用属性的同时,需要去看兼容性,否则会影响设备显示效果的。

image.png

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/htmlcss20220530.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2