Hacker News Reader

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.

View on HN

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.

Reply on news.ycombinator.com