Alignement à gauche, puis à droite si plusieurs lignes

**Aerendil97** · 28/05/2014, 01h37

Bonjour,
Je souhaiterais mettre en page plusieurs poèmes dans un bloc de largeur fixe, en faisant en sorte chacun des poèmes y soient correctement présentés. J'entends par correctement présenté que l'alignement à gauche usuel soit brisé par un alignement à droite dès lors qu'un vers soit trop long pour figuré sur une ligne. Si possible, mais ça n'est pas absolument nécessaire, je pensais rajouter un crochet ouvrant juste avant le début de la partie recalée du vers :
vers beaucoup beaucoup beaucoup beaucoup beaucoup |//limite du cadre
[beaucoup trop long|
Oui, je désire recréer l'environnement ‘verse’ de LaTeX en HTML/CSS, si vous connaissez. J'ai pour l'instant mis en place quelques essais, en mettant un alignement à droite par défaut, mais je ne peux pas faire en sorte que la première ligne soit alignée à gauche car le pseudo-élément ::first-line n'accepte pas la propriété text-align, si bien que les vers se retrouvent alignés à droite au lieu de la gauche (sauf pour les vers qui tiennent sur une ligne). Pour le crochet, j'ai tenté un ::first-line::after en insérant "[", mais ça ne donne rien (on a le droit de combiner ces deux là ???). Voici mon fichier d'essai :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
	<title>ESSAIS NUCLÉAIRES</title>
	<style>
p{
        width: 300px;
}
span{
        display: inline-block;
        
}
p > span {
        text-align: right;
}
p > span::first-line{
        text-align: left; <!-- ne fonctionnera pas ! Peut-être en ajoutant des blancs à la ligne suivante ? -->
}
p > span::first-line::after{
        content: "&nbsp;&nbsp;&nbsp;"; <!-- rajouter des &nbsp pour l alignement ?? chez moi, rien ne change, même pour un contenu autre ! -->
}
</style>
</head>
 
<body>
<p><span>Une phrase un peu trop longue pour pouvoir être dans le bloc en entier<br/></span>
<span>Une autre phrase plus courte<br/></span>
<span>Et encore une très très longue phrase qui ne tiendra pas dans le bloc !<br/></span></p>
</body>
</html>

Voilà, Merci d'avance pour votre aide,

Aerendil97

**rodolphebrd** · 28/05/2014, 07h36

Envoyé par Aerendil97

J'entends par correctement présenté que l'alignement à gauche usuel soit brisé par un alignement à droite dès lors qu'un vers soit trop long pour figuré sur une ligne.

Ça ne peut être fait en CSS si vous voulez faire cela automatiquement.

Sinon le code HTml n'est pas bon pour ce que vous voulez :

préférer des balises P
et les cibler avec first-of-type, nth-of-type, etc.

http://codepen.io/anon/pen/niFys

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<section>
<p>Une phrase un peu trop longue pour pouvoir être dans le bloc en entier</p>
<p>Une autre phrase plus courte</p>
<p>Et encore une très très longue phrase qui ne tiendra pas dans le bloc !</p>
</section>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
section{
  width: 400px;
  background: salmon;
  color: white;
}
p:first-of-type, p:last-of-type{
  text-align: right;
}

**Bisûnûrs** · 28/05/2014, 08h16

Peut-être un début de piste avec la nouvelle propriété CSS 3 text-align-last :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
p { text-align:left; width: 300px; }
span { display:inline-block; -moz-text-align-last:right; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p>
  <span>Une phrase un peu trop longue pour pouvoir être dans le bloc en entier<br/></span>
  <span>Une autre phrase plus courte<br/></span>
  <span>Et encore une très très longue phrase qui ne tiendra pas dans le bloc !<br/></span>
</p>

En revanche pour le crochet ....

Envoyé par rodolphebrd

Sinon le code HTml n'est pas bon pour ce que vous voulez

Personnellement l'utilisation d'un p ne me choque pas outre mesure, dans le cas où les vers ne sont pas clairement séparés par une marge verticale, mais qu'ils restent dans une continuité (genre une phrase qui apparait sur plusieurs lignes) logique.

**rodolphebrd** · 28/05/2014, 08h35

Tiens je ne connaissais pas.

Dommage que ça ne concerne que IE et FF.

**Aerendil97** · 04/06/2014, 04h02

Premièrement, désolé de répondre si tard : impossible de me connecter pour une histoire de changement d'adresse mail, enfin, je vous passe les détails… Sinon, merci beaucoup à toi, Bisûnûrs, car la propriété que tu m'as indiquée (et que je n'avais jamais vu au cours de mes recherches) fait exactement ce que je veux ! Il ne reste plus qu'à attendre qu'elle soit correctement implémentée par les autres navigateurs (d'ailleurs, j'ai envie de dire : pour une fois que IE n'est pas le dernier à implémenter une prop'…).
@Rodolphebrd : En fait, ton code refait la même chose que le mien, mais sans détecter automatiquement quelle ligne doit être affectée par text-align: right;, même si ça fonctionne uniquement grâce au display: inline-block;, ce qui n'était absolument pas fait exprès

. Pour le HTML, c'est exactement ce que Bisûnûrs a expliqué.
Merci beaucoup à tous, je vais donc me rabattre sur du html css brutal en sélectionnant uniquement la fin de la ligne (en espérant qu'un redimensionnement ne casseras pas tout ><).

Aerendil97

**Candygirl** · 04/06/2014, 09h10

Après test de 2-3 idées on peut magouiller quelque chose avec les propriétés supportées tous nav. Ce n'est pas parfait sur plusieurs plans (le text-align justify qui peut rendre assez moche si mot très long qui passe à la ligne et le overflow:hidden que je n'aime pas) mais j'ai quand même réussi le challenge, non ? ;p

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
	<title>ESSAIS NUCLÉAIRES</title>
	<style>
        
body {
        font:85% Arial,sans-serif;
}       
        
p{
        max-width: 22em;        
        width:100%;
        margin:auto;
        overflow:hidden;
}
 
span{
        display: inline-block;
        text-align:justify;
        direction:rtl;
}
 
span::after {
content:']';
width:1em;
display:inline-block;
margin-left:-1.1em;
margin-right:0.1em;
}
 
</style>
</head>
 
<body>
<p><span>Une phrase un peu trop longue pour pouvoir être dans le bloc en entier</span><br/>
<span>Une autre phrase plus courte</span><br/>
<span>Et encore une très très longue phrase qui ne tiendra pas dans le bloc ǃ</span><br/></p>
</body>
</html>

**Bisûnûrs** · 04/06/2014, 09h26

Sympa, mais comme tu utilises un direction:rtl;, tu remarqueras que ta ponctuation (ici le point d'exclamation) est relayé non pas en fin de phrase, mais en début de deuxième ligne.

Alignement à gauche, puis à droite si plusieurs lignes

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager