3
votes

Les sauts de ligne de poésie avec HTML et CSS sémantiques

Je voudrais afficher de la poésie, en utilisant uniquement HTML et CSS. À ma connaissance, la manière sémantiquement correcte de structurer la poésie en HTML consiste à utiliser des balises

pour les versets et des balises

pour des lignes individuelles, comme ceci:

<p class="verse">
  <span class="line">poetry is very nice </span><br>
  <span class="line">but kind of hard to style </span><br>
  <span class="line">if only you could help me, guise, </span><br>
  <span class="line">I'd give you my best smile.</span>
</p>

Lorsque le poème a suffisamment de lignes pour être enveloppé, le style accepté serait de suspendre le retrait de la ligne enveloppée, comme ceci:

C'est une très longue ligne que
doit être emballé

Idéalement, la partie enveloppée serait alignée à droite, mais un retrait suspendu à dimension fixe fonctionnerait aussi.

J'ai vu diverses solutions à cela, mais elles impliquent toutes du HTML sémantiquement superflu, tel comme l'utilisation de listes ou de balises pour chaque ligne. Par exemple:

.verse {
  margin-left: 2em;
}

.line {
  margin-left: -2em;
}

<p>
  poetry is very nice <br />
  but kind of hard to style <br />
  if only you could help me, guise, <br />
  I'd give you my best smile.
</p>

Y a-t-il un moyen d'accomplir cela sans HTML encombré?

Edit (1): J'ai eu une erreur dans l'exemple de code. Les deux .verse et .line doivent avoir une propriété margin-left déclarée, pas padding-left et margin-left.

Edit (2): En ce qui concerne le doublon possible, je suis conscient des différentes opinions concernant ce est le plus correct pour marquer la poésie en HTML. J'ai sélectionné ce qui me paraissait le plus sémantiquement correct, et cette question concerne le CSS nécessaire pour l'afficher correctement.

Edit (3): J'ai corrigé l'erreur de l'exemple de manière incorrecte. Voici une capture d'écran:

Pour clarifier, je voudrais obtenir le même effet que la capture d'écran ci-dessus sans les balises , ou toute autre balise sémantiquement superflue.

html css semantic-markup

4 commentaires

Copie possible de Comment baliser sémantiquement le texte d'un poème?

Essayez

que

@RonRoyston Voir Edit (2). Ils ont rencontré le même problème que moi - c'est pourquoi j'essaie de voir si quelqu'un a une solution brillante :)

De la réponse pertinente là-bas: "Ce retrait suspendu ne peut être réalisé (pour autant que je sache) si chaque ligne est son propre élément de bloc.

4 Réponses :

2
votes

Étant donné que vous avez 2em de padding avec 1.5em de marge négative, vous pouvez simplement les combiner deux valeurs en donnant simplement les versets 0.5em de padding . Cela vous permettra de supprimer entièrement les balises , avec exactement le même résultat visuel:

<p class="verse">
  poetry is very nice<br />
  but kind of hard to style<br />
  if only you could help me, guise,<br />
  I'd give you my best smile.
</p>

.verse {
  padding-left: 0.5em;
}

1 commentaires

J'ai eu une erreur dans mon exemple de code, que j'ai maintenant corrigée. J'ai également ajouté une capture d'écran de mon résultat souhaité.

2
votes

vous pouvez utiliser un text-indent négatif pour la première ligne d'un paragraphe et ajouter un padding à l'ensemble du paragraphe, c'est-à-dire que vous n'avez besoin que d'un élément.

<p class="verse">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

.verse {
  text-indent: -20px;
  padding-left: 20px;
}

Bonne chance!

1 commentaires

Je vous remercie! Cependant, cela ne fonctionne pas avec les balises
.

1
votes

Utilisez comme:

div.a {
  text-align: justify; /* For Edge */
  -moz-text-align-last: right; /* For Firefox prior 58.0 */
  text-align-last: right;
}

<div class="a">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

Suivez: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-align-last

0 commentaires

0
votes

La seule solution simple que j'ai trouvée jusqu'à présent est de faire des sauts de paragraphe au lieu de sauts de ligne et de créer une classe .poem qui supprime les espaces entre les paragraphes (elle agit donc comme un saut de ligne plutôt que comme un saut de paragraphe) .

.poem { text-indent: -2em; margin: 0 0 0 2em;}

Mais alors vous devez passer par et mettre des doubles paragraphes (double espace) entre les strophes. Ce n'est pas une bonne solution mais c'est plus facile que de coller des classes sur chaque ligne ou de faire une liste.

Si quelqu'un a une solution avec des pauses, ce serait génial. text-align-last: droite; a un effet similaire, mais ce n'est pas un format de poésie traditionnel.

0 commentaires