Re: Sprites (was: Background position)

On Tue, May 19, 2009 at 00:42, Aryeh Gregor <Simetrical+w3c@gmail.com> wrote:
> On Mon, May 18, 2009 at 5:57 PM, Jorrit Vermeiren
> <mercator+w3c@gmail.com> wrote:
>> I propose the introduction of an @sprite rule, which can be used to
>> define the sprite matrix of a single image:
>>
>> @sprite <id> {
>>    sprite-image: <image>;
>>    sprite-offsets-x: <number>+;
>>    sprite-offsets-y: <number>+;
>> }
>
> It seems like a simpler syntax would be more like
>
> @sprite <id> { <image>; <number>+; <number>+ }
>
> There's no need for explicit property-like names in a special at-rule like this.

Ah, yes indeed, I didn't realise you could do that.


On Tue, May 19, 2009 at 10:55, Sophie <sophie.gousset@laposte.net> wrote:
> If I follow you on this track, I would add an optional 'clip' series of
> coordinates to be able to mask the rest of the image when you assign it
> to an area bigger than the sprite you want to use (tab icons with text
> for example). You then wouldn’t need to space the sprites in the image
> file, or use extra markup to clip the sprites.
>
> @sprite <id> {
>     sprite-image: <image>;
>     sprite-offsets-x: <number>+;
>     sprite-clip-x: <number>+;
>     sprite-offsets-y: <number>+;
>     sprite-clip-y: <number>+;
> }
>
> sprite(<id>, <x-index>, <y-index>) would refer to the x and y offsets
> list, the clip indexes wouldn’t be used outside of the @sprite rule.

I'm not sure I understand what you mean. The clipping is already taken
care of. When you use sprite(<id>, <x>, <y>), the result would be an
image consisting only of the image region limited by the offsets.

You've given me another idea, though. Instead of using pixel offsets,
it might be better to use lengths instead, because lengths can be
repeated as necessary (similar to the repeating of values with the
CSS3 multiple backgrounds [1]). Still sticking to the property-like
names for now for clarity:

@sprite <id> {
   sprite-image: <image>;
   sprite-width: <number>+;
   sprite-height: <number>+;
}


My earlier at-rule implementation [2] of Jethro's example [3] would
then simply become:

@sprite tabs {
   sprite-image: url(tabs_sprite.png);
   sprite-width: 122;
   sprite-height: 41;
}

That sprite width and height will simply repeat to fill the width and
height of the image creating a grid of 122x41 pixel sprites (unless
the full image width and/or height isn't an exact multiple, in which
case the last column and/or row of the grid would be clipped to fit).

Jorrit

[1] http://www.w3.org/TR/css3-background/#layering
[2] http://lists.w3.org/Archives/Public/www-style/2009May/0157.html
[3] http://lists.w3.org/Archives/Public/www-style/2008Nov/0279.html

Received on Tuesday, 19 May 2009 23:58:10 UTC