18068 sujets

Questions générales et questions de débutants

Retrait de texte mais à droite [résolu]

Bonjour,

Je cherche à effectuer un retrait de même type que la propriété css "text-ident" mais pour un texte aligné à droite.

Cela est-il possible?


D'avance merci pour votre aide,

salutations

gigi
Modifié par gigi (28 Nov 2006 - 14:55)
Bonsoir et bienvenue sur Alsa Smiley cligne

Pourrais-tu nous expliquer pour quelle finalité tu aurais besoin de cette proriété, car à ma connaissance cela n'existe pas. Smiley rolleyes
De plus, il semble normal que le text-indent ne fonctionne pas puisque quel que soit l'alignement du paragraphe, l'écriture est toujours faite de gauche à droite.

Tu pourrais arriver à tes fins en appliquant un padding-right à la ligne en question, non... Smiley murf
Modifié par Cygnus (27 Nov 2006 - 22:31)
Modérateur
bonsoir

oui , si le texte s'ecrit lui aussi de droite a gauche , dans l'ensemble de la page . Ce sera tout aussi "normal" que l'indentation sur la gauche dans une page s'affichant de gauche a droite.

Sinon la triche pour ce genre de chose ,

c'est une balise vide ou rempli d'un caractere insecable , mit en float:right; avec la largeur d'indentation voulu.

ou le pseudo :first-line {padding-right:3em;

ou le pseudo before ...

etc ...

si le texte est aussi inversé , alors chercher vers le unicode-bidi:bidi-override; et direction:rtl en css .
Mais , Il est preferable de ne pas , vouloir et tenter , au sein d'une page , modifiée une zone pour que celle-ci inverse son sens d'affichage , chaque navigateurs va reagir comme il peu , ce n'est pas vraiment prevue.

++

<edit> un petit code theorique a tester :
(x)html
<p><span> 
1 2 3 4 5 6 7 8 9 .</span></p>

CSS
p{
direction:rtl;
text-indent:3em;
}
span {
direction:ltr;
unicode-bidi:bidi-override;
text-align:right;
}


bidi pour bidirectionnel , mais bon ça passe pas bien partout et l'heritage de direction:
ne se fait pas , mal ou bien selon les navigateur
Modifié par gcyrillus (27 Nov 2006 - 22:43)
gcyrillus a écrit :
ou le pseudo :first-line {padding-right:3em;
Malheureusement, il semblerait que padding ne fasse pas partie des propriétés que l'on peut appliquer à un pseudo élément first-line.
Modérateur
ah bah oui tiens , on ne peut que mettre en forme le texte et rien d'autre et le :before semble tout aussi efficace dans firefoxe.

on dit des trucs des fois qu'on ferait mieux de s'abstenir ! Smiley biggol

j'ai mis un petit code (x)html/css theorique a tester en edit dans mon post precedent.

++

<re-edit>
finalement apres test , mes reserves sur le direction:rtl/ltr et l'unicode ne sont peut-etre pas a prendre en compte avec un texte dans le sens de lecture (re) forcer de gauche a droite.

je viens de tester ceci dans opera , Internet Explorer et firefoxe, pas de soucis a priori .

<!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>
<title>test indentation a doite et unicode</title>
<style type='text/css'>
p {
	direction:rtl;
	text-indent:3em;
	text-align:left;
}
span {
	/* reprise du sens de lecture gauche-droite */
	direction:ltr;
	unicode-bidi:bidi-override;
}
</style>
</head>
<body>
<p>
<span> 1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .
1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .1 2 3 4
5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 
 9 .1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .1 2 
3 4 5 6 7 8 9 .1 2 3 4 5 6 7 8 9 .</span>
</p>
</body>
</html>


++
Modifié par gcyrillus (27 Nov 2006 - 23:18)
Bonjour,

Merci pour vos remarques!

Pourquoi est-ce que je cherche à faire un retrait à droite? et bien en fait il s'agit d'un menu tout simple mais pour lequel je souhaiterais aligner le texte à droite, avec un petit retrait. Graphiquement, comme il y a des bordures (inférieures), j'essaie d'obtenir le résultat suivant, que je trouve plus soigné:

...........Accueil
__________________

.......Présentation
__________________



Au lieu de ceci, sans retraits:


................Accueil
________________

.........Présentation
________________



D'après vos réponses, je remarque que c'est loin d'être fastoche! Avec un padding, le text reste aligné avec la bordure, ce que je désire éviter.

J'espère qu'avec cette description ce sera plus explicite pour vous.

Je vais essayer de changer le sens de lecture (très astucieux), et vous redonnerai des nouvelles.

Si jamais je passe à côté de quelque chose de fondamental, n'hésitez pas, mes bases sont encore très légères.

Encore merci!


gigi
Bonjour,
gigi a écrit :
D'après vos réponses, je remarque que c'est loin d'être fastoche! Avec un padding, le text reste aligné avec la bordure, ce que je désire éviter.
Comment ça, aligné sur la bordure ? Si je comprends bien ce que tu veux dire, le padding est justement l'opposé puisqu'il se situe entre le contenu d'une boîte et la bordure (voir par exemple cette explication). Peut-être n'appliques-tu pas le padding sur le bon élément ?
Eldebaran a écrit :
Peut-être n'appliques-tu pas le padding sur le bon élément ?

Je vote pour ça également.

Si le menu est une liste ul (avec items de liste li, il faut appliquer les bordures ET les padding sur les éléments li, pas sur ul.
Super!

C'est effectivement le padding que j'appliquais au mauvais endroit...

Mon problème est dans ce cas, et grâce à vous, entièrement résolu!

Toute ma gratitude!


gigi
Sujet clos
Aller à