повернуть текст из горизонтального в вертикальное положение

Question

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

Я думал, что вы можете сделать это в jquery, но не смог найти плагин.

Answer 1

Я использовал чистый CSS, и он работал очень хорошо для меня, вот код:

<div style="-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); z-index:inherit; float:left">Not at all</div>

Answer 2

Я помню, как заглянул в это сам и обнаружил, что это было либо просто по-хакерски, либо просто невозможно.

IE позволяет

<div STYLE="writing-mode: tb-rl">Content rendered vertically</div> 

Но AFAIK это не работает где-то еще (конечно, не на FF 3).

Лучшим решением, по-видимому, является использование изображений (возможно, динамически генерируемых). Извините, что больше не помогать!

Answer 3

CSS позволит ...

-webkit-transform: повернуть (-90 градусов); -moz-transform: повернуть (-90 градусов); фильтр: progid: DXImageTransform.Microsoft.BasicImage (вращение = 3);

Элемент также должен отображаться: блок.

Answer 4

Возможно, вам придется использовать SVG вместо HTML - конечно, не все браузеры поддерживают SVG, и некоторые делают это лучше, чем другие.

Answer 5

Я задал пару вопросов на эту тему сам ...

Вы можете сделать это с динамическим изображением - хотя имеет проблемы (пример C #) .

Вы также можете сделать это с помощью CSS в IE.

Новые преобразования CSS в последних версиях Safari, Chrome и FX тоже не совсем работают (включая пример) .

Answer 6

Есть несколько новых CSS-спецификаций , предложенных webkit. В настоящее время они реализованы только в своих ночных и Apple Safari 4. Developer Preview.

Answer 7

Я не знаю, поможет ли это, но вы можете сделать это в два этапа:

• Используйте серверное решение, такое как php, чтобы преобразовать ваш текст в изображение
• Поворот изображения с помощью плагина jquery (например, jquery-rotate)

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