dirname

Submit the text directionality (ltr or rtl) of a form field alongside its value. Essential for multilingual applications that need to render user-generated content correctly.

Overview

The dirname attribute tells the browser to submit an additional form field containing the text directionality (ltr or rtl) of the input's content. This is one of the least-known HTML attributes, but it solves a real problem: when storing and redisplaying user-generated text, the server needs to know the text direction to render it correctly.

Applies to: <input> (text-like types), <textarea>

Values

Attribute	Value	Submitted Field
`dirname`	Any name (conventionally `fieldname.dir`)	Contains `ltr` or `rtl`

The value of dirname becomes the name of the extra form field. The convention is to append .dir to the original field name, but any name works.

Basic Usage

Add dirname to an input and the browser automatically submits the text direction alongside the value.

<form method="post" action="/submit" class="stacked"> <label for="comment">Comment</label> <input type="text" id="comment" name="comment" dirname="comment.dir" /> <button type="submit">Submit</button> </form>

<form method="post" action="/submit" class="stacked"> <label for="review">Write your review</label> <textarea id="review" name="review" dirname="review.dir" rows="4"></textarea> <button type="submit">Submit</button> </form>

Automatic Direction Detection

Combine dirname with dir="auto" to let the browser detect the text direction from the content the user types. This is the most powerful combination for multilingual forms.

<form method="post" action="/submit" class="stacked"> <label for="message">Message (type in any language)</label> <input type="text" id="message" name="message" dirname="message.dir" dir="auto" placeholder="English or Arabic..." /> <button type="submit">Submit</button> </form>

Server-Side Usage

The server receives the direction value and can use it when rendering the stored content back to users. This ensures that RTL text is displayed correctly even on LTR pages.

<p dir="{{ comment_dir }}">{{ comment }}</p>

Multiple Fields

Each field with dirname submits its own direction value. A form with three dirname fields submits up to six name/value pairs.

<form method="post" action="/submit" class="stacked"> <label for="title">Title</label> <input type="text" id="title" name="title" dirname="title.dir" dir="auto" /> <label for="body">Body</label> <textarea id="body" name="body" dirname="body.dir" dir="auto" rows="5"></textarea> <label for="author">Author name</label> <input type="text" id="author" name="author" dirname="author.dir" dir="auto" /> <button type="submit">Publish</button> </form>

Accessibility

The dirname attribute itself has no direct impact on accessibility. It is a data submission mechanism.
The real accessibility benefit is downstream: when the server uses the submitted direction to set dir on rendered content, RTL users see their text displayed correctly.
Pair dirname with dir="auto" on the input so RTL users see their text flowing correctly as they type.

Limitations

Only works on <input> and <textarea>. It is not available on <select>, <contenteditable>, or other form-like controls.
The direction reported is for the entire field value. If the user types mixed-direction text (e.g., Arabic with embedded English), only the overall direction is submitted.
Very few developers know about dirname. Most multilingual applications detect text direction on the server or client with JavaScript instead, even though dirname is simpler.
The extra field name must not conflict with other form field names. Using the .dir suffix convention avoids this.