Направление текста (direction, writing-mode) [Модуль 5: Типографика продвинутый уровень]: Тренажер CSS

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

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

Список тем

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

id: 37373_css-direction-rtl-1

В этом задании есть параграф с текстом. Ваша задача — изменить направление текста внутри параграфа так, чтобы он отображался справа налево (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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37373_css-writing-mode-vertical-rl-1

Заставьте текст внутри блока `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`. Используйте значение, которое устанавливает вертикальный режим письма со строками справа налево.

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

Результат

Сообщения

Выполнить

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

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

id: 37373_css-writing-mode-vertical-lr-1

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

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`. Выберите значение, которое устанавливает вертикальный режим письма со строками слева направо.

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

Результат

Сообщения

Выполнить

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

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

id: 37373_css-direction-inheritance-1

Задайте направление текста справа налево (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`, чтобы изменить направление текста для него и его дочерних элементов.

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

Результат

Сообщения

Выполнить

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

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

id: 37373_css-direction-override-1

Родительский `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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37373_css-writing-mode-inheritance-1

Установите вертикальный режим письма (`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`. Дочерние элементы унаследуют это свойство.

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

Результат

Сообщения

Выполнить

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

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

id: 37373_css-writing-mode-override-1

Родительский `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`, чтобы отменить унаследованный вертикальный режим.

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

Результат

Сообщения

Выполнить

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

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

id: 37373_css-direction-image-caption-1

Внутри блока есть картинка и подпись к ней. Примените к блоку направление текста справа налево (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 элементов.

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

Результат

Сообщения

Выполнить

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