Poetry: line numbers aligned to the right.

[1v4n0]

Hello.

Very often poetry printed books have numbered lines, normally every fifth line has its number, aligned to the left of the page. The lines of course all start flush, with a big indent (see attachment, and btw I'm sorry the first thing I found was possibly Italy's most overrated poem )

How can I do this w/ epubs? Perhaps with a <span></span> around each number, which then I'd float to the left, or to which I'd give a negative indent?

Thanks

[odedta]

Create an ordered list and style it using CSS.

[1v4n0]

uh... could you explain?

[theducks]

That appears to be numbered random lines, An ordered (ol) list (li) might be used if the stanza was being numbered.

Tables, with the first column used when numbers needed?

[RbnJrg]

Originally Posted by 1v4n0

Hello.

Very often poetry printed books have numbered lines, normally every fifth line has its number, aligned to the left of the page. The lines of course all start flush, with a big indent (see attachment, and btw I'm sorry the first thing I found was possibly Italy's most overrated poem )

How can I do this w/ epubs? Perhaps with a <span></span> around each number, which then I'd float to the left, or to which I'd give a negative indent?

Thanks

Hmmm, read this issue:

https://www.mobileread.com/forums/sho...8&postcount=18

and after that read this "solution":

https://www.mobileread.com/forums/sho...0&postcount=21

You could try the same technique to get what you want.

Regards
Rubén

[1v4n0]

Originally Posted by theducks

That appears to be numbered random lines, An ordered (ol) list (li) might be used if the stanza was being numbered.

Tables, with the first column used when numbers needed?

They're not RDM, they count ne number of the lines. The "table" approach might be the easiest one.

[1v4n0]

Or perhaps even just manually adding spaces before the lines.

[RbnJrg]

Originally Posted by 1v4n0

They're not RDM, they count ne number of the lines. The "table" approach might be the easiest one.

The table approach will bring you more problems than solutions.

[Doitsu]

If you have an iPad or a Kindle K3 or higher with the latest firmware and aren't interested in publishing books with KDP, you could give pseudo-elements a try, because they allow you to automatically add line numbers. They also allow you add special formatting to every nth element. (I used both features in my simple test file.)

Unfortunately, the majority of ePub readers and apps don't support pseudo-elements and you can't use counter pseudo-elements in KDP Kindle books according to the official publishing guidelines, even though they work fine.

I slapped together a very simple test file that displays fine with Sigil, Calibre Book Viewer, iBooks (after ePub3 conversion) and on my Kindle PW2. However, it doesn't display correctly with ADE4, even if it's converted to an ePub3 file.

I formatted the poem as an unordered list:

Spoiler:

  <h3>The Raven by Edgar Alan Poe</h3>

  <ul>
    <li>Once upon a midnight dreary, while I pondered, weak and weary,</li>
    <li>Over many a quaint and curious volume of forgotten lore,</li>
    <li>While I nodded, nearly napping, suddenly there came a tapping,</li>
    <li>As of some one gently rapping, rapping at my chamber door.</li>
    <li>"'Tis some visiter," I muttered, "tapping at my chamber door—</li>
    <li>Only this, and nothing more."</li>

    <li>Ah, distinctly I remember it was in the bleak December,</li>
    <li>And each separate dying ember wrought its ghost upon the floor.</li>
    <li>Eagerly I wished the morrow;—vainly I had tried to borrow</li>
    <li>From my books surcease of sorrow—sorrow for the lost Lenore—</li>
    <li>For the rare and radiant maiden whom the angels name Lenore—</li>
    <li>Nameless here for evermore.</li>
    <!-- more lines ... -->
  </ul>

And used the following minimal CSS:

Spoiler:

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;
}

[1v4n0]

Hey, thanks. That looks good in my kindle non-touch (this one), and I think in books where there isn't only poetry this could be a case of "graceful degradation": if you have a reader that supports pseudo-elements you see the numbers, but if you don't you're still able to read the text.

Granted, if it is a long poem we're talking about this might not be a viable solution. In this latter case I'd go for manually inserting the numbers befor each 5th verse, and the spaces in the other lines, combined with a monospaced font (like they do here). Or I wouldn't, after all. Sounds like a hell of a job

Anyway, if you add this

ul {
    counter-reset: counter;
    margin-left: 1.25em;
	text-indent: -.5em;
}

The verses become more readable

EDIT I was just suggested another solution, which does not involve the counter: use an <OL> instead of<UL>, and hide all the numbers but the 5n-th by giving them a transparent background.

Spoiler:

ol li:before {
    width:100px;
    height:30px;
    background-color:#FFF;
    content:"";
    display:inline-block;
    position:relative;
    margin-left: -100px;
}
ol li:nth-child(5n):before {
    background-color:transparent;
}

This looks fine in calibre and sigil, and in ADE it just shows all the numbers.

However, besides the dot after the numbers, which apparently is unavoidable w/o the counter, this solution raises a weird problem on my kindle: it only works for the first page. Once you turn it, all the numbers show. On the "Paperwhite" it works fine though.

Anyway, credits go to this guy.

[RbnJrg]

And what about something like this (that also works in any ereader):



The above screenshot belongs to ADE 3.0 and to get that result, you only need a few lines of code:

Spoiler:

h3 {
   text-align: center;
}

.stanza {
   margin-left: 4em;
   margin-bottom: 1em;
}

.stanza p {
  margin: 0;
  text-indent: 1.2em;
  line-height: 1.2em;
}

.stanza p + p {
  text-indent: 0;
}

.stanza p.number {
  float: left;
  margin-left: -4em;
  margin-top: 0.3em;
  font-size: 70%;
}

and in the .xhtml file:

Spoiler:

  <h3>IL CINQUE MAGGIO</h3>

  <div class="stanza">
    <p>Ei fu. Siccome immobile,</p>
    <p>Dato il mortal sospiro,</p>
    <p>Stette la spoglia immemore</p>
    <p>Orba di tanto spiro,</p>
    <p class="number">5</p>
    <p>Così percossa, attonita</p>
    <p>La terra al nunzio sta,</p>
  </div>

  <div class="stanza">
    <p>Muta pensando all’ultima</p>
    <p>Ora dell’uom fatale;</p>
    <p>Nè sa quando una simile</p>
    <p class="number">10</p>
    <p>Orma di piè mortale</p>
    <p>La sua cruenta polvere</p>
    <p>A calpestar verrà.</p>
  </div>

  <div class="stanza">
    <p>Lui folgorante in solio</p>
    <p>Vide il mio genio e tacque;</p>
    <p class="number">15</p>
    <p>Quando, con vece assidua,</p>
    <p>Cadde, risorse e giacque,</p>
    <p>Di mille voci al sonito</p>
    <p>Mista la sua non ha:</p>
  </div>

So, you only need to add <p class="number">"your number here"</p> in the proper place; everything else is the same you have done always.

Below you can check the respective epub.

Regards
Rubén

[1v4n0]

Cool. It works on my kindle. The problem here is that I'd have to manually insert the numbers, or the tags around them. That could be achieved with a simple regex, stg like

FIND: ([0-9]{1,})
REPLACE: <p class="number">\1</p>

[teamcoltra]

instead of "background:white" I would just use color:transparent; and then on the nth use color:black; But that will "fail" to transparent fonts.

[odedta]

Nice solution Doitsu, I didn't know that

[RbnJrg]

In this post:

https://www.mobileread.com/forums/sho...56&postcount=9

Doitsu developed a clever method to use automatic numbering of verses; he utilized pseudo-elements under the form of unordered list. I borrowed some of his thoughts to do something similar but without using lists. The code I used was as follows:

Spoiler:

body {
  counter-reset: verse 0;
}

h3 {
   text-align: center;
}

.stanza {
   margin-left: 4em;
}

.stanza p {
  margin: 0;
  line-height: 1.2em;
}

.stanza p:nth-child(6n+7) {
    text-indent: 1em;
}

.stanza p:nth-child(6n+6) {
    margin-bottom: 1em;
}

.stanza p:nth-child(5n+5):before {
    float: left;
    margin-left: -4em;
    font-size: 70%;
    content: counter(verse);
    counter-increment: verse 5;
}

.dropcap {
    float: left;
    color: blue;
    line-height: 1.2em;
    font-size: 3em;
    font-weight: bold;
    margin: -0.2em 5px -0.3em 0;
}

and

Spoiler:

  <h3>IL CINQUE MAGGIO</h3>

  <div class="stanza">
    <p><span class="dropcap">E</span>i fu. Siccome immobile,</p>
    <p>Dato il mortal sospiro,</p>
    <p>Stette la spoglia immemore</p>
    <p>Orba di tanto spiro,</p>
    <p>Così percossa, attonita</p>
    <p>La terra al nunzio sta,</p>

    <p>Muta pensando all’ultima</p>
    <p>Ora dell’uom fatale;</p>
    <p>Nè sa quando una simile</p>
    <p>Orma di piè mortale</p>
    <p>La sua cruenta polvere</p>
    <p>A calpestar verrà.</p>

    <p>Lui folgorante in solio</p>
    <p>Vide il mio genio e tacque;</p>
    <p>Quando, con vece assidua,</p>
    <p>Cadde, risorse e giacque,</p>
    <p>Di mille voci al sonito</p>
    <p>Mista la sua non ha:</p>
  </div>

Since Doitsu had already added an automatic bottom margin after the sixth verse, inspired on his ideas, I also added automatic indenting. As we can see, is practically Doitsu's original code but without using unordered list. The ebooks looks great under Sigil, Kindle and surprisingly also works under ADE 4.02 with epub3 conversion. Here you can watch a screenshot:



That means that the ereaders based on RMSDK could show automatic numbering Below you can check the respective epub3 ebook and thank you very much Doitsy for being the first in thinking to use counters for this task.