direction призначений для сайтів, у яких має значення напрямок тексту. Наприклад, під час використання арабського алфавіту читання відбувається праворуч наліво. відображення тексту в блоці;
Для використання з вбудованими елементами, значення властивості unicode-bidi має бути задано як embed або override.
Коротка інформація
| Значення за замовчуванням | ltr |
|---|---|
| Успадковується | Так |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
<code>direction: ltr | rtl
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- ltr
- Встановлює напрямок зліва направо.
- rtl
- Задає напрямок праворуч наліво.
Пісочниця
div { direction: <span class="playground-active">{{ playgroundValue }}</span>; }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>direction</title> <style> div.rtl { direction: rtl; /* Напрямок */
width: 200px; /* Ширина блоку */
height: 150px; /* Висота блоку */
overflow: scroll; /* Смуга прокручування */
text-align: left; /* Вирівнювання по лівому краю */
padding: 5px; /* Поля навколо тексту */
border: 1px solid #000; /* Параметри рамки */
}
</style>
</head>
<body> <div class="rtl">Велосипед вже винайшли, різні прийоми верстки теж. Так що більше знайомся зі світовим досвідом щодо верстки і тобі не доведеться витрачати час на розробку того, що всім давно відомо.</div>
</body>
</html>Результат цього прикладу показаний на мал. 1. Зверніть увагу на положення точки у реченні, а також на те, що смуга прокручування відображається ліворуч.
Мал. 1. Результат використання direction
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>direction</title> <style> table { direction: rtl; /* Колонки йдуть праворуч наліво */
width: 100%; /* Ширина таблиці */
border-spacing: 0; /* Забираємо простір між осередками */
}
</style>
</head>
<body> <table border="1"> <tr> <td> </td><td>1999</td><td>2000</td> <td>2001</td><td>2002</td><td>2003</td>
</tr> <tr> <td>Нафта</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td>
</tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td>
</tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td>
</tr>
</table>
</body>
</html>Результат цього прикладу показаний на мал. 2. Колонки таблиці відображаються праворуч наліво.
Мал. 2. Застосування direction до таблиці
Об'єктна модель
Об'єкт.style.direction
Примітка
При додаванні властивості direction зі значенням rtl до блоку зі смугою прокручування (наприклад, <textarea>), браузер Internet Explorer і Firefox відображають скролінг зліва, а Opera і Safari — справа.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Writing Modes Level 3 | Рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation ( Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 5.5 | 12 | 2 | 9.2 | 1.3 | 1 |
| 1 | 1 | 8 | 3.1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі припустимі значення ня діють або властивість застосовується не до всіх елементів, які вказані у специфікації.
Кількість вказує версію браузера, починаючи з якої властивість підтримується.