Есть ли способ повернуть ввод текста?

Question

Я должен выровнять текстовое поле и некоторый текст, примерно на 30 градусов, например:

Я бы хотел, чтобы он работал хотя бы в IE и FF. Все, что я нашел в сети, связано с вращением изображения.
Кто-нибудь?

Answer 1

Нет хорошего кросс-браузерного решения.

Последняя версия Webkit поддерживает преобразования CSS, которые позволяют делать это простым способом.

В SVG есть <foreignContent>, который теоретически позволяет вращать HTML, но он не поддерживается широко (и там, где он поддерживается, он обычно неполон и содержит ошибки).

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

Советую против взломов в Javascript или Flash. Входные элементы браузера важны для удобства использования. Ваши хаки могут плохо работать с менеджерами паролей / автозаполнением, различными стандартными сочетаниями клавиш, выделением текста и т. Д.

Answer 2

Ваша лучшая ставка, вероятно, Flash.

Answer 3

Не полностью поддерживается в текущих браузерах, но работает разумно (по крайней мере) на FF3 и IE7, это элемент HTML canvas . Элемент canvas является частью HTML5 и позволяет динамически отображать растровые изображения с помощью сценариев. Холст состоит из области рисования, определенной в коде HTML, с атрибутами высоты и ширины. Код JavaScript может получить доступ к области через полный набор функций рисования, аналогичных другим распространенным 2D API, что позволяет динамически генерировать графику.

На странице Руководства Mozilla показано, как рисовать текст на холсте. Для всех графических изображений можно применить rotate(angle) . В этом примере метод rotate используется для рисования фигур по круговой схеме.

function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}

Answer 4

Согласен с PEZ. Я бы использовал Flash для этого. Но в Safari вы можете использовать преобразования CSS3 для достижения этой цели.

Answer 5

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

Answer 6

Попробуйте css3

-webkit-transform: rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);

Но это не будет работать на IE

Для IE 9+ (спасибо Майклу Поттеру)

-ms-transform: rotate(270deg)