28173 sujets

CSS et mise en forme, CSS3

Ecrire un texte de haut en bas

bonjour,
j'aimerai savoir si il y a une propriété CSS qui permet d'écrire un texte de haut en bas au lieu de l'écrire de gauche à droite.

je voudrai cet effet :

l
i
e
n
1

lorsque j'écris le code <a href="#>lien1</a>

je pourrai bien entendu définir la largeur du div contenant ce lien de façon à ce qu'il n'y ai qu'une lettre par ligne mais c'est pas vraiment propre ... si bien entendu il existe une solution propriété CSS, chose que je n'ai pas encore trouvé Smiley decu
Modifié par jroy (23 Aug 2007 - 08:24)
j'ai cru avoir trouvé la réponse avec la propriété "direction" mais ça ne permet que de définir si on écrit de gauche à droite ou de droite à gauche (pour les sites en arabe par exemple) ... j'ai rien trouvé pour les sites où on veut écrire de haut en bas (chinois, japonais).
Salut,

Il me semblait qu'il y avait une balise propriétaire pour ie mais bon ...
Sinon avec un brin de php, ce doit être possible
ghost a écrit :
Salut,

Il me semblait qu'il y avait une balise propriétaire pour ie mais bon ...
Sinon avec un brin de php, ce doit être possible


le php ne va générer que de l'html, le problème sera tjrs le même que si je code l'html en dur.

pour le moment je ne vois que la solution de l'image ou alors de fixer la taille de la colone de façon à ce qu'il n'y ai qu'un caractère par ligne, faudra que je fasse gaffe aux cas ou l'internaute réduise la taille des polices.
Re,

Exact, ca te permettra juste d'alléger ton code source et de faciliter la maintenance (c'est déjà pas si mal), je pensais à une fonction php te permettant d'ajouter un saut de ligne à chaque lettre en la centrant ce qui justement évite ces problèmes d'ajustement de colonne.
ghost a écrit :
Re,

Exact, ca te permettra juste d'alléger ton code source et de faciliter la maintenance (c'est déjà pas si mal), je pensais à une fonction php te permettant d'ajouter un saut de ligne à chaque lettre en la centrant ce qui justement évite ces problèmes d'ajustement de colonne.


le problème c'est qu'en plus d'etre un texte ... c'est un lien, et je pense que ce mode d'affichage n'est pas géré à l'heure actuelle, je ferai donc des images.
Sauter une ligne avec un <br> entre chaque caractère ca donne quelque chose de pas trés lisible en mode texte (sans CSS). Et à mon avis absolument incompréhensible par un lecteur vocal ou un bot.

Il vaudrait mieux sauter une ligne avec un simple saut de ligne (\n) et passer le white-space en white-space:pre pour forcer le saut de ligne à l'affichage uniquement. Quoique... je ne sais pas comment les lecteurs vocaux et les bots gérent les \n

Hmm... une fonction javascript qui irait rajouter un \n automatiquement entre chaque lettre? ou un <br> d'ailleurs au point où j'en suis... ^^
Bonjour,

Pour une solution accessible, et pour conserver un minimum d'interopérabilité et de réutilisabilité des contenus, utilisez uniquement les textes mis en image, doté d'un alt pertinent.

Voilà, tout est dit Smiley cligne
Modifié par Laurent Denis (23 Aug 2007 - 12:02)
Laurent Denis a écrit :
Bonjour,

Pour une solution accessible, et pour conserver un minimum d'interopérabilité et de réutilisabilité des contenus, utilisez uniquement les textes mis en image, doté d'un alt pertinent.

Voilà, tout est dit Smiley cligne


par exemple : une image où il y a écrit "contact" avec le code suivant

<a href="contact.html" title="Contactez-nous"><img src="contact.jpg" alt="Contactez-nous" /></a>
Modérateur
Salut,

Bien que ce soit un peu biscornu, on pourrait imaginer quelquechose comme ça non ?
<!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" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemple</title>
		<style type="text/css"><!--

@media screen, projection
{
	.vertical
	{
		width: .3em;
	}
	.vertical a
	{
		text-decoration: none;
		cursor: pointer;
	}
	.vertical span
	{
		display: block;
		width: .3em;
		cursor: pointer;
	}
}

		--></style>
	</head>
	<body>

<p class="vertical">
	<a href="monlien.htm">
		<span>l</span>
		<span>i</span>
		<span>e</span>
		<span>n</span>
		<span>&nbsp;</span>
		<span>p</span>
		<span>e</span>
		<span>r</span>
		<span>t</span>
		<span>i</span>
		<span>n</span>
		<span>e</span>
		<span>n</span>
		<span>t</span>
	</a>
</p>

	</body>
</html>
(vu que les écritures restent droites)
Modifié par koala64 (23 Aug 2007 - 12:37)
Laurent Denis a écrit :
Bonjour,

Pour une solution accessible, et pour conserver un minimum d'interopérabilité et de réutilisabilité des contenus, utilisez uniquement les textes mis en image, doté d'un alt pertinent.

Voilà, tout est dit Smiley cligne
Je te reconnais bien là, Laurent :
Smiley cligne : concision, précision, justification...
+1, évidemment...
N'empêche que ce cas précis, qui n'est pas pris en compte dans les normes actuelles, pourrait rentrer dans un débat plus large concernant les évolutions futures (html 5, puisqu'on en parle sur un autre topic.. ?)
koala64 a écrit :
Salut,

Bien que ce soit un peu biscornu, on pourrait imaginer quelquechose comme ça non ?
(vu que les écritures restent droites)


en effet c'est pas mal, merci !

je ferai une version avec des images et une version comme ça, on je verrai ce qui est le plus interessant.
Sujet clos
Aller à