Hacker News Reader

Comment by smackfu | Hacker News Reader

It's interesting that the year 2000 way to do stars would be to have a full, empty, and half star GIF, and just to display however many stars you need by doing a loop.

So, when this article says "The goal is to avoid having a sprite that looks like this" where the sprite has all the values of stars in a line... why did people switch to doing it that way in the first place? Like the article says, it's a pain to maintain, has lots of pixels, and is not resizable.

View on HN

Well, if you do it that way you can change the whole rating by just changing the class name, after you set up all the background-position rules for all the different rating classes. I guess that's why?

With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.)

That's way less work than all that CSS.

This method leaves all styling in your HTML/server-side code, which is a pita.

In an app I'm making, each group of items can have a different rating size, as defined by the group's admin. So the sprite with a fixed number of stars wouldn't work.

Essentially, I see a number of stars as just a different sort of a "progress-bar"-like graphic, so it's not necessary to set individual stars in the HTML. Just set it as a horizontally-repeating background, with predefined "steps" od the overlay, and the only number you need to pass from the server is the step level. This can even show a partial star if you want.

P.S. I haven't read the OP article prior to writing this comment; that's essentially what they're advising there.

This is avoided by rendering each star/half star/empty star as an li or a div, defining common styles like width, height and positioning and then background images for each.

It's also only one GET request for the image instead of three.

Reply on news.ycombinator.com