连续排版

2021-03-21 00:46:21

这里有一些关于一个想法的注意事项,我一直在思考它的连续排版。它'在连续函数方面而不是绝对值的方式思考排版。

功能(您'从您的Maths Textbook中的LL召回)基于一个或多个输入参数产生不同的结果。例如,函数$$ f(x)= 3x + 2 $$根据其输入参数$$ x $$的值将返回不同的结果。

如果我们将这个想法应用于排版,它允许我们使设计决策相对于屏幕尺寸,连接速度,用户偏好等变量输入参数等。这可以适用于任何环境,但它' s特别适用于在网上排版。

请注意,这些想法的大多数都是' t非常原始的,我在这里综合来了解我自己的理解。看看原始来源的脚注。

当您'重新开发一块排版时,您必须定义一系列关系:

有各种各样的方法来做这件事(Brothurst用它们在印刷风格的元素中填充了整个章节1),但在任何情况下,您最终都会到达一组值的值,键入尺寸,重量,间距等。这会产生任何您达成的视觉表达。

拍摄字体大小,例如:我们想设置这一点,所以它给出了正确的语音到了写作我们'重新使用,但它也必须适用于我们选择的字体和#39; ve所选择的字体。页面的大小,它应该导致每行舒适数量的字符。其他调整遵循它:类型大小的变化可能会强制不同的间距,重量变化,连字符等。

在打印中,您调整这些值,直到您到达一组产生我们针对的视觉表达的数字。而且因为你'重新使用一张固定尺寸和永久性墨水的纸张,你可以相当确定你的数字,而且建立的数字将保持完整的整个生产过程,以及读者的土地'只要你的意图。

但在Web上,此方法开始失败。与纸张不同,浏览器窗口您的文本将被视为完全变量;它可以承担任何尺寸和APSET比率。如果我们将字体大小设置为固定数量(18px,例如,它,它与浏览器窗口之间的关系将在每个屏幕上都有不同,并且最不愉快。

并且尺寸是浏览器窗口ISN' t唯一的播放变量:读者可以通过浏览器或接头系统修改类型大小和颜色,或者您的文本将其转换为自己的语言。您选择的字体可能会被用户兼容覆盖的字体,' S偏好或失败的网络请求,甚至文本本身也可能随时间而变化。

关于线宽,间距,和谐等的传统排版指南仍在网上申请;它只是我们'现在尝试在其中许多参数变得变量的上下文中应用它们。有些方法可以锁定其中一些参数 - 有一些方法 - 例如,可以阻止人们调整您类型的大小的SA HTML Snippet - 但在我看来违背媒体的承诺:它适用于任何人,任何地方。

我们所需要的是一种以相对于所有这些变量参数的方式制作印刷决策的方法,但仍然让我们有一些控制结果的可视表达式。让我们执行此操作的构造 - 根据具有任意粒度的一组输入生成不同输出 - 称为连续功能。

通过定义我们的文本块的单个属性 - 字体大小 - 作为连续功能来思考这一点。追踪追踪方法,我们可以使用像这样的CSS声明定义字体大小:

这是16px的绝对值。它与屏幕的大小,读者'偏好,以及任何其他外部参数。结果,它可能会在平板电脑上工作,但可能会在一个大型桌面显示器上感到有点丢失,并且在手机上令人不舒服。

但CSS为我们提供了以响应外部参数响应的方式定义字体大小的工具。例如,我们可以使用VW单元而不是像素来定义我们的字体大小:

一个大众等于读者宽度的百分比' s屏幕。所以在上面的CSS声明中,我们'重新说明:段落上的字体大小等于读者' s屏幕乘以0.01的宽度。 ' s连续功能。

它为每个屏幕尺寸产生不同的字体大小:在屏幕上' s 1000像素宽的屏幕,我们获得10个像素的字体大小,一个1500像素宽屏幕导致15像素的字体大小,因此在。绘制在坐标系上,它看起来像这样:

我认为这个简单的绘图代表了我们在网上排版的方法的大转变。我们'重新在坐标系上放置单点(通过定义单个,绝对值),而是包含无限数量的线 - 我们的印刷意图已成为维数。

这个想法' t只适用于字体大小,但我们的文本块的每个其他方面:测量,字母,线路和字距,缩进,重量,可变字体参数都可以定义为一个或一个或多个函数更多的输入参数。 Typographer'工作成为这些功能的成形:它们是多么陡峭?它们是否有最低值和最大值?他们的拐点在哪里?它们是光滑,锯齿状,对称,周期性的,随机吗?它们如何互相相关?通过以某种方式回答这些问题,可以为每个读者实现任何所需的视觉表达式。

在下一节中,我们' LL看看今天在CSS中已经可能的方式,而且可能是什么。

操纵我们功能的基本方法是定义其斜率。我们通过将输入变量(示例中的1VW)乘以不同的数字因子来执行此操作:

p {字体大小:0.5VW; / *这产生了浅曲线* /字体大小:1VW;字体大小:2VW;字体大小:5VW; / *这产生了陡峭的曲线* /}

更大的数因素产生陡峭的曲线。在该示例中,陡峭的曲线使得字体大小随着屏幕宽度而更加积极地改变。

它&#39常用于定义给定属性的最小值和最大值。我们可以通过使用CSS中的MIN()和MAX()函数来执行此操作:

p {/ * max()返回两个输入值的较大,因此这将永远不会下降16px * / font-size:max(16px,2vw); / * min()返回两个输入值的较小,因此这将永远不会超过32px * / font-size:min(32px,2vw); }

我们还可以使用CLAMP()函数同时设置最小和最大值:

P {/ *这将在14px和32px * / font-size之间产生值:钳夹(14px,1.5vw,32px); }

我倾向于通过眼睛设置这些价值,但是因为我们使用函数,我们拥有我们的整个工具包,如有必要。例如,我们可以使用线性代数来计算对应于特定屏幕大小2的最小值和最大值,或者线性回归从给定的一组绝对值导出曲线。 3.

到目前为止,我们' ve只研究了单个输入参数的函数 - 屏幕宽度。但是,它不是我们可以使用的唯一输入。例如,它可能是考虑到读者在其设备设置中设置的默认字体大小的好主意,除了其屏幕4的大小。

在这里,我们'重新说:字体大小等于屏幕的宽度乘以0.01,加上读者' s默认字体大小乘以0.85。如果我们将此功能绘制到坐标系上,其输出值不再形成一条线,而是一个平面;我们的印刷意图已获得第二个维度。

我们的功能可以绘制的输入参数数量没有限制。读者' S连接速度,无论它们都有黑色模式,他们的阅读距离,他们的首选语言,甚至在他们的位置的一天中的时间都可能是多维印刷系统的有用参数。

一个函数的输出也可以成为另一个函数的输入参数。这正是当我们将LINE高度的属性设置为无单元值时会发生什么:它将当前字体大小静静地作为参数。

p {font-size:calc(1vw + 0.85REM);线高度:1.3; / * =字体大小* 1.3 =(1VW + 0.85REM)* 1.3 * /}

到目前为止,我们' ve只研究了线性函数,或在坐标系上绘制时产生直线的函数。但没有概念原因,我们的排版应该限于这些。它完全可能是我们可能需要指数,正弦,步进,随机的或更具异国功能类型来实现特定的印刷表达式。

正如我写下这一点,在CSS中没有简单的方法来执行此操作。可以使用媒体查询拼接多个线性函数,因此近似更复杂的曲线,但代码很快就会变得笨重。 SASS包括一个强大的数学模块,可以用来抽出一些这些复杂性,但仍然存在障碍。 7。

Mike Riethmuller(谁开发了这两种解决方案)表明,在CSS中实现这些非线性函数的更好方法是使易于模块在动画上下文之外可用,它当前绑定8.这将是一个实际上优雅的解决方案:除了基本的线性函数之外,宽松模块还支持许多有用的功能类型(包括富有曲线,版本曲线已经熟悉),许多设计工具已经包括强大的接口,可视地在视觉上编辑这些曲线。

CSS工作组的相关问题仍为9,所以我们可能会赢得'我很快看到浏览器实现。

但是,无论精确实现如何,我认为任何给定输入变量的任何印刷属性(包括可变字体参数)可以是任何给定输入变量的函数(线性,指数,阶梯,Bezier,随机或其他)(用户偏好,屏幕尺寸,连接速度,一天的时间,显示语言或其他任何其他方式)是一个令人难以置信的强大的一个,值得探索作为美学以及技术主张。我已经在实践中使用了基本线性函数,在实践中使用了有前途的结果。

我特别感兴趣,如果它建立在连续排版的模型上,那么对视觉设计工具看起来像什么。 Tim Brown在灵活的排版(2018)中发出这一点,写作:"您的设计工具正在努力反对您。它被困在传统的绝对测量的心态。这正是人们在网络设计中非常擅长的一个原因争辩说设计师应该学会写代码。没有主流设计工具[...]完全适合今天排版的实践。" 10.

为了我的了解,这种情况有很大的变化 - 所以有很多探索的探索空间'通过更好的工具,连续排版可能会成为一种使类型在手机上的类型良好的方法:一种新的视觉表达式右侧的方法。 11.

我终于绕过了写一个设计工具的一个设计工具可能看起来像 - 基本上是上图的最终图的工作版本。在这里玩它,或阅读更多关于这里的内容。

Robert Brickurst(2016):排版风格,版本4.2,第8章。哈特利&分数。

实际上,用户的默认字体大小可能是我们关心的第一个参数。 我使用屏幕宽度的唯一原因在于它的效果更容易可视化。 据我所知,这项技术的最早描述是2015年由敏锐的排版来到精确控制的2015年文章 CSS工作组GitHub上CSS中的本机插值函数的问题。 网站建于3月14日,2021年在21:12推特媒介新闻稿RSS PGP讲座笔记Colophon©2016-2021