-
Type:
Improvement
-
Status: Resolved
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 0.2.3
-
Fix Version/s: 0.2.10
-
Labels:None
Motivation
The current list of supported values for the sprite-alignment property is incomplete: it does not cover the center value that is supported by the background-position CSS property. Adding center to the set of supported values will allow positioning sprite images at the center of the container. Original Jouni's report comes at the bottom.
Implementation
Add center to the set of values supported by the sprite-alignment property. If center alignment is specified for an individual image, the generated horizontal / vertical background-position CSS property will be center for vertically- / horizontally-laid out sprites. Additionally, the image will be centred within the width / height of vertical / horizontal sprites. The margins specified in sprite-margin-* will add up to the individual image being centered, which will allow shifting the individual image without adding extra padding to the image itself.
Please see SMARTSPRITES-39 for more specification regarding interactions with sprite-width and sprite-height properties.
Original report
Currently the only option for for sprite-alignment are left | right | top | bottom | repeat.
I have a use-case where I would need the option "center" as well (could be called "middle" as well).
So when I write this in my original CSS like this
{{
/** sprite: verticals; sprite-image: url(../common/img/vertical-sprites.png); sprite-layout: vertical */background-repeat: no-repeat;
background-position: center top;
background-image: url(img/image.png); /** sprite-ref: verticals; sprite-alignment: center */
}}it should be transformed to this
{{
background-repeat: no-repeat;
background-position: center top;
background-image: url(img/image-sprite.png);
background-position: center -123px; /* (some arbitrary value for top) */
}}