Атрибут dir у HTML — напрямок тексту
Задає напрямок і відображення тексту - зліва направо або справа наліво.
Застосовається до тегів :<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>
Загальний опис
автор: NagarD
Синтаксис
<p dir="ltr|rtl">Атрибут dir може отримувати 2 значень:
-
ltr -
Текст відображається як зазвичай — зліва направо.
автор: с3с -
rtl -
Текст інвертується і відображається справа наліво. Іншими словами, останню літеру в реченні браузер покаже першою, і навпаки, першу букву в тексті — останньою.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | ≤15 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Приклад використання тегу dir
HTML
<p>Вибери потрібне значення для <code>dir</code>:
<select id="form">
<option value="ltr" name="value">ltr</option>
<option value="rtl" name="value">rtl</option>
</select>
</p>
<hr>
<p id="dir">Український веб-довідник. Веб-довідник створено, щоб допомогти Вам здобути нові знання, а також ефективніше використовувати вже здобуті.</p>
<div id="dir1">2 3 4 5 6 7 8 9</div>CSS
#text{
color:#ff0000;
font-size:20px;
}JS
var wrapper = document.getElementById('dir');
var wrapper1 = document.getElementById('dir1');
var form = document.getElementById('form');
var textArray = { 'ltr': 'З ліва на право ',
'rtl': 'З прова на ліво' };
form.onchange = function () {
for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
if (form.options[i].selected == true) {
wrapper.dir = form.options[i].value;
wrapper1.dir = form.options[i].value;
}
}window.CP.exitedLoop(0);
};
//# sourceURL=pen.jsОбидва абзаци мають однаковий текст і різний dir. Видно і зсув до правого краю, і зворотний порядок чисел, і переїзд маркера списку. Третій абзац із dir="auto" бере напрямок із першої літери.
HTML
<p dir="ltr">Напрямок ltr: рядок починається ліворуч. 1 2 3 4 5</p>
<p dir="rtl">Напрямок rtl: рядок починається праворуч. 1 2 3 4 5</p>
<p dir="auto">مرحبا — тут dir="auto", і напрямок узято з першої літери.</p>
<ul dir="rtl">
<li>Маркер списку теж переїхав на інший бік</li>
</ul>CSS
p { border: 1px solid #ccc; padding: 8px; margin: 8px 0; }
ul { border: 1px solid #ccc; padding: 8px 32px; }Апростий приклад використання тегу dir
<p dir="ltr">1 2 3 4 5 6 7 8 9</p>
<p dir="rtl">1 2 3 4 5 6 7 8 9</p>Коментарі
Коментарів ще немає — будьте першим!