diff --git a/client/src/html.tsx b/client/src/html.tsx index c4436fb0a3f..cef622ec6be 100644 --- a/client/src/html.tsx +++ b/client/src/html.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { clientLocale } from '../../config/env.json'; +import { rtlLangs } from '../../config/i18n'; interface HTMLProps { body: string; @@ -17,8 +19,16 @@ export default function HTML({ postBodyComponents, preBodyComponents }: HTMLProps): JSX.Element { + const rtlDirectionAttribute = { dir: 'rtl' }; + const isRtlLanguage: boolean = rtlLangs.includes(clientLocale); + return ( - + diff --git a/config/i18n.ts b/config/i18n.ts index 0d7daae0882..e7d8203aab1 100644 --- a/config/i18n.ts +++ b/config/i18n.ts @@ -185,8 +185,9 @@ export const i18nextCodes = { arabic: 'ar' }; -// These are for the language selector dropdown menu in the footer /* eslint-disable @typescript-eslint/naming-convention */ + +// These are for the language selector dropdown menu in the footer export enum LangNames { english = 'English', espanol = 'EspaƱol', @@ -223,7 +224,12 @@ export enum LangCodes { */ export const hiddenLangs = ['arabic']; -// locale is sourced from a JSON file, so we use getLangCode and getLangName to +/** + * This array contains languages that use the RTL layouts. + */ +export const rtlLangs = ['arabic']; + +// locale is sourced from a JSON file, so we use getLangCode to // find the associated enum values export function getLangCode(locale: PropertyKey) { @@ -231,11 +237,6 @@ export function getLangCode(locale: PropertyKey) { throw new Error(`${String(locale)} is not a valid locale`); } -export function getLangName(locale: PropertyKey) { - if (isPropertyOf(LangNames, locale)) return LangNames[locale]; - throw new Error(`${String(locale)} is not a valid locale`); -} - function isPropertyOf( obj: Record, key: PropertyKey