Computing font-relative units in font-* properties

[danburzo]

A bit of an odd case resulting from my attempt at implementing @Lorp’s font-optical-sizing: <number> proposal with current CSS capabilities:

:root {
  --ratio: 1
}

* {
  font-optical-sizing: 'opsz' calc(tan(atan2(1em * var(--ratio), 1px))); 
}

A Chrome developer pointed in a bug report that, technically, the spec says:

"When used in the value of any font-* property on the element they refer to, the font-relative lengths resolve against the computed metrics of the parent element—​or against the computed metrics corresponding to the initial values of the font and line-height properties, if the element has no parent."

Currently, as far as I can tell, it’s only the font-size and font shorthand that accept <length>s, so would it make sense to narrow down on font-size and font instead of font-* in this paragraph? With CSS gaining the ability to produce <number>s from <length>s, it may be beneficial to allow 1em to refer to the current font size in most cases, including some font-* properties.

[danburzo]

I now understand that I’m very late to the party, and the change is in response to:

• [css-values] Consider requiring same relative <length> units in atan2() #8169

In any case, tan(atan2()) calculation doesn’t work as-is in current browsers. Instead, it requires an intermediary registered <length> property:

@property --1em {
	syntax: '<length>';
	initial-value: 0px;
	inherits: false;
}

:root {
	font-family: Newsreader;
	--opsz-ratio: 0.75;
}

* {
	font-variation-settings: 'opsz' 
		tan(atan2(var(--1em) * var(--opsz-ratio), 1px));
	--1em: 1em;
	padding-block: var(--1em);
}

As seen in the live demo, there is an interop issue:

• Firefox (stable/nightly macOS) and Safari (stable/TP macOS) use the current element’s font-size to compute 1em.
• In Chrome (stable/canary macOS), --1em = 16px if the font-variation-settings is present (and reflects on padding as well). If the font-variation-settings declaration is removed, --1em becomes the element’s font-size. [Chromium#392317688]

I am unsure what the spec-mandated behavior is here, I believe the tracking issues for that are these?

• Dependency Cycles via Relative Units with unit algebra css-houdini-drafts#1080
• [css-properties-values-api-1] Figure out what to do with font-relative lengths #9517