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?

hint: have a look at the `isOriginLeft` option. – Daniel A. White Feb 11 '14 at 13:03 — Daniel A. White, Feb 11 '14 at 13:03

score 14 · Answer 1 · answered Nov 06 '15 at 23:26

14

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

answered Nov 06 '15 at 23:26

Moe Far

2,705
2
18
40

```isOriginLeft: false```, this worked for me. – Shahab Younas Mar 18 '21 at 14:07

score 12 · Answer 2 · answered Feb 11 '14 at 13:15

12

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

answered Feb 11 '14 at 13:15

Jeffrey Jenkinson

2,296
2
19
26

3

Well what a case of horrible documentation. This solution works, but the [officially documented solution "isRTL:true"](http://desandro.github.io/masonry/docs/options.html#isrtl) does not work. in fact, that is nowhere in the [source code](https://github.com/desandro/masonry/blob/master/masonry.js) at all. – deweydb Nov 02 '15 at 03:31

score 4 · Accepted Answer · answered Oct 20 '15 at 16:22

4

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
});

answered Oct 20 '15 at 16:22

MostafaR

3,175
15
24

4

As per the documentation of masonry, option originLeft arranges items from left to right: `$('selctor').masonry({ originLeft: false });` – Akshay Gundewar May 24 '16 at 06:07

score 3 · Answer 4 · answered Jun 09 '17 at 06:55

3

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

answered Jun 09 '17 at 06:55

Amr Ibrahim

1,482
2
13
40

score 0 · Answer 5 · answered Oct 14 '20 at 17:44

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.

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

5 Answers5