Поэзия перенос строк с семантическим HTML и CSS
Я хотел бы отображать стихи, используя только HTML и CSS. Насколько я понимаю, семантически правильный способ структурировать поэзию в HTML - это использовать теги <p> для стихов и теги <br /> для отдельных строк, например:
<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>
Когда в стихотворении достаточно длинных строк для переноса, принятый стиль будет заключаться в том, чтобы вешать отступ для обернутой строки, например:
This is a very long line that
needs to be wrapped
В идеале обернутая часть должна быть выровнена по правому краю, но висячий отступ фиксированного размера тоже подойдет.
Я видел различные решения этой проблемы, но все они включают семантически излишний HTML, например, использование списков или тегов <span> для каждой строки. Например:
.verse {
margin-left: 2em;
}
.line {
margin-left: -2em;
}<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>Есть ли способ сделать это без загроможденного HTML?
Изменить (1): у меня была ошибка в примере кода. И .verse, и .line должны иметь свойство margin-left, а не padding-left и margin-left.
Изменить (2): Что касается возможного дублирования, я знаю разные мнения относительно того, что является наиболее правильным для разметки стихов в HTML. Я выбрал то, что мне показалось наиболее семантически правильным, и этот вопрос касается CSS, необходимого для его правильного отображения.
Edit (3): Я неправильно исправил ошибку в примере. Вот скриншот:
Чтобы уточнить, я хотел бы добиться того же эффекта, что и на скриншоте выше, без тегов <span> или любых других семантически лишних тегов.
Попробуйте <pre>, который
@RonRoyston См. Edit (2). Они столкнулись с той же проблемой, что и я, поэтому я пытаюсь понять, есть ли у кого-нибудь блестящее решение :)
Из соответствующего ответа там: «Этот висячий отступ может быть достигнут только (насколько мне известно), если каждая строка является отдельным элементом блока».
Ответы 4
Учитывая, что у вас есть 2em из padding вместе с 1.5em из отрицательного margin, вы можете просто объединить эти два значения, просто указав стихи 0.5em из padding. Это позволит вам полностью вырезать теги <span> с таким же визуальным выходом:
.verse {
padding-left: 0.5em;
}<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>В моем примере кода была ошибка, которую я исправил. Я также добавил снимок экрана с желаемым результатом.
Вы можете использовать отрицательный text-indent для первой строки абзаца и добавить padding ко всему абзацу, т.е. вам нужен только элемент <p>.
.verse {
text-indent: -20px;
padding-left: 20px;
}<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>Спасибо! Однако это не работает с тегами <br />.
Используйте как:
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>
Следуйте: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-align-last
Единственное простое решение, которое я придумал до сих пор, - это сделать разрывы абзацев вместо разрывов строк и создать класс .poem, который убирает пробелы между абзацами (так что он действует как разрыв строки, а не разрыв абзаца).
.poem { text-indent: -2em; margin: 0 0 0 2em;}
Но тогда вы должны пройти и поставить двойные абзацы (двойной пробел) между строфами. Это не очень хорошее решение, но это проще, чем вставлять классы в каждую строку или составлять список.
Если у кого-то есть решение с перерывами, это было бы здорово. выравнивание текста последний: право; имеет аналогичный эффект, но это не традиционный формат поэзии.
Возможный дубликат Как семантически пометить текст стихотворения?