现代 CSS

排版

CSS的leading-trim给排版带来的变化

今天要和大家聊的leading-trim既是一个简单的属性,但又是一个复杂的体系。为什么这么说呢?如果我们从CSS属性的角度出发,那他是一个简单的属性,我们只需要知道他有哪几个值,每个值的作用是什么,这样就有实现需要的效果。如果我们从排版的角度出发,那他又是一个复杂的体系,因为要彻底的掌握他们,我们需要掌握的东西太多,有设计方面的,有文字排版方面的,也有CSS的其他属性等。但是,leading-trim的确能帮助我们Web开发者解决一些排版上的烦恼,特别是行与行间距方面的烦恼。如果你对这方面感兴趣的话,欢迎继续往下阅读。

给CSS加把锁

看到该标题,我想你可能会感到非常的意外和好奇,“CSS怎么能加把锁呢”?其实这里所说的给CSS加把锁是指业内所说的CSS Locks(或者CSS calc Lock)。该概念是@Tim Brown在2012年提出的一个概念,该技术其主要致力于解决文本排版可读性相关的技术难度,特别是在实现一些精准的流式布局中的文本排版。在《Web技术10》中也提到过,@Mike Riethmuller、@Tim Brown和@Geoff Graham都在致力于这方面的研究,而且找到了使用CSS锁技术方案来锁定流式排版。让我们实现一个精准的流式排版不再是难题。在今天这篇文章,我们来一起探讨一下CSS锁的故事。

使用writing-mode实现垂直排版

大约一年前,我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo,它允许你通过复选框来切换书写模式。在不久之后我遇到了@Yoav Weiss,并一起聊了一些关于响应式图片社区小组,因为我提到了如果可以通过媒体查询得到picture元素的writing-mode,就不必在切换排版的时候通过一些黑魔法的方式对图片进行转换。他建议我写一个响应式图片的用例。当我重新打开这个Demo的时候,看到的结果让我感到无语。为了宣泄一下,我将一步一步写下各种浏览器的渲染结果,以及目前可能的解决方案。这篇文章的篇幅很长,可能会花费你一定的时间。

实现精准的流体排版原理

流体排版这一词似乎看上去有点陌生,在英文中常把他称之为Fluid Typography,当然也有很多朋友称之为流体字号(Fluid Size)。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。

如何精确控制响应式排版

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区,如何让文本显示的各为大气,又适合你的Web排版。

我所知道的所有的响应式网站排版

响应式排版是一个棘手的问题。我学习了很多的有关排版的问题,而且收集了一些非常棒的例子,比如使用相对单位,vertical rhythms和恰当的文本缩放排版。这些新的例子都是非常棒的,它们让我的网站更加美观,更加赏心悦目。但是,实现这些功能的过程却是非常糟糕的。在几个月的辛苦工作之后,现在我终于找到了一个可以和各位分享的一个解决方法——Typi。

返回顶部