Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : writing-mode

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут -ms-writing-mode | Свойство writingMode

Задает направление символов в строке и порядок следования самих строк.

Синтаксис

HTML { -ms-writing-mode : sFlow }
Скрипты [ sFlow = ] object.style.writingMode[ = v ]

Используемые значения

sFlow
Строка, которая может определять и принимать одно из следующих значений:
lr-tb
Left-right, top-bottom. Значение по умолчанию. Текст следует горизонтально слева направо и сверху вниз. Следующая строка располагается ниже предыдущей. Все символы (глифы) располагаются вертикально. Этот вариант используется для большинства систем записи.
rl-tb
Right-left, top-bottom. Текст следует горизонтально справа налево и сверху вниз. Следующая строка располагается ниже предыдущей. Все символы (глифы) располагаются вертикально. Используется для следующих языков: арабский, иврит, тана (Thaana - мальдивский язык) и сирийский.
tb-rl
Top-bottom, right-left. Текст следует вертикально сверху вниз и справа налево. Следующая строка располагается слева от предыдущей. Широкие символы, располагаются вертикально, остальные, в том числе латинские и кана, повернуты на 90 градусов по часовой стрелке. Используется для восточно-азиатских языков.
bt-rl
Bottom-top, right-left. Текст следует вертикально снизу вверх и справа налево. Следующая строка располагается слева от предыдущей. Широкие символы, располагаются вертикально, остальные, в том числе латинские и кана, повернуты на 90 градусов по часовой стрелке. Используется для восточно-азиатских языков.
tb-lr
Только в Internet Explorer 8.0. Top-bottom, left-right. Текст следует вертикально сверху вниз и слева направо. Следующая строка располагается справа от предыдущей.
bt-lr
Только в Internet Explorer 8.0. Bottom-top, left-right. Текст следует вертикально снизу вверх и слева направо.
lr-bt
Только в Internet Explorer 8.0. Left-right, bottom-top. Текст следует горизонтально слева направо и снизу вверх. Следующая строка располагается выше предыдущей.
rl-bt
Только в Internet Explorer 8.0. Right-left, bottom-top. Текст следует горизонтально справа налево и снизу вверх.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является lr-tb. Атрибут Каскадных таблиц стилей (CSS) наследуется для всех объектов со следующими исключениями: BUTTON, CAPTION, INPUT, INPUT type=button, INPUT type=file, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, OPTION, TEXTAREA.

Замечания

writing-mode

Атрибут -ms-writing-mode для Internet Explorer 8 - это расширение CSS и может использоваться также как writing-mode в режиме IE8.

Данное свойство не аккумулируется. То есть, если для родительского элемента установлено значение tb-rl для свойства writingMode, то установка значения tb-rl для наследующего элемента не заставит этот элемент повернуться.

У элемента есть свое собственное размещение, если установленное для него значение свойства writingMode отлично от значения, установленное для его родительского элемента. Если для элемента установлено изменение направления следования текста, то максимальное логическое требование высоты (высота в системе координат этого элемента) строго определено в зависимости от доступного пространства (размер ширины) в системе координат родительского элемента. Основываясь на этой информации, с помощью логической ширины (ширина в системе координат элемента-наследника) рассчитывается максимальное требование высоты. В зависимости от пространства, которое необходимо элементу-наследнику, действительная логическая высота родительского элемента может быть несколько меньше, чем максимальное логическое требование высоты.

Если вы используете элементы, для которых установлены разные значения свойства writingMode, то вам надо очень внимательно следить за размещением этих элементов, задавая каждому из них фиксированные размеры.

В Internet Explorer 7.0 значения rl-tb и bt-rl доступны для свойства writingMode.

В Internet Explorer 7.0 для свойства writingMode элемента body можно задать только два значения: lr-tb и rl-tb.

Internet Explorer 8.0. До того момента, пока консорциум W3C не включил writingMode в официальную спецификацию, это свойство можно использовать с помощью следующего кода:

    .clsHorizLR { -ms-writing-mode:lr-tb }
    .clsHorizRL { -ms-writing-mode:rl-tb }
    .clsVertTB  { -ms-writing-mode:tb-rl }
    .clsVertBT  { -ms-writing-mode:bt-rl }

Примеры

В примере показано как с помощью свойства writingMode встроить горизонтальный текст в вертикальный.

<html><head><style>
    .clsHorizLR { writing-mode:lr-tb }
    .clsHorizRL { writing-mode:rl-tb }
    .clsVertTB  { writing-mode:tb-rl }
    .clsVertBT  { writing-mode:bt-rl }
</style></head><body>
<h1>writing-mode Attribute</h1>

<p>Этот пример показывает как использовать атрибут <b>writing-mode</b>для отображения горизонтального текста (<span>lr-tb</span>) 
внутри вертикального текста (<span>tb-rl</span>).</p>
<p>Следующий <b>div</b> элемент имеет значение tb-rl для <b>writing-mode</b> и содержит текст, а также элементы-наследники <b>span</b>. 
Текст следует попеременно горизонтально и вертикально. Обратите внимание на эффект использования элемента <b>BR</b> после второго абзаца вертикального текста.</p>

<div style="writing-mode:tb-rl">Первый абзац вертикального текста<span class="clsHorizLR">Первый абзац горизонтального текста</span>
Второй абзац вертикального текста с переносом строки<BR><span style="writing-mode:lr-tb">Второй абзац горизонтального текста</span>
Третий абзац вертикального текста<span class="clsHorizLR">Третий абзац горизонтального текста</span>
</div><p>В этом примере показывается как использовать новый атрибут <b>writing-mode</b> для отображения горизонтального текста (<span>rl-tb</span>).<div class="clsHorizRL">Четвертый абзац горизонтального текста</div><p>В этом примере показывается как использовать новый атрибут <b>writing-mode</b> для отображения вертикального текста (<span>bt-rl</span>).<div class="clsVertBT">Четвертый абзац вертикального текста</div>

</div></body></html>

Стандарты

Это свойство описано в Дополнении Microsoft к Cascading Style Sheets (CSS)

Ссылки на источники

https://msdn.microsoft.com/en-us/library/ms531187(VS.85).aspx

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования