Comment 67 for bug 744808

I spent some time playing with this today. It is possible to use a
squarer layout for sprites, but there are some significant
complications, which is probably why previous developers didn't do it.

The main problem is that, with our current CSS, background images are
only clipped according to the width and height of the element that
they're attached to. We get away with this for height because elements
aren't usually all that high, so we can just have a generous vertical
margin. But elements are frequently a lot wider than they are high, so
once we try to lay out images horizontally we end up with superfluous
images showing up from further right in the combined sprite image unless
we set enormous horizontal margins, at which point we're back to
combined sprite images that don't fit in GPUs.

The fix for this is probably to use CSS pseudo-elements. Instead of
setting an image as the background for its associated element directly,
we'd create another element using :before with fixed width and height
and set the image as the background for that (and then we could probably
stop bothering with margins within the sprite entirely). This
sacrifices support for versions of IE earlier than 8
(https://caniuse.com/#search=%3Abefore), but that's about 0.03% of
global browser use at this point (https://caniuse.com/usage-table), so
we can probably cope with that.

I have this sort of working locally, but there are a lot of layout bugs
right now, and it'll take some time to get all those ironed out.