- From: Aleksey V Lazar <lazar@mnsu.edu>
- Date: Wed, 21 Nov 2007 13:17:45 -0600
- To: Bert Bos <bert@w3.org>
- CC: "www-style@w3.org" <www-style@w3.org>
- Message-ID: <47448459.3020703@mnsu.edu>
Bert Bos wrote:
> On Wednesday 21 November 2007 08:50, Alan Gresley wrote:
>
>> fantasai wrote:
>>
>>>> If four percentage or length values are given, the vertical top
>>>> position comes first, the horizontal right position comes second,
>>>> the vertical bottom position comes third, and the horizontal
>>>> right position comes fourth. The only way I can see that this
>>>> could work is having the non used position values set to auto as
>>>> below.
>>>>
>>>> background-position:10px 10px /* top left */
>>>> or
>>>> background-position:10px auto auto 10px /* top left */
>>>> background-position:10px 10px auto auto /* top right */
>>>> background-position:auto 10px 10px auto /* bottom right */
>>>> background-position:auto auto 10px 10px /* bottom left */
>>>>
>>> That's one option. Another would be to specify which corner we're
>>> positioning relative to. E.g.
>>>
>>> background-position: bottom right 10px 10px;
>>>
>>> That has the advantage that we can position relative to the "start"
>>> edge, i.e. the left side in left-to-right text and the right side
>>> in right-to-left text.
>>>
>>> background-position: top start 10px 10px;
>>>
>>> ~fantasai
>>>
>> I am intrigue by your last suggestion. As I understand it this is
>> mirroring the background image not just aligning it. Would this be
>> correct?
>>
>
> No, it's just for positioning. Image manipulation has been discussed in
> the past, but the conclusion so far has always been that that should
> not be in CSS (apart from scaling). The argument is that it would
> complicate CSS too much for the average user and that it is easier to
> understand (and more efficient for the Web) to rotate or mirror an
> image *before* putting it on the Web. Scaling is the exception, because
> you often need to scale to em units or percentages, and that can only
> be done in the browser.
>
I'm relatively new to this list, so it is likely I missed the
conversation on mirroring BG images in CSS.
As a long-term user of CSS, I think rotating BG images would be a great
feature to have in CSS. I'm never sure what "the average user" means in
any context, but in this particular case I guess I could consider myself
to be one. And I would much rather learn some CSS syntax for how to
flip the same BG image across /x/ and /y/ and not do this by hand in a
image editor. How exactly it would be more efficient to scale images by
hand instead of letting the computer do it is hard to see for me.
Having one background image that can be rotated and reused four times
(let's say in four corners of an element) would cut down on HTTP
requests. So I could argue loading one image instead of four would be
more efficient for the Web. Scaling is less important until SVG can be
used through CSS.
> But even the positioning relative to other edges than top and left is no
> longer needed since we decided to add calc() to CSS. That wasn't an
> easy decision, because calc() is not easy to work with (and a real
> challenge for a WYSIWYG editor), but its power is such that it removed
> the need for several other things, such as extensions to
> the 'background-position' property.
>
>
>> Re: http://www.w3.org/TR/2005/WD-css3-background-20050216/
>>
>> When I made my initial proposal I had in the back of my mind the
>> situation when all four background positions top, right, bottom and
>> left could have use values other than auto. The result would be to
>> stretch or shrink a background image along it's horizontal and/or
>> vertical axis depending on the intrinsic dimensions of the image. In
>> the current draft this is what background-size does but in the
>> reverse way. My alternative acting somewhat like a block element and
>> background-size acting like a inline element.
>>
>> So I will state my thoughts as an alternative and give comparisons of
>> how it relates to the current draft specs for background-position and
>> background-size with the use examples from the draft.
>>
>
> I inserted some comments below, but on the whole I think it is an
> interesting idea. It avoids the need for one new property at the cost
> of a more complex syntax for another. The more complex syntax isn't
> very difficult to explain ("you either specify the position of the top
> left corner or both the top left and the bottom right"). But the
> question is what is easier and more common in practice, specifying two
> corners or one corner plus a size?
>
> One argument for a separate size property is that the position is not
> relevant at all for most cases of repeated background and especially of
> repeated backgrounds when the size is rounded down to fit.
>
> Another argument is that the question "how do I set the size of the
> background image?" is so common that providing the
> obvious 'background-size' property can save people a lot of time.
>
> One argument for your model is that the case of an image at a certain
> distance from all sides requires no use of calc().
>
> Another is that it corresponds roughly to how margins and absolute
> positioning work.
>
>
>> 1) Here are some examples. The first example stretches the background
>> image independently in both directions to completely cover the
>> content area:
>>
>> div {
>> background-image: url(plasma.png);
>> background-size: 100%;
>> background-origin: content}
>>
>> could be
>>
>> div {
>> background-image: url(plasma.png);
>> background-position: 0 0 0 0;
>> background-origin: content}
>>
>> 2) The second example stretches the image so that exactly two copies
>> fit horizontally. The aspect ratio is preserved:
>>
>> p {
>> background-image: url(tubes.png);
>> background-size: 50% auto;
>> background-origin: border}
>>
>> could be
>>
>> p {
>> background-image: url(tubes.png);
>> background-position: auto 50% auto 0;
>> background-origin: border}
>>
>> 3) This example forces the background image to be 15 by 15 pixels:
>>
>> para {
>> background-size: 15px;
>> background-image: url(tile.png)}
>>
>> No example with background-position, only possible with a fixed size
>> element.
>>
>
> How about 'background-position: 0 0 calc(100%-15px) calc(100%-15px)'?
> Not very intuitive, but it does make a background image of 15 x 15 px
> using your model :-)
>
>
>> 4) This example uses the image's intrinsic size. Note that this is
>> the only possible behavior in CSS level 1 and 2.
>>
>> body {
>> background-size: auto;
>> background-image: url(flower.png)}
>>
>> could be
>>
>> body {
>> background-position: auto auto auto auto;
>> background-image: url(flower.png)}
>>
>
> This is equivalent to the default, so you would probably not specify
> anything at all. Or, if you do want an explicit rule, the actual
> default rule would do: 'background-position: 0% 0%' (with implied 'auto
> auto').
>
>
>> 5) The following example rounds the height of the image to 25%, down
>> from the specified value of 30%. At 30%, three images would fit
>> entirely and a fourth only partially. After rounding, four images
>> fit. The width of the image is 20% of the background area width and
>> is not rounded.
>>
>> p {
>> background-image: url(chain.png);
>> background-repeat: repeat-y;
>> background-size: 20% 30% round; }
>>
>
> The 'round' keyword has become an alternative to 'repeat' in the latest
> editor's draft, so the example now reads:
>
> p {
> background-image: url(chain.png);
> background-repeat: no-repeat round;
> background-size: 20% 30% }
>
>
>> Note: The above example is the only place in all of the draft on
>> backgound-size that suggest scaling when rounding. The description on
>> backgound-size above the examples suggest that rounding doesn't alter
>> the intrinsic dimensions of the image, but instead not allowing it to
>> repeat if a value other than whole number of images is used.
>>
>> could be (not sure on the rounding)
>>
>> p {
>> background-image: url(chain.png);
>> background-repeat: repeat-y round;
>> background-position: 0 40% 30% 40%; }
>>
>
> If a background is repeated while rounding, the position is not used.
> Rounding implies that the image is aligned to the edges. In your
> notation, the above example could be written as:
>
> p {
> background-image: url(chain.png);
> background-repeat: no-repeat round;
> background-position: 0 0 auto 70% }
>
>
>> Some of my examples.
>>
>> a) If I want and background image to be rendered 10% from each edge
>> of an element or the background-origin and have the horizontal and
>> vertical axis of the image stretched or shrunken depending on the
>> intrinsic width, height and ratio of the image, I propose that this
>> can be used.
>>
>> background-position:10% 10% 10% 10%;
>> background-repeat:no-repeat;
>>
>> Currently from what is in the specs I could have used.
>>
>> background-position:10% 10%;
>> background-size:80% 80% round;
>>
>
> Actually, I think that would be
>
> background-position: 50% 50%;
> background-size: 80% 80%;
> background-repeat: no-repeat;
>
>
>> or with allowing background-position bottom and right.
>>
>> background-position: bottom right 10% 10%;
>> background-size:80% 80% round;
>>
>> This works regardless of if the element is of fixed or fluid width or
>> height. A simulated test case.
>>
>> http://css-class.com/test/css/colorsbackgrounds/position-percentage.h
>> tm
>>
>> b) If I want a background image to be rendered 100px from each edge
>> of an element or the background-origin and have the horizontal and
>> vertical axis of the image stretched or shrunken depending on the
>> intrinsic width, height and ratio of the image, I propose that this
>> can be used.
>>
>> background-position:100px 100px 100px 100px;
>> background-repeat:no-repeat;
>>
>> This works regardless of if the element is of fixed or fluid width or
>> height. A simulated test case, please use IE to check as this test
>> requires the quirksmode IE box model.
>>
>> http://css-class.com/test/css/colorsbackgrounds/position-length.htm
>>
>> Currently the draft specs does not allow for this even if positioning
>> from the right or bottom edge. It is only possible to center a
>> background image which is positioned from an element's (top, right,
>> bottom or right) edge in pixels if the element is of fixed width or
>> height.
>>
>
> Calc() can solve this case:
>
> background-position: 100px 100px;
> background-size: calc(100%-200px) calc(100%-200px);
> background-repeat: no-repeat
>
>
>> So what I conclude is that there are limitation in both schemes. Some
>> examples are possible in both schemes and some example can only been
>> done with only one scheme. The implication are.
>>
>> A over constrained example.
>>
>> background-position:10% 10% 10% 10%;
>> background-size:80% 80% round;
>> background-repeat:no-repeat;
>>
>> one that could work
>>
>> background-position:auto 10% auto 10%;
>> background-size:auto 80% round;
>> background-repeat:no-repeat;
>>
>> which is effectively the same as example a) above.
>>
>> I will be happy if my initial proposal (positioning from four
>> corners) is excepted, but I though I would offer another alternative.
>>
>>
>> Kind Regards, Alan
>>
>
>
>
> Bert
> --
> Bert Bos ( W 3 C ) http://www.w3.org/
> http://www.w3.org/people/bos W3C/ERCIM
> bert@w3.org 2004 Rt des Lucioles / BP 93
> +33 (0)4 92 38 76 92 06902 Sophia Antipolis Cedex, France
>
>
--
Aleksey V Lazar
Website Developer
Minnesota State University, Mankato
http://www.mnsu.edu/
Received on Wednesday, 21 November 2007 19:18:04 UTC