文章关键字 ‘writing-mode’

Tips: 使用CSS逻辑属性简化我们的书写

2022年12月18日,星期日

摘星星

原本以为CSS逻辑属性只能在对称布局这样少见的场景中才有用武之地,最近发现,CSS逻辑属性还有简写的作用,这可牛逼坏了~

阅读全文…

使用CSS text-combine-upright实现字符的横向合并

2021年02月18日,星期四

狐狸亲吻

text-combine-upright属性可以让2-4个字符合并为一个字符的宽度(浏览器自动字形缩减),不仅可以用在垂直排版中,水平排版中特殊名词缩减合并也是可以使用的。

阅读全文…

使用CSS text-emphasis对文字进行强调装饰

2020年06月16日,星期二

过去想要强调文字,做法是加粗,或者使用高亮颜色,现在可以使用text-emphasis属性进行强调装饰,我们可以指定任意的装饰字符,很实用的一个CSS新属性。

阅读全文…

CSS margin-inline和margin-block区别是什么?

2018年10月26日,星期五

CSS margin-inline和margin-block都属于CSS逻辑属性,是CSS中比较新的一个概念,其行为表现具有逻辑特性, margin-inline和margin-block是N多CSS逻辑属性中的2个,本文以margin-inline和margin-block为代表介绍CSS逻辑属性的一些布局表现,同时演示direction和writing-mode这些属性是如何让这些CSS属性表现出“逻辑”的。

有demo有截图有必要的源代码展示,希望本文内容能够对您的学习有所帮助。

阅读全文…

canvas文本绘制自动换行、字间距、竖排等实现

2018年02月5日,星期一

和CSS相比,SVG以及canvas对文字排版的支持很弱。

在CSS中天然支持的文本自动换行,其他letter-sapcing字间距,writing-mode竖排等都是一个CSS属性就可以实现。但是在canvas中,全部都不支持。

但是canvas可以方便把文字转换成图片,有些场合,例如广告生成工具就需要canvas前端图片生成,此时我们该如何处理这些文字排版呢?

阅读全文…

改变CSS世界纵横规则的writing-mode属性

2016年04月27日,星期三


writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。

但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则……

本月为4月压轴作品,大量demo,大量脑洞大开的创意处理,希望可以对您的学习有所帮助。

阅读全文…

CSS direction属性简介与实际应用

2016年03月20日,星期日

至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。

为什么呢?是因为direction长得丑吗?

虽然说direction确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。

那是因为兼容性吗?

那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction就已经被支持……

阅读全文…