Express legacy `<font>` rendering with CSS

[Crissov]

What is the issue with the HTML Standard?

In the Rendering chapter, <font> and its attributes are mapped to CSS by prose. This could be accompanied by actual CSS rules involving attr() which would almost achieve the same.

font[color] {
  color: attr(color type(<color>));
}
font[face] {
  font-family: attr(face type(<string>));
}
font[size="1"], 
font[size="0"], 
font[size="-2"], 
/* font[size<-2] */ {
  font-size: x-small;
}
font[size="2"], 
font[size="-1"] {
  font-size: small;
}
font[size="3"], 
font[size="-0"], 
font[size="+0"] {
  font-size: medium;
}
font[size="4"], 
font[size="+1"] {
  font-size: large;
}
font[size="5"], 
font[size="+2"] {
  font-size: x-large;
}
font[size="6"], 
font[size="+3"] {
  font-size: xx-large;
}
font[size="7"], 
/* font[size>7], */
font[size="+4"], 
font[size="+5"], 
font[size="+6"], 
font[size="+7"] {
  font-size: xxx-large;
}

(The attribute value numeric comparisons with > and < are not yet available in selectors but would be within style queries inside if().)

[annevk]

I don't think that ends up doing the same thing as the parser. For instance, what about whitespace?

[Crissov]

Unfortunately, you’re correct: attribute selectors do not trim leading and trailing whitespace from the value, unless you use ~= instead, which allows other false positives. It should be possible with if() and attr() inside the style query where you can use type().