[whatwg] @font-face rules in <style scoped>

Fri Nov 18 14:40:39 PST 2011

On Fri, 18 Nov 2011, Roland Steiner wrote:
> 
> When thinking about implementation details of @font-face rules in <style 
> scoped>, I started to wonder whether a (nested) scoped style-sheet 
> should be able to create a new - or even override an existing - a 
> font-family declared in an outside scope. To give examples:
> 
> Defining a font-family locally that is selected by a rule in the global 
> scope, but doesn't exist there:
> 
>     <style>
>         .foo {
>             font-face: foo;
>         }
>     </style>
> 
>     <div style="font-family: Arial">
>         <style scoped>
>             @font-face {
>                 font-family: foo;
>                 src: local(Times);
>             }
>         </style>
>         <span> Arial or Times? </span>
>     </div>
> 
> Overriding a font-family of an outer scope:
> 
>     <div style="font-family: Arial">
>         <style scoped>
>             @font-face {
>                 font-family: foo;
>                 src: local(Courier);
>             }
>             .foo {
>                 font-face: foo;
>             }
>         </style>
>         <div>
>             <style scoped>
>                 @font-face {
>                     font-family: foo;
>                     src: local(Times);
>                 }
>             </style>
>             <span class="foo"> Arial, Courier or Times? </span>
>         </div>
>     </div>
> 
> Technically I believe it should be 'Times' in both cases, given the 
> overriding rule of @font-face. However, I wonder if this isn't going 
> against the intent of <style scoped> a bit (?).

I think your interpretation is correct -- it should be Times -- because in 
the context of the element, 'foo' is a font defined as Times.

However, this could lead to an odd case with inheritance:

     <head>
         <style>
             @font-face {
                 font-family: foo;
                 src: local(Courier);
             }
             body {
                 font-face: foo;
             }
         </style>
     <body>
         <span> Courier or Times? </span>
         <div>
             <style scoped>
                 @font-face {
                     font-family: foo;
                     src: local(Times);
                 }
             </style>
             <span> Courier or Times? </span>
         </div>

I think the same interpretation would lead to the font changing half-way 
down the page, despite the 'font-family' property being simply inherited 
all the way down, and despite there only being one style declaration.

I think we could argue either as being better than the other. There's no 
security problem here (the scoped style can only hurt its own content) and 
in practice fonts are typically given pretty unique names, so clashes are 
unlikely anyway.

I'm happy to add clarifying text or an example to the spec if that would 
help.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'