RTL Support

[muhamed87]

Is there any plan for RTL support for this amazing library?
It is highly recommended as I think, and it will be a great addition to the library

[mathuo]

Thanks for the suggestion.

I think to support RTL would just be to reverse the headers and tabs within the dockview containers which I have quickly attempted and shown in the below screenshot?

Would you agree with this / expect any further additions to support RTL?

Referered in sandbox example here.

[muhamed87]

Well, I guess as I see in the header you are already using flex and this is better than floating elements, so all we need is just add direction rtl to the parent or even to the body tag, we need to test that in inner components content, but I guess it will work fine

[muhamed87]

The problem is in the content structure itself as every component has position absolute and using left attribute, then if we have a button to switch direction, the content and the header for every component will work fine, but the problem will be that the panel 1 will still be in the left which is not the correct structure for the RTL direction of the components, so I guess there should be a property for example in the initialization 'isRTL' and its value should be boolean, if it is true then all components should be using right instead of left in the styles handled through the TS code.

In addition this should be dynamically working like if I switch the direction the library should be reinitialized or updated

[NaNgets]

@mathuo Is this being worked on? I will gladly submit a PR for this if possible, will probably take me a couple of weeks

[mathuo]

In terms of what would need to change for RTL I believe it requries the tab header bar to reverse as in the first screenshot and the work still required would be as @muhamed87 suggested to position everything using right rather than left?

Do you see other parts that would also need to change?

[NaNgets]

I don't know, haven't gotten to check it yet, but generally every part that considers a side (e.g using left) should use the other side.

@muhamed87 's suggestion for using a property should be good enough.

[muhamed87]

The solution should match the following image, as discussed before with @mathuo , not only the header will be reflected, but also the containers, so if the orange container with its header was on left side in LTR version, it should be on the right side in the RTL version

[NaNgets]

Hi @mathuo , I would appreciate if you can tell me if it's ok for me to work on it or will you work on it?

Thanks

[mathuo]

@NaNgets Sorry, yes I am happy for you to look into this if you have the time. From what I can gather this is the pieces that need to be completed to fully support RTL mode.

• Reverse header (all tabs and action containers)
• Flip underlying grid horiziontally
• Position underlying grid using absolutely using right in RTL mode, in LTR mode this should remain positioned using left.

I can comment up these points with pointers to relavent files etc if that helps, otherwise any questions you have just let me know and I can try and explain the existing code.