--- 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 ```