Est-il possible de faire pivoter la saisie de texte?

Question

Je dois aligner une zone de texte et du texte, à environ 30 degrés, comme ceci:

Je voudrais que cela fonctionne au moins dans IE et FF. Tout ce que j'ai trouvé sur le net concerne la rotation des images.
Quelqu'un?

Answer 1

Il n'y a pas de bonne solution multi-navigateurs.

Le dernier Webkit prend en charge les transformations CSS, qui permettent une telle chose de manière simple.

Il y a <foreignContent> dans SVG ce qui permettrait théoriquement de faire pivoter le code HTML, mais il n'est pas largement pris en charge (et lorsqu'il est pris en charge, il est généralement incomplet et erroné).

Je vous suggère de modifier la conception de la page. Essayez des astuces visuelles avec des bordures et des ombres autour de l'entrée qui lui donne une légère rotation.

Je déconseille les piratages en Javascript ou en flash. Les éléments d'entrée du navigateur sont importants pour la facilité d'utilisation. Vos hacks risquent de ne pas bien fonctionner avec les gestionnaires de mots de passe / remplissage automatique, divers raccourcis clavier standard, la sélection de texte, etc.

Answer 2

Votre meilleur pari est probablement Flash.

Answer 3

Pas complètement pris en charge sur les navigateurs actuels, mais fonctionne raisonnablement (au moins) sur FF3 et IE7, est le élément HTML de la toile . L'élément canvas fait partie de HTML5 et permet le rendu scriptable dynamique d'images bitmap. Le canevas consiste en une zone dessinable définie dans le code HTML avec les attributs height et width. Le code JavaScript peut accéder à la zone par l’intermédiaire d’un ensemble complet de fonctions de dessin similaires à celles d’autres API 2D courantes, ce qui permet de générer des graphiques générés de manière dynamique.

Une page du Manuel de Mozilla montre comment dessiner du texte sur une toile. Tous les graphiques de canevas peuvent être rotate(angle) . L'exemple utilise la méthode de rotation pour dessiner des formes selon un motif circulaire.:

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

D'accord avec PEZ. Je voudrais utiliser Flash pour celui-ci. Mais dans Safari, vous pouvez utiliser les transformations CSS3 pour y parvenir.

Answer 5

De prime abord, je pense que c'est quelque chose que vous ne pouvez faire qu'en CSS3, qui n'est pas encore assez largement supporté pour être utilisé (à moins que ce ne soit une sorte d'application interne où vous pouvez dire qu'un certain navigateur est requis ).

Answer 6

Essayez css3

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

Mais cela ne fonctionnera pas sous IE

Pour IE 9+ (merci à Michael Potter)

-ms-transform: rotate(270deg)