Направление текста (direction, writing-mode): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии упражнений вы попрактикуетесь в управлении направлением текста и режимом письма с помощью CSS свойств `direction` и `writing-mode`. Эти свойства позволяют изменять стандартное горизонтальное направление текста слева направо (LTR) на право налево (RTL), а также устанавливать вертикальное написание текста. Задания помогут вам понять, как эти свойства влияют на отображение текста и макет элементов на странице. Вы будете заполнять пропуски в CSS коде, чтобы добиться нужного визуального результата.

Список тем

Изменение направления текста на RTL

В этом задании есть параграф с текстом. Ваша задача — изменить направление текста внутри параграфа так, чтобы он отображался справа налево (RTL). Обратите внимание, как изменится положение точки в конце предложения.

CSS

.rtl-text {
  input1: input2;
  border: 1px dashed gray;
  padding: 10px;
}

                     .rtl-text {
  input1: input2;
  border: 1px dashed gray;
  padding: 10px;
}

HTML

<p class="rtl-text">Это пример текста слева направо.</p>

Используйте свойство `direction` со значением `rtl`, чтобы установить направление текста справа налево для элемента с классом `rtl-text`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Вертикальное написание текста (сверху вниз, справа налево)

Заставьте текст внутри блока `div` отображаться вертикально. Строки должны идти справа налево, а текст в строках — сверху вниз. Блок имеет фиксированные размеры, чтобы было видно, как текст располагается внутри.

CSS

.vertical-text-rl {
  input1: input2;
  border: 1px solid blue;
  width: 150px;
  height: 200px;
  padding: 5px;
}

                     .vertical-text-rl {
  input1: input2;
  border: 1px solid blue;
  width: 150px;
  height: 200px;
  padding: 5px;
}

HTML

<div class="vertical-text-rl">Этот текст должен отображаться вертикально, строки идут справа налево.</div>

Примените свойство `writing-mode` к элементу с классом `vertical-text-rl`. Используйте значение, которое устанавливает вертикальный режим письма со строками справа налево.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Вертикальное написание текста (сверху вниз, слева направо)

Похоже на предыдущее задание, но теперь текст должен отображаться вертикально так, чтобы строки шли слева направо, а текст в них — сверху вниз.

CSS

.vertical-text-lr {
  input1: vertical-lr;
  border: 1px solid green;
  width: 150px;
  height: 200px;
  padding: 5px;
}

                     .vertical-text-lr {
  input1: vertical-lr;
  border: 1px solid green;
  width: 150px;
  height: 200px;
  padding: 5px;
}

HTML

<div class="vertical-text-lr">Этот текст должен отображаться вертикально, строки идут слева направо.</div>

Используйте свойство `writing-mode` для элемента с классом `vertical-text-lr`. Выберите значение, которое устанавливает вертикальный режим письма со строками слева направо.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Наследование направления текста

Задайте направление текста справа налево (RTL) для родительского `div`. Обратите внимание, как это повлияет на дочерний параграф `p`, который наследует это свойство.

CSS

.parent-rtl {
  input1;
  border: 1px dashed red;
  padding: 10px;
  margin-bottom: 10px;
}

.parent-rtl p {
  border: 1px dotted blue;
  padding: 5px;
}

                     .parent-rtl {
  input1;
  border: 1px dashed red;
  padding: 10px;
  margin-bottom: 10px;
}

.parent-rtl p {
  border: 1px dotted blue;
  padding: 5px;
}

HTML

<div class="parent-rtl">
  <p>Этот параграф находится внутри родительского блока. Его направление текста должно измениться.</p>
</div>

Примените свойство `direction` со значением `rtl` к селектору `.parent-rtl`, чтобы изменить направление текста для него и его дочерних элементов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переопределение наследуемого направления текста

Родительский `div` имеет направление текста RTL. Ваша задача — переопределить это свойство для дочернего параграфа `p`, установив для него стандартное направление слева направо (LTR).

CSS

.parent-rtl-override {
  direction: rtl;
  border: 1px dashed red;
  padding: 10px;
}

.child-ltr {
  input1: input2;
  border: 1px dotted blue;
  padding: 5px;
  margin-top: 5px;
}

                     .parent-rtl-override {
  direction: rtl;
  border: 1px dashed red;
  padding: 10px;
}

.child-ltr {
  input1: input2;
  border: 1px dotted blue;
  padding: 5px;
  margin-top: 5px;
}

HTML

<div class="parent-rtl-override">
  Этот текст в родителе идет справа налево.
  <p class="child-ltr">А этот текст в дочернем параграфе должен идти слева направо.</p>
</div>

Для селектора `.child-ltr` используйте свойство `direction` со значением `ltr`, чтобы переопределить унаследованное от родителя значение `rtl`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Наследование режима письма

Установите вертикальный режим письма (`vertical-rl`) для родительского элемента `div`. Пронаблюдайте, как дочерний параграф `p` унаследует этот режим.

CSS

.parent-vertical {
  input1: input2;
  border: 1px solid purple;
  width: 200px;
  height: 250px;
  padding: 10px;
  margin-bottom: 10px;
}

.parent-vertical p {
  border: 1px dotted green;
  padding: 5px;
}

                     .parent-vertical {
  input1: input2;
  border: 1px solid purple;
  width: 200px;
  height: 250px;
  padding: 10px;
  margin-bottom: 10px;
}

.parent-vertical p {
  border: 1px dotted green;
  padding: 5px;
}

HTML

<div class="parent-vertical">
  <p>Этот параграф находится внутри родительского блока. Его режим письма должен стать вертикальным.</p>
</div>

Примените свойство `writing-mode` со значением `vertical-rl` к селектору `.parent-vertical`. Дочерние элементы унаследуют это свойство.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переопределение наследуемого режима письма

Родительский `div` использует вертикальный режим письма (`vertical-rl`). Ваша задача — вернуть дочернему параграфу `p` стандартный горизонтальный режим письма.

CSS

.parent-vertical-override {
  writing-mode: vertical-rl;
  border: 1px solid purple;
  width: 200px;
  height: 280px;
  padding: 10px;
}

.child-horizontal {
  input1: input2;
  border: 1px dotted green;
  padding: 5px;
  margin-top: 5px; /* В вертикальном режиме это будет отступ слева */
}

                     .parent-vertical-override {
  writing-mode: vertical-rl;
  border: 1px solid purple;
  width: 200px;
  height: 280px;
  padding: 10px;
}

.child-horizontal {
  input1: input2;
  border: 1px dotted green;
  padding: 5px;
  margin-top: 5px; /* В вертикальном режиме это будет отступ слева */
}

HTML

<div class="parent-vertical-override">
  Этот текст в родителе идет вертикально.
  <p class="child-horizontal">А этот текст в дочернем параграфе должен идти горизонтально.</p>
</div>

Для селектора `.child-horizontal` используйте свойство `writing-mode` со значением `horizontal-tb`, чтобы отменить унаследованный вертикальный режим.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Направление текста для картинки и подписи

Внутри блока есть картинка и подпись к ней. Примените к блоку направление текста справа налево (RTL). Обратите внимание, как изменится порядок отображения картинки и текста подписи, так как они являются inline-block элементами.

CSS

.image-container {
  input1: input2;
  border: 1px dashed orange;
  padding: 10px;
  text-align: center; /* Центрируем inline-block элементы */
}

.image-container img,
.image-container span {
  display: inline-block; /* Чтобы direction влиял на порядок */
  vertical-align: middle;
  margin: 5px;
}

.image-container img {
  width: 50px;
  height: 50px;
}

                     .image-container {
  input1: input2;
  border: 1px dashed orange;
  padding: 10px;
  text-align: center; /* Центрируем inline-block элементы */
}

.image-container img,
.image-container span {
  display: inline-block; /* Чтобы direction влиял на порядок */
  vertical-align: middle;
  margin: 5px;
}

.image-container img {
  width: 50px;
  height: 50px;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Иконка">
  <span>Подпись к картинке</span>
</div>

Задайте свойство `direction` со значением `rtl` для контейнера с классом `image-container`. Это повлияет на порядок следования дочерних inline или inline-block элементов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку