Обычно повернутый текст веб-мастера вставляют с помощью картинок. Он хорошо работает, однако вставленный таким методом текст не индексируется поисковиком. Есть другой способ поворота текста, свободный от этого недостатка, он основан на вставке в тело статьи кода CSS, который позволяет повернуть нужный текст. Поворот текста можно задавать как в произвольном месте статьи, так и в любой ячейке таблицы.
Процесс по шагам:
1. Добейтесь возможности вставить произвольный текст в произвольную статью. Несколько способов для этого описано в статье [1]. Я обычно использую Jumi [2], здесь будет описан именно этот способ.
2. Подготовьте файл rotate-text.css со следующим содержимым:
< style>
#rotateText {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
writing-mode: tb-rl;
/*width: 300px;
height: 200px;*/
}< /style>
Здесь закомментированный кусок кода может использоваться при необходимости для подстройки ширины и высоты ячейки таблицы, если повернутый текст будет использоваться в таблице. Сохраните этот файл на свой сайт в произвольную папку и запомните полный путь, где этот файл находится.
3. С помощью Jumi добавьте этот CSS в нужную статью, где используется поворот текста. Как это делается, см. [1].
4. Для поворота текста в статье используйте следующий HTML-код:
< div class="firstBlock">< /div>
< div id="rotateText">Этот текст будет отображен вертикально< /div>
< div class="lastBlock">< /div>
Пример отображения вертикального текста:
Этот текст будет отображен вертикально
[Ссылки]
1. Joomla: как добавить отдельный CSS для статьи? 2. Joomla: вставка произвольного кода на сайт с помощью Jumi. 3. Вертикальный текст в шапке таблицы с помощью CSS site:sergey-lysenko.ru. 4. Вертикальный текст site:cyberforum.ru.
|