@ canonical/ 风格- 字典

Canonical设计系统基线网格对接. 这个软件包提供三个可互换的 CSS 引擎,将文本基线坐标为可配置的网格,加上打字符和桥接的元素规则 @canonical/design-tokens 到发动机的可变合同.

快速启动

导入默认引擎( 顶点单位) :

@import url("@canonical/styles-typography");

就是这样。 全体 h1– 说吧 –h6 财务报告和审定财务报表 p 元素将与基线网格一致。 默认引擎使用 CSS cap 单位,不需要 JavaScript 字体提取.

网格单位

--baseline-height 是一个网格步骤的大小,它是可选的。 以适合页面的长度宣布:

:root {
  --baseline-height: 0.5rem;  /* or 8px, or 0.25rem, or 6pt */
}

rem 是通常的选择,因为网格随即遵循读者自己的字体大小:设置较大基数的读者得到比例较大的网格,且该类型会留在上. px 用 CSS 像素来修正网格,所以无论读者的字体大小如何,它都保持不变,这就是当网格必须与其它测量方式相同的东西排成一行时你想要的——一个背景图像,或者另一个系统绘制的规则.

CSS像素是一个参考单位,而不是一个设备像素:在一个高密度显示上,一个CSS像素覆盖了几个物理像素,浏览器的缩放会改变多少. px 购买不随字体大小移动的网格; 它不购买与显示器自身像素的对齐 .

无处宣布,电网是 0.25rem,4个像素,以通常的根字体大小. 默认声明一次, 在 tokens.css在包裹内 ds.tokens 块 :

:where(:root) {
  --baseline-height: 0.25rem;
}

:where() 以零为重,所以任何真实的 财产申报都比它强 不论层内的顺序: @canonical/styles 宣布为 :root 内 spacing.css,申请可在任何内容上声明,而且任一内容都得到遵守. elements.css 然后三个引擎读取 var(--baseline-height) 赤出相去,相去相去相去二十六回,相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相相去相去相去相去相相去相去相去相去相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

一个没有默认的情况是一个引擎连接,没有 tokens.css。 。 。 . 没有任何引擎进口任何东西——这就是这个软件包被切成的形状,其成分生活在 index.css 因此,样式表 单独一个引擎 要么宣布 --baseline-height 进口或进口 ./tokens.css 在它旁边,没有其中的一动,动能就一无所获,引擎也跑不动。 包项由两者组成,并且不受影响,任何导入都一样 @canonical/styles。 。 。 .

如何切开此软件包

5个文件,它们之间的剪接是本节的要点: 这是一个规律,而不是一个归档 和相同的模式贯穿 @canonical/styles 还有香草适配器.

文件是一个概念, 它的名称是什么

不是为了它包含的东西 也绝不是为了它遗漏的东西.

五通各为入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入出出出出出出出出入入出出出出出出出出入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入出出出出出出入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入.

叶子不导入兄弟姐妹;条目构成

没有叶子导入此套件的另一文件 。 仅 index.css 是的,只有三个它编曲.

包外的一叶: tokens.css 停车 @canonical/design-tokens打印比例尺, 其名称shims。 这是一种依赖性,而不是兄弟关系,它是唯一一种——发动机和 elements.css 完全不导入.

这不是刻薄。 浏览器处理每个 @import 作为自己的样式表和去重复 没有, 因此两个路径所到达的文件会被获取, 解析和两次应用 。 第一个切口 软件包 elements.css 导入 tokens.css 发动机也输入了天平 已解析的样式表两次带有打印尺度——48 270个重复字节,四分之一 进入。 导入的兄弟关系没有让每个文件有一个路径通过构建而不是通过 注意, 外部的输入从 tokens.css 一个人.

对消费者的要求是小而值得的: 链接文件,你得到文件是什么, 你宣布它的内容. 引擎本身读取 --baseline-height 财务报告和审定财务报表 --font-size· ; 元素规则读取值 tokens.css 声明 基准单位可写入 rem 或者说 px默认为 0.25rem {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}当没人宣布的时候.

同一个词意味着每个包裹都一样

@canonical/styles 使用相同的三个名词。 内容 tokens.css 是数值 拿走这个包裹 tokens.css; 其编号 elements.css 是赤裸的元素 得到和带走这个 软件包 elements.css 和默认引擎;其 layout.css 是布局预设。 内容 index.css 是整个.

@canonical/styles-vanilla-adapter 船舶a elements.css 也: 构造的同一三个元素层 从同一个源文件, 发送到一个岛屿而不是页面.

三个背景,一个词汇。 阅读者已经理解 elements.css 曾经理解它 唯一需要问的就是它针对的哪一页区域.

为什么老名字去了

mapper.css 是术语,一个内部词 用于命名符号的文件, 它告诉读者 并隐瞒了文件在做两个工作的事实.

样式包 core.css 更糟糕的是,因为它命名了包容而不是概念: 除了元素层之外的一切 用减法定义的名称会告诉你文件不是什么. 你不首先知道规则是否属于它 整个列表在减去 从, 当列表更改名称时, 静静地停止真实. tokens.css, (中文(简体) ), elements.css 财务报告和审定财务报表 layout.css 每个名字都有一条规则.

如何添加文件

决定它属于哪个概念. 这个决定解决了剩下的问题:

• 名称 - 概念的名词;
• 其层 —— 说 ds.tokens 对于数值, ds.typography 用于元素规则和发动机;
• 哪个条目导入它 ——这个概念的入门,而不是其他入门.

如果它属于没有概念,那就是发现:要么缺少概念,要么文件是两个 文档。 这个包裹 exports 地图是消费者可以联系到什么的合同.

叠加层

CSS级联的两个事实塑造了这个包.

无论哪一方的挑选者如何,任何级联层的规则都比任何层的规则高。 而在一层内,确定了两个相同特殊性的规则,即一个装载秒.

这个套件曾经将它的每一条规则都完全不加分层地运出,所以第一个事实适用于所有规则:一个分层上写的应用程序都无法打败它们. 第二个事实对元素选择者来说是最难的, body, (中文(简体) ), h1– 说吧 –h6 财务报告和审定财务报表 p,它处于特殊位置 (0,0,1): 应用程序本身 p 规则与这个完全捆绑, 和捆绑者的产出订单 决定胜者, 一次一个财产。 其余的档案比那更具体—— .p, (中文(简体) ), .code 财务报告和审定财务报表 .editorial 是班级, :root 是一个伪阶级,和 .editorial h1 这是一种阶级和共同的要素——因此,这些是靠具体性而不是靠运气而赢得的,这是它自己的问题,因为申请意在推翻它们.

分层,设计系统会输给一个应用程序的未分层的CSS,故意和可以预测,还故意地将下层打倒.

ds.typography 坐在这里 ds.reset 及以下各项 ds.modifiers 顺序 @canonical/styles 声明,所以打印缩放 ds.modifiers 可以对引擎生产的东西进行再调整,一个组件样式表——更高仍然——总是它自己文本上的最终词.

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}这叫Shims的名声 ds.tokens 没有 ds.typography 因为它们是自定义的属性,而不是其他的:自定义的属性在它被宣告的地方,只有在规则被读取的情况下,它才无所作为,所以它们属于其他原始价值之外.

这些规则按名称选择元素—— body, (中文(简体) ), h1, (中文(简体) ), p 因此,它们适用于整个文件。 这就是设计系统打字的目的.

此软件包没有自定义的图层顺序: 它是由 @canonical/styles 在该软件包的订单语句之后,这是第一个样式表的第一个规则,并命名了这个软件包所写的所有三层. 与实例一样,层层是单独链接的,是它们最初出现的地方所创建的,对于一个包来说,这个包的定义很明确,解决不了这个包需要解决的任何问题——任何定制属性都不会在涉及的多层中声明.

本节为本套件在安排中所占份额的参考. 整个过程背后的推理——浏览器是如何决定的,为什么一个无层规则会比每个分层规则都要好,运行第二个CSS框架的一页的封装在哪里活下来——是: 级联合同。 。 。 .

如何运作

浏览器添加隐形 半牵头 上行和下行文本。 准确的量取决于字体的内部度量,计算 font-size,以及 line-height。这使得不同文本元素之间的垂直对齐无法预测.

基线引擎通过计算第一个基线在行框内的位置,然后应用一个 padding-top 编号 : margin-bottom 成对地向元素倾斜 所以它的基线完全在网格线上 互补性 margin-bottom 确保该元素的总外高保持一个多 --baseline-height。 。 。 .

 line-height (computed)
 +----------------------------------------------+
 |  half-leading (top)                           |
 |  +----------------------------------------+  |
 |  | ascender area                           |  |
 |  | - - - - cap line - - - - - - - - - - - |  |
 |  | glyph body                              |  |
 |  | - - - - baseline - - - - - - - - - - - |  |  ← snap this to the grid
 |  | descender area                          |  |
 |  +----------------------------------------+  |
 |  half-leading (bottom)                        |
 +----------------------------------------------+

这个 mod() CSS功能进行举重:

--top-nudge: calc(
  var(--baseline-height) -
  mod(var(--baseline-position), var(--baseline-height))
);

多线块保持网格,因为 line-height 总是设置为多个 --baseline-height. 推克只补偿了第一行的半铅相抵.

发动机

三台引擎执行相同的网格-snap模式,有不同的取舍. 直接导入符合您限制的, 或者使用 index.css 用于再导出默认值(上限单位).

basin-cap.css – Cap 单位(默认)

@import url("@canonical/styles-typography/src/baseline-cap.css");

使用浏览器本地化 cap CSS 单元,用于在渲染时解析字体测量标准 。 没有 JavaScript 提取步骤,没有每个font 变量. 变化 font-family 在元素上自动更新 1cap 值 .

基线位置公式为: (line-height + 1cap) / 2 ——浏览器解决 1cap 从字体的 OpenType 表格中以本地形式列出.

mod() 将Chrome和Firefox捆绑起来 cap 单位束缚了Safari.

基线测量.css——提取的度量衡

@import url("@canonical/styles-typography/src/baseline-metrics.css");

拥有最广泛的浏览器支持的原始引擎. 需要使用 extract-font-data CLI: 爱丽丝

:root {
  --ascender: 1068;
  --descender: -292;
  --units-per-em: 1000;
}

基线位置是根据下列指标计算的: ((line-height - line-height-scale) / 2) + ascender-scale更多的动词,但到处工作 mod() 被支持.

基线-trim.css-文本框-trim混合

@import url("@canonical/styles-typography/src/baseline-trim.css");

最现代的方法。 用途 text-box: trim-both cap alphabetic 完全去除半铅,然后用 mod()- 恢复网格对齐的基于比值。 收紧内容框(用于按钮、卡片、光学中心)的结果.

text-box-trim 绑起每个柱子 这个 cap 单位之所以列在列表中,是因为软体测量了盖高, mod(calc(-1 * 1cap), …),所以这个发动机需要它 与盖发动机一样多.

它不会回到电网. 平底线下被跳出,元素得到它的半向回向,但是活下来的活动被计算成一个被修剪的盒子,从不读出行高,所以文字从网格上掉入了一个单元的一小部分——测量出,一个16px srif上的6.516px在24px线上,不管这个单元是什么. 这些浏览器使用盖状引擎.

消费者合同

每个引擎每个元素读取同一套CSS自定义属性:

这个 计量引擎 额外要求 :root数字 :

键和元素

tokens.css 财务报告和审定财务报表 elements.css 连接语义印刷符号 @canonical/design-tokens 到发动机的可变合同。 两者均由下列来源进口: index.css,包的构成的切入点.

设计符号提供变量如下:

--typography-heading-1-font-size
--typography-heading-1-line-height    (unitless ratio)
--typography-heading-1-font-weight
--typography-heading-1-letter-spacing
--typography-heading-1-font-family

elements.css 将这些变量转换为每个元素的引擎变量(h1– 说吧 –h6, (中文(简体) ), p, (中文(简体) ), .p, (中文(简体) ), .code) (中文(简体) ). 它设置 --line-height 作为长度,绝不是乘数:它更喜欢设计符所携带的精确尺寸,倒回到被断到网格上的阶梯比例.

--line-height: var(
  --typography-heading-1-line-height-dimension,
  round(
    up,
    calc(
      var(--typography-heading-1-font-size) *
      var(--typography-heading-1-line-height)
    ),
    var(--baseline-height, 0.25rem)
  )
);

--line-height-multiplier 是引擎合同的另一半 对于直接驱动引擎的消费者来说 而不是通过这张地图 --line-height 如果它被设定,和 calc(--baseline-height * --line-height-multiplier) 如果不是的话 实例采用乘数; elements.css 使用长度.

软件包结构

src/
  index.css              ← the package composed (tokens, elements, cap engine)
  tokens.css             ← the typographic scale and the naming shims
  elements.css           ← the rules that read them
  baseline-cap.css       ← cap-unit engine
  baseline-metrics.css   ← extracted-metrics engine
  baseline-trim.css      ← text-box-trim + cap hybrid
  scripts/
    extractFontData.ts   ← CLI for extracting font metrics
example/
  index.html             ← interactive demo with engine switcher
  serve.ts               ← dev server with live-reload
  scripts/               ← sidebar, font picker, content presets
  fonts/                 ← bundled .woff2 files for the demo
  styles/                ← demo layout and debug styles

提取字体计量

这个 extract-font-data CLI 从字体文件中读取 OpenType 度量衡 。 只有在使用 基线测量 发动机.

bun run extract-font-data ./path/to/font.ttf

输出 :

Add the following variables to your CSS and follow the instructions in the README:
:root {
  --ascender: 1068;
  --descender: -292;
  --units-per-em: 1000;
}

过 --all ,以查看包括计算出某一行高的克:

bun run extract-font-data ./path/to/font.ttf 1.5 --all

洞穴

提取器使用 opentype.js 以解析字体文件。 它的工作与大多数 .ttf, (中文(简体) ), .otf,以及 .woff 文件,但不包含 TrueType 或 CFF 大纲的字体可能失败 :

error: Font doesn't contain TrueType or CFF outlines.

发展

以活式重载启动交互示例 :

bun run dev

这为下列机构提供了范例: http://localhost:3333/example/ 页面存档备份,存于互联网档案馆边栏允许您:

• 切换引擎 ——实时切换出盖子单元,度量衡和文本串
• 切换字体 从捆绑的字体中取出自动应用的衡量标准
• 双塔 调整每个标题级别和段落的字体大小、行高乘数和后空格
• 调整基准 ——改变基线网格高度并查看对齐更新

基线网格作为红色 1px 线上覆盖而提供,因此对齐错误立即可见.

浏览器支持

所有引擎都需要 mod() 用于网格平面计算:

按引擎来读取表格,而不是一行一行——在它使用的特性中,一款引擎的地板是其列中最高的数字:

该桌上有一个警告,它是一个真实的警告.

以下 text-box-trim,文本刻录引擎不持有网格. 修剪被跳过,元素得到 它的半领导回, 和活下来的微软- mod(calc(-1 * 1cap), unit) ——按剪接箱计算,从不读取行高,因此无法补偿. 在Chromium中用一款16px serif在一款24px线上进行测量:用修剪法,第一个基线坐落在一款4px格上为12px,一款8px格上为16px,一款12px格上为12px,每款一整个单元;而修剪法忽略了每个单元的6.516px,即1.63个单元,0.81个单元和0.54个单元. 元素外高会保留一整个单位,所以块块仍然堆放在网格上,但其中的文字并不坐放于上. 地板下方的浏览器应该使用盖状引擎,盖状引擎由未调整的行框来计算出.

mod() 这是硬地板。 在它下面没有引擎计算出一个微软 文本会回到它自然的领先位置.