Poem Markup (tags)

Верстка стихотворения

by denvdmj

HTML

<section>

<p>Элементы верстки стихотворного текста. Определение длины полосы стихового набора при уже» выбранном формате ничем не отличается от принципов определения длины полосы любого набора.</p>

<div class="poem">
<div class="title">Евгений Евтушенко</div>
<div class="date">1955</div>
<div class="verse">
Бывало, спит у ног собака,
костер занявшийся гудит,
и женщина из полумрака
глазами зыбкими глядит.

Потом под пихтою приляжет
на куртку рыжую мою
и мне,
   задумчивая,
            скажет:
«А ну-ка, спой!..» —
                и я пою.
</div>
</div>

</section>

CSS

body {
  width: 30em;
  margin: auto;
  font: 18px/1.4 "Times New Roman", serif;
}

body > section {}

.poem {
  text-align: center;
  display: block;
}

.poem:before {}

.poem > .date,
.poem > .title {
  display: block;
}

.poem > .date {
  text-align: center;
}

.poem > .date:before {
  content: "— ";
}

.poem > .date:after {
  content: " —";
}

.poem > .title {
  font-size: 2em;
  font-weight: bold;
  padding-bottom: 1em;
}

.poem > .verse {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  white-space: pre;
}