28219 sujets

CSS et mise en forme, CSS3

Texte vertical et compatibilité

Bonjour,

Pour un site internet que je dois réaliser je dois avoir un texte vertical (qui correspondrait à une rotation de 90°, dans le sens inverse des aiguilles d'une montre, d'un texte "normal").

J'ai bien trouvé des solutions avec "writing-mode: tb-rl;" par exemple mais ça ne marche que sur IE.

L'un d'entre vous aurait il une solution qui marche au moins sur FIREFOX ?

Merci pour votre aide.
emmanuel.d a écrit :
L'un d'entre vous aurait il une solution qui marche au moins sur FIREFOX ?

Oui : une image.
Ne pas oublier de renseigner correctement le texte alternatif.
Le problème c'est que le texte sur l'image doit être localisé en plusieurs langues. Il est vrai qu'il est possible de générer une image en dynamique en PHP mais n'ayant jamais essayé ça me rebute un peu.

Ghost j'ai vu que tu avais une solution en PHP, laquelle ?
emmanuel.d a écrit :
Ghost j'ai vu que tu avais une solution en PHP, laquelle ?

Une solution en PHP, ça m'étonnerait. PHP ne s'occupe certainement pas du rendu ou de la création de contenus « en PHP ». ghost parlait peut-être de solutions de créations dynamique d'images via PHP et la librairie GD ?

Le module « Text Layout » de CSS3 est en cours de rédaction. Même avec une spécification publiée dans l'année (en étant très optimiste !), ça prendra des années avant d'avoir un support correct de block-progression: tb ou de writing-mode: tb-lr.

À l'heure actuelle, le seul élément d'avoir du texte vertical passe par des éléments graphiques : images, Flash, etc.
Donc deux solutions :
- étudier la génération d'images côté serveur ou bien voir si SIFR a une option texte vertical (c'est pas sûr...) ;
- dire « Ah non, c'est pas possible, contrainte du média ». Smiley cligne
Epy a écrit :
Et si le php affichait une image différente en fonction de la langue du navigateur (ou du choix de l'utilisateur) ?

Ça permet effectivement de préparer à l'avance ses images. Mais il faut alors que le contenu soit relativement stable, vu que les modifications se feront à la main (créer de nouvelles images). Si c'est pour un élément d'interface qui ne changera qu'en cas de refonte partielle ou totale, pourquoi pas. Si c'est pour un titre d'article, ça risque d'être plus problématique.
Re,

Je pensais également à un tout petit bout de script qui pourrait après quelques cosmétiques css être utilisable. Je ne sais pas si mon code est très clair, mais bon il se fait tard ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 

<title>Test</title>
<style type="text/css">
*{margin: 0; padding: 0;}

#conteneur{
width: 100px;
border: 1px solid black;
margin: auto;
margin-top: 100px;
background: lime;

}
.lettre{
display: block;
width: 15px;
margin: auto;
text-align: center;
background: white;
}

</style>
</head>
<body>
<div id="conteneur">
<?php 
$texte = 'Coucou'; // ----------------------------- cas d'un seul mot 
$longueur = strlen($texte); 
$array_texte = preg_split('//', $texte, -1, PREG_SPLIT_NO_EMPTY);
$nombre_lettre = 0;
while ($nombre_lettre <= $longueur-1)
{
    echo '<span class="lettre">'.$array_texte[$nombre_lettre].'</span>';
    $nombre_lettre++; 
} 
echo '<br /><br /> <br />';
$texte = 'Bonne  nuit  les  petits'; // ----------------------------- cas d'une phrase 
$longueur = strlen($texte); 	
$nombre_lettre = 0;
while ($nombre_lettre <= $longueur-1)
{	
	if ($texte{$nombre_lettre} == " "){// vérifier si espace au cas où créer un padding vertical en css pour le simuler
	$espace = 'style="padding-top: 10px;"';
	}else{
	$espace = '';
	}
    echo '<span class="lettre"'.$espace.'>'.$texte{$nombre_lettre}.'</span>';
    $nombre_lettre++; 
} 

?>
</div>
</body>
</html>
ghost a écrit :
Re,

Je pensais également à un tout petit bout de script qui pourrait après quelques cosmétiques css être utilisable. Je ne sais pas si mon code est très clair, mais bon il se fait tard ...


En fait ça ne correspond pas exactement à mon besoin j'aurais besoin d'un text qui soit l'équivalent d'un texte horizontal qui aurait subi une rotation de 90°.

En tout cas je vous remercie pour votre aide, je crois avoir compris que ce n'est pas possible en CSS, il ne me reste plus qu'à générer une image en dynamique.
Salut,

En même temps, je pense que tu t'embête pour un truc pas pratique. Du texte vertical sur un document papier ne pose pas vraiment de problème car on peut faire tourner le document dans ses mains, ce qui n'est pas vraiment le cas avec un écran d'ordinateur. Les visiteurs de ton site vont devoir faire l'effort de pencher leur tête pour lire ton texte. On s'éloigne de l'expérience utilisateur confortable !
Mikachu a écrit :
Salut,

En même temps, je pense que tu t'embête pour un truc pas pratique. Du texte vertical sur un document papier ne pose pas vraiment de problème car on peut faire tourner le document dans ses mains, ce qui n'est pas vraiment le cas avec un écran d'ordinateur. Les visiteurs de ton site vont devoir faire l'effort de pencher leur tête pour lire ton texte. On s'éloigne de l'expérience utilisateur confortable !

Bof, je ne suis pas tout à fait d'accord: un petit bandeau latéral comme le fait le W3C est tout à fait lisible et confortable.
Un bandeau vertical sur le W3C ? où donc, je n'ai pas trouvé.

Enfin ce que je veux dire, c'est que vu la rapidité qu'ont les internautes de surfer , il y a fort à parier que si tu mets un texte important en vertical il n'y aura pas la moitié d'entre eux qui prendra la peine de le lire. Quoi que tu en dise, l'information est moins accessible en vertical qu'en horizontal. Smiley cligne
Benjamin D.C. a écrit :
Sur la page Web Content Accessibility Guidelines 1.0 par exemple. Smiley ravi

Ah oui mais c'est juste un titre sur cette page, il est visiblement question de texte dans la demande d'emmanuel.D !

Benjamin D.C. a écrit :
Smiley hum je n'ai jamais dit le contraire, ça semble évident non?

Bon alors on est d'accord Smiley lol
Mikachu a écrit :
Ah oui mais c'est juste un titre sur cette page, il est visiblement question de texte dans la demande d'emmanuel.D !
Et un titre, c'est pas du texte? Smiley ravi Plus sérieusement, c'est effectivement une mauvaise idée si c'est pour de la body, par contre je n'y vois pas trop d'inconvénients si c'est un petit titre de section comme dans l'exemple que je cite plus haut.
Re,

C'est toujours possible en php mais c'est une vrai usine à gaz !
En gros séparer chaque lettre de ton texte, transformation de chaque lettre en image (imagettftext()), faire pivoter et afficher ...

Pour un exercice de style ça convient mais en production ?
Sujet clos
Aller à