Css повернуть текст: Создаём повёрнутый текст с CSS свойством “writing-mode”

Leave a Comment / Css / By /

Содержание

writing-mode | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+

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

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 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-modedirectionblock-progressДля каких языков
lr-tbltrtbРоманских, греческого, кириллических
rl-tbrtltbАрабского, еврейских языков
tb-rlltrrlАзиатских в вертикальном написании
bt-rlltrrlАрабского, вставленного в азиатский документ
tb-lrltrrlМонгольского
bt-lrrtlrlАрабского, вставленного в монгольский документ

Пример

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>Текст</td>
    <td>Текст</td>
    <td>Текст</td>
    <td>Текст</td>
    <td>Текст</td>
    <td>Текст</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.

Текст

CSS по теме

  • writing-mode

Статьи по теме

Рецепты CSS

Масштабирование и поворот текста в Illustrator

Руководство пользователя Отмена

Поиск

Последнее обновление Nov 15, 2022 09:23:53 AM GMT

  1. Руководство пользователя Illustrator
  2. Основы работы с Illustrator
    1. Введение в Illustrator
      1. Новые возможности в приложении Illustrator
      2. Часто задаваемые вопросы
      3. Системные требования Illustrator
      4. Illustrator для Apple Silicon
    2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Ускоренное обучение благодаря панели «Поиск» в Illustrator
      3. Создание документов
      4. Панель инструментов
      5. Комбинации клавиш по умолчанию
      6. Настройка комбинаций клавиш
      7. Общие сведения о монтажных областях
      8. Управление монтажными областями
      9. Настройка рабочей среды
      10. Панель свойств
      11. Установка параметров
      12. Рабочая среда «Сенсорное управление»
      13. Поддержка Microsoft Surface Dial в Illustrator
      14. Отмена изменений и управление историей дизайна
      15. Повернуть вид
      16. Линейки, сетки и направляющие
      17. Специальные возможности в Illustrator
      18. Безопасный режим
      19. Просмотр графических объектов
      20. Работа в Illustrator с использованием Touch Bar
      21. Файлы и шаблоны
    3. Инструменты в Illustrator
      1. Краткий обзор инструментов
      2. Выбор инструментов
        1. Выделение
        2. Частичное выделение
        3. Групповое выделение
        4. Волшебная палочка
        5. Лассо
        6. Монтажная область
      3. Инструменты для навигации
        1. Рука
        2. Повернуть вид
        3. Масштаб
      4. Инструменты рисования
        1. Градиент
        2. Сетка
        3. Создание фигур
      5. Текстовые инструменты
        1. Текст
        2. Текст по контуру
        3. Текст по вертикали
      6. Инструменты рисования
        1. Перо
        2. Добавить опорную точку
        3. Удалить опорные точки
        4. Опорная точка
        5. Кривизна
        6. Отрезок линии
        7. Прямоугольник
        8. Прямоугольник со скругленными углами
        9. Эллипс
        10. Многоугольник
        11. Звезда
        12. Кисть
        13. Кисть-клякса
        14. Карандаш
        15. Формирователь
        16. Фрагмент
      7. Инструменты модификации
        1. Поворот
        2. Отражение
        3. Масштаб
        4. Искривление
        5. Ширина
        6. Свободное трансформирование
        7. Пипетка
        8. Смешать
        9. Ластик
        10. Ножницы
    4. Быстрые действия
      1. Ретротекст
      2. Светящийся неоновый текст
      3. Старомодный текст
      4. Перекрашивание
      5. Преобразование эскиза в векторный формат
  3. Illustrator на iPad
    1. Представляем Illustrator на iPad
      1. Обзор по Illustrator на iPad.
      2. Ответы на часто задаваемые вопросы по Illustrator на iPad
      3. Системные требования | Illustrator на iPad
      4. Что можно и нельзя делать в Illustrator на iPad
    2. Рабочая среда
      1. Рабочая среда Illustrator на iPad
      2. Сенсорные ярлыки и жесты
      3. Комбинации клавиш для Illustrator на iPad
      4. Управление настройками приложения
    3. Документы
      1. Работа с документами в Illustrator на iPad
      2. Импорт документов Photoshop и Fresco
    4. Выбор и упорядочение объектов
      1. Создание повторяющихся объектов
      2. Объекты с переходами
    5. Рисование
      1. Создание и изменение контуров
      2. Рисование и редактирование фигур
    6. Текст
      1. Работа с текстом и шрифтами
      2. Создание текстовых надписей по контуру
      3. Добавление собственных шрифтов
    7. Работа с изображениями
      1. Векторизация растровых изображений
    8. Цвет
      1. Применение цветов и градиентов
  4. Облачные документы
    1. Основы работы
      1. Работа с облачными документами Illustrator
      2. Общий доступ к облачным документам Illustrator и совместная работа над ними
      3. Публикация документов для проверки
      4. Обновление облачного хранилища для Adobe Illustrator
      5. Облачные документы в Illustrator | Часто задаваемые вопросы
    2. Устранение неполадок
      1. Устранение неполадок с созданием или сохранением облачных документов в Illustrator
      2. Устранение неполадок с облачными документами в Illustrator
  5. Добавление и редактирование содержимого
    1. Рисование
      1. Основы рисования
      2. Редактирование контуров
      3. Рисование графического объекта с точностью на уровне пикселов
      4. Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
      5. Рисование простых линий и фигур
      6. Трассировка изображения
      7. Упрощение контура
      8. Определение сеток перспективы
      9. Инструменты для работы с символами и наборы символов
      10. Корректировка сегментов контура
      11. Создание цветка в пять простых шагов
      12. Рисование перспективы
      13. Символы
      14. Рисование контуров, выровненных по пикселам, при создании проектов для Интернета
    2. 3D-объекты и материалы
      1. Подробнее о 3D-эффектах в Illustrator
      2. Создание трехмерной графики
      3. Проецирование рисунка на трехмерные объекты
      4. Создание трехмерного текста
    3. Цвет
      1. О цвете
      2. Выбор цветов
      3. Использование и создание цветовых образцов
      4. Коррекция цвета
      5. Панель «Темы Adobe Color»
      6. Цветовые группы (гармонии)
      7. Панель «Темы Color»
      8. Перекрашивание графического объекта
    4. Раскрашивание
      1. О раскрашивании
      2. Раскрашивание с помощью заливок и обводок
      3. Группы с быстрой заливкой
      4. Градиенты
      5. Кисти
      6. Прозрачность и режимы наложения
      7. Применение обводок к объектам
      8. Создание и редактирование узоров
      9. Сетки
      10. Узоры
    5. Выбор и упорядочение объектов
      1. Выделение объектов
      2. Слои
      3. Группировка и разбор объектов
      4. Перемещение, выравнивание и распределение объектов
      5. Размещение объектов    
      6. Блокировка, скрытие и удаление объектов
      7. Копирование и дублирование объектов
      8. Поворот и отражение объектов
      9. Переплетение объектов
    6. Перерисовка объектов
      1. Кадрирование изображений
      2. Трансформирование объектов
      3. Объединение объектов
      4. Вырезание, разделение и обрезка объектов
      5. Марионеточная деформация
      6. Масштабирование, наклон и искажение объектов
      7. Объекты с переходами
      8. Перерисовка с помощью оболочек
      9. Перерисовка объектов с эффектами
      10. Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
      11. Работа с динамическими углами
      12. Улучшенные процессы перерисовки с поддержкой сенсорного ввода
      13. Редактирование обтравочных масок
      14. Динамические фигуры
      15. Создание фигур с помощью инструмента «Создание фигур»
      16. Глобальное изменение
    7. Текст
      1. Дополнение текстовых и рабочих объектов типами объектов
      2. Создание маркированного и нумерованного списков
      3. Управление текстовой областью
      4. Шрифты и оформление
      5. Форматирование текста
      6. Импорт и экспорт текста
      7. Форматирование абзацев
      8. Специальные символы
      9. Создание текста по контуру
      10. Стили символов и абзацев
      11. Табуляция
      12. Текст и шрифты
      13. Поиск отсутствующих шрифтов (технологический процесс Typekit)
      14. Обновление текста из Illustrator 10
      15. Шрифт для арабского языка и иврита
      16. Шрифты | Часто задаваемые вопросы и советы по устранению проблем
      17. Создание эффекта 3D-текста
      18. Творческий подход к оформлению
      19. Масштабирование и поворот текста
      20. Интерлиньяж и межбуквенные интервалы
      21. Расстановка переносов и переходы на новую строку
      22. Усовершенствования работы с текстом
      23. Проверка орфографии и языковые словари
      24. Форматирование азиатских символов
      25. Компоновщики для азиатской письменности
      26. Создание текстовых проектов с переходами между объектами
      27. Создание текстового плаката с помощью трассировки изображения
    8. Создание специальных эффектов
      1. Работа с эффектами
      2. Стили графики
      3. Создание тени
      4. Атрибуты оформления
      5. Создание эскизов и мозаики
      6. Тени, свечения и растушевка
      7. Обзор эффектов
    9. Веб-графика
      1. Лучшие методы создания веб-графики
      2. Диаграммы
      3. SVG
      4. Создание анимации
      5. Фрагменты и карты изображений
  6. Импорт, экспорт и сохранение
    1. Импорт
      1. Помещение нескольких файлов в документ
      2. Управление связанными и встроенными файлами
      3. Сведения о связях
      4. Извлечение изображений
      5. Импорт графического объекта из Photoshop
      6. Импорт растровых изображений
      7. Импорт файлов Adobe PDF
      8. Импорт файлов EPS, DCS и AutoCAD
    2. Библиотеки Creative Cloud Libraries в Illustrator 
      1. Библиотеки Creative Cloud Libraries в Illustrator
    3. Диалоговое окно «Сохранить»
      1. Сохранение иллюстраций
    4. Экспорт
      1. Использование графического объекта Illustrator в Photoshop
      2. Экспорт иллюстрации
      3. Сбор ресурсов и их массовый экспорт
      4. Упаковка файлов
      5. Создание файлов Adobe PDF
      6. Извлечение CSS | Illustrator CC
      7. Параметры Adobe PDF
      8. Информация о файле и метаданные
  7. Печать
    1. Подготовка к печати
      1. Настройка документов для печати
      2. Изменение размера и ориентации страницы
      3. Задание меток обреза для обрезки и выравнивания
      4. Начало работы с большим холстом
    2. Печать
      1. Наложение
      2. Печать с управлением цветами
      3. Печать PostScript
      4. Стили печати
      5. Метки и выпуск за обрез
      6. Печать и сохранение прозрачных графических объектов
      7. Треппинг
      8. Печать цветоделенных форм
      9. Печать градиентов, сеток и наложения цветов
      10. Наложение белого
  8. Автоматизация задач
    1. Объединение данных с помощью панели «Переменные»
    2. Автоматизация с использованием сценариев
    3. Автоматизация с использованием операций
  9. Устранение неполадок 
    1. Проблемы с аварийным завершением работы
    2. Восстановление файлов после сбоя
    3. Проблемы с файлами
    4. Поддерживаемые форматы файлов
    5. Проблемы с драйвером ГП
    6. Проблемы устройств Wacom
    7. Проблемы с файлами DLL
    8. Проблемы с памятью
    9. Проблемы с файлом настроек
    10. Проблемы со шрифтами
    11. Проблемы с принтером
    12. Как поделиться отчетом о сбое с Adobe
    13. Повышение производительности Illustrator

Выбор текста для трансформирования

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

  • Чтобы трансформировать текст вместе с его ограничительным контуром, выберите текстовый объект и воспользуйтесь инструментом «Поворот» для поворота объекта и текста.

  • Чтобы трансформировать только ограничительный контур (но не текст на нем), выделите текстовый объект и перетащите его с помощью инструмента «Выделение».

Поворот контура текста (слева) и поворот текста и контура (справа)

Настройка масштаба текста

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

  1. Выделите символы или текстовые объекты для изменения. Если текст не выделен, масштабирование применяется к вновь создаваемому тексту.

  2. В палитре «Символ» задайте значения для параметра «Масштаб по вертикали»  или «Масштаб по горизонтали  .

Поворот текста

  • Чтобы повернуть символы текстового объекта на определенное значение в градусах, выберите символы или текстовые объекты. (Если текст не выделен, поворот применяется к новому создаваемому тексту). В палитре «Символ» задайте параметр «Поворот символа» .
  • Чтобы преобразовать горизонтальный текст в вертикальный и наоборот, выделите текстовый объект и выберите команду «Текст» > «Ориентация текста» > «Горизонтальная» или «Текст» > «Ориентация текста» > «Вертикальная».
  • Чтобы повернуть весь текстовый объект (символы и ограничительную рамку), выделите текстовый объект и выполните поворот с помощью ограничительной рамки, инструмента «Свободное трансформирование», инструмента «Поворот», команды «Поворот» или палитры «Трансформирование».
  • Чтобы повернуть несколько символов в вертикальном азиатском тексте, используйте параметр «татэ-тю-еко».

Связанные материалы

  • Трансформируемые объекты
  • Обзор палитры «Символ»
  • Использование «татэ-тю-еко»
  • Поворот объектов

Вход в учетную запись

Войти

Управление учетной записью

text-orientation — CSS: Каскадные таблицы стилей

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

 /* Значения ключевых слов */
ориентация текста: смешанная;
ориентация текста: вертикальная;
ориентация текста: сбоку-справа;
ориентация текста: сбоку;
ориентация текста: ориентация на использование глифа;
/* Глобальные значения */
ориентация текста: наследовать;
ориентация текста: начальная;
ориентация текста: вернуться;
ориентация текста: обратный слой;
ориентация текста: не задана;

Свойство text-orientation указано как одно ключевое слово из списка ниже.

Значения

смешанные

Поворачивает символы горизонтального письма на 90° по часовой стрелке. Естественно раскладывает символы вертикальных шрифтов. Значение по умолчанию.

вертикальный

Располагает символы горизонтального письма естественно (вертикально), а также глифы вертикального письма. Обратите внимание, что это ключевое слово заставляет все символы считаться слева направо: используемое значение направление принудительно равно литр .

сбоку

Заставляет символы располагаться горизонтально, но вся строка повернута на 90° по часовой стрелке.

сбоку-справа

Псевдоним для сбоку , сохраненный в целях совместимости.

использование-глиф-ориентация

В элементах SVG это ключевое слово приводит к использованию значения устаревших свойств SVG ориентация глифа по вертикали и ориентация глифа по горизонтали .

Initial value mixed
Applies to all elements, except table row groups, rows, column groups, and columns
Inherited yes
Computed value как указано
Тип анимации дискретный
 ориентация текста = 
 смешанная | 
 вертикальный | 
 сбоку

HTML 

 
Lorem ipsum dolet semper quisquam.

CSS 

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

Результат

9081 907

BCDALTATION 9081 907

BCDALTATION BCDALTATION 9081

Спецификация
Режимы записи CSS Уровень 4
# Текст-ориентированность

. Включите JavaScript для просмотра данных.

  • Другие свойства CSS, связанные с вертикальным шрифтом: write-mode , text-combine-upright и unicode-bidi .
  • Логические свойства CSS
  • Стилизация вертикального текста (китайский, японский, корейский и монгольский)
  • Расширенные браузеры поддерживают результаты тестов: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation

Обнаружили проблему с содержанием этой страницы?

  • Редактировать страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

10 лучших ротаторов текста в JavaScript и чистом CSS (обновление 2023 г.

)

Что такое ротатор текста?

Средство ротации текста позволяет перемещать фрагменты текста один за другим, как в карусели или в слайд-шоу.

Он обеспечивает элегантный способ отображения цитат, отзывов, отзывов или комментариев на вашей веб-странице.

Лучший ротатор текста

В этом посте я хотел бы представить вам 10 лучших (самых популярных) ротаторов текста, реализованных на jQuery, Vanilla JavaScript и Pure CSS/CSS3. Веселиться!

Первоначально опубликовано 20 июля 2019 г., обновлено 16 февраля 2023 г.

  • Библиотеки ротатора текста Vanilla JS
  • Повороты текста на чистом CSS

    • Плагины jQuery Text Rotator:

    Простой текстовый слайдер/ротатор с jQuery и CSS

    Карусель/слайдер контента на основе jQuery, который позволяет вращать список текстового контента с фиксированным положением щелчком мыши или автоматически.

    [Демо] [Скачать]

    Плагин jQuery Text Rotator с анимацией CSS3 — Words Rotator

    Words Rotator — это легкий и настраиваемый плагин jQuery для поворота текста и некоторых слов вашего текста с потрясающей анимацией CSS3.

    [Демо] [Скачать]

    jQuery Quote Rotator с тонким индикатором прогресса — simpleQuote

    Quote Rotator — это крошечный компонент jQuery для создания виджета ротатора котировок с плавными переходами и тонким индикатором прогресса на вашей веб-странице. .

    [Демо] [Скачать]

    Простой плагин jQuery Text Rotator для бегущей строки новостей на вашем сайте эффект.

    [Демо] [Скачать]

    Плагин CSS3 Animated Headline Rotator с jQuery -animatedHeadline

    animatedHeadline — это плагин jQuery, упрощающий ротацию группы слов/предложений/фраз в тексте с помощью анимации CSS3 , преобразования и переходы.

    [Демо] [Скачать]

    Библиотеки Vanilla JS Text Rotator:

    Pure JS Text Rotator с эффектами ввода/удаления – iTyped.js

    Облегченная библиотека JS без зависимостей, которая позволяет чередовать последовательность строк с эффектами ввода/стирания текста, как на пишущей машинке.

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

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