Poetry Verses Alignment Problem

[mtrahan]

Hey guys,

I’m facing a problem in a book of poetry and I’m afraid there is no perfect solution in ePub. It’s kinda hard to explain with my limited english, but there are many verses that are aligned with the end of the previous verse. See this blurred page (copyrighted stuff, sorry) from the PDF version for example :

I drew the black lines to show that the beginning of a verse must be aligned with the end of the previous one.

Is there a way to consistently replicate this kind of formatting? I’m afraid not, for many reasons (for example, users can switch fonts).

The closest solution I thought of was to create a style for every strangely aligned verse and tweak the left margin for every one of them... which doesn’t seem like a very good solution, since there are so many. And it probably won’t even be consistent when users change fonts, etc.)

The option I proposed to the publisher is to uniformize these strangely aligned verse to a common value (left margin). He doesn’t really like this option, but I don’t exactly see a better one.

Am I missing something here? Any ideas?

Thanks in advance,

Michael

[dgatwood]

I can think of two approaches that might work to varying degrees, but you'd have to experiment to see.

1. Put both lines it in the same paragraph and shift the second one down with a baseline shift. Caveat: if it ends up wrapping to the next line, that will obviously look less than ideal.

2. Use a table whose width is set to the width of the browser screen, with two rows and two columns. Caveat: not all readers handle tables very well.

[mtrahan]

Originally Posted by dgatwood

I can think of two approaches that might work to varying degrees, but you'd have to experiment to see.

1. Put both lines it in the same paragraph and shift the second one down with a baseline shift. Caveat: if it ends up wrapping to the next line, that will obviously look less than ideal.

2. Use a table whose width is set to the width of the browser screen, with two rows and two columns. Caveat: not all readers handle tables very well.

The table idea is pretty good, I didn’t even think about it, but that means creating A LOT of tables for not super safe results. Thanks for the input.

[DaleDe]

One idea would be to make alternate lines align left and align right. This would not line up exactly on the previous line but the effect would be the same I believe from a user experience. You might have to try it over a large area to see the effect. In poetry it is the experience that counts.

You could also make the left/right margins stagger with the right justified section having a bigger left margin while the left justified would have a bigger right margin. This would have the effect of staggering even long lines or lines that overflowed one screen line.

Dale

[Jellby]

You could use "visibility: hidden", but it may be unsupported by some readers, and it may not play nicely with text-to-speech systems.

[Hitch]

Originally Posted by mtrahan

The table idea is pretty good, I didn’t even think about it, but that means creating A LOT of tables for not super safe results. Thanks for the input.

Tables are the ONLY way to achieve anything remotely like that, that won't have reflow issues when a) the font size is changed, b) the font is changed, c) the margins are changed (! don't forget that one), etc. And even THEN, you'll still have some issues when you change font sizes, assuming that your table settings are in ems, possibly.

And yes, it's a lot of work. We've had such "save the drama for your mama" here about "visual poetry" that generally, unless I've had a very, very clear discussion with the author/poet and/or publisher, we decline the work. It's just hard to make it pay enough to cover the brain-damage, both from the initial work (did I mention, a bajillionty tables?) and the inevitable subsequent hysteria when a font size is changed, when the client receives the review file. Even charging "uber-complex" just never seems to cover the costs.

FWIW. I'd second Dale's ideas, either shifting the content left/right, alternating, or using stagger, but no matter what you do, without tables, the overflow issue with come back and likely bite you in the tailbone.

Hitch

[Notjohn]

As a rule, it's easier to change one's workflow (or expectations, in this case) than to get the world to change its.

[RbnJrg]

Hi Michael;

Maybe there is an easier way to get what you want. I works perfectly under ADE 3.0 so I think it should also work on RMSDK ereaders. The code I used was:

1. In the .xhtml file:

  <p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p class="sc">This is the second line</p>

2. In the .css file:

.fl {
    display: inline;
    margin-bottom: 0em;
    text-align: justify;
}

.sc {
    display: inline;
    position: relative;
    top: 1.2em; /*This position must be linked with the line-height you are using; take in count that */
}

As you can see, we only need to use the property "display: inline" to the the desired effect. This is how it looks in Sigil and ADE 3.0 (ADE with two size of fonts):



Below you can check the respective .epub.

Regards
Rubén

UPDATE: If you want to consecutive stanzas with that format, then you need to enclose them in a <div> block with the property "display: block"; so you'd need to use the following styles:

Spoiler:

.bl {
    display: block;
    margin-bottom: 1.2em;
}

.fl {
    display: inline;
    margin-bottom: 0em;
    text-align: justify;
}

.sc {
    display: inline;
    position: relative;
    top: 1.2em;
}

and in the .xhtml file:

Spoiler:

  <div class="bl">
    <p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p class="sc">This is the second line</p>
  </div>

  <div class="bl">
    <p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p class="sc">This is the second line</p>
  </div>

This is how it looks under ADE:



Also I attach a new .epub.

[mtrahan]

Wow, thanks guys. You are awesome. I did manage to convince the publishers to just use the same indent for all strangely aligned verses, but I will try RbnJrg’s solution a bit. It is quite impressive actually, very clever solution.

A huge thanks for all the help, I really appreciate it.

[RbnJrg]

Originally Posted by mtrahan

...I will try RbnJrg’s solution a bit. It is quite impressive actually, very clever solution.

Thank you very much; I really hope that my code can help you.

Regards
Rubén

[JSWolf]

Originally Posted by mtrahan

Wow, thanks guys. You are awesome. I did manage to convince the publishers to just use the same indent for all strangely aligned verses, but I will try RbnJrg’s solution a bit. It is quite impressive actually, very clever solution.

A huge thanks for all the help, I really appreciate it.

I have to say this. RbnJrg's solution will not work as you want. I can easily break it. All you need it to have large enough text, or wide enough margins, or a combination of both where your lines don't fit on screen without some wrapping. So while it looks good as long as you have no wrapping, once you do, it's all shot to hell.

[RbnJrg]

Originally Posted by JSWolf

I have to say this. RbnJrg's solution will not work as you want. I can easily break it. All you need it to have large enough text, or wide enough margins, or a combination of both where your lines don't fit on screen without some wrapping. So while it looks good as long as you have no wrapping, once you do, it's all shot to hell.

Where are you opening the .epub? Can you post a screenshot of your results? Below you can see a screenshot of ADE 3.0 with large enough text:



As you can watch, the code I wrote works fine; maybe you are doing something wrong and of that way are getting different results. Below I attach the respective new .epub so you can check all.

[JSWolf]

Originally Posted by RbnJrg

Where are you opening the .epub? Can you post a screenshot of your results? Below you can see a screenshot of ADE 3.0 with large enough text:

Attachment 136796

As you can watch, the code I wrote works fine; maybe you are doing something wrong and of that way are getting different results. Below I attach the respective new .epub so you can check all.

The ePub you've posted looks nothing like the screen grab.

[RbnJrg]

Originally Posted by JSWolf

The ePub you've posted looks nothing like the screen grab.

Again I ask you, where are you opening the .epub? Again I ask you, can you post a screenshot of your results? Please, could you answer my questions? Anybody can open the .epub I attached in my post on ADE 3.0 and to get the same results that I showed in my screenshot.

[Hitch]

Originally Posted by RbnJrg

Again I ask you, where are you opening the .epub? Again I ask you, can you post a screenshot of your results? Please, could you answer my questions? Anybody can open the .epub I attached in my post on ADE 3.0 and to get the same results that I showed in my screenshot.

Ruben:

I suspect that Jon is opening this (VIII) in ADE 2.0, or Sony Reader. Neither will display the results as you have them there. Nor will Nook for PC (and, presumably, Nook devices--I admit, I haven't loaded it there yet; my Nook has developed a wonkiness with whether or not my beacon is visible for using Dropbox with it, so I'm lazy about USB-ing it).

FWIW. I haven't tested it on an iBooks reader on iPad, either; I'd tend to assume it would work there, but...

P.S., Jon: you really ought to answer Ruben's questions, sweetie.

Hitch