Discussion :

[noradan]

Normalement "justifié" étire un texte sur les marges droite et gauche mais j'ai un problème avec mon figcaption

Code :

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

1
2
3
4
5
6
7
8
.photo_groupe {
  display: flex;
  flex-direction: column;
  align-items: end;}
.figure {
  font-size: .88rem;}
.figcaption {
  text-align: center;}

Code html :

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

1
2
3
4
5
6
<div class="photo_groupe">
  <figure class="">
    <img src="mon image.jpg" alt="mon alt" width="300px">
    <figcaption> pimpim, pampam, poumpoum</figcaption>
  </figure>
</div>

Si je remplace "center " par "justify" le texte n'est pas du tout justifié mais calé à gauche.
justify-content ne marche naturellement pas puisqu'en tant que petit-fils d'un flex il n'en est pas un.

Je voudrais un texte justifié.

Qu'est-ce que je peux faire

[casperweb]

Bonjour,
Dans ton CSS tu as une class .figcaption que tu n'utilises pas dans ton HTML.

Tu as une erreur HTML que tu peux voir en passant ton code au validateur => https://validator.w3.org
Pour l'attribut width c'est automatiquement une valeur en pixel, pas nécessaire de préciser l'unité dans ce cas.

[Stellar7]

Bonjour,

Juste une remarque en passant : pour l'accessibilité, la justification de texte est à éviter. Cela crée des espaces qui peuvent gêner la lecture avec les handicaps visuels.

[NoSmoking]

Bonjour,

Si je remplace "center " par "justify" le texte n'est pas du tout justifié mais calé à gauche.

Petite précision quand même :

La justification n'a de sens que si le contenu est plus large que le conteneur, en gros qu'il y ait un retour à la ligne.

Code simple à tester :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.test {
  width: 30em;
  overflow: auto;
  text-align: justify;
  background-color: #DEF;
  resize: both;
}
</style>
<div class="test">
   pimpim, pampam, poumpoum, patatra
</div>

[noradan]

Le problème vient sans doute du flex parce qu'évidemment un justify dans un div normal justifie !
Mais pas dans mon cas. C'est bien mon problème

[NoSmoking]

Le problème vient sans doute du flex parce qu'évidemment un justify dans un div normal justifie

relis bien ce que j'ai écris !

[noradan]

Oh, j'ai lu, mais dans mon cas il ne s'agit pas d'un texte mais d'une légende.
Pour être plus préçis, la photo aligne plusieurs personnes sur la largeur et il est plus logique d'avoir les noms justifiés et donc presque sous la tête de la personne, que centré
d'où mon intérêt pour la justification bien que ce soit sur une seule ligne. L'ajuster avec des &nbsp me semble particulièrement hideux.

[casperweb]

dans mon cas il ne s'agit pas d'un texte mais d'une légende.

Bonjour, ta légende est composée d'un texte de trois mots dans ton exemple. C'est du texte pas autre chose.

d'où mon intérêt pour la justification bien que ce soit sur une seule ligne.

On ne justifie pas une seule ligne, comme NoSmoking l'indique arrange toi pour qu'il y ai un retour à la ligne du texte et la première ligne sera justifiée.

C'est déjà débattu dans cette discussion:
https://www.developpez.net/forums/d2...ustifier-seul/

ÉDIT : word-spacing est peut être que ce que tu cherches? Attention à l’accessibilité!
https://developer.mozilla.org/fr/doc...s/word-spacing

[casperweb]

Je reviens sur

Pour être plus préçis, la photo aligne plusieurs personnes sur la largeur et il est plus logique d'avoir les noms justifiés et donc presque sous la tête de la personne, que centré.

Pourquoi ne pas opté pour une image map? Avec une infobulle qui apparait au passage de la souris sur la personne (tête ou tête et corps).
Inconvénient : pas responsive nativement, nécessite du JS pour optimiser sur mobile.

[noradan]

J'ai mis un <br> en fin de légende j'ai passé mon text-align de center à justify et ça n'a rien changé, c'est toujours justifié à gauche et pas étalé sur la largeur.
J'ai aussi testé word-spacing mais il force l'espacement ce qui ne fonctionne pas souvent. Je n'ai pas trouver d'option qui fasse une sorte de "space-between" pour répartir l'espace en trop.

[casperweb]

Bonjour,
Le texte sur la première ligne est justifier.
Le texte qui ce place sur la deuxième ligne parce qu'il n'y a plus de place sur la première n'est lui pas justifier.
Pour ce faire le texte fait un retour ligne automatique car il n'a plus de place pour s'aligner sur la ligne précédente. Il n'y a pas besoin d'un <br> c'est le conteneur du texte qui délimite l'espace disponible pour le dit texte.
Code du fichier de test :

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
 
            .photo_groupe {
                display: flex;
                flex-direction: column;
                align-items: end;
                
            }
            .figure {
            font-size: .88rem;
            }
            .figcaption {
            text-align: justify;
            max-width: 200px;
            border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <div class="photo_groupe">
            <figure class="figure">
                <img src="mon image.jpg" alt="mon alt" width="300px">
                <figcaption class="figcaption"> 1)pimpim, pampam, poumpoum 2)pimpim,
                    pampam, poumpoum </figcaption>
            </figure>
        </div>
    </body>
</html>

[noradan]

Je crois que j'ai compris le problème mais du coup je ne vois absolument pas comment m'en sortir, c'est-à-dire avoir artificiellement un texte étiré (ne parlons plus de justifié) sur 300px.
J'ai bien essayé avec un span en display: none mais évidemment il en tient compte et c'est encore pareil.
Je ne vais quand même pas faire calculer la longueur du texte et si c'est <300px mettre un word-spacing avec le pourcentage ad equat ....
Ca deviendrait dément!
tu as une idée ?

[casperweb]

Bonjour,

>> tu as une idée ?
Non, parce que je pense que cette fonctionnalité n'existe pas en CSS. On n'étire pas de texte sur une largeur fixe. Cela nuit à la lecture du texte et cela peut porter préjudice à l'accessibilité.

La seule chose que je vois, c'est d'entourer chaque mot d'une balise span pour transformer ce texte en élément HTML. Ce qui permet l'usage de flexbox.
Si tu as envie de jouer comme cela libre à toi, mais je ne le recommande pas.

Pour chaque photo, les personnes sont positionnées de manière différentes sur ces 300pixels. De plus le texte qui correspond à leur nom (ou nom et prénom) varie également en longueur. Si bien que je ne chercherais pas à utiliser une technique universel mais ferais du cas par cas. J'utiliserais des espaces insécable entre chaque nom.
Mais cela n'est pas responsive, on revient au même problème qu'avec les images map.

Peut être que cette fonctionnalité serait possible en JS, mais à priori je ne vois pas comment.