Right to left layout

[metafizzy]

Right to left layout

[TimvdEijnden]

I would appreciate it, if 'right to left' support will be added to isotope (on short term), as we are building a non for profit website which is in English and Arabic.

[TimvdEijnden]

I've added support for isRTL to the masonry layout.

I've replaced

      // position the brick
      var x = this.masonry.columnWidth * shortCol,
          y = minimumY;

with:

      // position the brick
      var x,Y;
      if(this.options.masonry.isRTL){
        x = (this.element.outerWidth(true) - $brick.outerWidth(true)) - (this[this.options.layoutMode].columnWidth * shortCol);
      }else{
        x = this.masonry.columnWidth * shortCol;
      }
      y = minimumY;

now you need to can enable isRTL!

$('#container').isotope({
      itemSelector : '.item',
      masonry: {
        columnWidth : 10,
        isRTL: $('body').hasClass('RTL')
      }
    });

[desandro]

That's a good solution if you're just looking to add right-to-left layout for Masonry. To either create your own custom layout mode, or modify an existing layout mode like Masonry.

However, it's not a complete solution. Items will still be aligned to the left side, when you are resizing the window. A proper solution would have to be more fundamental. Ideally, you would be able to set isRTL as a base option and the script could use the same layout mode logic by revising some other logic.

• Change item reset style to right instead of left
• Might have to do the same for _positionAbs
• Add some more logic on top of _pushPosition to account for right-to-left layouts

This is just speculation for now.

[desandro]

Fixed by SHA: d19aba9. See Help - Right-to-left layouts and Right to left test.

[eyalezer]

what about this ?

    CW = $('#container').width();
    window.onresize = function() {
        CW = $('#container').width();
    }

    $.Isotope.prototype._pushPosition = function( $elem, x, y ) {   
        x = Math.round( CW - (x + this.offset.left + $elem.width() ) );
        y = Math.round( y + this.offset.top );
        var position = this.getPositionStyles( x, y );
        this.styleQueue.push({ $el: $elem, style: position });
        if ( this.options.itemPositionDataEnabled ) {
        $elem.data('isotope-item-position', {x: x, y: y} );
        }
    };