CODEWITHSUNDEEP
javascripthtmlcssjquery-masonryright-to-left
Dawood Butt
Dawood Butt

Reputation: 496

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

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?

Upvotes: 11

Views: 5515

Answers (5)

Alireza Rezaee
Alireza Rezaee

Reputation: 312

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.

Upvotes: 1

Amr Ibrahim
Amr Ibrahim

Reputation: 2234

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

Upvotes: 4

Moe Far
Moe Far

Reputation: 2752

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

Upvotes: 16

MostafaR
MostafaR

Reputation: 3695

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

Upvotes: 4

JeffJenk
JeffJenk

Reputation: 2665

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

Upvotes: 13

Related Questions