I am implementing a star rating system for an app, which should support several RTL locales. Right now, when the user hovers over a star, all stars to the left of it are filled in, like so:

★☆☆☆☆, for a one-star rating;
★★☆☆☆, for a two-star rating;
★★★☆☆, for a three-star rating.

I looked at this question, which discusses which side to fill in stars for different text justifications, and the overwhelming consensus is to stick with LTR, where Evil Closet Monkey says that

Justifying text to the right does not alter my interaction/reading of that text. I still read it as I would a left-aligned block.

In an RTL locale, would I make something like


for a one-, two-, and three-star rating, respectively?

Edit: probably the best way to resolve this is by looking at existing rating systems in websites targeting RTL locales. Are there any well-known examples?


2 Answers 2


Star ratings that are displayed in the way you show are essentially discrete horizontal bar charts. It seems like in RTL you should flip the axis, but not doing so would also be accepted.


  • Instead of linking to other questions, you should vote to close as duplicates of those questions.
    – Rob
    Nov 4, 2019 at 12:11

It's a really complex problem that are based both on RTL speakers' perception and on gestures in mobile. It was a problem with stars rating on GetTaxi app in Israel - the stars were placed from left to right, while the whole interface was from RTL.
In order to avoid user errors, I recommend using a smile rating. Something like this:
enter image description here

Also, provide an option to approve rating/perform changes on it:)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.