Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've looked for the same information and, similarly, haven't found any definitive "best practices" -- so I figured I'd just have to figure out my own method. The <code>&lt;p&gt;</code> tag does make some sense as a stanza marker, with lines divided by <code>&lt;br&gt;</code>s, per the spec -- BUT I've found that that markup style doesn't provide enough flexibility.</p> <p>Specifically, I wanted control over indentation. For instance, if a line runs too wide for the width of the text column, it shouldn't just break: its continuation should be indented. This hanging indent can be achieved only (as far as I know) if each line is its own block element. So in my case I've made each poetry line a <code>&lt;p&gt;</code> with a class (say, "poetry-line"). Then I can use the following CSS:</p> <pre><code>.poetry-line { text-indent: -2em; margin-left: 2em; } </code></pre> <p>In another example, the poem I was posting indented every other line, with some irregularities at the ends of stanzas. I couldn't achieve this effect with just <code>&lt;br&gt;</code>s between each line. I had to create a new class for the "indented-line" and apply it manually.</p> <p>I'm just sharing my experience. I guess my suggestion is that you use a block-level element for each line, for formatting purposes. This could be a <code>&lt;p&gt;</code>, or I guess you could use CSS to set a <code>&lt;span&gt;</code>'s "display" to "block". In any case, the spec's example with <code>&lt;br&gt;</code>s between lines won't work for most poetry, I think: each line needs to be its own element.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload