Skip to content

Commit

Permalink
Address PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
amannn committed Jul 10, 2023
1 parent 8abf5be commit 5a0f0b5
Showing 1 changed file with 14 additions and 4 deletions.
18 changes: 14 additions & 4 deletions docs/pages/docs/usage/messages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -283,22 +283,32 @@ The value of a raw message can be any valid JSON value: strings, booleans, objec

Languages such as Arabic, Hebrew and Persian use [right-to-left script](https://en.wikipedia.org/wiki/Right-to-left_script) (often abbreviated as RTL). For these languages, writing begins on the right side of the page and continues to the left.

**Example:**

<div dir="rtl" className="text-right mt-6">

```
النص في اللغة العربية _مثلا_ يُقرأ من اليمين لليسار
```

</div>

In addition to providing translated messages, proper RTL localization requires:

1. Providing [the `dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the document
2. Support layout mirroring, e.g. by using [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
3. Support element mirroring, e.g. by customizing icons
2. Layout mirroring, e.g. by using [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
3. Element mirroring, e.g. by customizing icons

To handle these cases in your components, you can set up a reusable hook:

```tsx filename="useTextDirection.tsx"
import detectRtl from 'rtl-detect';
import {isRtlLang} from 'rtl-detect';
import {useLocale} from 'next-intl';

export default function useTextDirection(locale) {
const defaultLocale = useLocale();
if (!locale) locale = defaultLocale;
return detectRtl(locale) ? 'rtl' : 'ltr';
return isRtlLang(locale) ? 'rtl' : 'ltr';
}
```

Expand Down

0 comments on commit 5a0f0b5

Please sign in to comment.