Re: Measures depending on used font (was: A CSS equivalent of HTML's DOCTYPE trigger)

The fact that @font-face is used has no bearing at all on the relevance of this. The problem is that you can never be sure the font you want is the font in use because of the myriad of things that can stop any @font-face from being delivered to the browser. CDN failures, JS failures, proxy filters, mobile network's filtering, No-Script installed - the list goes on.

The syntax is up for debate and is part of what I'd like feedback on because it's likely to be quite complicated to work out. I do like your syntax idea - perhapd this is one area where we can use the 'stacking' idea that's already been mentioned: by defining rules that append current properties onto a list instead of replacing them. e.g.,

/* standard fallback */
h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica;
  font-size: 2em; line-height: 1.5em; }

/* add-to-stack behaviour */
h1, h2, h3, h4, h5, h6 {
  font-family-prepend: MyFancyFont;
  font-size-prepend: 2em; line-height-prepend: 1.5em; }

The problem there is we could do with conditional logic in CSS to get better control. Font substitution metrics are not simple direct over-rides. If CSS syntax wasn't an issue I'd want to write it as:

/* standard CSS*/
h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica;
  font-size: 2em; line-height: 1.5em; }

/* conditional CSS */
if(MyFancyFont) {
  h1, h2, h3, h4, h5, h6 {
    font-family: MyFancyFont;
    font-size: 2em; line-height: 1.5em; }
}

My kingdom to convince people that CSS is in need of conditionals. It's not like that hasn't been requested for years.



On 15 Jan 2012, at 12:29, Christoph Päper wrote:

> Matthew Wilcox (2012-01-10 09:28):
> 
>> The issue in there was that type measures (the margin, padding etc we apply to elements that have text in them) should be adjusted depending on the actual typeface in use. We currently set them as concrete values based on the preferred font, but if that font isn't available then the next in the font stack is unlikely to be suitably close and therefor the measures need adjusting. CSS doesn't have that type of logic or workflow.
> 
> Honestly, I don’t think it would be worth it. People who care about typographic details like this will usually provide the preferred font via ‘@font-face’ and set ‘em’-based measures accordingly. With that designers can almost almost pretend that webpages were static media. The fallback fonts, properly adjusted by ‘font-size-adjust’ and carefully chosen to have similar metrics, are just that, a fallback, which doesn’t need the highest level of fine-tuning.
> 
> Anyhow, what would you imagine the syntax to be like?
> 
>  foo {
>    font-family: Helvetica, Arial, sans-serif;
>    bar: 1em;/* fallback */
>    bar: 1em @ Helvetica, 1.1em @ Arial;
>  }
>  baz {
>    quuz: 2em;
>    quuz: 2em @ Helvetica, 2.1em @ Arial;
>  }
> 
>  foo {
>    font-family: Helvetica, Arial, sans-serif;
>    bar: 1em;/* fallback */
>    bar: 1em !for(Helvetica);
>    bar: 1.1em !for(Arial);
>  }
>

Received on Sunday, 15 January 2012 17:32:36 UTC