Как перевернуть текст в css

Безопасный CSS, или как писать универсальные стили

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

Оглавление:

1. Умный flex-контейнер
2. Расстояние
3. Длинный контент
4. Предотвращение искажения изображения
5. Блокировка цепочки прокрутки
6. Резервное значение CSS-переменной
7. Использование фиксированной ширины или высоты
8. Отключение повторения фона
9. Вертикальные @media-запросы
10. Использование justify-content: space-between
11. Текст поверх изображений
12. Будьте осторожны с фиксированными значениями в CSS-Grid
13. Показываем полосу прокрутки только когда это необходимо
14. Ширина контента с полосой прокрутки
15. Минимальный размер контента в CSS-Flexbox
16. Минимальный размер содержимого в CSS-Grid
17. Auto Fit против Auto Fill в CSS-Grid minmax
18. Максимальная ширина IMG
19. Использование position: sticky в CSS-Grid
20. Группировка селекторов для разных браузеров

Умный flex-контейнер

CSS flexbox — одна из самых полезных функций компоновки CSS на сегодняшний день. Очень удобно добавить display: flex в оболочку и расположить дочерние элементы рядом друг с другом.

Однако, когда места недостаточно, эти дочерние элементы по умолчанию не переносятся на новую строку. Нам нужно изменить это поведение с помощью flex-wrap: wrap

Вот типичный пример. У нас есть группа параметров, которые должны отображаться рядом друг с другом.

» width=»1752″ height=»668″ />

Когда контейнер меньше чем его содержимое, будет отображена горизонтальная прокрутка. Этого следует ожидать, и на самом деле это не является «проблемой».

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

.options-list

Расстояние

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

В этом примере у нас есть заголовок раздела и кнопка действия справа. Сейчас выглядит нормально. Но давайте посмотрим, что прозойдёт, если заголовок будет длиннее:

Заметили, что текст расположен слишком близко к кнопке действия? Возможно, вы думаете о многострочном переносе, но я вернусь к этому в другом разделе. А пока сосредоточимся на отступах.

.section__title < margin-right: 1rem; /* Отступ справа */ >

Как обрезать текст точками, читаем ниже:

Длинный контент

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

Для меня это «безопасный» подход к CSS. Приятно получить возможность исправить «проблему» до того, как она произойдет.

Вот список имен людей, и сейчас он выглядит идеально.

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

См. следующий пример:

Важно, чтобы элементы выглядели однотипно. Для этого мы должны запретить перенос слов, и обрезать часть слов, если они выходят за ширину элемента. Для этого мы напишем:

.username < white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden; /* Обрезаем все, что не помещается в область */ text-overflow: ellipsis; /* Добавляем многоточие в конце */ >

Предотвращение искажения изображения

Если изображение не соответствует размерам, которые мы указали в CSS, оно по умолчанию будет сжиматься или растягиваться. Рассмотрим пример — вот карточка еды, в которой изображение соответствует размерам области:

Когда пользователь загружает изображение другого размера, оно будет искажено. Это нехорошо! Посмотрите, как растянуто изображение:

Чтобы изображение не искажалось. мы используем object-fit:

.card__image

На уровне проекта я предпочитаю добавлять object-fit ко всем изображениям , чтобы избежать неожиданных результатов изображения.

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

Блокировка цепочки прокрутки

Вы когда-нибудь открывали модальное окно и начинали скроллить, а затем, когда вы доходите до конца и продолжаете прокручивать, содержимое под модальным окном (элемент body) будет прокручиваться? Это называется цепочкой прокрутки (scroll chaining).

В последние годы было несколько хаков, чтобы избежать этого, но теперь мы можем сделать это только с помощью CSS, благодаря свойству ‌overscroll-behavior

На следующем рисунке вы видите поведение цепочки прокрутки по умолчанию.

Чтобы подобной ситуации не возникало, мы добавим следующие стили к любому компоненту, который нуждается в прокрутке (например, компонент чата, мобильное меню и т. д.). Преимущество этих свойств в том, что они никак себя не проявляют, если прокрутка вовсе отсутствует.

.modal__content

Резервное значение CSS-переменной

Переменные CSS все чаще используются в веб-дизайне. Существует метод, который мы можем применить чтобы вёрстка не поплыла, если значение переменной CSS по какой-то причине было пустым.

Это особенно полезно при передаче значения переменной CSS через JavaScript. Вот пример:

.message__bubble

Переменная —actions-width используется внутри calc() функции, и ее значение исходит из JavaScript. Предположим, что JavaScript по какой-то причине дал сбой, что произойдет? Будет max-width ошибочно назначено none .

Мы можем заранее избежать этого добавив резервное значение в конструкцию var() .

.message__bubble

Таким образом, если переменная не определена, будет использован резервный вариант — 70px . Этот подход нужно использовать только когда существует вероятность, что переменная может выйти из строя (например, исходящая из Javascript). В противном случае он не нужен.

Использование фиксированной ширины или высоты

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

Фиксированная высота

Я часто вижу элементы с фиксированной высотой и содержимым, превышающим эту высоту, что приводит к нарушению макета. Не знаете, как это выглядит? Вот.

.block

Чтобы избежать утечки контента из блока, нам нужно использовать min-height вместо height :

.block

Фиксированная ширина

Вы когда-нибудь видели кнопку, контент которой расположен слишком близко к левому и правому краям? Это связано с использованием фиксированной ширины.

.button

Если текст кнопки длиннее 100px , он будет близко к краям. Если текст слишком длинный, он будет просачиваться из кнопки. Это нехорошо!

Чтобы исправить это, мы можем просто заменить width на min-width .

.button

Отключение повторения фона

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

В основном это не будет видно на экране ноутбука, но его можно четко увидеть на больших экранах.

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

.image < background-image: url('..'); background-repeat: no-repeat; /* запрет повторения изображения */ >

Вертикальные @media-запросы

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

Вот пример, который я видел несколько раз. У нас есть боковая секция с основным и второстепенным меню. Второстепенное меню должно располагаться в самом низу боковой секции. Разработчик добавил position: sticky к второстепенному меню, чтобы оно могло прилипать к низу. На первый взгляд всё хорошо:

Проблема в том, что если высота браузера будет меньше, все сломается. Обратите внимание, как два меню наползают друг на друга:

Используя вертикальные медиа-запросы CSS, мы можем избежать этой проблемы.

@media (min-height: 600px) < .secondary_menu < position: sticky; bottom: 0; >>

Таким образом, второстепенное меню будет привязано к нижней части только в том случае, если высота области просмотра больше или равна 600px . Гораздо лучше, правда?

Вероятно, есть лучшие способы реализации такого поведения (например, использование margin-auto ), но в этом примере я сосредоточился на вертикальном запросе.

Использование justify-content: space-between

В flex-контейнере вы можете использовать justify-content для разделения дочерних элементов друг от друга. При определенном количестве дочерних элементов макет будет выглядеть нормально. Однако, когда они увеличиваются или уменьшаются, макет будет выглядеть странно.

Рассмотрим следующий пример:

У нас есть гибкий контейнер с четырьмя элементами. Расстояние между каждым элементом не является следствием использования gap или margin , оно существует, потому что в контейнере есть justify-content: space-between .

.wrapper

Когда количество элементов меньше четырех, вот что произойдет:

Это нехорошо. У данной проблемы есть несколько разных решений

• Margin
• Flexbox gap (используйте с осторожностью)
• Padding (может применяться к родительскому элементу каждого дочернего элемента)
• Добавление пустых элементов в качестве разделителя

Для простоты я буду использовать gap :

.wrapper

Текст поверх изображений

При использовании текста поверх изображения важно учитывать случай, когда изображение не загружается. Как будет выглядеть текст?

Текст выглядит читаемым, но когда изображение не загружается, белый текст теряется на фоне белой страницы:

Мы легко исправим это, добавив фоновый цвет к элементу. Этот фон будет виден только в том случае, если изображение не загрузится. Разве это не круто?

.card__img

Будьте осторожны с фиксированными значениями в CSS-Grid

Скажем, у нас есть сетка, которая содержит боковую секцию и основную. CSS выглядит так:

.wrapper

Вёрстка поплывёт при небольших размерах окна просмотра из-за нехватки места. Чтобы избежать такой проблемы, всегда используйте медиа-запрос при использовании сетки CSS, как на примере ниже:

@media (min-width: 600px) < .wrapper < display: grid; grid-template-columns: 250px 1fr; gap: 1rem; >>

Показываем полосу прокрутки только когда это необходимо

К счастью, мы можем управлять отображением полосы прокрутки или ее отсутствием не только в случае наличия длинного контента. Настоятельно рекомендуется использовать auto в качестве значения для overflow .

Рассмотрим следующий пример:

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

При overflow-y: auto полоса прокрутки будет видна только в том случае, если содержимое длинное. Иначе её там не будет:

.element

Ширина контента с полосой прокрутки

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

Рассмотрим следующий пример:

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

.element

Минимальный размер контента в CSS-Flexbox

Если во flex-контейнере есть текстовый элемент или изображение, длина которого превышает длину самого элемента, браузер не будет их уменьшать. Это поведение по умолчанию для flexbox.

Рассмотрим следующий пример:

.card

Если в заголовке очень длинное слово, оно не будет переноситься на новую строку.

Даже если мы используем overflow-wrap: break-word , это не сработает.

Чтобы изменить это поведение, нам нужно установить min-width дочернего блока на 0 , из-за того, что значение по умолчанию min-width равно auto .

.card__title

То же самое относится и к flex-контейнеру, но вместо min-width: 0 мы будем использовать min-height: 0 Результат:

Минимальный размер содержимого в CSS-Grid

Подобно flexbox, CSS-сетка имеет минимальный размер содержимого по умолчанию для своих дочерних элементов, который равен auto . Это означает, что если есть элемент, который больше, чем элемент сетки, сетка переполнится.

В приведенном выше примере у нас есть карусель в основном разделе. Для контекста, вот HTML и CSS примера:

@media (min-width: 1020px) < .wrapper < display: grid; grid-template-columns: 1fr 248px; grid-gap: 40px; >> .carousel

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

Чтобы исправить это, у нас есть три разных решения:

• Использование minmax()
• Применение min-width к элементу сетки
• Добавление overflow: hidden элемента в сетку

В качестве «безопасного» CSS я бы выбрал вариант который использует функцию minmax()

@media (min-width: 1020px) < .wrapper < display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-gap: 40px; >>

Auto Fit против Auto Fill

При использовании функции CSS-Grid minmax() важно выбрать между использованием параметров auto-fit или auto-fill . При неправильном использовании это может привести к неожиданным результатам.

При использовании функции minmax() параметр auto-fit расширяет элементы сетки, чтобы заполнить доступное пространство. В свою очередь auto-fill сохранит доступное пространство зарезервированным, без изменения ширины элементов сетки. Наглядный пример:

При этом, использование auto-fit может привести к тому, что элементы сетки будут слишком широкими, особенно если они меньше ожидаемого. Рассмотрим следующий пример.

.wrapper

Если используется только один элемент сетки auto-fit , он будет расширяться, чтобы заполнить ширину контейнера:

В большинстве случаев такое поведение не требуется, поэтому лучше использовать auto-fill

.wrapper

Максимальная ширина IMG

Не забудьте установить max-width: 100% для всех изображений, чтобы они не вылезали за пределы блоков, в которых находятся. Это можно добавить к предыдущим глобальным стилям для img, вот что получится:

Использование position: sticky в CSS-Grid

Вы когда-нибудь пробовали использовать position: sticky с дочерним элементом grid-контейнера? По умолчанию, элементы grid растягиваются. В результате боковой элемент в приведенном ниже примере равен высоте основной секции.

Чтобы заставить его работать должным образом, вам нужно сбросить свойство align-self

aside

Группировка селекторов для разных браузеров

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

/* Не делайте так, пожалуйста! */ input::-webkit-input-placeholder, input:-moz-placeholder

Вместо этого напишите так:

input::-webkit-input-placeholder < color: #222; >input:-moz-placeholder

Это список безопасных техник CSS, которые я постоянно использую в своих проектах.

Спасибо Ахмаду Шадиду за качественный контент!

(P.S.: Во многих местах я перевёл своими словами, более доступно для русскоговорящего читателя.)

От переводчика: подытоживая текст статьи, и многолетний опыт вёрстки, хочу дать совет читателям верстальщикам: когда верстаете, всегда думайте о том, какие ситуации могут возникнуть при использовании вашей вёрстки. Что будет, если текста будет сильно больше или сильно меньше. Как элементы себя поведут на устройствах с разной шириной и высотой экранов (кстати для тестирования последнего рекомендую бесплатную программу Responsively). Старайтесь избегать дублирования кода — создавайте общие css-классы для часто используемых стилей или наборов стилей. Используйте препроцессоры (SCSS например), если ещё не использовали их, поверьте, это очень удобно. И самое главное — наслаждайтесь процессом!

Вертикальный текст в Word: как сделать и повернуть надпись

Word

Автор fast12v0_vseowor На чтение 28 мин Просмотров 241 Опубликовано 08.11.2021

Три способа написать текст вертикально в ворде

Мы рассмотрим три способа, которые позволят вам написать вертикальный текст одним словом. Многие сайты рекомендуют создать таблицу и вставить в нее повернутый текст.

Об этом мы тоже поговорим, но также будет описан метод без использования таблиц. Итак, приступим.

Вертикальный (повернутый) текст с помощью таблицы

Найдите раздел «Вставка» рядом с «Таблицей».

Выберите ячейку для таблицы. Введите желаемый текст. Щелкните правой кнопкой мыши и выберите «Направление текста».

Выбирайте то, что вам нравится. На скриншоте направление текста снизу вверх.

Мы можем расширить ячейку таблицы, потянув за нижнюю строку, и сжать ее, потянув за правую строку.

Это повернет текст в Word по вертикали.

Чтобы сделать границы таблицы невидимыми, щелкните по ней правой кнопкой мыши и выберите «Границы и заливка»

А во вкладке с «Типом границы» выберите жирным «Нет» и нажмите ОК.

В результате получается чистая вертикальная линия:

Используем «Надпись» чтобы писать вертикально

Второй способ — вставить «декаль», которую можно поворачивать. Вам нужно перейти на вкладку «Вставка» и там вы уже найдете «Регистрация».

Выбираем там «простую подписку». У нас получится квадрат со стандартным текстом внутри. Мы удаляем его, просто щелкнув по нему, чтобы выбрать его, и нажав клавишу «удалить». Пишем свое. В примере написано «Вертикальный текст»

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

При нажатии на «направление текста» он будет вращаться по вертикали.

В разделе «Контур фигуры» вы можете выбрать «Нет», удалив таким образом границу вокруг текста.

Пишем в ворде вертикально в столбик

Существует также третий вариант для тех, кому не нужен перевернутый текст, но нужно, чтобы он был написан в виде столбцов.

Первое, что вам нужно сделать, это написать по одной букве за раз и нажать «Enter», т.е писать каждую букву с новой строки.
Во-вторых: выберите столбец и выберите «Интерлиньяж» в верхнем меню Word, а там «Дополнительные параметры интерлиньяжа».

И вручную введите значение, например множитель 0,7, чтобы сократить расстояние между линиями

Вертикальное написание текста в Microsoft Word

Пишем вертикально текст в Ворде

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

Способ 1: Текстовое поле

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

• Перейдите на вкладку «Вставка» программы, где в группе инструментов «Текст» разверните меню пункта «Текстовое поле», щелкнув левой кнопкой мыши (ЛКМ) по направленному вниз треугольнику.

• В раскрывающемся меню выберите любой макет текстового поля или макет, который вам нравится. При этом имейте в виду, что мы снова скроем это в будущем.

• Текстовое поле, добавленное на страницу, будет содержать стандартную метку.

  По понятным причинам вы можете и должны удалить его: для этого выделите весь текст внутри рамки, если он еще не выделен (клавиши «CTRL + A»), затем нажмите «BackSpace» или «Delete» на клавиатуре».

• Введите текст, который хотите написать, вертикально,
  
  Примечание. Если добавленное текстовое поле не соответствует размеру содержащегося в нем текста, просто перетащите один из кружков вдоль контура макета в нужном направлении.

• Если есть такая необходимость, правильно отформатируйте и отформатируйте текст, введенный в поле — выберите подходящий шрифт, установите размер и определите стиль.
  
  Затем дважды щелкните ЛКМ на окружающей рамке, чтобы отобразить дополнительные инструменты для работы с этим элементом на панели управления, или просто перейдите на вкладку «Формат», которая открывается сразу после создания текстового поля.
  
  Форматирование текста в Microsoft Word
• В разделе инструментов «Текст» используйте пункт меню «Направление текста» (щелкнув ЛКМ по стрелке вниз).
• Выберите «Повернуть на 90 °», если вы хотите, чтобы текст был написан сверху вниз, или «Повернуть на 270 °», чтобы отображать его снизу вверх.При необходимости измените размер текстового поля, чтобы оно соответствовало повернутой записи.
• Поскольку вы, вероятно, не хотите, чтобы вертикальный текст в вашем документе был окружен рамкой, вам необходимо удалить контур фигуры, внутри которой он находится в данный момент. Из-за этого:
• Находясь на той же вкладке «Формат», нажмите кнопку «Контур фигуры», расположенную в блоке «Стили фигур».
• В раскрывающемся списке параметров выберите вариант «Нет объекта».
• ЛКМ щелкните пустую область листа, чтобы закрыть режим работы с фигурами, а затем с созданным нами текстовым полем.

Если вам нужно вернуться к редактированию или работе с текстом, щелкните ЛКМ в этой области.

Способ 2: Ячейка таблицы

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

1. Перейдите на вкладку «Вставка» и нажмите кнопку «Таблица», затем в развернутом меню укажите размер, соответствующий ячейке.
2. Растяните отображаемую ячейку таблицы в вертикальном направлении (сверху вниз) до необходимого размера, поместив курсор в правый нижний угол и перетащив его.
3. Теперь введите или вставьте ранее скопированный текст, который вы хотите повернуть по вертикали, в ячейку.Опять же, при необходимости скорректируйте размеры рамы, которая в нашем случае представляет собой таблицу.
4. Щелкните правой кнопкой мыши в ячейке с текстом и выберите в контекстном меню пункт «Направление текста».В появившемся диалоговом окне выберите нужное направление (снизу вверх или сверху вниз), ориентируясь на миниатюры, которые являются наглядным примером того, как будет вращаться текст.
   Нажмите кнопку «ОК», чтобы подтвердить изменения.
5. Горизонтальное направление текста изменится по вертикали, но мы еще не закончили.
6. После поворота текста снова измените размер таблицы с одной ячейкой, сделав ее направление вертикальным. Вы уже знаете, как это сделать — перетащите рамку в нужном направлении.
7. Как и в случае с текстовым полем, теперь нам с вами нужно удалить, скрыть границы (ячейки) таблицы, сделав их невидимыми. Из-за этого:
   • Щелкните правой кнопкой мыши внутри ячейки, выберите в верхнем меню значок «Границы» и щелкните по нему ЛКМ.
   • В развернутом меню выберите «Без границ».
   • Граница таблицы станет невидимой, а положение текста останется вертикальным.

Способ 3: Изменение ориентации страницы

По умолчанию Microsoft Word использует вертикальную ориентацию страницы, то есть он располагается вертикально, а текст пишется горизонтально.

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

Ведь нам ничего не мешает пойти со спины — повернуть не текст, а страницы текстового документа.

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

1. Щелкните вкладку «Макет» и разверните раскрывающееся меню кнопки «Ориентация», щелкнув направленный вниз треугольник.
2. Выберите вариант «Пейзаж»,затем введите (или вставьте) текст, который будет написан вертикально.Примечание: чтобы наглядно показать горизонтальный лист, мы уменьшили масштаб в программе до 50%. При необходимости оформьте его в соответствии с вашими пожеланиями (или требованиями).
3. Когда вы закончите работу с текстом, распечатайте документ. Для этого откройте меню «Файл» и перейдите в раздел «Печать», затем при необходимости укажите необходимые настройки и нажмите кнопку «Печать».

У этого метода есть один незначительный недостаток, по крайней мере, по сравнению с предыдущими решениями: текст на горизонтальной странице можно писать только в одном направлении (по горизонтали).

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

правда, нам ничего не мешает перейти на другую сторону: написать текст на горизонтальном листе в стандартной ориентации и затем добавить противоположную, вставив ее в текстовое поле или таблицу.

Как сделать лист альбомным в документе, состоящем из нескольких страниц

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

Но если ваш документ состоит из нескольких листов и вам нужно, например, сделать только один горизонтальный, задача создания горизонтального листа усложняется. Если это последняя страница, то, поместив на нее курсор, следуйте описанному выше алгоритму, затем нажмите «Применить», установив «В конце документа».

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

Поэтому сделать текст вертикальным и изменить ориентацию страниц документа в Microsoft Word для вас не составит труда.

Самый простой способ поворота текста в ворде — через таблицу

Дело в том, что в Microsoft Word разработчики поэтому не добавили функцию поворота текста через панель инструментов. Нет, правда, почему бы не создать отдельную кнопку или пункт меню под названием вращение текста?

Но, как говорится, довольствуемся тем, что есть. И у нас есть способ перевернуть текст в таблице. Суть его проста. Мы вставляем таблицу с одной ячейкой, пишем текст, поворачиваем его с помощью инструментов таблицы, а затем скрываем края таблицы.

В результате текст будет повернут на 90, 180 или 270 градусов. Подробнее о том, как это сделать в MS Word 2003 и 2007-2010, вы узнаете ниже.

Как перевернуть текст в Word 2003?

В текстовом документе, куда вы хотите вставить вертикальный текст, вставьте таблицу через пункт главного меню «Таблица» -> «Нарисовать таблицу».

Вставить таблицу в Word 2003

После этого курсор мыши превратится в карандаш. Чтобы вставить таблицу с ячейкой в ​​Word 2003 в любое свободное место документа, щелкните левой кнопкой мыши и, не отпуская ее, перетащите мышь чуть ниже и в сторону. Результатом будет таблица с одной ячейкой.

Таблица с одной ячейкой

Затем наведите на него курсор мыши и напишите текст, который вы хотите повернуть, то есть сделайте его вертикальным.

После написания текста щелкните его правой кнопкой мыши и выберите «Направление текста«.

Пишем текст и выбираем его направление

Откроется окно, в котором в разделе «Ориентация» нужно выбрать способ размещения текста в ячейке и нажать кнопку «Ок«.

Отразить текст в таблице в Word 2003

Далее вам нужно перетащить нашу таблицу с вертикальным текстом в нужное место на листе, если вам нужно расширить границы таблицы, чтобы увидеть весь текст в ячейке.

Результат поворота текста в таблице в MS Word 2003

Последним шагом будет скрытие краев нашей таблицы, чтобы она не была видна в документе Word.

Для этого еще раз щелкните правой кнопкой мыши в нашей таблице и в открывшемся меню выберите «Границы и заливка«.

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

В открывшемся окне на первой вкладке «Границы» необходимо выбрать тип «Нет«.

Удаление границ таблицы в Word 2003

Затем нажмите «ОК» и наслаждайтесь вертикально перевернутым текстом в Word 2003.

Перевёрнутый текст в MS Word 2003

Как сделать вертикальный текст в Word

Иногда возникают ситуации, когда текст в Word нужно писать вертикально. Это необходимо в нескольких случаях, например, чтобы сделать текст более наглядным (с использованием диаграмм, таблиц) или привлекательным или тривиальным для печати объявления.

Для этого существует 3 разных способа, и в разных версиях Word все они похожи по своей реализации.

Пишите вертикальный текст с таблицами

Для этого перейдите во вкладку «Вставка», перейдите в раздел «Таблица» и выберите и вставьте ячейку.

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

Осталось только удалить линии ячеек вокруг текста. Для этого щелкните правой кнопкой мыши свойства ячейки, щелкните правой кнопкой мыши таблицу и выберите раздел «Границы и заливка».

В этом окне в типе ребер выбираем самый первый вариант «Нет» и кнопку «ОК», сохраняя выбранные параметры. Далее мы получаем вертикальный текст без границ вокруг него.

Написание вертикального текста с помощью вставки надписи

Второй способ даже проще первого. Снова перейдите на вкладку «Вставка», затем в раздел «Подписка». Во всплывающем меню выбираем тип введенной надписи, в нашем случае выбираем первый и самый простой тип, не имеющий цветного фона, который нам не нужен.

В появившемся блоке удалите стандартный текст кнопкой «удалить» и введите нужный вам текст. Щелкнув по блоку с текстом, мы видим, что функции для работы с этим блоком меняются, поэтому во вкладке «Формат» выбираем раздел «Профили и формы», затем выбираем опцию «Без контура», затем получаем избавиться от очертаний блока.

Позже на этой вкладке «Формат», нажав кнопку «Направление текста», измените направление текста, пока оно не примет нужное нам направление.

Примечание: блок с текстом можно легко переместить в удобное место на странице.

Построчное написание вертикального текста

Третий способ — написать текст немного иначе, то есть в один столбец, т.е каждая буква будет записываться с новой строки. Для этого достаточно после каждой буквы слова нажимать кнопку «Ввод».

Таким образом, вы можете уменьшить интервал между буквами, для этого мы выделяем весь текст и на вкладке «Главная» нажимаем кнопку «Интерлиньяж», а затем «Дополнительные параметры интерлиньяжа». В появившемся окне вы можете, например, выбрать интерлиньяж «точно» со значением 12 pt и установить значения «до» и «после» равными 0 pt.

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

Вращение на столе

Есть еще один удобный способ повернуть текст по вертикали в «Ворде»: в таблице есть функция для задания направления текста. При выборе этого алгоритма решения необходимо вставить одну или несколько ячеек таблицы, выбрав столбец «Вставить» в панели быстрого доступа, затем в панели «Таблицы» нажать кнопку «Таблица», выбрав необходимые параметры объекта.

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

Чтобы повернуть текст в Word 2007 или 2010, выберите вкладку «Макет» и нажмите кнопку «Направление текста» на панели «Выровнять». Каждый щелчок по кнопке поворачивает текст в новом направлении: сверху вниз, снизу вверх и слева направо.

Другой способ работает одинаково во всех версиях «Word»: после выбора одной или нескольких ячеек нужно щелкнуть правой кнопкой мыши по выделению и в открывшемся меню найти пункт «Направление текста». После этого появится окно, в котором вам будет предложено три варианта поворота текстового поля.

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

Печать зеркального текста

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

просто измените настройки самого отпечатка.

Откройте пункт меню «Файл» и нажмите «Печать».

В новом окне найдите надстройку «Параметры печати» и установите флажок «Зеркально отразить поля».

Как перевернуть текст в ворде вертикально в ячейку таблицы

Другой способ получить вертикальные слова — вставить их в ячейку таблицы. Если таблица выбрана (просто щелкните ячейку), откроется вкладка «Работа с таблицами». Вам нужно перейти на макет и в меню «Выравнивание» найти функцию «Направление текста». Если нажать эту кнопку несколько раз, направление текста в выбранной ячейке изменится по горизонтали.

Способ 5 – Использование SmartArt

SmartArt — это основа для создания инфографики с готовыми шаблонами. Эта функция впервые появилась в MS Word 2007.

С помощью Smart Art вы можете создавать списки, диаграммы, диаграммы, матрицы, пирамиды, иерархии, циклы и многие другие объекты.

Вы также можете перевернуть текст в полях SmartArt. Для этого откройте пункт меню «Вставить» и нажмите кнопку «Добавить инфографику.

В левой части открывшегося окна отображаются категории, а справа — список доступных дизайнов. Выберите понравившийся товар и нажмите «ОК».

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

Затем выберите «Параметры анимации»:

В новом окне перейдите на вкладку «Текст» и справа найдите строку «Направление текста».

Всего доступно три варианта поворота: по горизонтали, 90 градусов и 270 градусов.

Как изменить направление текста в Word

При работе с Microsoft Word могут возникнуть ситуации, когда вам нужно изменить направление текста в Word, например, при создании флаера или листовки. Чтобы изменить направление текста в слове, следует использовать текстовые поля, формы или ячейки таблицы. В этой статье мы рассмотрим несколько способов изменить направление текста в слове.

Как изменить направление текста в таблице

Следующие шаги покажут вам, как создать текстовое поле, добавить текст, а затем изменить направление этого текста.

Перейдите на вкладку «Вставка».

Как изменить направление текста в таблице ворд

Вы также можете изменить направление текста в слове в одной или нескольких ячейках таблицы.

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

Способ 3 – Надпись в фигуре

В документе вы можете создавать отдельные холсты с фигурами или блоками текста.

Этот блок можно разместить в любом месте страницы. Текст будет перевернут под нужным углом.

Ниже приведен пример использования блоков в MS Word:

• Откройте документ и в верхней части программы щелкните вкладку «Вставка»;
• Выберите поле «Фигуры»;
• Из списка всех элементов выберите значок «Этикетка»;

• После этого на странице появится пустой блок, внутри которого нужно набрать текст. Используя вкладку редактирования, вы можете удалить или настроить границы формы, выбрать заливку и форму;
• Чтобы повернуть фигуру, щелкните левой кнопкой мыши зеленый кружок в верхней части текстового блока. Удерживая нажатой клавишу, вращайте элемент, пока текст не будет выглядеть так, как вы хотите;

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

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

Для этого выделите сразу несколько фигур с текстом, щелкните их правой кнопкой мыши и выберите «Сгруппировать».

Будет создан единый холст, который можно перемещать по тексту.

Два простых способа, как сделать вертикальный текст в Word

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

Какой бы ни была причина, которая привела вас к этому руководству, есть два способа создать вертикальный текст в Word. Первый будет работать везде в документе, а второй — только в таблицах.

Как сделать вертикальный текст в Word в любом месте документа

• Откройте Word и выберите вкладку «Вставка».
• Нажмите кнопку «Подписка» и выберите желаемый тип подписки из возможных или нажмите «Создать подписку». Например, я выбрал «Простое членство».
• Теперь у вас есть вкладка «Инструменты рисования» с кнопкой «Направление текста». Щелкните и выберите одно из трех возможных направлений, два из которых являются вертикальными.

Теперь вы знаете, как создать вертикальный текст в Word. Осталось только рассказать, как убрать границу с надписи, если в этом нет необходимости. Для этого нужно воспользоваться кнопкой «Shape Outline» и выбрать белый цвет, тогда рамка станет невидимой.

Как сделать вертикальный текст в Word в таблице

• Откройте Word с нужной таблицей.
• Щелкните правой кнопкой мыши ячейку, текст которой вы хотите сделать вертикальным, и выберите «Направление текста». Если вам нужно сделать текст вертикальным во всем столбце или строке таблицы, выберите нужный фрагмент и щелкните правой кнопкой мыши.
• В открывшемся окне выберите одно из двух направлений вертикального текста и нажмите кнопку «ОК».

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

Вам также будет интересно узнать об онлайн-тезаурусе. С его помощью вы легко найдете эквивалентное выражение для любого слова.

Методы форматирования новой версии

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

Использование поля, таблиц и ориентации

На вкладке «Вставка» выберите группу инструментов «Текст», разверните меню текстового поля, щелкнув левой кнопкой мыши на треугольнике. Вы должны ввести макет понравившегося поля.

Внутри добавленного поля есть подпись. Он удаляется путем выделения слов внутри рамки, если они еще не выделены.

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

В разделе инструментов выберите функцию «Текст» — «Направление текста». Слова можно поворачивать в зависимости от количества градусов.

Чтобы удалить рамку из документа, вам нужно удалить контур фигуры через «Формат» — «Контур фигуры» — «Стили фигур».

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

По умолчанию Word использует книжную ориентацию страницы и записывает текст в противоположном формате.

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

Для наглядности изображения и проверки его правильности необходимо уменьшить масштаб, например, со 100% до 50%. По завершении вы можете распечатать документ, выбрав «Файл»> «Печать» в меню».

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

Достоинства и недостатки программы

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

Редактор создан Microsoft и использует настраиваемое меню. Существует несколько версий Word (MS Word 2000-2007). Каждая новая версия является развитием предыдущей и сохраняет лидерство. Использование последних версий не создает трудностей для пользователей.

Любой текст, набранный в Word, называется документом, которому присвоено имя. Широкие возможности при работе со шрифтами.

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

Существуют трудности с переводом текстовой информации при преобразовании файлов, созданных с помощью более ранней версии, в более позднюю версию или наоборот.

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

Редактор не предназначен ни для создания сложных полиграфов, ни для редактирования качественных изображений.

В зависимости от потребностей пользователя выбираются разные версии редактора: минимальная, выборочная, стандартная, полная.

Поэтому в Word довольно просто перевернуть текст по вертикали. Известные методы изменения направления текста дают такой же конечный результат.

Вертикальный (повернутый) текст с помощью таблицы

Найдите раздел «Вставка» рядом с «Таблицей».

Выберите ячейку для таблицы. Введите желаемый текст. Щелкните правой кнопкой мыши и выберите «Направление текста».

Выбирайте то, что вам нравится. На скриншоте направление текста снизу вверх.

Мы можем расширить ячейку таблицы, потянув за нижнюю строку, и сжать ее, потянув за правую строку.

Это повернет текст в Word по вертикали.

Чтобы сделать границы таблицы невидимыми, щелкните по ней правой кнопкой мыши и выберите «Границы и заливка»

А во вкладке с «Типом границы» выберите жирным «Нет» и нажмите ОК.

В результате получается чистая вертикальная линия:

Как выровнять текст в ворде по обоим краям. Выравнивание текста ворд

При работе с текстовым документом в Microsoft Office Word существуют определенные требования к форматированию текста. Один из вариантов форматирования — это выравнивание, которое может быть вертикальным или горизонтальным.

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

Выравнивание текста по горизонтали в MS Word можно выполнить в четырех разных стилях:

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

1. Выделите в документе часть текста или весь текст, горизонтальное выравнивание которого вы хотите изменить.

2. На панели управления на вкладке «Главная» в группе «Абзац» нажмите кнопку, соответствующую желаемому типу выравнивания.

3. Положение текста на листе изменится.

Вертикальное выравнивание текста в документе

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

1. Щелкните по верхнему краю этикетки, чтобы активировать с ней режим работы.

2. Перейдите на появившуюся вкладку «Формат» и нажмите кнопку «Изменить выравнивание текста метки», расположенную в группе «Метки” .

3. Выберите соответствующий вариант для выравнивания метки.

Вот и все, теперь вы знаете, как выровнять текст в MS Word, а это значит, что вы можете как минимум сделать его более читабельным и приятным для глаз. Желаем вам высокой продуктивности в работе и обучении, а также положительных результатов в освоении такой замечательной программы, как Microsoft Word.

Как выровнять текст в Word по обоим краям несколькими способами.

Word — самый популярный редактор. Он предоставляет пользователям огромное количество опций, делая их работу проще и проще. Чтобы ими пользоваться, хорошо изучите программу, узнайте все ее секреты.

Хотите узнать, как стабильно зарабатывать в Интернете от 500 рублей в день? Скачать мою бесплатную книгу =>>

При работе с текстом особое внимание уделяется его расположению. Чаще всего в редакторе автоматически устанавливается выравнивание по левому краю

вы можете изменить положение текста с помощью специальных кнопок.

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

Как расположить текст вертикально в Ворде 2016

Привет друзья! Сегодняшняя «шпаргалка» посвящена вертикальному тексту в Word. Объектом нашего исследования по-прежнему является версия mc Word 2016. И мы подходим к проблеме без лирических отступлений. Идти?

Во-первых, давайте рассмотрим два способа преобразования текста в вертикальные линии с буквами по бокам. Это классический способ заполнения ячеек таблицы или некоторых выделенных текстовых областей.

Способ 1. Как повернуть текст в таблице в Ворде

Прежде всего, в панели «Работа с таблицами» (а она, напомню, открывается двойным щелчком левой кнопки мыши внутри границ таблицы) перейдите на вкладку «Макет», выберите «Автоподбор». В раскрывающемся окне щелкните строку «Фиксированная ширина столбца» (см. Рис. 1).

Никогда не забывайте делать это перед заполнением таблиц какими-либо данными. В противном случае рамы стола станут слишком уютными. Они откроют свои границы и разойдутся в стороны совершенно неконтролируемым образом.

Итак, допустим, у нас есть таблица с довольно узкими столбцами для размещения текста. Этот текст не умещается в одну строку. Такая ячейка выглядит совершенно некрасиво (см. Рис. 2.1).

Вы можете активировать функцию расстановки переносов по слогам (рис. 2.2). Содержимое ячейки станет более аккуратным. Если вас устраивает этот вариант, напомню, что это можно сделать на вкладке «Макет» в разделе «Настройки страницы». А чтобы функция переноса не распространялась на весь документ, вам придется выбрать «ручной» перенос и выполнять это действие в определенных ячейках.

Но чаще всего вводимый текст все же растягивается по вертикали (см. Рис. 2.3). Такой же вариант предусмотрен ЕСКД и ГОСТами для оформления дипломов и курсовых работ, отчетов, рефератов. Чтобы расположить текст по вертикали в таблице Word, на панели «Работа с таблицами», на вкладке «Макет», в разделе «Выравнивание» нажмите кнопку «Направление текста». Поместив курсор в нужную точку и нажав клавишу Enter, линию можно разделить на несколько частей (см. Рис. 3). В таблице Word у нас, как всегда, вертикальный текст, правда, придется немного повернуть голову.

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

Способ 2. Как сделать вертикальный текст в Word с помощью вкладки «Текстовое поле»

Без лишних слов перейдите на вкладку «Вставка», раздел «Текст» и выберите группу «Текстовое поле». В раскрывающемся списке опускаемся до строки «добавление надписи».

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

Справа от текстового поля будет значок, который попросит вас выбрать систему для обтекания ее текстом. Наиболее выгодными обычно являются конструкции двух типов: «по периметру» или «сверху и снизу». Затем на панели «Инструменты рисования» (и она появляется после двойного щелчка по текстовому полю) на вкладке «Формат», в разделе «Стили фигур», в группе «Контур» удалите рамку вокруг текста или придайте ей форму на ваш вкус. Там же при желании можно сделать заливку (см. Рис. 4).

Теперь давайте научимся выстраивать буквы друг под другом на вертикальной линейке. Это может понадобиться при создании презентаций, баннеров, обложек книг в формате PDF и просто для красивого оформления какой-нибудь абстрактной статьи. Опять же, это можно сделать двумя способами. В отличие от первого раздела, назовем их A и B. Итак…

Способ А. Как в Ворде напечатать вертикальный текст

Как и в случае с вертикальным текстом с «лежащими» буквами, нам снова нужно использовать ячейку таблицы или текстовое поле. Главное, чтобы получилась узкая вертикальная полоска. После этого мы помещаем курсор в верхнюю часть полосы и (извините, но вы не можете найти здесь другого слова) тупо набираем по одной букве за раз, каждый раз нажимая клавишу ENTER. Мы уже знаем, как убрать рамки и границы, поэтому в «нижней строке» мы получаем надпись, идущую сверху вниз и, конечно же, красиво отформатированную.

Самые дотошные из вас спросят: для чего нужны ячейки или текстовые поля? Что мешает нам просто использовать клавишу ENTER и вводить буквы друг под другом? Спасибо за хороший вопрос. Я объясняю. Если вы не заключите вертикальную строку текста даже в гипотетические невидимые рамки, ваши буквы будут разбегаться в стороны, как испуганная овца, каждый раз. Вас будут пытать собирать их.

Перевернуть текст

Считаете ли вы этот инструмент полезным? То поделитесь этим с друзьями или коллегами. Это поможет нам сделать наши бесплатные веб-инструменты лучше.

Напишите или вставьте свой текст в этот онлайн инструмент для переворачивания текста:

Переместить чтобы Сохранить Перенести в «Вставить код» для сохранения

Об обратном Текстовом Конвертере

Об Инструменте для Переворота Текста

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

Этот онлайн инструмент Обратный Текстовый Конвертер может одним щелчком перевернуть текст, перевернуть слова и перевернуть буквы.

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

Как это работает?

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

Наш инструмент предоставляет следующие возможности:

• Перевернуть Текст
• Перевернуть каждое слово
• Переверните каждую букву в словах

test text for reverse

Справа налево. Как перевернуть интерфейс сайта под RTL

Мы недавно перевели онлайн-версию 2ГИС на арабский язык, и в прошлой статье я рассказал о необходимой для этого теории — что такое dir=»rtl» , по каким правилам отображается текст смешанной направленности и как держать себя в руках.

Настало время приступить к практике — перевернуть с минимальными усилиями весь интерфейс справа налево так, чтобы даже настоящий араб не почувствовал подвоха.

В этой статье я расскажу, как быстро сделать прототип, что сделать со сборкой CSS и какие костыли разложить в JS, замечу немного об особенностях перевода и локализации, напомню про логические свойства CSS и затрону тему RTL в CSS-in-JS.

Переворачиваем стили

Когда я применил к тегу атрибут dir=»rtl», поменялся только неявный порядок элементов — например, порядок ячеек таблицы или flex-элементов. С явно заданными в стилях значениями ничего не произошло.

Возьмём стили какой-нибудь нотификации, расположенной снизу справа:

.tooltip

dir=»rtl» никак не повлияет на эти стили — в RTL-версии тултип будет так же справа, хотя ожидается он слева.

Что делать? Нужно заменить right: 10px на left: 10px . И так со всеми остальными стилями. Абсолютное позиционирование, margin/padding, выравнивание текста — всё нужно для арабской версии перевернуть в другую сторону.

Быстрый прототип

Для начала можно, не задумываясь, поменять все вхождения left на right и немножко поколдовать с shorthand значениями:

• left: 0 → right: 0
• padding-left: 4px → padding-right: 4px
• margin: 0 16px 0 0 → margin: 0 0 0 16px

Для этого подходит плагин postcss-rtl. Удобно — нужно только вбросить его в список всех postcss-плагинов проекта. Он заменяет все направленные правила на зеркальные и оборачивает это в [dir=»rtl»] . Например:

/* input */ .foo < color: red; margin-left: 16px; >/* output */ [dir] .foo < color: red; >[dir="ltr"] .foo < margin-left: 16px; >[dir="rtl"] .foo

После этого нужно только задать dir=»rtl» и автоматически применятся только нужные правила. Всё работает и кажется, что почти всё готово к продакшену, но это решение годится только для быстрого прототипа:

• увеличивается специфичность каждого правила. Это не обязательно будет проблемой, но хотелось бы этого избежать;
• такие манипуляции порождают баги. Например, может ломаться порядок свойств;
• заметно растёт размер css-файла. К каждому селектору добавляется [dir] , каждое направленное свойство дублируется. В нашем случае размер увеличился на одном проекте на 21%, на другом — на 35%:

Есть вариант лучше?

Нужно собирать стили для LTR и RTL раздельно. Тогда не нужно будет трогать селекторы и размер css почти не изменится.

Для этого я выбрал:

1. RTLCSS — эта библиотека под капотом у postcss-rtl.
2. webpack-rtl-plugin — готовое решение для стилей, собираемых через ExtractTextPlugin. Тот же RTLCSS под капотом.

И стал собирать RTL и LTR в разные файлы — styles.css и styles.rtl.css . Единственный минус сборки в разные файлы — нельзя заменить dir на лету, не загружая предварительно нужный файл.

RTLCSS позволяет использовать директивы, чтобы контролировать обработку конкретных правил, например:

.foo < /*rtl:ignore*/ right: 0; >.bar < font-size:16px/*rtl:14px*/; >

Какие ещё есть решения?

Все существующие решения почти не отличаются от RTLCSS.

• css-flip от Twitter;
• cssjanus от Wikimedia;
• да и postcss-rtl поддерживает параметр onlyDirection , с помощью которого можно собирать стили только для одной направленности, но размер всё равно растёт — например, для мобильного 2ГИС это 18% вместо 35% (24.5 kB → 29 kB).

Когда нужны директивы?

Когда стили не должны зависеть от направленности

Например, угол поворота стрелки, указывающей направление ветра:

.arrow._nw < /*rtl:ignore*/ transform: rotate(135deg); >

Или фейд у номера телефона — числа всегда пишутся слева направо, значит, и градиент должен быть всегда справа:

Когда нужно центрировать иконку

Это частный случай предыдущего пункта. Если центрируем несимметричную иконку через отступы/позиционирование, мы смещаем её блок в сторону, и если это смещение отразить, иконка «съедет» в другую сторону:

Лучше в таких ситуациях центрировать иконку в самой svg:

Когда нужно изолировать целый виджет, который не должен реагировать на RTL

В нашем случае это карта. Мы оборачиваем все её стили при сборке в блочные директивы: /*rtl:begin:ignore*/ . /*rtl:end:ignore*/ .

Есть ли вариант ещё лучше?

Решение с переворачиванием правил прекрасно работает, но возникает вопрос — а не костыль ли это? Зависимость стилей от направления — естественная задача для современного веба, и её актуальность с каждым годом растёт всё больше. Это должно было найти отражение в современных стандартах и подходах. И нашло!

Logical properties

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

Мы уже пользуемся чем-то похожим во флексах и гридах — например, flex-start , flex-end , grid-row-start , grid-column-end отвязаны от «лево/право».

Вместо понятий left , right , top и bottom предлагается использовать inline-start , inline-end , block-start и block-end . Вместо width и height — inline-size и block-size . А вместо шортхендов a b c d — logical a d c b (логические шортхенды идут против часовой стрелки). Также для существующих шортхендов появляются новые парные версии — padding-block , margin-inline , border-color-inline , и т.д.

• left: 0 → inset-inline-start: 0
• padding-left: 4px → padding-inline-start: 4px
• margin: 0 16px 0 0 → margin: logical 0 0 0 16px
• padding-top: 8px; padding-bottom: 16px → padding-block: 8px 16px
• margin-left: 4px; margin-right: 8px → margin-inline: 4px 8px
• text-align: right → text-align: end

А ещё появляется долгожданный шортхенд для позиционирования:

• left: 4px; right: 8px → inset-inline: 4px 8px
• top: 8px; bottom: 16px → inset-block: 8px 16px
• top: 0; right: 2px; bottom: 2px; left: 0 → inset: logical 0 0 2px 2px

Это уже доступно в firefox без флагов и в вебкитовых браузерах под флагом.

Плюсы — решение нативное, будет работать вообще без сборки/плагинов, если нужные браузеры поддерживаются. Нет потребности в директивах — просто пиши left вместо inline-start , когда имеется в виду физическое «слева».

Минусы вытекают из плюсов — без плагинов код в большинстве браузеров невалиден, нужно проделать много работы, чтобы перевести большой существующий проект.

Как подключить?

Самый простой способ — postcss-logical. Без параметра dir собирает стили для обоих направлений аналогично postcss-rtl, с заданным параметром dir — только для указанной направленности:

.banner < color: #222222; inset: logical 0 5px 10px; padding-inline: 20px 40px; resize: block; transition: color 200ms; >/* becomes */ .banner < color: #222222; top: 0; left: 5px; bottom: 10px; right: 5px; &:dir(ltr) < padding-left: 20px; padding-right: 40px; >&:dir(rtl) < padding-right: 20px; padding-left: 40px; >resize: vertical; transition: color 200ms; > /* or, when used with < dir: 'ltr' >*/ .banner

Как убедить команду начать писать offset-inline-start вместо left?

Никак. Но мы у себя на проекте решили упростить — писать start: 0 вместо offset-inline-start: 0 , как только все привыкнут, начну навязывать валидную запись 🙂

RTL + CSS-in-JS = ️️

CSS-in-JS не нужно собирать заранее. Значит, можно в рантайме определять направленность компонентов и выбирать, какие переворачивать, а какие нет. Полезно, если нужно вставить какой-то виджет, не поддерживающий RTL вообще.

В целом задача состоит в том, чтобы превращать объекты типа < paddingInlineStart: '4px' >(или < paddingLeft: '4px' >, если не удалось перейти на логические свойства) в объекты типа < paddingRight: '4px' >:

1. Вооружаемся bidi-css-js или rtl-css-js. Они предоставляют функцию, которая принимает объект стилей и возвращает трансформированный под нужную направленность.
2. .
3. PROFIT!

Пример с реактом

Оборачиваем каждый стилизуемый компонент в HOC, принимающий стили:

export default withStyles(styles)(Button);

Он берёт из контекста направленность компонента и выбирает конечные стили:

function withStyles(styles) < const < ltrStyles, rtlStyles >= bidi(styles); return function WithStyles(WrappedComponent) < . render() < return styles= />; >; >; . >; >

А направленность в контекст прокидывает провайдер:

Похожий подход используют airbnb: https://github.com/airbnb/react-with-styles-interface-aphrodite#built-in-rtl-support, если на проекте уже используется aphrodite, можно воспользоваться этим готовым решением.

Для JSS всё ещё проще — нужно только подключить jss-rtl:

jss.use(rtl());

styled-components

const Button = styled.button` background: #222; margin-left: 12px; `;

Что делать, если мы работаем с шаблонными строками, а не с объектами? Всё сложно, но выход есть — вычислять название свойства из направления, заданного в props :

const marginStart = props => props.theme.dir === "rtl" ? "margin-left" : "margin-right"; const Button = styled.button` background: #222; $: 12px; `;

Но кажется проще перейти со строк на объекты, styled-components умеют это с версии 3.3.0.

Особенности перевода и локализации

Мы разобрались с технической частью. Изолировали контент неопределённой направленности, отзеркалили стили, расставили исключения в нужных местах, перевели тексты на арабский. Кажется, всё готово — при переключении языка весь интерфейс оказывается с другой стороны экрана, никакая вёрстка не едет и всё выглядит лучше, чем на любом арабском сайте.

Показываем настоящему арабу, и.

Оказывается, не каждый носитель арабского языка знает, что такое Twitter. Это касается почти всех слов на английском. Для такого случая есть арабский транслит: «تويتر».

Оказывается, в арабском свои запятые, и то, что мы везде по коду конкатенировали через «,», на арабском нужно конкатенировать через «،».

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

Оказывается, в Дубае не бывает отрицательной температуры и знак «плюс» в прогнозе «+40» не имеет никакого смысла.

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

Если мы делаем dir=»auto» на блочный элемент и его контент окажется LTR, текст прибьётся к левой стороне контейнера, даже если вокруг RTL. Это можно просто вылечить, явно задав text-align: right . Можно даже применить это ко всей странице в арабской версии — значение этого свойства наследуется.

Иконки тоже автоматически не отзеркалятся. А без этого направленные иконки, такие как стрелки в галерее, могут смотреть в неправильную сторону. Представь себе, это единственный случай, в котором стрелки, сделанные через border, оправдали себя!

Для отражения иконок поможет незамысловатая трансформация:

[dir="rtl"] .my-icon

Она, правда, не поможет, если в иконке содержатся буквы или цифры. Тогда придётся сделать две разные иконки и вставлять их условно:

А ещё, оказывается, не все элементы интерфейса нужно зеркалить. Например, в нашем случае мы решили оставить чекбоксы обычными:

Как из всего интерфейса выбрать такие элементы — не знаю. Тут может помочь только носитель языка, который скажет, что ему привычно, а что нет.

Пользовательский ввод

Даже если мы полностью контролируем все данные своего приложения, это может быть пользовательский ввод. Например, название файла. Можно даже исхитриться и выдать .js файл за .png, — такая уязвимость была в Телеграме:

прикольная_картинка*U+202E*gnp.js → прикольная_картинкаsj.png

В таких случаях стоит отфильтровать неуместные utf-символы из строки.

Переворачиваем скрипты

В RTL-джаваскрипте синтаксис немного меняется. Цикл, который выглядел так:

for (let i = 0; i < arr.length; i++) 

for (++i; length.arr > i; let 0 = i) 

function flipSliderValues(values, scale, isRtl) < if (!isRtl) < return values; >if (scale === 'log') < // [A, B] -->[1/B, 1/A] return values.map(x => 1 / x).reverse(); > // [A, B] --> [MAX-B, MAX-A] return values.map(x => Number.MAX_SAFE_INTEGER - x).reverse(); >;