原本以为CSS逻辑属性只能在对称布局这样少见的场景中才有用武之地,最近发现,CSS逻辑属性还有简写的作用,这可牛逼坏了~
文章关键字 ‘writing-mode’
Tips: 使用CSS逻辑属性简化我们的书写
2022年12月18日,星期日使用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日,星期三CSS direction属性简介与实际应用
2016年03月20日,星期日至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。
为什么呢?是因为direction长得丑吗?
虽然说direction确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。
那是因为兼容性吗?
那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction就已经被支持……