Программирование HTML Joomla: как в статье повернуть текст вертикально Thu, November 21 2024  

Поделиться

Нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.


Joomla: как в статье повернуть текст вертикально Печать
Добавил(а) microsin   

Обычно повернутый текст веб-мастера вставляют с помощью картинок. Он хорошо работает, однако вставленный таким методом текст не индексируется поисковиком. Есть другой способ поворота текста, свободный от этого недостатка, он основан на вставке в тело статьи кода 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.

 

 

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


Защитный код
Обновить

Top of Page