--- category: Browser --- # useTextDirection Reactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text. ## Usage ```ts import { useTextDirection } from '@vueuse/core'; const dir = useTextDirection(); // Ref<'ltr' | 'rtl' | 'auto'> ``` By default, it returns `rtl` direction when dir `rtl` is applied to the `html` tag, for example: ```html ... ... ``` ## Options ```ts import { useTextDirection } from '@vueuse/core'; const mode = useTextDirection({ selector: 'body', }); // Ref<'ltr' | 'rtl' | 'auto'> ``` ## Type Declarations ```ts export type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto'; export interface UseTextDirectionOptions extends ConfigurableDocument { /** * CSS Selector for the target element applying to * * @default 'html' */ selector?: string; /** * Observe `document.querySelector(selector)` changes using MutationObserve * * @default false */ observe?: boolean; /** * Initial value * * @default 'ltr' */ initialValue?: UseTextDirectionValue; } /** * Reactive dir of the element's text. * * @see https://vueuse.org/useTextDirection * * @__NO_SIDE_EFFECTS__ */ export declare function useTextDirection( options?: UseTextDirectionOptions, ): WritableComputedRef; ```