Is there a way to switch the left and right css values when in a right-to-left language?

Question

I'm working on a site that supports many different locales. Our next locale is Hebrew, which is a right-to-left language. I'm setting the dir=rtl and lang=he on the HTML element, and certain things shift around (as they should).

A lot of the website uses elements with absolute positioning setting the left value. Is there a way to make it so when you are in rtl mode that it would switch it to be the right value?

I know that I could have a rtl class on my html element and do css overrides when that class is present, but the project is pretty large and it would not be fun to hunt down all of these occurrences manually.

Answer 1

I think adding classes would be more robust, but considering how much no-fun that would be, hunt them down with JavaScript!

Codepen

$(document).ready(function () {
  var elsToFlip = $('*')
  elsToFlip.each(function () {
    var pos = $(this).css('position')
      , left = $(this).css('left')

    if (pos === 'absolute' && left !== 'auto') {
      $(this).css({
        left: 'initial'
      , right: left
      })
    }
  })
})