[Proposal] margin-before and margin-after to support LTR and RTL languages

i18n
Tags: #<Tag:0x00007fa66acecdf0>

#1

Hello,
I’ve found myself working with RTL languages lately, and one things I do very frequently is differentiate margin-left and margin-right depending on the language direction.

Here’s an example:

.box { width: 100px; height: 100px; background-color: #333; }

[dir=ltr] .box { margin-right: 10px; }

[dir=rtl] .box { margin-left: 10px; }

I’d really like a property in the future that allows me to specify before and after margin, so the above code becomes:

.box { width: 100px; height: 100px; background-color: #333; margin-after: 10px; }

I’d like to hear your thoughts about this.


#2

Hi tegola,

css-logical-props aims to solve this with margin-inline-start & friends.

Feedback is more than welcome :slight_smile:

Ian


#3

Thanks @iank, this is an overkill for my needs, so I don’t have any feedback, but it looks like a step in the right direction!