28172 sujets

CSS et mise en forme, CSS3

Propriétés de texte haut vers le bas

Bonjour,

Je ne sais pas si une propriété CSS existe pour écrire du haut vers le bas.
Exemple:
A
C
C
U
E
I
L

Et également pour écrire du texte penché à 90°
upload/16610-brikwo.png
J'ai cherché mais rien trouvé
Merci d'avance pour votre aide. Smiley biggol
Tu peux le faire en image avec un script php ? Mais je ne sais pas si c'est optimal... Sinon il n'existe rien à ma connaissance en css...
Merci pour ta réponse.
J'avais vu quelques exemples de script, mais j'aurais voulu le faire en CSS. J'évite l'utilisation des script pour se genre de chose.
Modifié par stef2cr (29 Jul 2009 - 23:34)
Bonsoir stef2cr,

J'ai une solution à te proposer qui peu, éventuellement, résoudre ton problème.

Tu peux écrire un texte de 90° et du haut vers le bas en utilisant les listes.

Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
   
		<div id="page">
			<ul>
				<li>A</li>
				<li>C</li>
				<li>C</li>
				<li>U</li>
				<li>E</li>
				<li>I</li>
				<li>L</li>
			</ul>
		
		</div>
   
   </body>
</html>


Voilà pour le code XHTML, comme tu peux le constater, ici, j'ai tout simplement inséré une liste et, sur chaque ligne, j'ai ancré plusieurs lettres constituant un mot écrit de haut en bas avec un angle de 90°.

Après, tu peux styliser comme bon te semble ta liste, par exemple, moi, j'ai retiré les petites puces via le code CSS suivant :


/* CSS */

ul li {
	list-style-type: none;
}


Par contre, niveau accessibilité je ne sais pas trop ce que ça vaut Smiley ohwell .

Petite question subsidiaire, pourquoi ne pas créer une image avec le texte écrit comme voulu puis insérer cette même image dans tes pages ?

Voilà, en espérant t'avoir aidé Smiley cligne .
Modifié par jQz (29 Jul 2009 - 23:39)
jQz a écrit :
Petite question subsidiaire, pourquoi ne pas créer une image avec le texte écrit comme voulu puis insérer cette même image dans tes pages ?


Oui c'est çà qu'il faut faire (une image html avec le alt reprenant le texte de l'image) et oublier le montage hasardeux que tu proposes Smiley cligne
a écrit :
Oui c'est çà qu'il faut faire (une image html avec le alt reprenant le texte de l'image) et oublier le montage hasardeux que tu proposes Smiley cligne


Pourrais-tu préciser ce que entends par "hasardeux", cela m'intéresse Smiley smile ?
Modifié par jQz (29 Jul 2009 - 23:57)
hum, j'adore l'astuce de la liste à puce Smiley langue , Fallait y penser.

Je crois que je vais me faire des images, ce sera plus correcte.

Merci tout de même. Je garde l'astuce sous le coude.
jQz a écrit :
Oui c'est çà qu'il faut faire (une image html avec le alt reprenant le texte de l'image) et oublier le montage hasardeux que tu proposes Smiley cligne


Pourrais-tu préciser ce que entends par "hasardeux", cela m'intéresse Smiley smile ?
Par exemple détourner une structure html à des fins de présentation. Pas testé ton montage dans un lecteur d'ecran mais je doute de sa restitution.
Plus généralement CSS peut permettre des "bricolages" astucieux qui s'avèrent le plus souvent des solutions difficilement utilisables, pas "industrialisables", liées à un contexte précis non reproductible etc. qui engendre plus de problèmes qu'ils n'en résolvent.

Dans ce cas, la présentation de texte à 90° n'est pas résolu par CSS. Une solution existe c'est une image et pas de triturer tel ou tel élément html pour l'adapter à un détail de présentation. On pourrais très bien le réaliser avec une div de largeur fixe et des span, des em, des ce qu'on veut, ou des dl, des titres ce serait pareil Smiley cligne
a écrit :
Pas testé ton montage dans un lecteur d'ecran mais je doute de sa restitution.


Moi non plus je ne l'ai pas testé sous un lecteur d'écran, mais c'est bien ça qui me fait douter.

Conclusion : mieux vaut se tourner vers une image dans ce genre de situation.
Je n'ai pas Jaws sous la main, mais d'après ma petite expérience, il devrait lire "objet de liste A, object de liste C..." (list item en anglais) et donc rendre la compréhension du titre hasardeuse (il faut se souvenir de chaque lettre et les remettre dans l'ordre, sans parler de la perte de temps).
Sujet clos
Aller à