网站首页 » 前端开发 » CSS3 » CSS 中改变横纵方向 writing-mode 属性
上一篇:
下一篇:

CSS 中改变横纵方向 writing-mode 属性

前言

Writing-mode属性,我从事前端这么久也还没看到过,更不用说上过了,是近在网上看到一篇关于 writing-mode属性的介绍,觉得不错,所以在这里也给大家整理分享出来。

其实这个属性IE5.5 版本的浏览器就已经支持了,但这个属性还是没流行起来,或者是说极少看到它的身影,因为在很长的一段时间里 FireFox,Chrome 浏览器都不支持wirting-mode属性。但随着前端技术的发展,各大主流浏览器也慢慢地开始支持 wirting-mode 属性。特别是到了现在的移动互联网时代,writing-mode 应该是时候出山了。

writing-mode 作用

Writing-mode 属性我猜估计是为中国的文字而生的,因为他的作用与我们的古诗的排版方式不谋而合(但这一切只是我以为而已)。那么它的作用是什么呢?我们来看看FireFox 开发者中心是怎么说的吧!

The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

The 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 the writing-mode property also determines the ordering of block-level content.

我知道你跟我一样,看完后,还是一脸迷惑,不用担心,下面是简单粗暴的翻译(如有不适,请自行翻译):

Writing-mode属性 定义了文字流的排列方式是水平方向还是垂直方向(水平方向就跟我们平时见到的文字排版差不多,而垂直方向则类似于我们春节时这里帖的对联上的文字排列方式)。
Writing-mode 指定了文档流的排列方向。即块级元素的堆叠方向,以及行内元素在块级元素内的排列方向。因此,writing-mode 属性是用来改变内联元素的顺序的。

相信我,我已经尽力了。

主流览浏器

基本语法

/* 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;

属性值作用

horizontal-tb
文本流为水平方向,元素从上往下堆叠。
vertical-rl
文本流为垂直方向,语序为从右至左
vertical-lr
文本流为垂直方向,语序为从左至右
sideways-rl
是正常的文字内容逆时针旋转90度得到的效果。
sideways-lr
是正常的文字内容顺时针旋转90度得到的效果。

属性值效果

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

理想中的效果

css-writing-mode-property-1

图片来看火狐开发者

现实比较骨感(实际效果)

value Vertical script Horizontal script Mixed script
horizontal-tb 我家没有电脑。 Example text 1994年に至っては
vertical-lr 我家没有电脑。 Example text 1994年に至っては
vertical-rl 我家没有电脑。 Example text 1994年に至っては
sideways-lr 我家没有电脑。 Example text 1994年に至っては
sideways-rl 我家没有电脑。 Example text 1994年に至っては

浏览器支持

为什么理想跟现实有这么大我出入呢?还是兼容性的问题在作祟。我们不妨来看看这个属性在各个版本浏览器中的支持情况

IE 浏览器

上面是以火狐开发者中心的文档为基础展开的,下面我们变来看看IE官网怎么说的。

基本语法

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

属性值作用

lr-tb
默认值,内容水平堆叠,从左到右,从上往下。下一行会从上一行下方开始。所有的字形是直立的。
rl-tb
内容水平堆叠,从右到左,从上往下。下一行会从上一行下方开始。所有的字形是直立的。阿拉伯语(如我们最常用的数字,英文数字也有同样的效果),希伯来语,塔纳文,叙利亚文和。
tb-rl
内容垂直堆叠,从上往下,从右向左。下一行会从上一行左边开始。在宽的单元格中字形直立放置,在窄单元格中内容会旋转90度,这个用于东亚文字排版。(关于旋转90这个事,我还不明白是什么意思,怎么试都没试出来)
注意:这个属性在IE 8 和 google 浏览器上的显示效果是不一样的。
bt-rl
内宅垂直堆叠,从下往上,从右向左。下一行会从上一行左侧开始。在宽的单元格中字形直立放置,在窄单元格中内容字体(如:narrow Latin,narrow Kana glyphs)会旋转90度,这个用于东亚文字排版。(关于旋转90这个事,我还不明白是什么意思,怎么试都没试出来)
tb-lr
Internet Explorer 8。内容垂直堆叠,从上往下,从左向右。下一行会从上一行的右边开始。
bt-lr
Internet Explorer 8。内容垂直堆叠,从下往上,从左向右。下一行会从上一行的右边开始。
lr-bt
Internet Explorer 8。内容水平堆叠,从下往上,从左向右。下一行会从上一行的上方开始。
rl-bt
Internet Explorer 8。内容水平堆叠,从下往上,从右向左。下一行会从上一行的上方开始。
lr
IE9+浏览器支持。在SVG和HTML元素上使用,跟lr-tb 效果一样。但在实践测试中lr
无效,而lr-tb 才有效果。
rl
IE9+浏览器支持。在SVG和HTML元素上使用,跟rl-tb 效果一样。但在实践测试中rl无效,而rl-tb 才有效果,而在谷歌浏览器和火狐浏览器中两个属性都没有效果
tb
IE9+浏览器支持。在SVG和HTML元素上使用,跟rl-tb 效果一样。但在实践测试中tb 无效,而rl-tb 才有效果,而在谷歌浏览器和火狐浏览器中两个属性都用效果

说了这么多,估计你看完后,心里还是一个大大的问号, 我们还是来看个图,你就明白得一清二楚了。

属性值效果

CSS 中改变横纵方向 writing-mode 属性

有意思的是,官方给出的文档中的下面这一句话,在实践测试中却没有任何效果。

Windows Internet Explorer 7. The rl-tb, and bt-rl values are available to the -ms-writing-mode.

意思是说在Windows Internet Explorer 7. 下可以通过添加-ms-前缀来让这两个属性(rl-tb 和 bt-rl )起作用。

体会感受

在这里我们不妨抛开 IE 不谈,为什么,因为连微软自己都放弃了自家的IE,推出全新的浏览器 edge 了,你还有理由坚持吗?所以我们就直接用主流浏览器支持的属性值就可以了,也就是前提到的五个属性:

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

不过在这里还有一个小小的问题也就是最后两个属性(sideways-rl | sideways-lr),目前在兼容性方面还不是很好,只有火狐浏览器支持,谷歌,360,Edge,统统都不支持,但我相信支持 sideways-rl | sideways-lr 这两个属性的浏览器会越来越多。

解决方案

说了这么多,然而并没有什么用,关键是要怎么用,这才是我们最关注,最想要的。虽然上面提到的两个属性值 sideways-rl | sideways-lr 还不那么受 浏览器厂商的青睐,但我们还是可以使用另外的三个属性值的,谷歌(版本 50.0.2661.102 m),360(版本号:8.1.1.212,内核版本:45.0.2454.101),火狐,Safari(5.1.7) ,UC浏览器(浏览器版本:5.6.13381.9,极速内核版本:48.0.2564.116,兼容内核版本:11.0.9600.178.1)都支持,在移动端可以尝试用用,如果有需要的话。例如小图标的旋转效果,就可以通过 writing-mode 来实现。那如果不想用 writing-mode 属性,还有没有其它替代方案呢?答案是肯定的,微软的官方就给我们提供了另一种方法,我们先来看看微软在哪里应用了这种排版效果:

transform 旋转属性

参考链接:https://msdn.microsoft.com/library/ms531187(v=vs.85).aspx ,红色简单所指的地方,一个小图标,一个英文。实现这个效果不是通过 writing-mode ,而是通过采用 transform 的旋转属性来实现文字的排版效果。

transform 旋转属性

这也算是一种比较新,比较好的方法,在移动端你可以放心使用。

参考资料

微软:https://msdn.microsoft.com/library/ms531187(v=vs.85).aspx

火狐MDN:https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

w3c:https://drafts.csswg.org/css-writing-modes-3/

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/css-writing-mode-property/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END