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

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.

Hi tegola,

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

Feedback is more than welcome :slight_smile:


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!