Gibt es eine Möglichkeit der Texteingabe zu drehen?

Question

Ich habe eine Textbox auszurichten und einen Text, bei etwa 30 Grad, wie folgt aus:

Ich mag es zumindest in IE und FF arbeiten. Alles, was ich im Netz beschäftigt sich mit Bildrotation gefunden.
Anyone?

Answer 1

Es gibt keine gute Cross-Browser-Lösung.

Die neuesten Webkit unterstützt CSS-Transformationen, die so etwas in einfacher Weise ermöglichen.

Es gibt <foreignContent> in SVG, die theoretisch erlauben würden, HTML zu drehen, aber es ist nicht weit unterstützt (und wo es unterstützt wird, ist es in der Regel unvollständig und fehlerhaft).

Ich schlage vor, dass Sie Design der Seite ändern. Versuchen Sie visuelle Tricks mit Rahmen und Schatten rund um den Eingang, der es leicht gedreht erscheinen lassen.

Ich rate gegen Hacks in Javascript oder Flash. Browser-Eingabeelemente sind wichtig für die Benutzerfreundlichkeit. Ihre Hacks können nicht gut mit Passwort-Manager / autofill, verschiedenen Standard-Tastenkombinationen, Textauswahl spielen, etc.

Answer 2

Ihre beste Wette ist wahrscheinlich Flash.

Answer 3

Nicht vollständig auf den aktuellen Browsern unterstützt, aber funktioniert recht (zumindest) auf FF3 und IE7, ist die Leinwand HTML-Element . Das Leinwand-Element ist Teil der HTML5 und ermöglicht eine dynamische Wiedergabe von skript Bitmap-Bildern. Segeltuch besteht aus einem ziehbaren Bereich definiert in HTML-Code mit in Höhe und Breite Attributen. JavaScript-Code auf den Bereich durch einen vollständigen Satz von Zeichenfunktionen ähnlich wie bei anderen gängigen 2D-APIs zugreifen können, damit für dynamisch generierte Grafiken ermöglicht.

Eine Seite aus dem Mozilla Handbuch zeigt, wie der Text auf einer Leinwand zu zeichnen. Alle Leinwand Grafiken können haben rotate(angle) angewendet. Das Beispiel verwendet die Methode rotate Formen in einem kreisförmigen Muster zu zeichnen.

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

Vereinbaren Sie mit PEZ. Ich würde Blitz für diese verwenden. Aber in Safari können Sie CSS3-Transformationen verwenden, um dies zu erreichen.

Answer 5

Aus der Spitze von jedem Kopf, ich denke, das ist etwas, das man nur in CSS3 tun kann, die nicht weit genug getragen wird noch verwendet werden (es sei denn, es ist eine Art von interner App ist, wo man sagen kann, dass ein bestimmte Browser erforderlich ist ).

Answer 6

Versuchen css3

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

Das wird aber auf IE nicht funktionieren

Für IE 9+ (dank Michael Potter)

-ms-transform: rotate(270deg)