排版

使用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。

返回顶部