Review posts now show their ratings as stars.
Ratings are stored as floats, so they can have very strange precision like 4.5 or 4.3567. Since I wanted to show the amount of stars as accurately as possible, I decided to make something that can reflect any float value (basically).
Essentially, I laid 5 stars out (15px wide each) with 4px between them. I saved out two versions, one with all stars in the off/disabled state and one with all stars in the on/enabled state. I use these as backgrounds of div's, with the "on stars" on top of the "off stars." I show the current rating with the "on stars" by clipping the image's width. See below:
So, I essentially clip the "on stars" to whatever width they need to be to represent the rating.
How does one calculate the width? Well, it's simply (star_width * rating_amount) + (space_width * floor(rating)). floor() means to always round down, even when the decimal is .5 or more. Example math:
Rating: 1
Width: (15px 1) + (4px 1) = 19px (only shows the first star)
Rating: 4.5
Width: (15px 4.5) + (4px 4) = 83.5px
Since we can't have 0.5 pixels technically, I just round the amount off to the nearest integer.
So, not very hard. Actually, it took me longer to write this post than to make the stars.