search

twolfson / spritesmith

Utility that takes sprites and converts them into a stylesheet and its coordinates
MIT License
916 stars 56 forks source link

add padding to the bottom and the right of the sprite #39

Closed johannesjo closed 10 years ago

johannesjo commented 10 years ago

The padding parameter works fine, but not for the images on the edges as images on the top tend to overlap to those on the very bottom, as images on the left overlap with images on the right.

twolfson commented 10 years ago

We introduced padding to prevent inter-sprite bleeding as in #7. What is causing this issue? The height/width provided by spritesmith should never overflow and thus never cause this to happen.

johannesjo commented 10 years ago

Actually it was related to a manual re-size of the page. Would be still nice to be able to adjust the outer padding to prevent overlapping of images on the outer parts for those cases (I can't think of any other use case for padding).

twolfson commented 10 years ago

If you are not using the dimensions used by spritesmith, then I cannot help you. The workaround for this would be background-repeat: none.

However, spritesmith was built to automate everything for you. If you are doing anything by hand, then it is being misued.

johannesjo commented 10 years ago

Would it be so difficult to add an outer padding? There might be other cases (using scale for example), where this might occur. background-repeat: none is of course an option, but I would prefer configuring a single value and have no troubles afterwards.

glnemeth commented 10 years ago

I had a similar problem, couldn't find a workaround to add padding to the bottom and right of the last elements. My case was: I'm developing for mobile and some of the more buggy browsers rendered the icons seemingly bigger, so one icons bg had a little overlapping form the next icons bg on the spritesheet. I solved this by using "top-down" algorithm and adding a wider image to the sprite sheet, so now every icon is on it's own line, having vertical padding, the wide image adds horizontal "padding" to their right, this way they don't overlap. But it really would be nice if we could add padding not just between the elements, but simply around them.

twolfson commented 10 years ago

If you could provide enough evidence, I would be open to re-opening the issue. A proof of concept webpage (e.g. CodePen, Plunker, JSFiddle) with explanation on how to reproduce should be enough.

http://codepen.io/ http://plnkr.co/ http://jsfiddle.net/