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

Re: [css-device-adapt] Decoupling zoom and width/height

From: Rune Lillesveen <rune@opera.com>
Date: Wed, 14 Nov 2012 10:27:58 +0100
To: www-style@w3.org
Message-ID: <op.wnra8wum8isf1p@id-c1005.oslo.osa>
On Fri, 02 Nov 2012 21:45:39 +0100, Florian Rivoal <florian@rivoal.net>  

> On Wed, 31 Oct 2012 08:58:14 +0100, Rune Lillesveen <rune@opera.com>  
> wrote:
>> The current constraining procedure has a coupling between zoom and auto  
>> widths/heights (6-9) and extending widths/heights to fill the viewport  
>> for a non-auto zoom (10-11).
>> [...]
>> I would like to decouple the zoom from width/height by letting auto  
>> width/height rely on non-auto width/height and initial viewport only.
>> [...]
>> Proposal, rule-wise:
>> Replace step 6 and 7 with:
>>    - If width and height are both ‘auto’, set width = initial-width
>> and drop step 10 and 11.
>> I have not worked out the details for the meta viewport to @viewport  
>> mapping in chapter 11 to keep the same meta viewport behavior, but it  
>> looks doable. I'll get back to that.
> This makes sense to me. Assuming a semantics preserving mapping with the
> meta viewport is possible (which I don't doubt), I think we should do  
> this,
> and that it is a good time to do it. The only two implementations I know
> of are Opera's, which is willing to change, and Microsoft, whose support
> is currently limited to parts not influenced by this change.

I needed to add a UA-internal value which I've called 'extend-to-zoom' to  
<viewport-length> to preserve the meta viewport mapping. I have  
implemented this, and my 128 viewport meta tests still pass.

I've ended up with this constraining procedure, which should be what I  
proposed (+ moved the zoom resolution steps to the beginning):

== Resolve min-zoom and max-zoom values ==

1. If min-zoom is not ‘auto’ and max-zoom is not ‘auto’, set max-zoom =  
MAX(min-zoom, max-zoom)

== Constrain zoom value to the [min-zoom, max-zoom] range ==

2. If zoom is not ‘auto’, set zoom = MAX(min-zoom, MIN(max-zoom, zoom))

== Resolve non-‘auto’ lengths to pixel lengths ==

3. Resolve relative and absolute lengths, percentages, and keywords  
(‘device-width’, ‘device-height’) to pixel values for the ‘min-width’,  
‘max-width’, ‘min-height’ and ‘max-height’ descriptors.

== Resolve initial width and height from min/max descriptors ==

4. If min-width or max-width is not ‘auto’, set width = MAX(min-width,  
MIN(max-width, initial-width))

5. If min-height or max-height is not ‘auto’, set height = MAX(min-height,  
MIN(max-height, initial-height))

== Resolve width value ==

6. If width and height are both ‘auto’, set width = initial-width

7. If width is ‘auto’, set width = height * (initial-width /  

== Resolve height value ==

8. If height is ‘auto’, set height = width * (initial-height /  


But there are quite a bit of changes to the meta viewport chapter:

Changed UA styles in chapter 11:

@viewport {
   width: extend-to-zoom 980px;
   min-zoom: 0.25;
   max-zoom: 5;

Description of the new ‘extend-to-zoom’ value:

11.3. ‘extend-to-zoom’

In order to be able to implement the functionality from META viewport  
where the viewport width or height is extended to fill the viewing area at  
a given zoom level, we introduce a UA internal value to the list of  
<viewport-length> values called ‘extend-to-zoom’ It will be used in width  
and height declarations in the translation outlined in the section below.

This new value is necessary in order to implement the mapping for two  
reasons. First, whether resolving the width/height needs to extend the  
pixel length to the visible width/height for a given zoom factor, depends  
on the current initial width/height. <meta name="viewport"  
content="width=400, initial-scale=1"> yields a width of 400px for an  
initial-width of 320px, and 640px for an initial width of 640px. This can  
not be expressed as normative min/max descriptors that would constrain  
correctly when the initial width changes like for an orientation change.

Secondly, the extended width/height also relies on cascading viewport  
properties from different sources, including ‘min-zoom’ and ‘max-zoom’  
 from the UA stylesheet. For instance, if the UA stylesheet has max-zoom:  
5, and the initial width is 320px, <meta name="viewport"  
content="width=10"> will resolve to 48px.

How to resolve ‘extend-to-zoom’ to pixel length or auto:
(Since this is non-normative, I've added the description to chapter 11,  
but when supported, it needs to be done as part of step 3 of the  
constraining procedure.)

11.3.1 Resolving ‘extend-to-zoom’

The ‘extend-to-zoom’ value is resolved to pixel or auto lengths as part of  
step 3 of the constraining procedure. Since this is a non-normative  
descriptor value, the resolution is described here. Note that  
max-descriptors need to be resolved to pixel lengths before  
min-descriptors when ‘extend-to-zoom’ is a valid value.

Let extend-zoom = MIN(zoom, max-zoom)

For non-‘auto’ extend-zoom, let:

  extend-width = initial-width / extend-zoom
  extend-height = initial-height / extend-zoom

For max-descriptors, ‘extend-to-zoom’ resolves as follows:

  - If extend-zoom is ‘auto’, set max-width = ‘auto’ or max-height = ‘auto’
  - If extend-zoom is non-‘auto’, set max-width = extend-width or  
max-height = extend-height.

For min-descriptors, ‘extend-to-zoom’ resolves as follows:

  - If extend-zoom is ‘auto’, set min-width = max-width or min-height =  
  - If extend-zoom is non-‘auto’, set min-width = MAX(extend-width,  
max-width) or min-height = MAX(extend-height, max-height).

Changes in translation of viewport meta properties to width/height  

The width and height viewport META properties are translated into ‘width’  
and ‘height’ descriptors, setting the ‘min’ value to ‘extend-to-zoom’ and  
the ‘max’ value to the pixel length from the viewport META property.

For a viewport META element that translates into an @viewport rule with a  
non-‘auto’ ‘zoom’ declaration and no ‘width’ declaration:

- If it adds a ‘height’ descriptor, add "width: auto;"
- Otherwise, add "width: extend-to-zoom;"

Rune Lillesveen
Received on Wednesday, 14 November 2012 09:28:37 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:21 UTC