Poetry problem again?!

[doubleshuffle]

Originally Posted by Jellby

Gee, you are right. That makes it unusable, I'm afraid

Good. I was afraid I'd have to start bothering with epub3.

[Doitsu]

Originally Posted by doubleshuffle

Good. I was afraid I'd have to start bothering with epub3.

Some epub3 features actually simplify the formatting of poems. IMHO, it couldn't hurt to have a look at pseudo classes, which allow you to apply CSS rules based on the number of an element without additional markup.

For example, you could automatically apply CSS rules to the last line of a verse and display line numbers every 5 lines using the following stylesheet:

ul {
    counter-reset: counter;
    margin-left: .25em;
}

li {
    counter-increment: counter;
    list-style-type: none;
}

ul li:nth-child(5n+5):before {
    left: 0;
    position: absolute;
    padding-left: 1em;
    content: counter(counter);
}

ul li:nth-child(6n+6) {
    text-align: right;
    margin-bottom: 1em;
}

h3 {
    text-align: center;
}

I've attached a slightly updated example file that I posted in a related thread.

Since this is an ePub3 file, it'll only work with Sigil, iBooks, ADE4/RMSK11*, Gitden Reader*, Kindles and other ePub3 apps.

*ADE and Gitden Reader, which both use the Readium engine, generally support pseudo classes, but have problems with counters.
ADE adds phantom numbers and Gitden Reader displays numbers only on the first page.

The only app that displays the test file correctly is iBooks.

[doubleshuffle]

Thanks, Doitsu. Interesting feature indeed, especially for the line numbers. About that right-align for the last line of the stanza: I could also set a value for indentation there, I guess? That might be helpful for very long poems that always follow the same stanza pattern.

But I guess support would have to get a bit more widespread before seriously using this.

[Doitsu]

Originally Posted by doubleshuffle

About that right-align for the last line of the stanza: I could also set a value for indentation there, I guess?

You can style it any way you like.

[cadele]

Originally Posted by RbnJrg

Yes, there are several ways to do what you want. One aproximation could be:

1. In the .css stylesheet:

p {
   font-size: 1em;
   text-indent: 1.2em;
   text-align: justify;
}

div.epigraph {
   text-indent: 0;
   text-align: center;
   font-style: italic;
   font-weight: bold;
   font-size: 1.1em;
}

div.epigraph div.stanza {
   width: 60%;  /* You can play here with the width */
   margin: 1em 20%; /* Left and right margins are linked with the width you set */
   padding: 0.5em; /* This is not necessary, only if you want a border around the stanza */
   text-indent: 0;
   text-align: left;
   font-size: 0.8em;
   font-weight: normal;
   border: 1px solid; /* This is not necessary */
} 

div.stanza p {
   margin: 0;
}

2. In your .xhtml file:

<div class="epigraph">
    This is the title
    <div class="stanza">
       <p>"The Spirit of the Lord is upon me,</p>
       <p>because he has anointed me</p>
       <p>to bring good news to the poor.</p>
    </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>

This is how it looks in Sigil:

Attachment 141488

Below you can check the respective epub.

Regards
Rubén

I know this is an old thread, but thank you so much for this. Karma to you.

I am useless at CSS, but this has been a great help to me

[RbnJrg]

Originally Posted by cadele

I know this is an old thread, but thank you so much for this. Karma to you.

I am useless at CSS, but this has been a great help to me

You are welcome Cadele Glad that my code was able to help you.