Help coding hierarchical poem in ePub

[rewyn]

Greetings all...

Here's my dilemma: I have a section in my current project that has a hierarchical poem. I "clumsily" build a structure for it (verse, verse2, verse3, verse4, etc.)

Each verse tag has different text-indent according to how they should appear on the page.

Is there an easier way to code this?

Example:

.kjhdfo sfjsfjk d dfgjkdfjd fkdsoieui
.........ksajadkj dsjak skdjdkasoiw lakdlak
........................askjdka skdjow kal dk
.........fkjlfi fji s djkkdlaow wo wkd
.......................................nuw
........................djksdoi doaj msowm skao
.......................................nuw
........................njsjh fhfsi wjak akd9w

And it goes on like this for almost 50 lines...

The other problem I have is relating to testing my structure on the Nook. some of the lines that break do not indent underneath their first lines, and end up looking like:

.kjhdfo sfjsfjk d dfgjkdfjd fkdsoieui
.........ksajadkj dsjak skdjdkasoiw
lakdlak
........................askjdka skdjow kal dk
.........fkjlfi fji s djkkdlaow wo
wkd
.......................................nuw
........................djksdoi doaj msowm
skao
.......................................nuw
........................njsjh fhfsi wjak akd9w

(dots present to hold spacing)
Why don't these break underneath? Is there a second line tag to insert? Can anyone offer some suggestions?

My codes looks like this each with different indents:

p.verse5 {
font-family: serif;
color: black;
background: white;
font-size: 1em;
text-align: left;
text-indent: 8em;
padding-left: -8em;
}

[DiapDealer]

Always tricky ... rarely a perfect solution (for all apps/devices).

Instead of using +text-indents and negative padding, experiment with +(margin|padding)-left and negative text-indents. The negative text indent is what will give you what you're looking for when lines break.

Start with an equal (but opposite) number (margin-right: 3em; text-indent: -3em) to get a feel for how the "hanging" indent works when the text is "flush left". Then start increasing the margin/padding right to see how things behave (adjust the text-indent accordingly).

Also make sure you have plenty of hair to yank out along the way.

[rewyn]

Originally Posted by DiapDealer

Start with an equal (but opposite) number (margin-right: 3em; text-indent: -3em) to get a feel for how the "hanging" indent works when the text is "flush left". Then start increasing the margin/padding right to see how things behave (adjust the text-indent accordingly).

YEAH!

Setting the margin! Now why didn't I think of that? Forcing margin to start where copy starts...duh.

Thanks.

P.S. Glad I didn't have much hair to start with to yank

[theducks]

Just a comment on the CSS

Why all the redundant styling if all you want is indent changes?

set the basics in the
p {display: block; more stuff}

and set the differences in the
.verse {indent: .5em;}

[rewyn]

Hmmm....

Celebrated too soon, seems like setting margins has stopped lines from breaking altogether...

[DiapDealer]

Originally Posted by rewyn

Hmmm....

Celebrated too soon, seems like setting margins has stopped lines from breaking altogether...

Shouldn't. If it's all one paragraph and it's wider than the screen, it HAS to break.

[Toxaris]

Do you perhaps have white-space: pre; in your stylesheet or perhaps <pre></pre> tags in the xhtml?

[rewyn]

Originally Posted by Toxaris

Do you perhaps have white-space: pre; in your stylesheet or perhaps <pre></pre> tags in the xhtml?

nope. and nope.

[rewyn]

code looks like this:

p.verse5 {
font-family: serif;
color: black;
background: white;
font-size: 1em;
text-align: left;
text-indent: -1.5em;
margin-left: 8em;
padding-right: 2em;
}

But for some reason on the Nook long lines are not breaking....Grrr

[DiapDealer]

Originally Posted by rewyn

But for some reason on the Nook long lines are not breaking....Grrr

I don't quite understand what you mean by "not breaking." Do you mean the longer lines are actually disappearing off the screen?

[Toxaris]

What is the rest of your stylesheet? Inheritance might be a clue here.

[rewyn]

I took a break and came back to it, I was over thinking what I needed to do here.

Here is what I did simplified:
p.verse5 {
line-height: 1.2em;
text-align: left;
text-indent: -4em;
padding-left: 12em;
}

then just adjusting the padding to other indenting lines accordingly, thanks all.