Poem Markup (our own tags)

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

by denvdmj

HTML

<section>

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

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

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


</section>

CSS

body {
  width: 32em;
  margin: auto;
  background-color: #fff;
  color: #000;
  font: 18px/1.4 "Times New Roman", serif;
}
body > section {

}
poem {
  text-align: center;
  display: block;
}
poem > date,
poem > title,
poem > section,
poem > section > verse {
  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;
}