Lack of Right-to-Left (RTL) Language Support in ConnectKit

[nekofar]

Describe the bug

When using ConnectKit, I noticed that the application does not correctly support right-to-left (RTL) languages. This results in incorrect text rendering and layout issues when the application is used in an RTL language environment.

To reproduce

The version of ConnectKit: 1.5.1

Steps to reproduce:

1. Launch the ConnectKit Nex.js app.
2. You have two options to change the dir attribute of the html element to rtl. You can either use Developer Tools or add a _document.tsx file to the project and modify the code directly from there.
3. Navigate to the Connect Wallet button on the index and click on it.
4. Please take note of a blank modal that appears on your computer's desktop.

Expected behavior

I expected the ConnectKit application to properly support right-to-left languages properly, ensuring correct text rendering and layout alignment. All text elements, buttons, and UI components should be mirrored and aligned according to the RTL language standards.

Screenshots

LTR	RTL

Environment details

• Operating System: macOS
• Browser: Google Chrome
• Browser Version: 115.0.5790.170
• Device: Desktop

Additional context

It's important to note that supporting right-to-left languages is crucial for ensuring a seamless experience for users who rely on these languages. Proper RTL language support includes text alignment and considerations for overall layout, padding, and visual elements.

This bug report highlights the current lack of RTL language support in ConnectKit and emphasizes the importance of addressing this issue to provide a more inclusive user experience. Please don't hesitate to contact me if you need further information or help reproduce the problem.

[nekofar]

connectkit/packages/connectkit/src/components/Common/Modal/styles.ts

Lines 311 to 312 in 4798404

	left: 50%;
	margin-left: calc(var(--width) / -2);

While this hack could address the problem of the empty modal, a more comprehensive solution that fully supports RTL is needed.

left: ${document.documentElement.dir === 'rtl' ? 'auto' : '50%'};
right: ${document.documentElement.dir === 'rtl' ? '50%' : 'auto'};
margin-left: ${document.documentElement.dir === 'rtl' ? 'auto' : 'calc(var(--width) / -2)'};
margin-right: ${document.documentElement.dir === 'rtl' ? 'calc(var(--width) / -2)' : 'auto'};

[nekofar]

I haven't personally used styled-components, so I'm not very familiar with it. However, it seems that there is an official plugin available to support RTL.

[Javid-Izadfar]

fixed the issue on my project by simply changing the direction at some global .css file.

#__CONNECTKIT__ {
  direction: ltr;
}