html.okpython.net
Основы создания сайтов
CSS :: Свойство writing-mode
css-свойство writing-mode (от англ. writing mode – режим записи) устанавливает горизонтальное или вертикальное направление текста элемента.
Характеристики
- Значение по умолчанию: horizontal-tb.
- Применяется: ко всем элементам, за исключением ячеек и строк таблицы.
- Наследуется: да.
- Анимируется: нет.
- JavaScript: object.style.writingMode="value".
Синтаксис
writing-mode: horizontal-tb | vertical-rl | vertical-lr
Значения
- horizontal-tb – устанавливает горизонтальное направление текста слева направо с заполнением строками сверху вниз.
- vertical-rl – устанавливает вертикальное направление текста сверху вниз с заполнением строками справо налево.
- vertical-lr – устанавливает вертикальное направление текста сверху вниз с заполнением строками слева направо.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 250px; height: 250px; margin: 2em; } .p_1{ writing-mode: horizontal-tb; background-color: yellow; } .p_2{ writing-mode: vertical-rl; background-color: green; } .p_3{ writing-mode: vertical-lr; background-color: violet; } </style> </head> <body> <p class="p_1"> writing-mode: horizontal-tb writing-mode: horizontal-tb </p> <p class="p_2"> writing-mode: vertical-rl writing-mode: vertical-rl </p> <p class="p_3"> writing-mode: vertical-lr writing-mode: vertical-lr </p> </body> </html>
Пример №1