html.okpython.net
Основы создания сайтов
CSS :: Свойство direction
css-свойство direction (от англ. direction – направление) устанавливает направление письма и выравнивание текста, направление расположения колонок в таблицах, а также расположение полос прокрутки в блочных элементах.
При использовании свойства direction со встроенными элементами значение свойства unicode-bidi должно быть задано как embed или override.
Характеристики
- Значение по умолчанию: ltr.
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: нет.
- JavaScript: object.style.direction="value".
Синтаксис
direction: ltr | rtl
Значения
- ltr (от англ. from left to right – слева направо) основное направление устанавливается слева направо.
- rtl (от англ. from right to left – справа налево) основное направление устанавливается справа налево.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-writing-modes-3/#propdef-direction
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/direction
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ width: 300px; height: 100px; margin: 2em; border: 1px solid; white-space: nowrap; overflow: auto; } .dir_ltr{ direction: ltr; } .dir_rtl{ direction: rtl; } </style> </head> <body> <div class="dir_ltr"> direction: ltr direction: ltr direction: ltr direction: ltr<br> direction: ltr direction: ltr direction: ltr direction: ltr<br> direction: ltr direction: ltr direction: ltr direction: ltr<br> direction: ltr direction: ltr direction: ltr direction: ltr<br> direction: ltr direction: ltr direction: ltr direction: ltr<br> direction: ltr direction: ltr direction: ltr direction: ltr<br> direction: ltr direction: ltr </div> <div class="dir_rtl"> direction: rtl direction: rtl direction: rtl direction: rtl<br> direction: rtl direction: rtl direction: rtl direction: rtl<br> direction: rtl direction: rtl direction: rtl direction: rtl<br> direction: rtl direction: rtl direction: rtl direction: rtl<br> direction: rtl direction: rtl direction: rtl direction: rtl<br> direction: rtl direction: rtl direction: rtl direction: rtl<br> direction: rtl direction: rtl </div> </body> </html>
Пример №1
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <style> table{ border-collapse: collapse; } table, td{ border: 1px solid; } .dir_ltr{ direction: ltr; } .dir_rtl{ direction: rtl; } </style> </head> <body> <table class="dir_ltr"> <tr> <td>Ячейка 1.1</td> <td>Ячейка 1.2</td> </tr> <tr class="dir_rtl"> <td>Ячейка 2.1</td> <td>Ячейка 2.2</td> </tr> </table> <table class="dir_rtl"> <tr> <td>Ячейка 1.1</td> <td>Ячейка 1.2</td> </tr> <tr class="dir_rtl"> <td>Ячейка 2.1</td> <td>Ячейка 2.2</td> </tr> </table> </body> </html>
Пример №2