about poetry

[roger64]

Hi

I am looking for the CSS code I could use for looong verses like the ones in the joint screenshot.

Thanks for any help.

[BobC]

I think you need to look at using "direction" -

This looks like it will get near to what you are looking for :

<p class= "poem"> A bunch of the boys were whooping it up in the Malamute Saloon </p>
<p class= "poem">  The kid that handled the music box was hitting a ragtime tune </p>
 <p class= "poem">Back of the bar, in a solo game, sat Dangerous Dan McGrew,</p>
<p class= "poem">And watching his luck was his light-o'-love, the lady that's known as Lou.</p>

with the following css style:

.poem {
  text-align: justify;
  direction : rtl;
  text-indent: 0;
}

This though gets messy handling the second comma on the third line.

BobC

[roger64]

Thank you Bob for your help.

This code is new for me. Up to now I though that direction was only used for some foreign languages. I'll try it.

I shall very soon make some trials and report it back.

I shall try also a float:right span, but this does not look very flexible...

[jhowell]

It is too bad that text-align-last: right isn't well supported.

[Hitch]

Originally Posted by roger64

Thank you Bob for your help.

This code is new for me. Up to now I though that direction was only used for some foreign languages. I'll try it.

I shall very soon make some trials and report it back.

I shall try also a float:right span, but this does not look very flexible...

Sorry to be a buzzkill, but that's not going to work. That text is not, in fact, reading RtoL; it's reading Left-to-right, like all Euro-based languages, and the line wrap is simply right-aligned, nothing more nor less. if you use R2L, the text will, indeed, read R2L, not merely flush-right line-wraps.

Originally Posted by jhowell

It is too bad that text-align-last: right isn't well supported.

Yeah, it's not supported at all, afaik, other than maybe in ePUB3.

This sounds like yet another case for client education.

Hitch

[roger64]

@Hitch

You said, if I understand you well (not sure), that the "rtl" proposal from Bob is not going to work.

How would you "right-align the line-wrap"?

[BobC]

There are clearly problems with the RTL suggestion I made, however to say it wouldn't work is perhaps being a bit pedantic (that's usually my job).

I did try it out on a test document and visually it seemed to do what you had asked for.

If you used a text-to-speech reader on the text it would read it "backwards", however it does appear on a printed page in the correct order. Another issue which I hinted at in my initial post was that of punctuation within a line, where a comma can appear at the start of a wrapped line rather than at the end of the previous one.

Ultimately I think you need to consider how essential it is that the visual format follows exactly your source (I assume that is what you are trying to emulate), there are plenty of other ways to format a poem which can be achieved using standard formatting techniques. "text-align-last : right" may well be the correct way to do it but if readers don't support it then some sort of compromise is in order. It all depends on what you want to do with the book - just read it yourself on a known device or have it published, perhaps in other formats than epub.

BobC

[Hitch]

Originally Posted by BobC

There are clearly problems with the RTL suggestion I made, however to say it wouldn't work is perhaps being a bit pedantic (that's usually my job).

I did try it out on a test document and visually it seemed to do what you had asked for.

If you used a text-to-speech reader on the text it would read it "backwards", however it does appear on a printed page in the correct order. Another issue which I hinted at in my initial post was that of punctuation within a line, where a comma can appear at the start of a wrapped line rather than at the end of the previous one.

Ultimately I think you need to consider how essential it is that the visual format follows exactly your source (I assume that is what you are trying to emulate), there are plenty of other ways to format a poem which can be achieved using standard formatting techniques. "text-align-last : right" may well be the correct way to do it but if readers don't support it then some sort of compromise is in order. It all depends on what you want to do with the book - just read it yourself on a known device or have it published, perhaps in other formats than epub.

BobC

Bob:

Perhaps I should have elaborated, but in my line of work, which is commercial formatting, I can't put forth a layout that would read backwards, no matter what, in TTS. I mean...just can't. I have other reasons for thinking that it won't work quite like expected, but that's my first and foremost objection.

I'm tied up this am, but if I get a chance, I'll post in more detail.

Hitch

[BobC]

@Hitch,

I understand the point about commercial publishing and assumed that was where you were coming from. I now have to revise my own comments as I have just looked at the test document that I said looked fine, this time with Adobe Reader, and it doesn't work there - it simply wraps as if the RtoL wasn't there. It looked o.k in Calibre's viewer and I hadn't bothered to check it out with Adobe.

What I haven't done is load the test doc onto one of my ebook readers to see what it looks like there.

That's the problem with trying to be clever - unless you have total control over the viewing environment it's best to stick to simple stuff.

BobC

[Hitch]

Originally Posted by BobC

@Hitch,

I understand the point about commercial publishing and assumed that was where you were coming from. I now have to revise my own comments as I have just looked at the test document that I said looked fine, this time with Adobe Reader, and it doesn't work there - it simply wraps as if the RtoL wasn't there. It looked o.k in Calibre's viewer and I hadn't bothered to check it out with Adobe.

What I haven't done is load the test doc onto one of my ebook readers to see what it looks like there.

That's the problem with trying to be clever - unless you have total control over the viewing environment it's best to stick to simple stuff.

BobC

Bob:

Many times, even if you do have total control over the test environment, it's best to stick to simple stuff, LOL. I have enough eReaders to start my own damn museum and trust me, simple=good.

Hitch

[roger64]

Well, this is what I decided to use.
Each verse has its own paragraph style (Chanson) and the stanza is kept within a div (space) tag. As the length of the verses is variable, I could not find a perfect solution and had to compromise. I tried this one on a six inches screen, it should possibly be better on wider ones, and dubious on smartphones.

I made use of a negative indent which seems to be correctly supported for ePub and PDF. A screenshot is joined. No idea for others (hello Hitch!).

p {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  padding: 0;
  text-indent: 1.5em;
  text-align: justify;
  widows: 2;
  orphans: 2;
}
p.Chanson {
  margin-left: 70%;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  padding: 0;
  text-indent: -65%;
  text-align: justify;
  font-style: italic;
}
.space {
  margin-top: 12px;
  margin-bottom: 12px;
}

[Hitch]

Originally Posted by roger64

Well, this is what I decided to use.
Each verse has its own paragraph style (Chanson) and the stanza is kept within a div (space) tag. As the length of the verses is variable, I could not find a perfect solution and had to compromise. I tried this one on a six inches screen, it should possibly be better on wider ones, and dubious on smartphones.

I made use of a negative indent which seems to be correctly supported for ePub and PDF. A screenshot is joined. No idea for others (hello Hitch!).

p {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  padding: 0;
  text-indent: 1.5em;
  text-align: justify;
  widows: 2;
  orphans: 2;
}
p.Chanson {
  margin-left: 70%;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  padding: 0;
  text-indent: -65%;
  text-align: justify;
  font-style: italic;
}
.space {
  margin-top: 12px;
  margin-bottom: 12px;
}

Question, if I may?

Why the px measurement for the top/bottom margins?

Hitch

[roger64]

The good news is that you dont't cough immediately about the use of a negative indent...

Why pixels? I use them usually for margins because:

The px unit is the magic unit of CSS. It is not related to the current font and usually not related to physical centimeters or inches either. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like an e-book reader? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

Indeed I made an exception for the paragraph style "Chanson", where I used a percentage for no particular reason in fact or just easier testing.

[Hitch]

Originally Posted by roger64

The good news is that you dont't cough immediately about the use of a negative indent...

We've used them. Sometimes, it's fairly unavoidable. It's as good a solution as any, really. (The better solution would have been to discuss this with the client, and explain, and make THEM compromise, but I've worked with poets, so I know how that is.)

Why pixels? I use them usually for margins because:



Indeed I made an exception for the paragraph style "Chanson", where I used a percentage for no particular reason in fact or just easier testing.

Hmmmmm....I'm going to have to contemplate this for a bit. I have some vague recollection of a very real-world issue around px and margins, but of course, can I think of it? NO. Senile old bat that I am. But I'll remember, sooner or later. :-)

Hitch

[DNSB]

Originally Posted by Hitch

Hmmmmm....I'm going to have to contemplate this for a bit. I have some vague recollection of a very real-world issue around px and margins, but of course, can I think of it? NO. Senile old bat that I am. But I'll remember, sooner or later. :-)

Hitch

One issue with using px for margins is that moving between devices with different resolutions does not work very well. On an 600 pixel wide screen, 10 pixels is a lot wider than 10 pixels on a 1404 pixel wide screen. The referenced web page claim that a px is a constant 1/96 of an inch and not the same as a pixel does not seem to apply on any ereader I've used. Otherwise, I wouldn't have needed to waste the time that I have wasted changing image formatting from px to % so the amount of screen space used is relatively constant on my collection of ereaders. A 600px x 800px image is not 6.25" x 8.33" on any device I've used from a 5" Kobo Mini to a 10.5" iPad Pro.