Есть ли способ повернуть ввод текста? - PullRequest
Новая
       25

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

1 голос
/ 11 января 2009

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

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

Ответы [ 6 ]

5 голосов
/ 11 января 2009

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

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

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

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

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

4 голосов
/ 11 января 2009

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

3 голосов
/ 11 января 2009

Не полностью поддерживается в текущих браузерах, но работает достаточно (по крайней мере) в 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();
  }
}
2 голосов
/ 12 января 2009

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

2 голосов
/ 11 января 2009

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

1 голос
/ 21 октября 2013

Попробуйте css3 

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

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

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

-ms-transform: rotate(270deg)
...