Can Masonry use as RTL (Right-To-Left) direction

Question

Masonry worked fine with the text direction from LTR (Left-To-Right). Now I want to use masonry with the text direction RTL (Right-To-Left [Middle eastern languages such as Hebrew and Arabic are written predominantly right-to-left.] ).

Whenever I run masonry on the RTL (Right-To-Left) text direction, the masonry plugin setups all its grid layout in the LTR (Left-To-Right) format.

I also go through from the masonry plugin's documentation but didn't find any setting related to RTL (Right-To-Left) direction.

Any proposed solution?

Answer 1

It's about two years late, but I had the same problem and found the solution provided by Masonry.

There is an option isRTL which arranges tiles from right to left:

$('.tile-view').masonry({ 
    columnWidth: 200,
    isRTL: true
});

Answer 2

I think isOriginLeft: false is the right answer, according to this site

Answer 3

You can float the items right in css:

.masonry .item {
  float: right;
}

then change the option isOriginLeft: false in your javascript.

Here is a little codepen to illustrate:

http://codepen.io/anon/pen/gkCiG

Answer 4

OriginLeft

Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with originLeft: true. Set originLeft: false for right-to-left layouts.

originLeft: false

Answer 5

If you want right-to-left layout, especially when your content includes images; Like Bootstrap cards that may contain images. Then get help from this code snippet.

Note: You need two libraries, Masonry and imagesLoaded:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

//See docs: https://masonry.desandro.com/layout.html#imagesloaded
//See demo: https://codepen.io/desandro/pen/MwJoLQ
var grid = document.querySelector('.masonry');
var msnry;

imagesLoaded(grid, function () {
    // init Isotope after all images have loaded
    msnry = new Masonry(grid, {
        // options
        percentPosition: true,
        originLeft: false
    });
});

Also, Considering the removal of Masonry from Bootstrap 5, the above may be a good guide for those friends.