Bulma: Don't forget about RTL direction please

[elkebirmed]

[jgthms]

I don't have any experience in implementing RTL in CSS, but I'd be glad if you could help us out.

[elkebirmed]

I'll try

[msikma]

When using as much of flexbox's features as possible, and no attributes with "left" or "right" in it, most stuff will "just work". But for example, right now the grid system contains margin-left for spacing, which breaks RTL. This would need to be replaced with an equal margin on the left and right sides. That's one example.

[elkebirmed]

It's a great idea @msikma

[msikma]

It's definitely a bit of work to get RTL working correctly but I think it shouldn't be too bad. 😀

For example, for the columns, if you give every column margin-left: 10px; margin-right: 10px; and then modify the .columns class to have margin-left: -10px; margin-right: -10px;, it will work fine on an RTL layout:

(This is the same approach used by many other systems, like Bootstrap.)

This is best done sooner rather than later since this _will_ break people who have built complex site designs on top of the grid system as it currently is.

[mohamadnorouzi20]

If you want to implement RTL please use conditionals in code instead of using a npm tool.

[msikma]

Could you explain what you mean by npm tool or conditionals? I'm not entirely sure what you mean. In my idea there should be a single codebase that works for dir="ltr" and dir="rtl" without any other need for setup, which should not be too hard to do.

[mohamadnorouzi20]

@msikma This is an npm tool for example(The best one actually): https://github.com/MohammadYounes/rtlcss
and by conditionals I mean using if statements.

[mohamadnorouzi20]

@msikma Semantic UI(a giant framework) for example uses npm rtl packages instead of using conditionals in css preprocessor.

[msikma]

I don't think there's a need for conditionals at all. It's perfectly possible (in fact, beneficial) for a CSS framework to support LTR and RTL at the same time, and even without overrides or selectors that include html[dir="rtl"]. (Also because it's possible for parts of a page to have an RTL language, and other parts LTR.) This also means dynamic websites could switch between an LTR and RTL language without reloading a different CSS file.

The trick is (mostly) making sure not to use any styling that explicitly favors left or right.

[ShaggyDude]

"The trick is (mostly) making sure not to use any styling that explicitly favors left or right." Seems like a pretty big trick. Semantic UI is awesome. almost good enough for me to switch to less. I'm hoping this project will surpass it.. Let me know if I can help out...

[ahmadyousefdev]

you can include a a java script code that convert every "left" in the class to "right" , and every "right" to "left" . and adding direction: rtl; in the body.. I guess that will make almost everything ok.

[jens1o]

But this isn't a js framework.

[ahmadyousefdev]

I know, it just could be a simple and fast solution for those who want an RTL version :smile:

[ImanMh]

should be able to set offsets from right

[zaidakram]

Any progress on this front? Bulma looks really promising and I think RTL support will be a huge win. Starting a new project and absence of RTL support is the only thing stopping me from using it.

[mohammadrafigh]

I implemented this feature and will send PR when I tested everything.

[mohammadrafigh]

here is my fork you can use it by npm install bulma-rtl currently you can use it with sass modules only give me a few hours and I will update this fork with latest bulma changes and I may send another PR with a different approach. otherwise if the Bulma repo maintainers don't want to merge this PR then you can use bulma-rtl from tomorrow and so on... I try to fix rtl related issues there. let me know your thoughts. also I may do some tweaks and add some custom components later if I have time.

https://github.com/mohammadrafigh/bulma-rtl

P.S. if repo maintainers decide to use my approach I will un-publish bulma-rtl. I just did it to help others like me waiting from 2016 till now.

[mrjk990]

@mohammadrafigh need a new bulma rtl for 0.6 version , plzzzz

[mohammadrafigh]

@mrjk990 I will do it tonight. but please make issues for this requests on the RTL repo thanks.

[mrjk990]

@mohammadrafigh ok i'll , but give me the link to add issue

[mohammadrafigh]

@mrjk990 I updated the repo to 0.6.1 here is the link I mentioned above:

https://github.com/mohammadrafigh/bulma-rtl

you can use bulma-rtl as package name to install it.

[mrjk990]

@mohammadrafigh thank you bro :kissing_heart:

[kodeine]

Any idea why this is not added into Bulma core?

[mohammadrafigh]

@spacemudd this approach won't work in bidi context, i.e. [dir=auto]. also this way user is forced to use dir=rtl on html elements all the time.

[mrg0lden]

@spacemudd I really see [dir=auto] as the silver bullet of bi-di problems, only some bulma components need specified direction adjustments, such as .is-loading and .column.is-offset-x.

For futuristic browsers support only, see: https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

[ghost]

I have read about CSS Logical Properties and Values, which I think is THE solution for all RTL problems. Its already been supported in all major browsers except for MS ( which they plan to implement it as it stated here - the response was in 2015 so who knows when they will start! ). Other than this, I don't see any better solution than having a separate rtl.css file.

More info about CSS Logical Properties and RTL in here.

[ghost]

Ok, huge news!

MS is currently being rebuilt as a Chromium-based browser. Which means, we can expect all features and functionality of other Chromium-powered browsers brought to Edge.

Edge will also be released to older windows versions like win7 !! so, CSS Logical Properties and Values is coming in 2019!

[mrg0lden]

@Rux77 Great! But I think IE is still a problem. I wish it support get dropped soon. People should learn to adapt, and we should help them as well.

[ghost]

I think that Bulma should not be focused to support old browsers like IE. Bulma should always support modern technologies and modern browsers. If someone wants the support of older browsers should use bootstrap or something else.

As for IE browser being dropped, I don't think MS will do such action, at least not in the near future.

[mrg0lden]

Since this issue isn't getting any love, I decided to start doing something useful by listing all Bulma features that are RTL incompatible and how it should be.

I'll update this list with time, feel free to contact if you want to contribute in doing this list.

Navbar

• .navbar-start have margin-right: auto which pushes the element toward the left. To fix this it should have margin-right: unset and margin-left: auto or can be resolved by logical properties.
• .navbar-burger have margin-left: auto which pushes the element toward the right.
• .navbar-item.has-dropdown arrow comes always on the right.

Button

• .buttons have padding-right: .5rem for .button:not(:last-child):not(.is-fullwidth) which make buttons have inappropriate padding on RTL context.
  

Input

• .is-loading adds the indicator on the right side which makes the indicator come over the text

[omrllm]

Hey guys,

I have seen that styling the body like this:

body.ar {
direction: rtl;
}

works very well, except for the navbar.

Anyone else getting the same result?

The navbar gets weird, instead of being like this but in the opposite direction:

&

It acts like this:

&

Possible answer

I have seen this answer on Stackoverflow:

Well, i have solved it by digging a bit in the code and understanding what should be changed in oreder for it to work properly as RTL navbar.

We have three main sections in the navbar, and i recommend making a class for it in you app.css or whatever name you have for your css called rtl-navbar and apply it on navbar-burger, navbar-end. on top of this, you should apply direction:rtl on the main navbar container.

.navbar-rtl{
   margin-right: auto;
   margin-left: 0;
}

But it doesn't work.. maybe because I'm not the doing the right steps.

Could anyone try this approach or something easy and similar?

---

_Stackoverflow answer_ -> _Source_

[omrllm]

@mrg0lden

Nah, I'm not; I'm using the CDN.

[yazeed]

Check this guide for a proper RTL implementation
https://www.rtlstyling.com/

[jgthms]

I just opened a PR: #2882
I'll probably merge and release it soon.

[mohammadrafigh]

Thanks @jgthms, So I will mark my fork at https://github.com/mohammadrafigh/bulma-rtl as deprecated and will remove the package from npm soon.

[jgthms]

Thank you @mohammadrafigh for supporting RTL all this time! I think with the popularity of CSS logical properties, Bulma is ready to support RTL.

I'd be interested to know your thoughts on my implementation of RTL, and if anything can be improved.

[mohammadrafigh]

@jgthms my pleasure. I had a look at PR and now I see it's going to be in the right direction. It's perfect. Yes css logical properties are great.

[Tovli]

Hi
Is there a plan to resolve this issue?

[mas-iota]

Any update on this?