DEV Community

Cover image for Star-rating using Unicode stars

Star-rating using Unicode stars

Andrew Bone on July 05, 2021

You might not have known this but over the past week there has been a shadow war taking place right here, on Dev, ok it's not that serious but a fe...
Collapse
 
link2twenty profile image
Andrew Bone
Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

Chrome does not support range-progress (like Firefox), but a hack using box-shadow can be used. Not fully tried and tested, but here is my “single input non-JS”-version:

Collapse
 
sababat profile image
Sababa T

thats awesome. i love the hearts

Collapse
 
link2twenty profile image
Andrew Bone

That's actually awesome!!! The web standards people really should standardise those props.

Collapse
 
afif profile image
Temani Afif

actually the war started with this post: dev.to/lapstjup/implementing-a-sta...

Collapse
 
link2twenty profile image
Andrew Bone

@inhuofficial 's post is 2 hours older than that one 😉
But yeah there was mention of that post

Collapse
 
grahamthedev profile image
GrahamTheDev

Yeah he posted that shortly after, and now Andrew has joined the fight.

People on dev.to are going to be so confused if they only come here every once in a while!

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

This is great, just swap the opacity: 0.01 trick for a proper screen reader only class and maybe steal my text-shadow trick to give the stars a darker border (so contrast is high enough for a control at 3:1) and this gets an A++!

I actually think yours behaves better than mine too!

Have all of the ❤🦄 and bookmark love I can give!

Collapse
 
link2twenty profile image
Andrew Bone

I've made a slight edit, I use text-stroke though rather than the shadow trick.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Oh I just noticed something else (minor tweak) your stars need to have aria-hidden=true instead of role=presentation as they are still screen reader accessible. Presentation basically says “this has no role” (think of it like turning it into a div or span if it was button for example) but doesn’t remove it from the accessibility tree. Not sure how I missed that!

Thread Thread
 
link2twenty profile image
Andrew Bone

Fixed

Collapse
 
link2twenty profile image
Andrew Bone

For people interested I converted this into a react component too

It's basically the exact same code but with some React nicety added for instance you can say how many stars you'd like and React will handle all the HTML for you

<StarRating max={15} defaultValue={5} />
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devanks profile image
Devan Sambasivan

I like the unicode usage. But making it support half stars like how @madsstoumann does in their implementation would be hard right?
I can think of having maybe two stars in one place and hiding one of them vertically based on fraction.

Collapse
 
link2twenty profile image
Andrew Bone

Yeah, half star will be difficult. I think you're right that you'd hide half of a star but doing this will double the amount of HTML required too.

Collapse
 
cormacmaherie profile image
Cormac Maher

Use ten stars, then use clip-path and nth-child(odd) for to position them, that should work fairly well, but yes, it would be extra HTML

Collapse
 
cormacmaherie profile image
Cormac Maher

I wanted to turn a star rating into a Likert Scale, so I created a smiley ttf and used that, one of the big advantages was I could use css to style it:

cormacmaher.com/Likert-Scale-icon-...

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli • Edited

Why put the star character in the CSS rather than the HTML?

Collapse
 
link2twenty profile image
Andrew Bone

Good point, it was in the before initially because I was changing between different characters (which you can only do in a before) but I edited the code and that was left in as legacy.

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli

Ah, I see. Thanks.

Thread Thread
 
link2twenty profile image
Andrew Bone

I've updated the article to not include the before stuff now, thanks for pointing it out.

Collapse
 
hasnaindev profile image
Muhammad Hasnain

Honestly, I'm not even here for the stars but just for the star wars between you four guys.

Collapse
 
allthecode profile image
Simon Barker

This is great, I used unicode stars for a exactly this a few years ago on my shopify e-commerce 😀

Collapse
 
link2twenty profile image
Andrew Bone

Thank you, it's good to know people are using techniques like this out in the real web ☺️