Sprites centered vertically for horizontal layout?

[ameego]

Hi,

I try to make the sprites — in a horizontal layout — centered verticaly. It seems not to work, as the png output is weird (wrong position, overlapping of images...)

Here is the piece of code I use:

$icons-position: 50%; $icons-spacing: 20px; $icons-layout: horizontal; @import "low-res/sprites/icons/*.png";

Any idea? Is this actually possible?

Thanks for your help.

[scottdavis]

I think this is fixed in the current master branch

[scottdavis]

try the latest pre-release gem install compass --pre and let me know if this is still an issue

[ameego]

Hi,

It does not work, even after installing the pre-release. It does work well when the $icon-position is not set.

Here is the image output, using this config:

$test-spacing: 50; $test-layout: horizontal; $test-position: 50%; @import "low-res/sprites/test/*.png";

Thanks for following-up on this.

[scottdavis]

so you want a 50px spacing with a 50% position? so they should be centered wit ha 50 pixel gap between them. Sorry for being verbose i just want to make sure i write a test case that will help me fix this.

[ameego]

No worries, thanks for looking into it.

Indeed, what I am trying to achieve is to center vertically each image while having 50px gap (horizontal spacing) between them.

The following output image refers to this config:

$test-spacing: 50; $test-layout: horizontal; /$test-position: 50%;/ @import "low-res/sprites/test/*.png";

You can see that each image has 50px of gap, which is correct. The only thing which misses is the vertical center alignment (in the image, all the image are aligned in the top).

Is this description more clear?

[scottdavis]

yep perfect

[scottdavis]

so i just wrote this test case.

  it "should layout horizontaly with spacing and and position" do
    base = horizontal({"spacing" => Sass::Script::Number.new(10, ['px']), "position" => Sass::Script::Number.new(50, ['%'])}, 'squares/*.png')
    assert_equal [0, 20], base.images.map(&:left)
    assert_equal [5, 0], base.images.map(&:top)
    assert_equal 50, base.width
  end

and im getting this as my output

[ameego]

Great, the output is what I'd like to achieve.

[scottdavis]

except the problem is i didn't actually change any code in the horizontal layout =\ so there is another problem some place or you are not actually using the new version =(

[ameego]

I am using Compass 0.13.alpha.2 and Sass 3.3.0.alpha.88. Is this correct? I see that I have ruby 1.8.7, it is not up to date.

(This is not a matter of life and death if I do not use the horizontal layout in the my current project :) but eventually, this could be quite useful)

[scottdavis]

no the problem is on our end then ill keep digging.

[aertmann]

I'm having a related issue. I can get the icons positioned correct, but for some reason the position adds a lot of empty space to the sprite which is not included when using sprite-position. I think the sprite-position works as it should though, since settings position 0% the x-offset is calculated to the same as with position 50%.

Here's an example of the sprite using position 50%: Notice all the whitespace in the beginning

Here's an example of the sprite using position 0%: Notice the rendering is correct, although the icons are not vertically centered of course

What seems to happen is that it adds 50% position offset before adding any sprites, which of course is weird because it should only add the position for each sprite vertically.

I'd say this is related because it's the same issue, but using the global position and not specific positioning of a single sprite.

Also I can confirm that using specific sprite options for position isn't taken into account.

Code:

$icons-horizontal: sprite-map('SpriteIcons/*.png', $layout: horizontal, $position: 50%, $spacing: 320px);
background-image: sprite-url($icons-horizontal);
background-position: nth(sprite-position($icons-horizontal, 'arrow-icon-nav-forward', 289px), 1) 50%;

Don't mind the nth, it's used because using 50% as offset in sprite-position returns a pixel value :S and '50%' doesn't work.

Output:

background-image: url('../Images/SpriteIcons-s68627c6163.png');
background-position: -321px 50%;

FYI: The behavior is the same with Compass 0.12.2 and 0.13.alpha.

Hope we can get this solved so it's possible to create vertical positioned sprites. Thanks in advance