Add support for replacing CSS files with .rtl.css versions for RTL cultures #6622
Conversation
|
Thanks, and very good @mnouraei |
There was a problem hiding this comment.
Thank you for proposing this feature! As a developer from a country where RTL (right-to-left) languages are the norm, I can confirm that this approach is the standard in our production environments.
Having separate .rtl.css files instead of merging RTL overrides into the main CSS file is absolutely essential for large-scale, maintainable, and high-performance web projects supporting RTL cultures.
This PR perfectly addresses real-world needs:
Prevents unnecessary bloat in default CSS files
Optimizes performance by only loading what’s required
Dramatically improves code maintainability
Strongly support merging this PR into the DNN core.
It’s time to officially support RTL best practices natively!
There was a problem hiding this comment.
Great job!
For years, we've had to maintain a separate customized version of DNN just to properly support .rtl.css files for RTL languages.
Having this feature in the DNN core will be a huge help for us and many other RTL communities.
Strongly support merging this PR!
|
As someone who has manually handled RTL/LTR styling for years, I’m thrilled to see this finally being considered! In every project, I had to customize the DNN core to dynamically load culture-specific stylesheets (like .rtl.css) based on the language direction. This allowed me to build multi-language sites efficiently, avoiding performance overhead while cleanly managing RTL/LTR layouts. While modern solutions like Bootstrap (with its RTL support) mitigate the issue, they’re often too heavy for DNN ecosystem. Besides, relying on external frameworks isn’t ideal when the core platform could natively resolve this. This feature is long overdue—it’ll standardize RTL support, eliminate workarounds, and make DNN far more versatile for global applications. Kudos for prioritizing it! |
|
this is awesome! |
|
Supporting RTL properly is more than just a nice-to-have — it’s essential for global accessibility. This not only avoids cluttering the main stylesheet with overrides, but also improves load times and keeps the codebase much easier to manage. This pull request reflects a practical and professional approach to RTL handling, and I strongly recommend integrating it into the DNN core. Thank you. |
|
Proper support for right-to-left (RTL) languages is not just a nice-to-have — it's essential for global accessibility and inclusion. In our experience, isolating RTL styles in dedicated .rtl.css files yields the best results in terms of structure, performance, and maintainability. This pull request offers a professional, pragmatic approach to RTL handling in DNN. |
|
I am not a big fan of this approach, it would make it challenging on multilingual sites for someone to duplicate everything into different files for LTR and RTL. I'd rather use a css selector to override only what is different for RTL, another PR already exposes that information both in the html attributes and as a class on the body element. I'd like at least to understand a full scenario (some demo site with RTL and LTR), my guess is that it would not be a lot different with modern css using things like "start" and "end" instead of "left" and "right" with flex and grid, etc. |
@valadas In the previous PR that you approved, I mentioned that I am planning to gradually apply my 6 years of experience working with this repository along with over 15 years of expertise in DNN to enhance this system and add proper support for right-to-left languages. This solution has been carefully evaluated over the years and has been successfully used and welcomed by many governmental and non-governmental organizations. Therefore, as someone who has been actively involved in this community for a long time, I believe this feature is highly essential, which is why I proposed adding it to the core after all these years. I kindly ask you to consider this with an open mind and approve this change. |
|
Thanks for proposing this change! As someone working with RTL languages, I can confirm that separating RTL styles into dedicated .rtl.css files makes a big difference in terms of maintainability and performance. It keeps the main CSS clean and avoids unnecessary bloat, and only loads what's needed for RTL languages, which improves both performance and load times. I fully support merging this PR into the DNN core. Proper RTL support is a practical improvement for many projects, and this solution seems like the right way forward. |
|
Can we get some examples of what such .rtl.css file would look like to compare. |
|
Can we get some example of what such .rtl.css file would look like to compare |
I'd like to point out that when it comes to RTL and LTR support, there are several CSS properties that are heavily affected, not just direction. Properties like margin, padding, border, left, right, float, text-align, and even more advanced things like animations or transforms that use X-axis positioning all require specific handling for RTL. For example, simply setting direction: rtl does not solve issues when you explicitly use right, left, or set margin-left/margin-right directly in your CSS. It's also important to note that this is not just a CSS concern. In large projects like DNN, we often need to adjust JavaScript files as well—since many scripts directly manipulate or read CSS properties (like .css('left', ...), or relying on DOM order, or reading directionality for drag-and-drop, sliders, etc.). This means that for proper RTL support, we often have to maintain separate .rtl.css (and sometimes even .rtl.js) files. In our experience forking and customizing DNN over many years, this has proven to be the only robust solution for true RTL support. To give an example: All of the contributors involved in this discussion and this effort to bring RTL support into the DNN core have over a decade of hands-on DNN development experience. This solution is the result of many years of real-world challenges and hard-earned lessons from working with both LTR and RTL sites. |
|
That is exactly why CSS has many logical properties that don't use left-right or even top-bottom. https://www.w3.org/TR/css-logical-1/ I for one would prefer an effort in modernizing our existing css and having single files to maintain collectively than loading different files based only on text direction... |
You are absolutely right that logical properties can simplify CSS for multilingual and bidirectional support, and I agree that this is the modern approach going forward. However, the reality is that fully converting a large codebase like DNN to use only logical properties would require a massive refactor. This is not something that can be realistically achieved in the short term—it could easily take several major releases, if not more than ten future versions, before the entire platform could be migrated. Meanwhile, those of us who have been loyal DNN users and contributors for over 15 years have to maintain real production sites with full RTL support. In practice, we simply cannot wait years for such a migration to complete. That is why we (and many in the community) have been forced to maintain separate forks or parallel RTL solutions—just to keep our projects functional and up-to-date. So while I agree with the direction of modernizing with logical properties, it’s important to recognize that this is a very long-term plan. Until then, forking and maintaining .rtl files remains a practical necessity for those supporting RTL languages in real DNN deployments. |
|
At this stage, we do not intend to add any files to the DNN core. Right now, our only requirement is to have the capability to load a .rtl.css file if it exists. In fact, we have no plans to add any new files to this repository at this point. We can discuss converting and adding RTL-specific CSS code in more detail in a future pull request. Our primary need is to enable RTL support, considering the requirements of the user community. We have clearly identified this need, and therefore, it is necessary to add such capabilities. If you need further insights, you can take a look at our main repository, which is a fork of this one, to see the changes and understand what requirements exist. At this stage, we do not intend to apply all of those changes; we just want the essential needs to be considered. |
|
I think if this done in addition to the above linked change we will see a duplicated behavior, and i believe ONLY the one in the CLient Dependency project is needed. This code will take MyFile.css and turn it into MyFile.rtl.css if that exists. Then the Client Dependency code would see it ending with ".css" and make it "MyFile.rtl.rtl.css" but the file check would prevent he change, but it adds an always failing File.Exist check. |
|
@mitchelsellers Due to numerous requests from our users, we decided to submit this PR to resolve the concerns of users who use right-to-left languages. |
This change adds functionality to check if the current culture is right-to-left (RTL) and replace the CSS file with its corresponding .rtl.css version if it exists.
This approach allows RTL-specific styles to be kept in separate CSS files rather than merging them into the main CSS, which:
Prevents bloating the default CSS files with RTL overrides
Improves site performance by loading only necessary styles
Keeps RTL styles modular and easier to maintain
In summary, it optimises loading for RTL cultures by using dedicated .rtl.css files when available.