1. Documentation
    2. Packages
    3. intlayer
    4. getHTMLTextDir

    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:

    typescript
    1import { getHTMLTextDir } from "intlayer"; 2 3getHTMLTextDir(Locales.ENGLISH); // Output: "ltr" 4getHTMLTextDir(Locales.FRENCH); // Output: "ltr" 5getHTMLTextDir(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.

    tsx
    1import { getHTMLTextDir } from "intlayer"; 2 3export const HTMLLayout = ({ children, locale }) => ( 4 <html dir={getHTMLTextDir(locale)} locale={locale}> 5 <body>{children}</body> 6 </html> 7);

    In the example above, the dir attribute is dynamically set based on the locale.

    If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

    GitHub link to the documentation

    In this page