テキスト入力を回転させる方法はありますか？

StackOverflow https://stackoverflow.com/questions/432589

質問

次のように、テキストボックスとテキストを約30度に揃える必要があります。 回転テキスト

少なくともIEとFFで動作するようにします。ネットで見つけたものはすべて、画像の回転に関するものです。
誰ですか？

役に立ちましたか？

解決

優れたクロスブラウザソリューションはありません。

最新のWebkitはCSS変換をサポートしているため、このようなことが簡単に行えます。

理論的にはHTMLの回転を可能にする＆lt; foreignContent＆gt; がありますが、広くサポートされていません（サポートされている場合、通常は不完全でバグがあります）。

ページのデザインを変更することをお勧めします。入力を少し回転させたような境界線と影のある視覚的なトリックを試してください。

JavascriptまたはFlashのハッキングにはお勧めしません。ブラウザの入力要素は、使いやすさにとって重要です。ハッキングは、パスワードマネージャー/自動入力、さまざまな標準キーボードショートカット、テキスト選択などではうまく機能しない可能性があります。

他のヒント

あなたの最善の策はおそらくFlashです。

現在のブラウザでは完全にはサポートされていませんが、FF3およびIE7では合理的に（少なくとも）動作します。キャンバスHTML要素。 canvas要素はHTML5の一部であり、ビットマップ画像の動的なスクリプト可能なレンダリングを可能にします。 Canvasは、高さと幅の属性を持つ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();
  }
}

PEZに同意します。これにはFlashを使用します。ただし、SafariではCSS3変換を使用してこれを実現できます。

これは、まだ十分に広くサポートされていないCSS3でしかできないことだと思います（特定のブラウザーが必要であると言うことができる内部アプリの場合を除きます） ）。

css3を試す

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

ただし、これはIEでは機能しません

IE 9+の場合（Michael Potterに感謝）

-ms-transform: rotate(270deg)
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top