28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ecrire du texte vertical en CSS ?

Bonjour,

Je dois positionner un gros titre de page en vertical sur la gauche de ma page, le texte étant écrit de bas en haut.
La solution la plus simple est de fabriquer mon titre en image, de la coller dans une div positionnée à l'emplacement voulu et de masquer mon titre <h1> par un positionnement hors de page (margin :-5000px par exemple) pour qu'il reste lisible sur un autre média que l'écran.

Pour autant, j'aimerais savoir s'il existe un moyen plus élégant et plus conforme à l'esprit. Je n'ai rien trouvé dans mes recherches sur le forum ou les astuces d'Alsacréations.

Merci par avance.
Modifié par yanngaudino (04 Mar 2014 - 21:44)
<style>
.rotate {
    margin: 0;
    padding: 0;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
</style>

<p class="rotate rotate-position">Rotation</p>
Merci pour les réponses.

gc-nomade : je ne connaissais pas ce site et malgré mon peu d'appétence pour la langue de shakespeare, je pense qu'il mérite que je fasse un effort, je vais tester le code pour voir s'il fonctionne dans l'environnement cible de mon projet.

Olivier C : Je teste également ton code et je t'en remercie.

J'aurais du préciser que mon environnement cible est un intranet strictement isolé dans lequel l'OS est déployé sur les client qui ne peuvent administrer leurs postes. Une migration XP SP3 vers SEVEN est en cours et les deux seuls navigateurs installés sont IE8 et FF17.

Pour ces raisons je me limite aux sélecteurs CSS2.1. Je vais essayer pour voir si vos propositions tournent bien sur mes postes test, et je laisse encore un peu ma question ouverte pour recueillir d'autres avis et tuyaux.
Là les puristes ils ne vont pas aimer.
Mais court et efficace, quoique pas en CSS.
<h1>R<br />U<br />O<br />J<br />N<br />O<br />B</h1>

Modifié par limipl (28 Feb 2014 - 09:45)
limipl a écrit :
Là les puristes ils ne vont pas aimer.
Mais court et efficace, quoique pas en CSS.
<h1>R<br />U<br />O<br />J<br />N<br />O<br />B</h1>

À éviter, en effet (je te mets, d'ailleurs, au défi de faire lire ce bout de code HTML par un lecteur d'écran).
De mémoire, j'avais contourné ces problèmes avec un array_walk() pour générer une image coté serveur et en remplissant proprement le alt car il s'agissait de titre générés par un CMS, ce la se faisait une fois coté administration du site .

Pour un texte static, une image devrait suffire à ce que cela passe dans tout les navigateurs, et au gré de mise à jours Smiley cligne .
Modifié par gc-nomade (28 Feb 2014 - 16:09)
Raphael a écrit :
Olivier C : attention à la surenchère des préfixes inutiles.
Par exemple, les préfixes -o- et -moz- me semblent aujourd'hui parfaitement inutiles : caniuse.com

Ce code faisait partit de ma collection de snippets, je l'ai posté tel quel.

Mais effectivement, il faut toujours jeter un œil à caniuse.
Victor BRITO a écrit :

À éviter, en effet (je te mets, d'ailleurs, au défi de faire lire ce bout de code HTML par un lecteur d'écran).


et si tu mets 
<h1 title="BONJOUR">R<br />U<br />O<br />J<br />N<br />O<br />B</h1>
il dit quoi, le lecteur d'écran ?
Merci à tous ceux qui ont eu la gentillesse de m'aider.

Après bien des essais, j'ai finalement réussi à positionner correctement mon titre dans un cartouche vertical à bord arrondi, il m'a fallu tout de même quelques essais en jouant notamment sur l'origine de la rotation, puis rajouter un translate après le rotate pour arriver à l'effet recherché.

Je n'ai qu'un mois de pratique réelle, et tant que je "jouais" à faire des sites de démo dans mon coin, je n'avais pas rencontré trop de difficulté, mais respecter un cahier des charges graphiques précis et livrer un site conforme au dessin tout en essayant de respecter l'esprit CSS.... C'est vraiment une autre paire de manche, je ne sais pas si je vais dormir beaucoup d'ici le 20 mars date de livraison prévue...

Merci encore à la communauté d'Alsacréations, j'espère que dans quelques temps je pourrais à mon tour contribuer et aider les autres.
limipl a écrit :
et si tu mets 
<h1 title="BONJOUR">R<br />U<br />O<br />J<br />N<br />O<br />B</h1>
il dit quoi, le lecteur d'écran ?

Il dira : « titre de niveau 1 R, U, O, J, N, O, B » (l'attribut title sur un h1 ne sera pas pris en compte).

Bref, à éviter également.
Modifié par Victor BRITO (10 Apr 2014 - 00:01)
Sujet clos
Aller à