writing-mode | WebReference
Устанавливает направление текста на странице — по горизонтали или вертикали.
Краткая информация
Значение по умолчанию | horizontal-tb |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам, за исключением ячеек и строк таблицы |
Анимируется | Нет |
Синтаксис
writing-mode: horizontal-tb | vertical-rl | vertical-lrСинтаксис
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.![]() | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- horizontal-tb
- Устанавливает направление текста по горизонтали слева направо и сверху вниз.
- vertical-rl
- Задаёт направление текста по вертикали сверху вниз и справа налево.
- vertical-lr
- Задаёт направление текста по вертикали сверху вниз и слева направо.
Песочница
Винни-Пух
Пятачок
Кролик
horizontal-tbvertical-rlvertical-lr
div { writing-mode: {{ playgroundValue }}; }
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>writing-mode</title> </head> <body> <table> <tbody> <tr> <th>horizontal-tb</th> <th>vertical-rl</th> <th>vertical-lr</th> </tr> <tr> <td><p>Образец текста</p></td> <td><p>Образец текста</p></td> <td><p>Образец текста</p></td> </tr> </tbody> </table> </body> </html>Объектная модель
Объект. style.writingMode
Примечание
Internet Explorer 6 поддерживает нестандартные значения lr-tb и tb-rl, Internet Explorer 7 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.Chrome до версии 48, Opera до версии 35, Safari и Android поддерживают свойство -webkit-writing-mode.
Спецификация
Спецификация | Статус |
---|---|
CSS Writing Modes Level 3 | Возможная рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
6 | 12 | 8 | 48 | 15 | 35 | 5.1 | 11 | 41 |
3 | 76 | 41 | 37 | 5 | 11 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Текст и шрифт
См. также
- text-orientation
- Направление флексбоксов
direction ⚡️ HTML и CSS с примерами кода
Свойство direction
предназначено для сайтов, в которых имеет значение направление текста.
Например, при использовании арабского алфавита чтение происходит справа налево.
Свойство direction
достаточно универсально и управляет следующими возможностями:
- способ отображения текста в блоке;
- порядок колонок в таблице;
- позиция полосы прокрутки в блоке;
- положение последней висячей строки текстового блока при
text-align: justify
.
Для использования со встроенными элементами, значение свойства unicode-bidi
должно быть задано как embed
или override
- direction
- glyph-orientation-horizontal
- text-combine-upright
- text-orientation
- unicode-bidi
- writing-mode
Синтаксис
/* Keyword values */ direction: ltr; direction: rtl; /* Global values */ direction: inherit; direction: initial; direction: unset;
Значения
ltr
- Устанавливает направление слева направо.
rtl
- Задаёт направление справа налево.
Примечание
При добавлении свойства direction
со значением rtl
к блоку с полосой прокрутки (например, <textarea>
), браузер Internet Explorer и Firefox отображают скроллинг слева, а Opera и Safari — справа.
Значение по-умолчанию:
direction: ltr;
Применяется ко всем элементам
Спецификации
- CSS Writing Modes Module Level 3
- CSS Level 2 (Revision 1)
Описание и примеры
Пример 1.
<!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> Велосипед уже изобрели, различные приемы верстки тоже. Так что больше знакомься с мировым опытом по части верстки и тебе не придется тратить время на разработку того, что всем давно известно. </div> </body> </html>
Пример 2.
<!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>
текстовая ориентация | Коддропы
Свойство text-orientation
определяет ориентацию символов в строке содержимого. Это относится только к вертикальным типографским режимам.
На восточноазиатских языках, таких как китайский или японский, можно писать как горизонтально, сверху вниз, так и вертикально, справа налево. Традиционный монгольский шрифт пишется вертикально слева направо. Несмотря на то, что направление потока блока является вертикальным, каждый отдельный глиф по умолчанию остается вертикальным.
Часто веб-страницы на восточноазиатских языках также содержат латинские буквы и цифры. Каждый символ Unicode по умолчанию имеет ориентацию, основанную на характеристиках их соответствующих систем письма, и страницы с символами из разных языков по-прежнему будут отображаться с правильной ориентацией.
Языки на основе латиницы при вертикальном отображении с цифрой write-mode
имеют глифы, отображаемые сбоку, что позволяет нормально читать встроенный текст, хотя страница повернута на 90 градусов по часовой стрелке. Однако мы можем заставить каждый символ отображаться вертикально с помощью свойства
text-orientation
.
Значения
- смешанные
- Это начальное значение. Символы шрифтов, которые являются только горизонтальными, будут набраны сбоку (повернуты на 90° по часовой стрелке), тогда как вертикальные шрифты будут набраны вертикально.
- вертикальный
- Весь текст будет набран вертикально, каждый символ будет иметь стандартную горизонтальную ориентацию.
- сбоку
- Весь текст будет набран сбоку (повернут на 90° по часовой стрелке), как если бы он был расположен горизонтально.
Примеры
Свойство text-orientation
влияет только на содержимое с вертикальным режимом письма. По умолчанию браузер уже отображает каждый символ в ориентации, характерной для соответствующих систем письма, но могут быть случаи, когда мы хотим изменить эту ориентацию. Например, размещение букв или цифр на основе латиницы вертикально, когда строки контента идут вбок.
Возьмем для примера разметку:
Художник и теоретик Барнетт Ньюман был одним из самых интеллектуальных художников Нью-Йоркской школы. В 1933 он баллотировался в мэры своего города по выписанному билету с культурной платформой и сохранял острое понимание таких современных ужасов, как нацизм и атомная бомба.
По умолчанию цифры 1933 будут отображаться сбоку, как и остальные символы, когда режим письма установлен на вертикальный, но мы можем сделать их вертикальными, изменив текстовая ориентация
значение диапазона.
.вертикальный текст { режим письма: вертикальный-rl; } .vertical-text span { ориентация текста: вертикальная; }
Live Demo
В следующем примере используется шрифт Bungee, специально разработанный для вертикального текста. Однако существует не так много шрифтов на основе латиницы, оптимизированных для вертикального отображения, поэтому может потребоваться настроить расстояние между символами с помощью свойства letter-spacing
. Учитывая, что такие макеты в основном предназначены для коротких строк отображаемого текста, усилия, необходимые для внесения этих корректировок, не должны быть слишком непреодолимыми.
Посмотреть эту демонстрацию на игровой площадке Codrops
Брубзер.
* означает, что требуется префикс.
- Поддерживается:
- Да
- Нет
- Частично
- Polyfill
Статистика с сайта caniuse.com
смешанные значения
и вертикального
поддерживаются, начиная с Chrome 48 и Firefox 41. Поддержка значения сбоку
поддерживается только в Firefox 44.
Дополнительная информация
- Режимы написания CSS Уровень 3
- Текстовая ориентация MDN
Автор Хуэй Цзин Чен. Последнее обновление сделано Маноэлой Илич 19 мая 2017 г. в 11:48.
У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.
CSS | Свойство text-orientation — GeeksforGeeks
Улучшить статью
Сохранить статью
- Последнее обновление: 04 июл, 2022
Улучшить статью
Сохранить статью
Свойство text-orientation в CSS используется для установки ориентации символа в строке. Это свойство полезно в вертикальных сценариях, например при создании вертикальных заголовков таблиц, определении имен строк и т. д.
Синтаксис:
ориентация текста: смешанная|вертикальная|боковая;
Атрибут:
- смешанный: Это значение используется для поворота символа текста на 90 градусов по часовой стрелке. Это значение по умолчанию.
Пример:
HTML
. > |
Вывод:
- в вертикальном положении: Это значение начинает текст с правой стороны экрана вниз.
Example:
html
|
Вывод:
- текст повернуть в сторону: 0 градусов по часовой стрелке.
Example:
html
|