Skip to content

getHTMLTextDir.md

Latest commit

 

History

History
85 lines (66 loc) · 2.26 KB

getHTMLTextDir.md

File metadata and controls

85 lines (66 loc) · 2.26 KB
createdAt 2025-08-23
updatedAt 2025-08-23
title getHTMLTextDir Function Documentation | intlayer
description See how to use the getHTMLTextDir function for intlayer package
keywords
getHTMLTextDir
translation
Intlayer
intlayer
Internationalization
Documentation
Next.js
JavaScript
React
slugs
doc
packages
intlayer
getHTMLTextDir
history
version date changes
5.5.10
2025-06-29
Init history

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)

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 recognized.

Example Usage

Determining Text Direction

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' when locale is undefined.

  • Unrecognized Locale:

    • For unrecognized locales, the function defaults to 'auto'.

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.

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.