Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
This doc is out of date, the base version has been updated on 23 August 2025.
Go to English docVersion History
- "Initial history"v5.5.1029/06/2025
The content of this page was translated using an AI.
See the last version of the original content in EnglishIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Documentation: getHTMLTextDir Function in intlayer
Description
The getHTMLTextDir function determines the text direction (ltr, rtl, or auto) based on the provided locale. It is designed to help developers set the dir attribute in HTML for proper text rendering.
Parameters
locale?: Locales- Description: The locale string (e.g.,
Locales.ENGLISH,Locales.ARABIC) used to determine the text direction. - Type:
Locales(optional)
- Description: The locale string (e.g.,
Returns
- Type:
Dir('ltr' | 'rtl' | 'auto') - Description: The text direction corresponding to the locale:
'ltr'for left-to-right languages.'rtl'for right-to-left languages.'auto'if the locale is not recognised.
Example Usage
Determining Text Direction
Copy the code to the clipboard
import { getHTMLTextDir } from "intlayer";
getHTMLTextDir(Locales.ENGLISH); // Output: "ltr"
getHTMLTextDir(Locales.FRENCH); // Output: "ltr"
getHTMLTextDir(Locales.ARABIC); // Output: "rtl"Edge Cases
No Locale Provided:
- The function returns
'auto'whenlocaleisundefined.
- The function returns
Unrecognised Locale:
- For unrecognised locales, the function defaults to
'auto'.
- For unrecognised locales, the function defaults to
Usage in Components:
The getHTMLTextDir function can be used to dynamically set the dir attribute in an HTML document for proper text rendering based on the locale.
Copy the code to the clipboard
import type { FC } from "react";
import { getHTMLTextDir, type Locales } from "intlayer";
export const HTMLLayout: FC<PropsWithChildren<{ locale: Locales }>> = ({
children,
locale,
}) => (
<html dir={getHTMLTextDir(locale)} locale={locale}>
<body>{children}</body>
</html>
);In the example above, the dir attribute is dynamically set based on the locale.