Add a margin option

[Juankz]

White space between the sprites and the image borders helps avoid some scaling artifacts.

[twolfson]

This feature is available via the padding option in processImages:

https://github.com/twolfson/spritesmith/tree/3.4.0#spritesheetprocessimagesimages-options

Here's an example usage:

https://github.com/twolfson/spritesmith/tree/3.4.0#padding

If you're using our Grunt or gulp variants, then it's padding in the params object:

https://github.com/twolfson/gulp.spritesmith/tree/6.11.0#spritesmithparams

https://github.com/twolfson/grunt-spritesmith/tree/6.8.0#documentation

[Juankz]

Hi, thanks for answering. If I'm not mistaken, padding give this result (yellow = padding):

But I'm looking for this (green = margin):

[twolfson]

I see. Can you explain your use case further? I know padding between images is good for artifacts based on past issues (https://github.com/twolfson/spritesmith/issues/7) but haven't heard about margin having that effect

[Juankz]

I guess it could be considered an edge case, so far it's most noticeable with text on certain typographies, when scaling there are some filter artifacts due to chrome's scaling filter.

[twolfson]

Ahh, very interesting. Hmm, would you be okay with a workaround instead of a formal library solution? I'm skeptical it's worth addressing since nobody has asked about it the 8 years this library has been around o_o

Workaround options:

• Define a custom layout which adds margin to all sides of image and x/y of sprites (essentially wrapping existing padding friendly solutions). Would be happy to write up demo code for this
• Use a tool like gm to add margin after spritesmith then offset CSS mixin accordingly
• Sanity check: Verify background-repeat: no-repeat doesn't resolve the issue
• Something else I can't think of

On Thu, Jul 23, 2020, 9:27 AM Juan Carlos notifications@github.com wrote:

I guess it could be considered an edge case, so far it's most noticeable with text on certain typographies, when scaling there are some filter artifacts due to chrome's scaling filter. [image: explanation] https://user-images.githubusercontent.com/18577412/88311864-0ad53000-ccd7-11ea-8b6a-badc9c304b29.png

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/twolfson/spritesmith/issues/81#issuecomment-663103998, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAG4KWB7TII37VRHFVCZHF3R5BQF7ANCNFSM4PFYVKHA .

[Juankz]

Yeah, no problem, I've also thought about other ways to solve this issue. Thanks for your time

[twolfson]

Cool, yea =/ Thanks for understanding =) If more people write in about it, then we'll gladly revisit =)

And still glad to help you work through any of those workarounds =)

On Thu, Jul 23, 2020, 9:54 AM Juan Carlos notifications@github.com wrote:

Yeah, no problem, I've also thought about other ways to solve this issue. Thanks for your time

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/twolfson/spritesmith/issues/81#issuecomment-663117509, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAG4KWGN2VCFHXLMBGAS2BTR5BTNFANCNFSM4PFYVKHA .