With a global audience that includes over 800 million people speaking right-to-left (RTL) languages, catering to RTL readability is crucial for international web apps. The eslint-plugin-rtl-friendly is a linter that helps you write RTL-friendly code.
You read this text from left to right.However, texts in RTL languages are read from right to left.
هذا النص يُقرأ من اليمين إلى اليسار.
Notice how GitHub's markdown aligns the text to the right. It's not a bug; that's how RTL languages are read.
Let's imagine you're writing code using the old way, and you're, for example, creating a button with text and an icon:
return (
<button>
<CheckIcon className="mr-2" />
<span>{getTranslation('buttons.done')}</span>
</button>
);The previous code will work fine for LTR languages, but for RTL languages, the icon will be on the right side of the text, just like the margin (mr-2), which means there won't be any space between the icon and the text and extra space at the beggining of the button.
LTR: [{icon} {text}]
RTL: [{text}{icon} ]The trick here is to use me-2 instead of mr-2. me-2 stands for margin-inline-end, which means right in LTR languages and left in RTL languages. So, the code should be:
return (
<button>
<CheckIcon className="me-2" />
<span>{getTranslation('buttons.done')}</span>
</button>
);Up to this point, this plugin only reports a warning (with auto-fix) when using tailwindcss physical properties like pl-*, mr-*, text-left, left-*, border-l-*, rounded-r-*, etc. Instead, you should use their logical properties like ps-*, ms-*, text-start, start-*, border-start-*, rounded-start-*, etc. You can read more about logical properties or tailwindcss logical properties support or our documentation.
- (ar) Arabic - العربية
- (arc) Aramaic - ܐܪܡܝܐ
- (ckb) Sorani Kurdish - کوردی
- (dv) Divehi - ދިވެހިބަސް
- (fa) Persian - فارسی
- (ha) Hausa - هَوُسَ
- (he) Hebrew - עברית
- (khw) Khowar - کھوار
- (ks) Kashmiri - कॉशुर
- (ps) Pashto - پښتو
- (sd) Sindhi - سنڌي
- (ur) Urdu - اردو
- (uz-Af) Uzbeki Afghanistan - ازبیک
- (yi) Yiddish - ייִדיש
The orange areas on the map below show where RTL languages are spoken.
# using pnpm
$ pnpm add -D eslint eslint-plugin-rtl-friendly
# using yarn
$ yarn add -D eslint eslint-plugin-rtl-friendly
# using npm
$ npm install --save-dev eslint eslint-plugin-rtl-friendly- ESLint
- Tailwindcss V3.3.0 or higher
Write your config file such as .eslintrc.js.
module.exports = {
// ...
plugins: ['rtl-friendly'],
// extend our recommended config
extends: ['plugin:rtl-friendly/recommended'],
// or add the rules you want to use
rules: {
'rtl-friendly/no-physical-properties': 'warn',
},
// ...
};See next.js example
See also Configuring ESLint.
rtl-friendly/recommended... enables the recommended rules.
| Rule ID | Description | |
|---|---|---|
| rtl-friendly/no-physical-properties | Encourage the use of RTL-friendly styles | ⭐️✒️ |
Welcome your contribution!
- Tailwindcss physical properties to logical properties
- Add support for advanced className like
cn('pl-2', {...}). - Strict
<html>to have dir attribute depending on a codition or whatever detecting the language - Strict
<code>to havedir="ltr"to override the parent's direction - in the future maybe throw a warning that
letter-spacingdoesn't work well with RTL languages to disable it in rtlrtl:***(NOT SURE) - text-opacity like the previous one
- Some resources