direction

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

Коротка інформація

CSS | CSS2
Значення за умовчанням | ltr
Наслідує | Так
Застосовується | До усіх елементів
Аналог HTML | <тег direction="ltr | rtl"">
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/visuren.html#propdef - direction

Опис

direction призначений для сайтів, в яких має значення напрям тексту. Наприклад, при використанні арабського алфавіту читання відбувається справа наліво.

Властивість direction досить універсально і управляє наступними можливостями:

- спосіб відображення тексту у блоці;
- порядок колонок в таблиці;
- позиція смуги прокрутки у блоці;
- положення останнього висячого рядка текстового блоку при text - align: justify.

Для використання зі вбудованими елементами, значення властивості unicode - bidi має бути задане як embed або override.

Синтаксис

direction: ltr | rtl | inherit

Значення

ltr Встановлює напрям зліва направо.

rtl Задає напрям справа наліво.

inherit Наслідує значення батька.

Приклад 1

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>direction</title>

<style type="text/css">

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. Зверніть увагу на положення точки в пропозиції, а також на те, що смуга прокрутки у браузері Internet Explorer відображається ліворуч.

Мал. 1. Результат використання direction у браузері Internet Explorer

Приклад 2

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>direction</title>

<style type="text/css">

TABLE {

direction: rtl; /* Колонок йдуть справа наліво */

width: 100%; /* Ширина таблиці */

}

</style>

</head>

<body>

<table cellspacing="0" border="1">

<tr>

<td>&nbsp;</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 до таблиці

Браузери

При додаванні властивості direction зі значенням rtl до блоку із смугою прокрутки (наприклад, <TEXTAREA>), браузер Internet Explorer, Firefox і Netscape відображають скролінг ліворуч, а Opera і Safari - справа.