Как написать перевернутый текст?

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

Инструкция

Если необходимо вставить перевернутую надпись в текстовый документ, то можно воспользоваться редактором Microsoft Word. Загрузив исходный документ, перейдите на вкладку «Вставка», раскройте выпадающий список на кнопке с надписью WordArt и щелкните самый первый стиль в этом списке. Редактор откроет диалоговое окно для ввода текста и настройки используемого для его отображения шрифта.

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

Щелкните WordArt-объект правой кнопкой мышки и в его контекстном меню выберите строку «Формат объекта WordArt».

Выберите в списке «Цвет» на вкладке «Цвета и линии» нужный оттенок для шрифта надписи. Здесь же, в поле «Линии», можно задать параметры обводки букв текста.

Щелкните вкладку «Размер» и установите значение 180° в поле «Поворот». Нажав кнопку «OK», вы закончите процедуру создания в текстовом документе перевернутой надписи.

Если требуется вставить перевернутый текст в веб-страницу, то для этого можно, например, применить имеющиеся в языке CSS опции трансформации текста. В третьей версии стандартов этого языка свойству transform можно указывать значение rotate, в котором задается угол наклона соответствующих элементов страницы. Единственное неудобство - придется задавать этот параметр раздельно для каждого типа браузеров. Чтобы не весь текст на странице, а только нужные его блоки были перевернуты, используйте именованные классы. Например, вставьте в исходный код документа такой блок: Это блок перевернутого текста А в заголовочную часть (между тегами и ) добавьте соответствующее описание стилей. Например:

.flip {

-webkit-transform: rotate(180deg); /* Chrome и Safari */

-moz-transform: rotate(180deg); /* Mozilla FireFox */

-o-transform: rotate(180deg); /* Opera */

transform: rotate(180deg); /* По умолчанию */

/* Internet Explorer */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

width: 700px;

}

Оцените статью!