W3C home > Mailing lists > Public > www-style@w3.org > February 2012

Re: [css3-page][css3-mediaqueries] Page size conflicts

From: Simon Sapin <simon.sapin@kozea.fr>
Date: Mon, 20 Feb 2012 22:20:56 +0100
Message-ID: <4F42B938.6050306@kozea.fr>
To: Brad Kemper <brad.kemper@gmail.com>
CC: "www-style@w3.org" <www-style@w3.org>
Le 20/02/2012 20:10, Brad Kemper a écrit :
>> Nice. What about this one?
>>
>>    @page :left {
>>      size: 4in 6in;
>>    }
>>    @page :right {
>>      size: 6in 4in;
>>    }
>>    @media (min-width: 5in) {
>>      div { background: blue; }
>>    }
>>    @media (max-width: 5in) {
>>      div { background: red; }
>>    }
>>
>>
>> Assuming there is a div with a page break, what color is its background? (And what is the computed value of background-color?)
> Following the same logic as above, The left page is 4in wide, and the right page is 6in wide. So on the left the div is red, and on the right the div is blue.
>
> Kind of messes with box-decoration-break though, if you had two different background images instead of just background-color.

Hi,

***Note***: This whole message is based on the idea that results of 
media queries could vary across pages (if pages have different sizes). 
However, as Øyvind pointed out, media query expression never depend of 
the result of applying a stylesheet:

http://lists.w3.org/Archives/Public/www-style/2012Feb/0976.html


Initially I didn’t see how this could make sense but I see after reading 
on regions. The cascade gives a set of computed styles for an element. 
That element may be fragmented into multiple boxes for lines, pages or 
regions. Under some conditions, some of these fragments can get 
different styles. As you say, the @region rule is such a case. But now 
that I think of it, this is already the case with ::first-line and 
::first-letter.

But note that both Regions and Selectors (for ::first-line and 
::first-letter) defined a limited set of properties that can be used in 
such contexts. For example, it would not make sense for fragments of the 
same element to have different values for the 'display' property.

While it would be technically possible to have the same kind of behavior 
for page breaks (different style across pages like above) I think it is 
a bad idea. For example:

1. @media all and (color) { #foo { float: left }}
2. @media all and (min-width: 15cm) { #foo { float: left }}

The result of the media query 1 does not vary across pages, but 2 does. 
I think that 'float' should not change across pages, so it would not be 
allowed in 2. Should we forbid it in 1 too or keep the rules (seemingly) 
inconsistent?

>> And even without page breaks, we only know which page a box is on when doing layout, but the cascade is done much earlier than that.
> Is that a problem if done as I describe? Seems no worse than with regions, where you wouldn't know what region an item is in until you do layout.

Indeed. I haven’t implemented any of regions, first-line of first-letter 
in WeasyPrint yet so I still have the cascade done before the layout 
starts. Things are more complex with regions, but still doable.

>> I think the only sensible thing to allow in such media query rules is @page, except for the 'size' property.
> Sorry, but my brain doesn't quite parse that sentence. Can you restate it?

***Again***, any of this message does not apply. (See the start of this 
message.) Media queries of the page size use the UA’s default page size, 
not any stylesheet result.

Sorry I was not clear. Let me rephrase with examples:

If we *want* it to apply, Media Queries would need to be changed.

Examples:

1. @media all and (min-width: 15cm) { @page { margin: 3cm }}
2. @media all and (min-width: 15cm) { @page { size: 21cm 29.7cm }}
3. @media all and (min-width: 15cm) { #foo { color: red }}
4. @media all and (min-width: 15cm) { #foo { float: left }}
5. @media all and (color) { #foo { float: left }}
6. @media all and (color) { @page { size: A4 }}

* 1 is fine and could be allowed.
* It was agreed earlier in this thread that 2 has a conflict and should 
just be forbidden/ignored.
* As explained above, 3 could work but I think it is a bad idea. It 
should be forbidden to be consistent with:
* 4 should be forbidden as (I think) it does not make sense for an 
element to be only partly floating. If not 'float', some properties will 
end up forbidden like in regions.
* 5 and 6 does not vary across pages, no problem

To sum up, I think that anything in a media query should only be allowed 
if either:

* It is in the @page context (or nested in @page, like margin boxes), 
but is not the 'size' property (as in 1)
* The media query expression does use the page size and thus can not 
vary across pages (as in 5 and 6)

Regards,

-- 
Simon Sapin
Received on Monday, 20 February 2012 21:21:27 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:50 GMT