W3C home > Mailing lists > Public > www-style@w3.org > June 2008

Re: CSS WG weekly meeting minutes 2008-06-04

From: Alan Gresley <alan@css-class.com>
Date: Fri, 06 Jun 2008 13:17:04 +1000
Message-ID: <4848AC30.7040700@css-class.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
CC: "Gao, Ming (ICS Industry Alliance, San Diego)" <ming.gao@hp.com>, "www-style@w3.org" <www-style@w3.org>

Andrew Fedoniouk wrote:
> 
> Gao, Ming (ICS Industry Alliance, San Diego) wrote:
>> Meeting: Cascading Style Sheets (CSS) Working Group Weekly Teleconference
>>
>> Date: June 4, 2008
>> Time: 09:06am to 10:00am PDT
> ....
> 
>> issue #4
>> --------
>> daniel: next, positioning from corners
>> fantasai: the current approach might be a bit awkward.
>> .... an alternative approach would require a different syntax.
>>
>> <fantasai> background-postion: 10px 20px;
>> fantasai: designer tend to prefer to do this positioning from bottom 
>> right.
>> <fantasai> background-position: bottom 10px right 20px;
>> fantasai: my proposal is to use keyword and distance
>> .... from the edge of the element
>>
>> daniel/fantasai: would like to hear what authors want to say
>> jason: never really have a case to do it from left or right;
>> .... could be because I can't do it in the past
>>
>> <fantasai> fantasai: question is whether to create a syntax for this, 
>> or to wait
>> for calc()
>> fantasai: people really want to do from bottom right
>> jason: agree; what is the syntax to write it from right to left?
>>
>> fantasai: I am posting some notes to show the syntax
>> <fantasai> background-position: bottom 10px right 20px;
>> <fantasai> background-position: start 10px center;
>>
>> jason: just looking at these syntax, it is hard to understand (what 
>> they do, from  authors' point of view);
>> .... maybe easy for computer to understand
>>
>> peter: Q: do you mean 10 px from righ edge of the box ?
>>
>> fantasaI: could be right edge from the right edge(?)
>>   
> .....
> 
> I propose to add following attributes:
> 
> background-position-left
> background-position-top
> background-position-right
> background-position-bottom
> 
> so existing 'background-position' will be just a shortcut form of 
> defining 'background-position-left' and 'background-position-top'
> 
> If both background-position-left and background-position-right are 
> defined for background-repeat:no-repeat images background-position-right 
> wins.
> Same rule for background-position-top/bottom.
> 
> For background-repeat:stretch (do not remember exact value) images 
> background-position-left/top/right/bottom define correspondent offsets
> from padding edge.
> 
> -- 
> Andrew Fedoniouk.
> 
> http://terrainformatica.com


Thinking of possible use cases. I don't see how you can introduce new 
'background-position' properties and also allow for progressive 
enhancement. In a comma separated value string for the 'background' 
property the new values for offsetting against the box edges, 'right' 
and 'bottom' must be overruled.

div {
width: 100px;
height: 100px;
background: url(a.jpg) 0 0 no-repeat,  url(b.jpg) 50px 0 no-repeat, 
url(c.jpg) 50px 50px no-repeat,  url(d.jpg) 0 50px no-repeat;

background: url(topLeft.jpg) 0 0 no-repeat,  url(topRight.jpg) right 0 
top 0 no-repeat, url(bottomRight.jpg) right 0 bottom 0, 
url(bottomLeft.jpg) left 0 bottom 0 no-repeat;
}


And the possible incorrect positioning values given by an author for the 
later 'background' declaration.

background: url(topLeft.jpg) 0 0 no-repeat,  url(topRight.jpg) right 0 0 
no-repeat, url(bottomRight.jpg) right 0 bottom 0,  url(bottomLeft.jpg) 0 
bottom 0 no-repeat;


by not declaring the top offset for the topRight.jpg and the left offset 
for the bottomLeft.jpg.


By adding the below properties which I do support:

 > background-position-left
 > background-position-top
 > background-position-right
 > background-position-bottom


What is the shortcut proposed for the above properties? It would make 
sense to have it simplified in the 'background-position' property such 
as with my proposal [1] for background positioning (ltr direction).

background-position: 0 0 0 0;

and positioning from the bottom right corner would be.

background-position: auto auto 0 0;


and a missing value is disallowed.

background-position: 0 0 0; /* Invalid value */



[1] http://lists.w3.org/Archives/Public/www-style/2008May/0250.html


Alan
Received on Friday, 6 June 2008 03:18:09 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:07 GMT