Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
23-03-2016, 10:55
writing-mode
Рейтинг:
Категория: Справочник CSS
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+

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

Значение по умолчанию Нет
Наследуется Да
Применяется Ко всем элементам и генерируемому контенту
Процентная запись Неприменима
Ссылка на спецификацию http://dev.w3.org/csswg/css3-text-layout/#writing-mode

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает направление текста на странице. Свойство writing-mode является универсальным и позволяет одновременно задавать значения свойств direction и block-progression.

Синтаксис

writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr

Значения

lr-tb
Устанавливает направление текста слева направо.
rl-tb
Задает направление текста справа налево.
tb-rl
Текст располагается вертикально и выравнивается по верхнему и правому краю.
bt-rl
Текст располагается вертикально и выравнивается по нижнему и правому краю.
tb-lr
Текст располагается вертикально и выравнивается по верхнему и левому краю.
bt-lr
Текст располагается вертикально и выравнивается по нижнему и левому краю.

Влияние разных значений на положение текста в таблице показано на рис. 1.

 


Рис. 1. Положение текста при разных значениях writing-mode

В табл. 1 показаны значения свойств direction и block-progress, соответствующие значениям writing-mode, а также языки, где они

Табл. 1. Значения writing-mode
writing-mode direction block-progress Для каких языков
lr-tb ltr tb Романских, греческого, кириллических
rl-tb rtl tb Арабского, еврейских языков
tb-rl ltr rl Азиатских в вертикальном написании
bt-rl ltr rl Арабского, вставленного в азиатский документ
tb-lr ltr rl Монгольского
bt-lr rtl rl Арабского, вставленного в монгольский документ

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>writing-mode</title>
  <style>
   table { 
    border-collapse: collapse; 
    height: 350px; 
    width: 300px;
   }
   table td { 
    border: 1px solid #333;
    padding: 5px; 
   }
  </style>
 </head>
 <body> 
  <table cellspacing="0">
   <tr>
    <td style="writing-mode: lr-tb">Текст</td>
    <td style="writing-mode: rl-tb">Текст</td>
    <td style="writing-mode: tb-rl">Текст</td>
    <td style="writing-mode: bt-rl">Текст</td>
    <td style="writing-mode: tb-lr">Текст</td>
    <td style="writing-mode: bt-lr">Текст</td>
   </tr>
   <tr>
    <td>lr-tb</td>
    <td>rl-tb</td>
    <td>tb-rl</td>
    <td>bt-rl</td>
    <td>tb-lr</td>
    <td>bt-lr</td>
   </tr> 
  </table>
 </body>
</html>

Браузеры

Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl, Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Просмотров: 3 878
Комментариев: 0:   23-03-2016, 10:55
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме: