Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
dirname on input
<!-- Submits both "comment=Hello" and "comment.dir=ltr" --><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>dirname on textarea
<!-- Also works on textarea --><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.
Auto direction detection
<!-- Combine with dir="auto" for automatic direction detection --><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> <!-- If user types "مرحبا", submits: message=مرحبا&message.dir=rtl --><!-- If user types "Hello", submits: message=Hello&message.dir=ltr -->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.
Server-side rendering
<!-- The server receives two fields per input --><!-- For a POST request, the body might be: --><!-- comment=مرحبا+بالعالم&comment.dir=rtl --> <!-- Server-side rendering (pseudocode): --><p dir="${comment_dir}">${comment}</p> <!-- Without dirname, you'd have to guess the direction or detect it server-side — both are unreliable -->Multiple Fields
Each field with dirname submits its own direction value. A form with three dirname fields submits up to six name/value pairs.
Multiple dirname fields
<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> <!-- Submits up to 6 fields: title, title.dir, body, body.dir, author, author.dir -->Accessibility
- The
dirnameattribute 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
diron rendered content, RTL users see their text displayed correctly. - Pair
dirnamewithdir="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 thoughdirnameis simpler. - The extra field name must not conflict with other form field names. Using the
.dirsuffix convention avoids this.