![]() |
#1 |
Miskatonic U. Class of 97
![]() Posts: 20
Karma: 10
Join Date: Apr 2015
Location: Ethersphere
Device: iPad, Kindle, Nook,
|
Help coding hierarchical poem in ePub
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; } Last edited by rewyn; 05-20-2015 at 10:03 AM. Reason: you kill my spaces |
![]() |
![]() |
![]() |
#2 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,770
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
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. ![]() |
![]() |
![]() |
Advert | |
|
![]() |
#3 | |
Miskatonic U. Class of 97
![]() Posts: 20
Karma: 10
Join Date: Apr 2015
Location: Ethersphere
Device: iPad, Kindle, Nook,
|
Thanks!
Quote:
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 ![]() |
|
![]() |
![]() |
![]() |
#4 |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,217
Karma: 57978778
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
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;} |
![]() |
![]() |
![]() |
#5 |
Miskatonic U. Class of 97
![]() Posts: 20
Karma: 10
Join Date: Apr 2015
Location: Ethersphere
Device: iPad, Kindle, Nook,
|
Hmmm....
Celebrated too soon, seems like setting margins has stopped lines from breaking altogether... |
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,770
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
|
![]() |
![]() |
![]() |
#7 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Do you perhaps have white-space: pre; in your stylesheet or perhaps <pre></pre> tags in the xhtml?
|
![]() |
![]() |
![]() |
#8 |
Miskatonic U. Class of 97
![]() Posts: 20
Karma: 10
Join Date: Apr 2015
Location: Ethersphere
Device: iPad, Kindle, Nook,
|
hmmm
|
![]() |
![]() |
![]() |
#9 |
Miskatonic U. Class of 97
![]() Posts: 20
Karma: 10
Join Date: Apr 2015
Location: Ethersphere
Device: iPad, Kindle, Nook,
|
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 |
![]() |
![]() |
![]() |
#10 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,770
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
|
![]() |
![]() |
![]() |
#11 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
What is the rest of your stylesheet? Inheritance might be a clue here.
|
![]() |
![]() |
![]() |
#12 |
Miskatonic U. Class of 97
![]() Posts: 20
Karma: 10
Join Date: Apr 2015
Location: Ethersphere
Device: iPad, Kindle, Nook,
|
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. |
![]() |
![]() |
![]() |
Tags |
coding books, epub 2, hierarchical, poem |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
SVG coding in EPUB | roger64 | ePub | 2 | 10-01-2014 01:05 PM |
PRS-T1 Hierarchical Collection? | silentguy | Sony Reader Dev Corner | 10 | 07-23-2012 02:03 AM |
Hierarchical organization by subject | daveed | Library Management | 2 | 05-07-2011 07:40 AM |
Xpath hierarchical structure | mtravellerh | Calibre | 4 | 01-03-2009 02:40 PM |