Csswg-drafts: [css-fonts-4] Better example needed for `font-size-adjust`

Created on 2 Jul 2018 · 7Comments · Source: w3c/csswg-drafts

The example for font-size-adjust is basically a hack explaining how to iteratively determine a vaue for a given font.

It would be better replaced with an example that shows the nice result when the property is correctly applied.

Closed Accepted as Obvious Bugfix css-fonts-4

Source

svgeesus

👍1

All 7 comments

That whole section is utterly confusing.

Figure 11: Text with and without the use of font-size-adjust

The use of font-size-adjust how???

p {
  font-family: Verdana, Futura, Times;
  font-size-adjust: ??? 
}

matthew-dean on 1 Dec 2018

A good example would have two rules, setting different elements in two different font faces, which have very different x-heights. It would then use font-size-adjust to make the x-heights more similar.

svgeesus on 2 Dec 2018

👍1

I made an example of this property at https://codepen.io/tigt/pen/MaeJEK

It’s not quite perfect for your needs, as it also uses SVG’s textLength, but I figured it might be useful as an organic “in the wild” example from a web dev.

tigt on 9 Nov 2019

👍1

Hmm, this is a bit hand-wavy, too:

This value applies to any font that is selected but in typical usage it should be based on the aspect value of the first font in the font-family list.

What does "any font that is selected" mean? The same wording was in CSS Fonts 3.

svgeesus on 4 Dec 2019

I put the old example from Fonts 3 into a codepen, calculated the x-height for Verdana and for Times New Roman, then used those values in the earlier example to make it clearer.

svgeesus on 4 Dec 2019

@matthew-dean the first example now reads

p {
    font-family: Verdana, Futura, Times;
}
p.adj {
    font-size-adjust: 0.545;
}

&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
&lt;p class="adj">Lorem ipsum dolor sit amet, ...&lt;/p>

svgeesus on 4 Dec 2019

From www.w3.org/TR/css-fonts-4/#font-size-adjust-prop ..."This is commonly referred to as the aspect value and is equal to the x-height of a font divided by the font size."

Besides never having heard this term, "aspect value", I believe strongly that the documentation is incorrect. The scale value to match x-heights across fonts is determined by creating a ratio of the x-ht (in units per em) to units per em, to reach the fallback scale value between two such values.

The "font size", as I understand the term is not used.