05-17-2020, 03:57 PM | #1 |
Enthusiast
Posts: 29
Karma: 44914
Join Date: May 2020
Device: Kindle Oasis, Kobo Forma
|
How to make listlike hanging indents for KFX (example code in post)
Hi all. I am making a prayer book. Many prayers have portions known as "versicle" and "response" (think call-and-response). Traditionally, they are designated with "V." and "R." to the left of the versicle or response text, like so.
I am referring to this as a "hanging indent," which may not be the correct term, because in word it is accomplished by setting a hanging indent, typing "V." or "R.", and pressing tab. I'm calling it "listlike" because we most often see it in numbered lists. For example:
The trouble is that KFX does not support any of the features that I would ordinarily use to achieve this effect. I have spent a few hours with Sigil and Kindle Previewer trying to find a solution. I've been using the following html: Code:
<h1>Version A</h1> <div><p><span>V. </span>Text of Versicle. This should wrap and have a flush margin when it wraps to make everything nice and pretty and I'm really not sure why I keep typing except to make sure I have a large enough test paragraph.</p></div> <h1>Version B</h1> <div><span>V. </span><p>Text of Versicle. This should wrap and have a flush margin when it wraps to make everything nice and pretty and I'm really not sure why I keep typing except to make sure I have a large enough test paragraph.</p></div> <h1>Version C</h1> <div><span>V</span><p>Text of Versicle. This should wrap and have a flush margin when it wraps to make everything nice and pretty and I'm really not sure why I keep typing except to make sure I have a large enough test paragraph.</p></div> I've tried a lot of different approaches. The obvious one, using a custom list-style-type, doesn't work because KFX doesn't support the required property value. Code:
/*Doesn't work because KFX doesn't support strings for list-style-type property.*/ p { display: list-item; list-style-type: "V. " } Code:
span { width: 2em; display: inline-block; } p { text-indent: -2em; padding-left: 2em; } Code:
div { margin-top: .5em; margin-bottom: .5em; position: relative; } span { display:block; position:relative; float: left; width: 1.25em; } p { display: block; position: relative; padding-left:2em; margin: 0; } After a lot of trial and error, I found a solution that works, but only with Version C. Code:
div { margin-top: .5em; margin-bottom: .5em; } span { display:block; float: left; width: .001em; height: .001em; } p { text-indent:0; padding-left:2em; margin: 0; } For several reasons, then, the solution I've found is not ideal. It feels very kludgey and has significant limitations compared to a more natural solution. But it is also the only solution that I have found that works on Kindle. Is there a better one? |
05-17-2020, 06:45 PM | #2 |
Grand Sorcerer
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
Two workable solutions for this sort of problem are to either use "float: left;" or a table with two columns.
|
Advert | |
|
05-18-2020, 05:35 AM | #3 |
the rook, bossing Never.
Posts: 10,787
Karma: 83992591
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Never use tabs, ever, except maybe in programming (contentious many say spaces) or on a mechanical typewriter.
Use a pair of styles for call and response in the wordprocessor, use docx import to Calibre. Convert to epub2 and then use the epub2 as the conversion source for old mobi or azw/KF8 depending on Kindle. Only use dual (also called joint) if sending to someone and you don't know which era of Kindle it is. Or uploading "Kindle" format to stores OTHER THAN Amazon. It's best to upload the epub2 to Amazon KDP. Gives the best / most accurate conversion for flowed layouts. Fixed layout "ebooks" are a can of worms. No need for lists or tables. I have used "float: left;" when manually fixing exist ebooks with incorrect image formatting. Last edited by Quoth; 05-18-2020 at 05:39 AM. |
05-18-2020, 09:06 AM | #4 | |
Bookmaker & Cat Slave
Posts: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
The only way I've found to use what are effectively custom list tags (the v and the r, with "." each), and have left-aligned hanging content to a box of text that is then indented, is with tables. No, that won't work on a Kindle 1, the first-ever released Kindle, but it will work on everything else. HTML doesn't take kindly to custom list identifiers (e.g., A) instead of 1.) and we all know that tabs don't work at all. If you use required spaces, then the space in the first line will always get distorted, by the justification algorithms (but, btw, that's what we do and that's what we tell the clients, unless they want to pay us for table-making). If it has to be perfect; if you don't care about the money paid to a formatter or are DIYing, two-cell tables are the only answer I've ever found that works on EVERYTHING. The only reason that works in Word, at all (unlike Wordperfect, fwiw) is because you're effectively outdenting the list tag (v/r), then tabbing over to the actual margin. There isn't, afaik, any viable way to do this in the HTML and CSS that drives eBooks. (As you see, if you try a negative indent for the first line you'll have slightly misaligned first letters on the first line after the faux tab.) Sorry. Hitch |
|
05-18-2020, 10:06 AM | #5 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
** WARNING ** The solution doesn't work for the KF7 format, but should work for .kf8 and .KFX and ADE.
In your .xhtml file write the following: Code:
<p>This is the lengthy prayer that will be followed by a versicle and response. It is flush left because I did not set a hanging indent.</p> <p class="hanging">V.<span class="preserve">    </span>This is the versicle. Observe how, apart from the V. tag, the left margin is flush. In Microsoft Word, this is achieved by setting a hanging indent, typing "V.", and then pressing "tab."</p> <p class="hanging italic">R.<span class="preserve">    </span>This is the response. It, too, has a flush left margin.</p> Code:
p { text-indent: 0; text-align: justify; } .hanging { text-indent: -3em; margin-left: 3em; } .italic { font-style: italic; } .preserve { white-space: pre; } and here as .epub: I can't attach the .kfx output but is ok. Below you can check the respective .epub. Regards Rubén PS: Note to the administers of the site: maybe could be a good idea to allow to upload .kfx files. I wanted to upload one, and I receive the message of format not allowed. Last edited by RbnJrg; 05-18-2020 at 10:09 AM. |
Advert | |
|
05-18-2020, 10:41 AM | #6 |
the rook, bossing Never.
Posts: 10,787
Karma: 83992591
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
And maybe odt too.
Sorry, I missed out the indent between initial and sentence. So a simple style won't work. The tables will I guess. I'd just have had a single space and tried a larger indent after the first line. Doesn't that work? Of course the text in the first line won't line up with wrapped lines. I read some kinds of non-breaking space to fake a tab don't work? |
05-18-2020, 12:25 PM | #7 | |
Enthusiast
Posts: 29
Karma: 44914
Join Date: May 2020
Device: Kindle Oasis, Kobo Forma
|
Quote:
|
|
05-18-2020, 01:33 PM | #8 |
Grand Sorcerer
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
I converted your EPUB using the Kindle Previewer and everything lines up nicely for me also...until I change the font size or switch to landscape mode.
|
05-18-2020, 01:54 PM | #9 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
https://www.mobileread.com/forums/sh...9&postcount=30 Now spaces are not more of fixed width. Because a margin of 3em must be the same in portrait or landscape mode (the same should happen with a negative indent of -3em). |
|
05-18-2020, 02:00 PM | #10 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
The property "whitespace: pre" doesn't affect the output; it's only usefull for ADE. On the other hand, the chars " " (a half em space of fixed width) doesn't have any effect in ADE, there only works the property "whitespace: pre". So, I combined the two procedure to have a solution for both plataforms, Kindle and ADE. But now it seems that Amazon changed something, because the fixed width spaces are not any more "fixed width"
|
05-18-2020, 02:27 PM | #11 |
Running with scissors
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
|
I was wondering if there's some way to control for each item what what a list (ol, ul) uses instead of the bullet or number. I looked but didn't find anything.
My other idea was a definition list (dl, dd, dt). I didn't find anything for that either. |
05-18-2020, 03:12 PM | #12 | |
Grand Sorcerer
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
Quote:
Code:
.hanging { text-indent: -3em; margin-left: 3em; } Code:
text_indent: { value: -9.375, unit: percent, }, margin_left: { value: 9.375, unit: percent, }, |
|
05-18-2020, 03:40 PM | #13 | |
Enthusiast
Posts: 29
Karma: 44914
Join Date: May 2020
Device: Kindle Oasis, Kobo Forma
|
A few people now have mentioned tables. I tried that as well, but at least on my Oasis, using a table—even a small one—results in a clickable button on the page itself. The button brings up table controls (e.g. zoom) and is intended to make it easier to read tabular data in an ebook. But since my goal is the elegant presentation of a paragraph of text, having a button pop up would defeat the point.
Is there a way to disable that button? Quote:
Code:
p.listlike { display: list-item; list-style-type: 'V.' } |
|
05-18-2020, 05:02 PM | #14 | |
Resident Curmudgeon
Posts: 73,660
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
05-19-2020, 02:45 PM | #15 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Ok, the OP wanted a solution for .KFX and here there is a solution for .KFX (not for ADE, not for .kf7).
1. In the .xhtml file: Code:
<p>This is the lengthy prayer that will be followed by a versicle and response. It is flush left because I did not set a hanging indent.</p> <p class="hanging_tag">V.</p> <p class="versicle">This is the versicle. Observe how, apart from the V. tag, the left margin is flush. In Microsoft Word, this is achieved by setting a hanging indent, typing "V.", and then pressing "tab."</p> <p class="hanging_tag italic">R.</p> <p class="versicle italic">This is the response. It, too, has a flush left margin.</p> <p>This is another lengthy prayer that will be followed by a versicle and response. It is flush left because I did not set a hanging indent.</p> Code:
p { text-indent: 0; text-align: justify; margin-bottom: 0; } .italic { font-style: italic; } .hanging_tag { float: left; display: inline; text-align: left; width: 1.5em; } .versicle { display: block; padding-left: 18%; text-align: left; width: 81%; } In landscape mode all seems to be ok. Below I attach the respective epub (by the way, .KFX has some serious issues with the property "float" —but not with the present aproximation—, that property works much better in .kf8). Rubén |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
hanging indents alignment on Kindle | backwoodsman | Calibre | 9 | 04-22-2012 03:36 AM |
Indents and hanging indents in epub poetry | Derek R | ePub | 14 | 02-19-2012 04:43 AM |
Hanging Indents | John123 | Sigil | 5 | 12-04-2011 02:33 AM |
Display of Hanging Indents | crutledge | Workshop | 1 | 09-25-2009 06:09 PM |
Hanging indents? | llasram | Kindle Formats | 11 | 01-05-2009 10:59 AM |