写入模型 | writing-mode (Writing Modes) – CSS 中文开发手册
写入模型 | writing-mode (Writing Modes) - CSS 中文开发手册
writing-modeCSS属性定义文本行是否水平或垂直布置以及块扩展的方向。
/* Keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* Global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;
语法
该属性指定块流向,即块级别容器堆叠的方向,以及内联级别内容在块容器内流动的方向。因此,writing-mode属性也决定了块级内容的排序。
Initial value |
horizontal-tb |
---|---|
Applies to |
all elements except table row groups, table column groups, table rows, and table columns |
Inherited |
yes |
Media |
visual |
Computed value |
as specified |
Animation type |
discrete |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
可能值
horizontal-tb——内容按从左到右水平从上到下垂直流动。下一条水平线位于上一条线的下方。
vertical-rl——内容按从上到下垂直流动,水平从右到左。下一条垂直线位于前一行的左侧。
vertical-lr——内容按从上到下垂直流动,水平从左到右。下一条垂直线位于上一行的右侧。
sideways-rl——内容按从上到下垂直流动,所有的字形,甚至是垂直字形的字形都被设置在右侧。sideways-lr——内容按从上到下垂直流动,所有的字形,甚至垂直的字形,都被放在左侧。
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
实例
实际结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Writing Modes Module Level 3The definition of 'writing-mode' in that specification. |
Candidate Recommendation |
Initial definition |
UnknownThe definition of 'writing-mode' in that specification. |
Unknown |
Add sideways-lr and sideways-rl |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer (defunct) |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
8-webkit (Yes) |
(Yes)-webkit (Yes) |
41 (41)1 |
9-ms2 |
15-webkit |
5.1-webkit |
lr |
48 (uprefixed) |
(Yes) |
43 (43) |
9-ms2 |
(Yes) |
? |
Feature |
Android |
Android Webview |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
|
---|---|---|---|---|---|---|---|---|---|
Basic support |
3-webkit |
(Yes) |
47-webkit (Yes) |
(Yes)-webkit (Yes) |
41.0 (41) 1 |
? |
? |
5.1 -webkit |
|
SVG 1.1 values lr, lr-tb, rl, tb, tb-rl |
? |
48.0 (uprefixed) |
48.0 (uprefixed) |
(Yes) |
43.0 (43) |
? |
? |
? |
|
sideways-rl,sideways-lr |
No support4 |
No support |
No support |
No support |
? |
? |
? |
? |
|
vertical-lr |
vertical-rl |
No support4 |
No support |
No support |
No support |
? |
? |
? |
? |
另见
SVG writing-mode attributedirectionunicode-biditext-orientationtext-combine-upright
CSS 中文开发手册原文地址:https://www.cnblogs.com/breakyizhan/p/13287123.html
- 温故而知新:设计模式之工厂模式(Factory)
- 通过Jexus 部署 dotnetcore版本MusicStore 示例程序
- jquery.mobile手机网页简要
- 跟张志东深聊腾讯的“进化力”
- 详解微信小程序如何实现流程进度功能
- silverlight:如何在图片上挖个洞?
- .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门
- mysqldump数据导出问题和客户端授权后连接失败问题
- Android置底一个View后运行报错
- 温故而知新:设计模式之抽象工厂(AbstractFactory)
- mysql操作命令梳理(1)-索引
- Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系统)
- centos6.5虚拟机安装后,没有iptables配置文件
- 温故而知新:设计模式之Builder
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- kotlin中EditText赋值Type mismatch方式
- Kotlin 创建接口或者抽象类的匿名对象实例
- kotlin Context使用详解
- Android-ViewModel和LiveData使用详解
- 详解Android开发录音和播放音频的步骤(动态获取权限)
- Android自定义带圆角的ImageView
- 关于Kotlin写界面时诸多控件的点击事件
- Android webview注入JS代码 修改网页内容操作
- Kotlin 使用高阶函数实现回调方式
- Android WebView通过动态的修改js去拦截post请求参数实例
- Android使用Kotlin实现多节点进度条
- Android中webView加载H5绑定cookie实例
- 解决Android webview设置cookie和cookie丢失的问题
- Android实现清除单个域名的cookie
- Android实现触发html页面的Button控件点击事件方式