[Résolu] Ecrire en diagonale : du nouveau ?

Bonjour,

Cette question a été posée dans le forum il y a quelque temps déjà (deux ans).
Je me demande si avec HTML5 ou JQuery il y a de nouvelles possibilités de pouvoir mettre un bloc ou une ligne de texte en diagonale...

Toujours pas possible ?
merci
Modifié par miltonis (24 Aug 2010 - 17:54)

Apparemment c'est possible en CSS3 mais niveau compatibilité... aie!

footer nav a:hover { 
  -moz-transform: rotate(8deg);  
  -webkit-transform: rotate(8deg); 
} 

source: http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html
charpite "Rotation" juste avant la conclusion.
Modifié par Foxxy (24 Aug 2010 - 17:08)

Yep, merci pour le lien, je connaissais l'article mais ce petit bout m'avait échappé...

Je l'ai testé et ça déforme (pixellise) le texte, donc ce n'est pas une solution qui convient (pour du texte en tout cas)

ça me donne une idée : Je vais tester la solution Cufon, et la coupler avec ces attributs CSS3. Vu que le texte est généré en JS, ça marchera pitet' !
Je reviens pour donner suite,
en attendant, si vous avez d'autres idées...
Modifié par miltonis (24 Aug 2010 - 17:22)

Bon, ça fonctionne !
D'abord, j'applique la méthode de transformation de texte avec Cufon, puis j'attribue à l'élément le "rotate" avec le CSS.

Par contre, je me demande à quel point est-ce référençable... Vu l'utilisation que je compte en faire ça n'a pas d'importance pour moi. Mais si vous comptez utiliser cette astuce, renseignez-vous bien sur le sujet, il y a un post sur le sujet dans ce forum je crois.

A++

Miltonis, est-ce que la rotation fonctionne dans IE?

Hello,

Pour IE, il y a peut être une piste avec cet article sur la rotation de texte en CSS.

A tester, je n'ai pas vérifié.

Valhalla, j'avais vu cet article, mais d'après la documentation de Microsoft, ça se limite à des angles de 90 degrés.

Pour moi ça fonctionne avec IETester, par contre je n'ai pas essayé avec + de 90°
Pour en être sur, le mieux c'est d'essayer (et de revenir donner ses impressions pour que tout le monde en profite !)

A++

Miltonis, ton texte est dans quel angle? C'est que tu parlais de diagonale, donc 45 degrés, non?

Salut,

Pour la rotation sur ie on peux utilisé Matrix au lieu de BasicImage. Ce qui peut donner un truc comme ça :

filter: progid:DXImageTransform.Microsoft.Matrix(
	sizingMethod='auto expand',
	M11=0.966,
	M12=-0.2588,
	M21=0.2588,
	M22=0.966
);

Dans mes souvenirs l'angle est de ~10°. Mais faut prendre ça calculatrice et s'amuser avec les sinus et cosinus . Faut chercher dans la document de Microsoft pour les explications.