I saw related introductions very early when playing with Ionic but didn’t understand them. Recently, I saw related articles and learned about it to fill the knowledge gap.
Some RTL Sites
The websites we usually see are LTR (Left-To-Right), but there are actually some sites that are RTL (Right-To-Left), such as these:
They feel awkward, but they do exist. Because in the Middle East, languages like Arabic and Hebrew are read and used from right to left.
Due to content limitations in development, like me, there’s a low probability of encountering these layout implementations, but understanding them is still beneficial for development. Moreover, if we need to develop software that supports RTL layout, we won’t be without ideas.
RTL is primarily a UI issue that can’t avoid HTML/CSS. Fortunately, these technologies themselves support RTL.
HTML RTL
The global attribute
diris an enumerated attribute indicating the direction of text within an element.
Compatibility
IE is always so out of the ordinary, but fortunately, IE compatibility is not as crucial today, thanks to the Chromium-based Edge taking over.
CSS RTL
The
directionCSS property sets the direction of text and table column horizontal overflow.rtlmeans right-to-left (like Hebrew or Arabic), andltrmeans left-to-right (like English and most languages).CSS
directionhas the same effect as HTML’sdirbut with higher priority.
Compatibility
Some CSS Helper Tools
Using HTML/CSS can solve support issues to some extent, but sometimes systematic solutions are needed. For example, the following library can be used, which essentially involves batch processing and replacement of CSS.
https://github.com/MohammadYounes/rtlcss
React RTL Support?
React itself does not provide this support, but you can support it yourself or use third-party extensions, such as reading lang and dir values, controlling the rendering order of elements, and rendering different icons.
Ant Design
Upon investigation, I found that Ant Design has built-in RTL support, which is quite thoughtful.
For details, see here
Final Thoughts
Mark. Specific practice can only be continuously improved and confirmed in projects.
