Email or username:

Password:

Forgot your password?
Nikita's posts Post Back to profile
Nikita

A question to my fellow #Web developers and designers: How do you handle checkboxes and labels with #RTL? It’s clear to me that their position should be flipped (see image by @shadeed9), but what are your preferred ways of achieving this (with static HTML)? Is `flex-direction: row` a valid approach, or are there other ways I’m missing?

A picture of two “I agree with T&C” checkboxes. The top one is written in English and is left-to-right: the checkbox is left of the label. The bottom one is written in Arabic and is right-to-left: the checkbox is right of the label.
9 February at 11:24 | Open on fosstodon.org
3 comments
Michael

@kytta depends on how you implement it:
This particular one could just be an inline checkbox, which wouldn’t need any thinking about to put it to the right.

But otherwise flex-direction row together with semantic margins/paddings (padding/margin-inline-start/end) would usually do the trick for me.

@shadeed9

9 February at 15:08 | Open on mstdn.thms.uk
iliazeus

@kytta inputs and labels are both inline elements, so a browser already has rules for choosing between RTL and LTR. You can just use dir="auto" in HTML, and let the browser figure it out. Or set it explicitly with dir="ltr" and dir="rtl".

jsfiddle.net/04hn1cjw/7/

9 February at 15:11 | Open on lor.sh
Nikita

@iliazeus you’re right! I’ve somehow never realized this and have never considered just using the elements without any CSS. Thanks a lot!

9 February at 16:49 | Open on fosstodon.org
Go Up