From 5a0f0b59198fac1647b5523d58ca128852e9df06 Mon Sep 17 00:00:00 2001 From: Jan Amann Date: Mon, 10 Jul 2023 17:23:05 +0200 Subject: [PATCH] Address PR feedback --- docs/pages/docs/usage/messages.mdx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/pages/docs/usage/messages.mdx b/docs/pages/docs/usage/messages.mdx index 47612585b..00a7b407f 100644 --- a/docs/pages/docs/usage/messages.mdx +++ b/docs/pages/docs/usage/messages.mdx @@ -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:** + +
+ +``` +النص في اللغة العربية _مثلا_ يُقرأ من اليمين لليسار +``` + +
+ 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'; } ```