【CSS系列】writing-mode —— 文字方向（水平/垂直；左右/右左）

文章目录

一、引子
二、writing-mode
- 1.语法
- - horizontal-tb（默认：水平方向，文字从左到右，行从上到下）
  - vertical-rl（垂直方向，文字从上到下，行从右到左）
  - vertical-lr（垂直方向，文字从上到下，行从左到右）
  - sideways-rl (实验值)
  - sideways-lr (实验值)
- 2.属性搭配
- - （1）盒子垂直居中 —— `margin: auto 0;`
  - （2）文本图片垂直居中 —— `text-align: center;`
  - （3）首行缩进变文字下沉 —— `text-indent`
  - （4）其他
- 3.前世今生
三、拓展学习
- direction
⭐️ 好书推荐
- - 《Node.js从基础到项目实践（视频教学版）》

文档：writing-mode - CSS：层叠样式表 | MDN

一、引子

项目中有需求需要文字垂直排布，第一时间想到了 CSS 中的 direction 这个属性，但这个属性只能设置文字“从左到右“或从右到左，经过查找才发现有个”生僻属性“ —— writing-mode

如下即可实现：

writing-mode: vertical-lr;

二、writing-mode

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

1.语法

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

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

horizontal-tb（默认：水平方向，文字从左到右，行从上到下）

对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。

vertical-rl（垂直方向，文字从上到下，行从右到左）

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

vertical-lr（垂直方向，文字从上到下，行从左到右）

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

sideways-rl (实验值)

对于左对齐（ltr）文本，内容从下到上垂直流动。对于右对齐（rtl）文本，内容从上到下垂直流动。所有字形（即使是垂直文本中的字形）都朝向右侧。

sideways-lr (实验值)

对于左对齐（ltr）文本，内容从上到下垂直流动。对于右对齐（rtl）文本，内容从下到上垂直流动。所有字形（即使是垂直文本中的字形）都朝向左侧。

2.属性搭配

writing-mode 可以改变文本排布方向，那么一些与文字相关的属性也会有更多妙用：

（1）盒子垂直居中 —— `margin: auto 0;`

<div class="container">
     <div class="content"></div>
 </div>

.container {
    width: 100%;
    height: 100%;
    background-color: #f00;
    writing-mode: vertical-lr;
}
.container .content {
    height: 100px;
    width: 200px;
    margin: auto 0;
    background-color: #0f0;
}

注意：定宽定高

（2）文本图片垂直居中 —— `text-align: center;`

<div class="container">
    我是一行文字<br>程序边界<br>
    <img src="https://profile-avatar.csdnimg.cn/ea275d892df44c5fb722c5756f8ba98b_qq_32682301.jpg">
</div>

.container {
    width: 100%;
    height: 100%;
    background-color: #0fF;
    writing-mode: vertical-lr;
    text-align: center;
}

在这里插入图片描述
程序边界原文地址：https://iseeu.blog.csdn.net/article/details/131709017

（3）首行缩进变文字下沉 —— `text-indent`

<div class="container">
    我是一行文字<br>程序边界<br>
</div>

.container {
    width: 100%;
    height: 100%;
    background-color: #0fF;
    writing-mode: vertical-lr;
    text-indent: 2rem;
}

在这里插入图片描述

绝妙应用
https://www.zhangxinxu.com/study/201604/writing-mode-text-indent-vertical-down.html

程序边界原文地址：https://iseeu.blog.csdn.net/article/details/131709017

（4）其他

更多玩法慢慢探索发现，未完待续。。。

3.前世今生

writing-mode属性最初只是ie中的属性，只有ie支持，现在在css3中谷歌，火狐也开始支持。

所以使用的时候就需要记住两套不同的语法，ie的私有属性和css3的规范属性

如果只需要兼容到ie8+就可以只使用css3的规范属性就可以了

三、拓展学习

direction

文档：direction - CSS：层叠样式表 | MDN

direction CSS 属性用于设置文本、表格列和水平溢出的方向。

改变CSS世界纵横规则的writing-mode属性 « 张鑫旭-鑫空间-鑫生活
writing-mode属性 css古文写法

⭐️ 好书推荐

《Node.js从基础到项目实践（视频教学版）》

《Node.js从基础到项目实践（视频教学版）》以理论结合实践的形式，讲解了Node.js 基础、框架、进阶知识和项目实践。本书为视频教学版，每一章节都有相对应的视频讲解，通过视频讲解可快速切入主题，提高学习效率。

全书分为4 大部分，共13 章，分别是Node.js 基础入门、Node.js 框架、Node.js 进阶以及企业项目实践。其中，第1～3 章为Node.js 基础入门讲解，包括Node.js 核心模块、自定义模块、第三方模块；第4～7 章为Node.js 框架讲解，包括Express 流行框架、MySQL 数据库、在Express 框架中操作MySQL 数据库以及Express 框架身份验证；第8～12 章为Node.js 进阶讲解，包括Node.js 事件循环、Koa 框架、socket.io、网络爬虫、GraphQL 基础语法；第13 章为企业项目实践讲解，使用Express 框架和MySQL 数据库完成x闻管理系统API 的开发。