Атрибут dirname тега <textarea> — напрямок тексту на сервер

<form action="/demo" method="get">
    <label>Пояснення:
        <textarea name="explanation" dirname="explanation.dir">نص عربي</textarea>
    </label>
    <button>Надіслати</button>
</form>

HTML

<form action="#" class="anketa">
  <p class="head">Три однакові поля з dirname — різна лише напрямленість</p>

  <label class="pole">
    <span class="nazva">1. Без dir (успадкована ltr)</span>
    <textarea name="vidguk1" dirname="vidguk1.dir" rows="2">Дуже смачна кава</textarea>
  </label>

  <label class="pole">
    <span class="nazva">2. dir="rtl" — задано вручну</span>
    <textarea name="vidguk2" dirname="vidguk2.dir" dir="rtl" rows="2">شكرا لك</textarea>
  </label>

  <label class="pole">
    <span class="nazva">3. dir="auto" — переглядач визначає сам. Зітріть текст і
      наберіть щось арабською чи івритом: підпис під полем перемкнеться</span>
    <textarea name="vidguk3" dirname="vidguk3.dir" dir="auto" rows="2">Наберіть тут</textarea>
  </label>

  <p class="note">Значок біля кожного поля малює правило
    label:has(textarea:dir(rtl)) — тобто це та сама напрямленість, яку переглядач
    покладе в поле name.dir при надсиланні.</p>
</form>

<p class="head">Що піде на сервер від цієї форми</p>
<table>
  <tr><th scope="col">Поле</th><th scope="col">Що надсилається</th></tr>
  <tr><td>1</td><td>vidguk1=Дуже+смачна+кава&amp;vidguk1.dir=ltr</td></tr>
  <tr><td>2</td><td>vidguk2=…&amp;vidguk2.dir=rtl</td></tr>
  <tr><td>3</td><td>vidguk3=…&amp;vidguk3.dir=ltr або rtl — залежно від набраного</td></tr>
</table>
<p class="note">Пара «значення + напрямленість» іде поспіль, одразу після самого
   поля. У рамці прикладу форми не надсилаються, тому таблиця показує те, що
   надіслав би справжній переглядач.</p>

CSS

.head {
    margin: 18px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.anketa {
    max-width: 560px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.anketa .head {
    margin-top: 0;
}

.pole {
    display: block;
    margin-bottom: 12px;
}

.nazva {
    display: block;
    margin-bottom: 3px;
    font-size: .9em;
}

textarea {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    font: inherit;
}

.pole::after {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 4px;
    font: 600 13px/1.6 ui-monospace, monospace;
}

.pole:has(textarea:dir(ltr))::after {
    content: "напрямленість ltr → піде .dir=ltr";
    background: #eef3fb;
    color: #1b4f9c;
}

.pole:has(textarea:dir(rtl))::after {
    content: "напрямленість rtl → піде .dir=rtl";
    background: #fff6d8;
    color: #8a6100;
}

table {
    width: 100%;
    max-width: 560px;
    border-collapse: collapse;
}

td,
th {
    padding: 5px 10px;
    border: 1px solid #b9c6d8;
    text-align: left;
    font-size: .9em;
}

th {
    background: #eef3fb;
}

td:last-child {
    font-family: ui-monospace, monospace;
}

.note {
    max-width: 560px;
    margin: 8px 0 0;
    color: #5a6472;
    font-size: .9em;
}