Создание вертикальных элементов управления формой

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

Это полезно при создании вертикальных языковых форм.

Конкретно:

• writing-mode: vertical-lr создаст вертикальные элементы управления формой с направлением блочного потока слева направо, что означает, что в элементах управления с переполнением или несколькими строками текста последующие строки будут отображаться справа от предыдущих строк.
• writing-mode: vertical-rl создаст вертикальные элементы управления формой с направлением блочного потока справа налево, что означает, что в элементах управления с переполнением или несколькими строками текста последующие строки будут отображаться слева от предыдущих строк.

Можно использовать преобразование transform, чтобы повернуть элементы управления на 90 градусов, но это поместит элементы управления в свой собственный слой и вызовет нежелательные эффекты в макете, такие как перекрытие другого контента. Использование writing-mode предлагает более надёжное решение.

Кроме того, свойство direction может использоваться для управления направлением контента внутри элементов управления:

• direction: ltr приведет к тому, что контент начнётся сверху и будет течь вниз.
• direction: rtl приведет к тому, что контент начнётся снизу и будет течь вверх.

Свойство direction может использоваться для установки основного направления в строке — основного направления, в котором контент упорядочивается в строке, что определяет, на каких сторонах находятся "начало" и "конец" строки. Для текстовых элементов управления формой разница очевидна — поток текста начинается сверху или снизу. В нетекстовых элементах управления, таких как ползунки диапазона, direction устанавливает направление, в котором рисуется элемент управления. Например, включение direction: ltr на вертикальном ползунке устанавливает наименьшее значение в верхней части ползунка, а наибольшее значение — в нижней части ползунка.

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

Давайте рассмотрим создание вертикальных ползунков диапазона, счётчиков и прогресс-баров.

Типичный набор визуальных <input type="range"> ползунков, <progress> и <meter> элементов создаётся следующим образом:

<form>
  <input type="range" min="0" max="11" value="9" step="1" />
  <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="20">
    at 50/100
  </meter>
  <progress id="file" max="100" value="70">70%</progress>
</form>

Для вертикального отображения элементов управления можно использовать CSS следующим образом:

input[type="range"],
meter,
progress {
  margin-block-end: 20px;
  writing-mode: vertical-lr;
}

writing-mode: vertical-lr (и vertical-rl) заставляет элементы управления отображаться вертикально в современных браузерах.

Результат выглядит следующим образом:

По умолчанию значение direction равно ltr. Это приводит к тому, что ползунки, счётчики и прогресс-бары рисуются сверху вниз, как показано выше.

Вы можете изменить это, установив direction: rtl — это заставит их вместо этого нарисоваться снизу вверх:

input[type="range"],
meter,
progress {
  margin-block-end: 20px;
  writing-mode: vertical-lr;
  direction: rtl;
}

Результат выглядит следующим образом:

В старых браузерах, которые не поддерживают создание вертикальных элементов управления формой с помощью writing-mode и direction, доступны ограниченные альтернативы. Следующие работают только на <input type="range">, заставляя текст течь снизу вверх — они не влияют на элементы <meter> и <progress>:

• Нестандартное свойство appearance: slider-vertical может использоваться в старых версиях Safari и Chrome.
• Нестандартное атрибут orient="vertical" может быть добавлен к элементу <input type="range"> в старых версиях Firefox.

HTML для этого примера включает только ползунок <input type="range">, с добавленным orient="vertical" для вертикального отображения в старых версиях Firefox:

<form>
  <input type="range" min="0" max="11" value="9" step="1" orient="vertical" />
</form>

Чтобы заставить элементы управления отображаться вертикально и в старых версиях Chrome и Safari, можно использовать appearance: slider-vertical:

input[type="range"] {
  margin-block-end: 20px;
  appearance: slider-vertical;
}

Результат выглядит следующим образом:

В этом разделе показано, как обрабатывать вертикальные <select> элементы.

Следующий HTML создаёт два элемента <select>: один для одиночного выбора и один для множественного выбора:

<form>
  <select multiple>
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
    <option>Fourth</option>
    <option>Fifth</option>
  </select>
  <select>
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
    <option>Fourth</option>
    <option>Fifth</option>
  </select>
</form>

Для вертикального отображения элементов управления можно использовать CSS следующим образом:

select {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Результат выглядит следующим образом:

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

Также стоит отметить, что в приведенном выше примере направление опций в выпадающем списке идёт справа налево, потому что мы использовали writing-mode: vertical-rl. Если мы используем writing-mode: vertical-lr вместо этого, текст <option> будет отображаться слева направо.

Мы рассмотрим эти два случая, используя три элемента списка (multiple) <select> для лёгкого сравнения эффектов.

<form>
  <div>
    <h2>writing-mode: vertical-lr</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
  <div class="direction">
    <h2>direction: rtl & writing-mode: vertical-lr</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
  <div class="reverse-option-order">
    <h2>writing-mode: vertical-rl</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
</form>

В CSS для этого примера мы установили следующие свойства для трёх списков:

1. writing-mode: vertical-rl, отображая текст так же, как и в предыдущем примере — текст идёт сверху вниз, а опции — справа налево.
2. writing-mode: vertical-rl и direction: rtl, с опциями, расположенными справа налево, но с обратным направлением текста — снизу вверх.
3. writing-mode: vertical-lr, с текстом, идущим сверху вниз, а порядок опций — слева направо.

select {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.direction select {
  direction: rtl;
}

.reverse-option-order select {
  writing-mode: vertical-lr;
}

Результат выглядит так:

В этом разделе показано, как обработать вертикальные элементы <button>. Обратите внимание, что, хотя в примерах ниже мы использовали только элемент <button>, поведение такое же для других элементов, создающих кнопки, таких как <input> типов button, reset и submit.

Приведенный ниже HTML создаёт два элемента <button>, один с одной строкой текста, а другой — с тремя:

<button>Press me</button> <button>Press me<br />Please?<br />Thanks</button>

Чтобы отобразить кнопки вертикально, мы можем использовать CSS следующим образом:

button {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Результат выглядит следующим образом:

При изменении значения свойства writing-mode элемента vertical-rl на vertical-lr, последующие строки текста будут появляться справа от предыдущих, а не слева.

Этот пример использует две копии кнопки с тремя строками текста, чтобы вы могли легко увидеть эффект изменения режима написания:

<div>
  <h2>writing-mode: vertical-lr</h2>
  <button>Press me<br />Please?<br />Thanks</button>
</div>
<div class="reverse-line-order">
  <h2>writing-mode: vertical-rl</h2>
  <button>Press me<br />Please?<br />Thanks</button>
</div>

В CSS мы устанавливаем writing-mode: vertical-rl для первой кнопки, чтобы выстраивать строки справа налево. Для второй кнопки мы устанавливаем writing-mode: vertical-lr, чтобы изменить порядок строк — слева направо:

button {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.reverse-line-order button {
  writing-mode: vertical-lr;
}

Результат выглядит следующим образом:

Наконец, мы рассмотрим обработку вертикальных элементов <textarea> и текстовых типов <input>. Обратите внимание, что, хотя единственный тип <input> , который мы включаем в примерах ниже, — это элемент <input type="text"> , поведение такое же для других текстовых типов <input>: password, number, url и т. д.

Приведенный ниже HTML создает текстовое поле ввода <textarea> и область текста <input type="text">:

<form>
  <textarea>This is my textarea</textarea>
  <input type="text" value="Input text" />
</form>

Чтобы отобразить поле ввода и область текста вертикально, мы можем использовать CSS следующим образом:

textarea,
input[type="text"] {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Результат выглядит следующим образом:

Вы можете использовать значение свойства direction как rtl, чтобы изменить направление текста с исходного сверху вниз на снизу вверх. Также вы можете установить writing-mode на vertical-lr вместо vertical-rl, чтобы вызвать отображение нескольких строк текста в <textarea> слева направо вместо стандартного справа налево.

В этом примере используются три копии тех же элементов управления текстом, что и в предыдущем примере, чтобы вы могли легко увидеть эффекты изменения direction и writing-mode , как описано выше:

<form>
  <div>
    <h2>writing-mode: vertical-lr</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
  <div class="direction">
    <h2>direction: rtl & writing-mode: vertical-lr</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
  <div class="reverse-line-order">
    <h2>writing-mode: vertical-rl</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
</form>

В CSS мы устанавливаем следующие свойства для трёх наборов элементов управления текстом:

1. writing-mode: vertical-rl для отображения так же, как и в предыдущем примере — текст идёт сверху вниз, а строки — справа налево.
2. writing-mode: vertical-rl и direction: rtl для вывода строк справа налево, но с обратным направлением текста — снизу вверх.
3. writing-mode: vertical-lr для вывода текста сверху вниз, но с обратным направлением строк — слева направо. Обратите внимание, что это не влияет на элементы <input type="text"> , так как они всегда являются однострочными.

textarea,
input[type="text"] {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.direction textarea,
.direction input[type="text"] {
  writing-mode: vertical-rl;
  direction: rtl;
}

.reverse-line-order textarea,
.reverse-line-order input[type="text"] {
  writing-mode: vertical-lr;
}

Результат выглядит следующим образом:

• Элемент <input>.
• Другие соответствующие элементы: <button>, <meter>, <progress> и <select>.
• Обработка различных направлений текста
• Стиль веб-форм