Перейти к содержимому
Aback Tools Logo

Тестер режимов письма

Проверьте, как текст отображается в разных режимах записи CSS, направлениях и ориентациях текста. Выбирайте horizontal-tb, vertical-rl и vertical-lr, переключайтесь между направлениями LTR и RTL и задавайте ориентацию текста для вертикальных макетов. Введите свой текст или используйте образец, настройте размер шрифта и посмотрите живой предпросмотр с копируемым кодом CSS. Полностью приватно, 100% бесплатно и без регистрации.

Writing Mode Tester

Test how text renders in different CSS writing modes, directions, and text orientations. Preview horizontal, vertical-RTL, and vertical-LTR layouts with custom text and font sizes.

Text flows horizontally from left to right (or right to left with RTL). Lines flow from top to bottom. This is the default writing mode for most languages.

Preview

writing-mode: horizontal-tb; direction: ltr;
The quick brown fox jumps over the lazy dog. Writing modes change how text flows across the page.
.writing-mode-demo {
  writing-mode: horizontal-tb;
  direction: ltr;
  font-size: 18px;
}

Почему стоит использовать наш тестер режимов письма?

  • Проверяйте все режимы письма рядом: мгновенно сравнивайте режимы записи CSS horizontal-tb, vertical-rl и vertical-lr. Режим сравнения показывает все три режима одновременно, чтобы вы точно видели, как ваш текст отображается в каждом макете, не переключаясь туда-сюда.
  • Поддержка направлений LTR и RTL: проверяйте текст как в направлении слева направо (LTR), так и справа налево (RTL). Переключайтесь между направлениями одним кликом, чтобы увидеть, как ваш контент читается для разных языковых аудиторий, включая арабскую, ивритскую и персидскую письменности.
  • 100% приватная обработка в браузере: все предпросмотры режимов письма отображаются полностью в вашем браузере с помощью нативного CSS. Ваш текст никогда не отправляется на сервер, не сохраняется и никуда не передаётся. Ваш контент остаётся полностью приватным.
  • Бесплатно навсегда, без регистрации: проверяйте неограниченное число комбинаций режимов письма бесплатно. Без премиум-уровней, ограничений на использование и скрытых платежей. Используйте тестер режимов письма для личных или коммерческих проектов без создания аккаунта.

Типичные случаи использования тестера режимов письма

  • Дизайн многоязычных сайтов: создавайте макеты, поддерживающие горизонтальные и вертикальные системы письма. Проверьте, как ваш японский, китайский или корейский контент читается в режиме vertical-rl рядом с английским контентом в режиме horizontal-tb, для по-настоящему международного веб-дизайна.
  • Разработка RTL-макетов: разрабатывайте и тестируйте интерфейсы справа налево (RTL) для арабских и ивритских сайтов. Быстро переключайтесь между направлениями LTR и RTL, чтобы убедиться, что макет правильно зеркалирует навигацию, выравнивание текста и порядок чтения.
  • Тестирование UI-компонентов для вертикального текста: проверяйте, как выглядят UI-компоненты — кнопки, метки, меню навигации и заголовки боковых панелей — при отображении в вертикальных режимах письма. Обеспечьте правильные отступы, выравнивание и читаемость перед публикацией.
  • Цифровые издания и электронные книги: просмотрите, как цифровые публикации и электронные книги отображаются в вертикальных режимах письма. Проверяйте контент со смешанными письменностями, включая японский, китайский и английский текст, чтобы обеспечить правильную ориентацию текста и поток чтения.
  • Исследования и образование в типографике: изучайте и преподавайте различия между режимами записи CSS, ориентациями текста и значениями направления. Смотрите наглядные примеры в реальном времени того, как каждое свойство меняет макет текста, что делает инструмент идеальным для обучения CSS и типографических мастер-классов.
  • Генерация CSS-кода для продакшена: создавайте чистые готовые к продакшену фрагменты CSS для ваших реализаций режимов письма. Найдя идеальное сочетание, скопируйте свойства CSS прямо в свои таблицы стилей одним кликом.

Что такое режимы записи CSS?

Режимы записи CSS определяют направление, в котором текст течёт на веб-странице. Свойство CSS writing-mode управляет тем, идёт ли текст горизонтально (слева направо) или вертикально (сверху вниз). В сочетании со свойствами direction и text-orientation режимы записи обеспечивают полную поддержку разнообразных систем письма мира — от английского и арабского до японского и монгольского — в рамках единого макета веб-страницы.

Как работает наш тестер режимов письма

  1. Выберите режим письма: выберите одно из трёх значений CSS writing-mode — horizontal-tb (горизонтальный макет по умолчанию), vertical-rl (вертикальный справа налево, традиционный восточноазиатский) или vertical-lr (вертикальный слева направо, современная или монгольская письменность).
  2. Настройте направление и ориентацию: задайте направление текста LTR или RTL, а для вертикальных режимов выберите ориентацию текста — mixed (по умолчанию), upright (все символы остаются вертикальными) или sideways (все символы повёрнуты).
  3. Просмотрите и скопируйте: введите свой текст или используйте образец, настройте размер шрифта и посмотрите живой предпросмотр. Блок вывода CSS показывает полный набор свойств, готовый к копированию в ваши таблицы стилей.

Ключевые свойства CSS с пояснениями

  • writing-mode: основное свойство, задающее направление блочного потока. horizontal-tb — значение по умолчанию для большинства языков. vertical-rl направляет текст сверху вниз со строками справа налево. vertical-lr направляет его сверху вниз со строками слева направо.
  • direction: управляет базовым строчным направлением (ltr или rtl). В вертикальных режимах direction влияет на порядок строк, а не символов. Необходимо для поддержки арабского и иврита.
  • text-orientation: применяется только в вертикальных режимах письма. mixed (по умолчанию) поворачивает латинские и кириллические символы на 90°, оставляя иероглифы CJK вертикальными. upright сохраняет все символы в обычной ориентации. sideways поворачивает все символы на 90°.

Приватность, безопасность и доступность

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

Часто задаваемые вопросы

Тестер режимов письма CSS — это браузерный инструмент, позволяющий просмотреть, как текст отображается в разных режимах записи, направлениях и ориентациях текста CSS. Наш тестер режимов письма поддерживает все три значения writing-mode (horizontal-tb, vertical-rl, vertical-lr), направления LTR и RTL и значения text-orientation (mixed, upright, sideways) с живым предпросмотром и копируемым кодом CSS.

Выберите режим записи из трёх вариантов (horizontal-tb, vertical-rl, vertical-lr), выберите направление (LTR или RTL), а для вертикальных режимов — ориентацию текста (mixed, upright, sideways). Введите свой текст или нажмите кнопку с примером, настройте размер шрифта, и живой предпросмотр обновится мгновенно. Включите режим сравнения, чтобы увидеть все три режима рядом.

Традиционный японский, китайский (традиционный) и корейский — основные языки, использующие вертикальные режимы письма (vertical-rl). В вертикальном макете текст идёт сверху вниз, а строки — справа налево. Современная восточноазиатская типографика часто сочетает горизонтальное и вертикальное письмо, и режимы записи CSS легко справляются с обоими одним изменением свойства.

Да. Все предпросмотры режимов письма отображаются полностью в вашем браузере с помощью нативного CSS. Ваш текст никогда не загружается на сервер, не сохраняется и не передаётся. Тестер режимов письма обрабатывает всё локально на вашем устройстве, обеспечивая полную приватность и безопасность данных.

text-orientation: mixed (по умолчанию) поворачивает латинские и кириллические символы на 90° по часовой стрелке, оставляя иероглифы CJK вертикальными в их обычной ориентации чтения. text-orientation: upright заставляет все символы отображаться в обычной вертикальной ориентации без поворота, что может усложнить чтение латинского текста, но сохраняет естественный вид иероглифов CJK.

Да. Вывод CSS использует стандартные, хорошо поддерживаемые свойства: writing-mode, direction и text-orientation. Все современные браузеры поддерживают эти свойства. Просто скопируйте фрагмент CSS или встроенный стиль и вставьте его прямо в свои таблицы стилей для немедленного использования в продакшене.

Да. Тестер режимов письма на 100% бесплатный, без регистрации, без премиум-функций и без ограничений на использование. Проверяйте неограниченное число комбинаций режимов письма без ограничений и скрытых платежей. Интерфейс не блокируется рекламой.

Режим сравнения отображает все три режима записи — horizontal-tb, vertical-rl и vertical-lr — в трёхколоночном макете. В каждой колонке показано название свойства CSS и описание режима. Это позволяет легко сравнить, как один и тот же текст отображается в каждом макете, помогая выбрать лучший режим для вашего контента.