Css направление текста: Как сделать вертикальный текст с помощью css text-orientation

Leave a Comment / Css / By /

writing-mode | WebReference

Устанавливает направление текста на странице — по горизонтали или вертикали.

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

Значение по умолчаниюhorizontal-tb
НаследуетсяДа
ПрименяетсяКо всем элементам, за исключением ячеек и строк таблицы
АнимируетсяНет

Синтаксис

writing-mode: horizontal-tb | vertical-rl | vertical-lr
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

horizontal-tb
Устанавливает направление текста по горизонтали слева направо и сверху вниз.
vertical-rl
Задаёт направление текста по вертикали сверху вниз и справа налево.
vertical-lr
Задаёт направление текста по вертикали сверху вниз и слева направо.

Песочница

Винни-Пух

Пятачок

Кролик

horizontal-tbvertical-rlvertical-lr

div {
  writing-mode: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>writing-mode</title> </head> <body> <table> <tbody> <tr> <th>horizontal-tb</th> <th>vertical-rl</th> <th>vertical-lr</th> </tr> <tr> <td><p>Образец текста</p></td> <td><p>Образец текста</p></td> <td><p>Образец текста</p></td> </tr> </tbody> </table> </body> </html>

Объектная модель

Объект. style.writingMode

Примечание

Internet Explorer 6 поддерживает нестандартные значения lr-tb и tb-rl, Internet Explorer 7 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.

Chrome до версии 48, Opera до версии 35, Safari и Android поддерживают свойство -webkit-writing-mode.

Спецификация

СпецификацияСтатус
CSS Writing Modes Level 3Возможная рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

612848
15		355.11141
3764137511
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Текст и шрифт

См. также

  • text-orientation
  • Направление флексбоксов

direction ⚡️ HTML и CSS с примерами кода

Свойство direction предназначено для сайтов, в которых имеет значение направление текста.

Например, при использовании арабского алфавита чтение происходит справа налево.

Свойство direction достаточно универсально и управляет следующими возможностями:

  • способ отображения текста в блоке;
  • порядок колонок в таблице;
  • позиция полосы прокрутки в блоке;
  • положение последней висячей строки текстового блока при text-align: justify.

Для использования со встроенными элементами, значение свойства unicode-bidi должно быть задано как embed или override

.

Режимы письма
  • direction
  • glyph-orientation-horizontal
  • text-combine-upright
  • text-orientation
  • unicode-bidi
  • writing-mode

Синтаксис

/* Keyword values */
direction: ltr;
direction: rtl;
/* Global values */
direction: inherit;
direction: initial;
direction: unset;

Значения

ltr
Устанавливает направление слева направо.
rtl
Задаёт направление справа налево.

Примечание

При добавлении свойства direction со значением rtl к блоку с полосой прокрутки (например, <textarea>), браузер Internet Explorer и Firefox отображают скроллинг слева, а Opera и Safari — справа.

Значение по-умолчанию:

direction: ltr;

Применяется ко всем элементам

Спецификации

  • CSS Writing Modes Module Level 3
  • CSS Level 2 (Revision 1)

Описание и примеры

Пример 1.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>direction</title>
    <style>
      div.rtl {
        direction: rtl; /* Направление */
        width: 200px; /* Ширина блока */
        height: 150px; /* Высота блока */
        overflow: scroll; /* Полоса прокрутки */
        text-align: left; /* Выравнивание по левому краю */
        padding: 5px; /* Поля вокруг текста */
        border: 1px solid #000; /* Параметры рамки */
      }
    </style>
  </head>
  <body>
    <div>
      Велосипед уже изобрели, различные приемы верстки тоже.
      Так что больше знакомься с мировым опытом по части
      верстки и тебе не придется тратить время на разработку
      того, что всем давно известно.
    </div>
  </body>
</html>

Пример 2.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>direction</title>
    <style>
      table {
        direction: rtl; /* Колонки идут справа налево */
        width: 100%; /* Ширина таблицы */
        border-spacing: 0; /* Убираем пространство между ячейками */
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td></td>
        <td>1999</td>
        <td>2000</td>
        <td>2001</td>
        <td>2002</td>
        <td>2003</td>
      </tr>
      <tr>
        <td>Нефть</td>
        <td>16</td>
        <td>34</td>
        <td>62</td>
        <td>74</td>
        <td>57</td>
      </tr>
      <tr>
        <td>Золото</td>
        <td>4</td>
        <td>69</td>
        <td>72</td>
        <td>56</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Дерево</td>
        <td>7</td>
        <td>73</td>
        <td>79</td>
        <td>34</td>
        <td>86</td>
      </tr>
    </table>
  </body>
</html>

текстовая ориентация | Коддропы

Свойство text-orientation определяет ориентацию символов в строке содержимого. Это относится только к вертикальным типографским режимам.

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

Часто веб-страницы на восточноазиатских языках также содержат латинские буквы и цифры. Каждый символ Unicode по умолчанию имеет ориентацию, основанную на характеристиках их соответствующих систем письма, и страницы с символами из разных языков по-прежнему будут отображаться с правильной ориентацией.

Языки на основе латиницы при вертикальном отображении с цифрой write-mode имеют глифы, отображаемые сбоку, что позволяет нормально читать встроенный текст, хотя страница повернута на 90 градусов по часовой стрелке. Однако мы можем заставить каждый символ отображаться вертикально с помощью свойства text-orientation .

Значения

смешанные
Это начальное значение. Символы шрифтов, которые являются только горизонтальными, будут набраны сбоку (повернуты на 90° по часовой стрелке), тогда как вертикальные шрифты будут набраны вертикально.
вертикальный
Весь текст будет набран вертикально, каждый символ будет иметь стандартную горизонтальную ориентацию.
сбоку
Весь текст будет набран сбоку (повернут на 90° по часовой стрелке), как если бы он был расположен горизонтально.

Примеры

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

Возьмем для примера разметку:

 
Художник и теоретик Барнетт Ньюман был одним из самых интеллектуальных художников Нью-Йоркской школы. В 1933 он баллотировался в мэры своего города по выписанному билету с культурной платформой и сохранял острое понимание таких современных ужасов, как нацизм и атомная бомба.

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

 .вертикальный текст {
 режим письма: вертикальный-rl;
}
.vertical-text span {
  ориентация текста: вертикальная;
}

Live Demo

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

Посмотреть эту демонстрацию на игровой площадке Codrops

Брубзер.

  • 109

    • * означает, что требуется префикс.

    • Поддерживается:
    • Да
    • Нет
    • Частично
    • Polyfill

    Статистика с сайта caniuse.com

    смешанные значения и вертикального поддерживаются, начиная с Chrome 48 и Firefox 41. Поддержка значения сбоку поддерживается только в Firefox 44.

    Дополнительная информация

    • Режимы написания CSS Уровень 3
    • Текстовая ориентация MDN

    Автор Хуэй Цзин Чен. Последнее обновление сделано Маноэлой Илич 19 мая 2017 г. в 11:48.

    У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.

    CSS | Свойство text-orientation — GeeksforGeeks

    Улучшить статью

    Сохранить статью

    • Последнее обновление: 04 июл, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Свойство text-orientation в CSS используется для установки ориентации символа в строке. Это свойство полезно в вертикальных сценариях, например при создании вертикальных заголовков таблиц, определении имен строк и т. д. 

    Синтаксис: 

     ориентация текста: смешанная|вертикальная|боковая;

    Атрибут:

    • смешанный: Это значение используется для поворота символа текста на 90 градусов по часовой стрелке. Это значение по умолчанию.

    Пример:

    HTML

    >

    >

    < . 0004 < title >

             CSS | text-orientation Property

         title >

          

         < style >

             h2 {

                 color :зеленый;

             }

            p {

                 режим письма: вертикальный-rl;

                 ориентация текста: смешанная;

             }

         style >

    head >

     

    < body >

    < H2 > Geeksforgeeks H2 >

    9000. .............> Partive Nicke NickeraL .>

    . >

    Body >

    HTML >

    Вывод:

     

    • в вертикальном положении: Это значение начинает текст с правой стороны экрана вниз.

    Example:  

    html

    < head >

         < title >

    CSS | text-ориентация Свойство

         title >

          

         < style >

             h2 {

                 color:green;

    }

    P {

    Режим письма: Vertical-RL;

                 ориентация текста: вертикально;

    }

    Стиль >

    . < h2 >Гики для гиков h2 >

              

         < p >A Computer Science Portal p >

    body >

     

    html >

    Вывод:

     

    • текст повернуть в сторону: 0 градусов по часовой стрелке.

    Example:  

    html

    < head >

         < title >

    CSS | text-orientation Свойство

         title >

        

    < Стиль >

    H2 {

    Цвет: зеленый;

    }

    P {

    Режим письма: Vertical-RL;

                 ориентация текста: сбоку;

             }

    Стиль >

    .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *