Mobileread
How to make listlike hanging indents for KFX (example code in post)
#1  TheRealJohnAdams 05-17-2020, 03:57 PM
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:
  1. This item is to the right of a piece of text (in this case "1.") and has a flush left margin. This item is to the right of a piece of text (in this case "1.") and has a flush left margin. This item is to the right of a piece of text (in this case "1.") and has a flush left margin.

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>
Note that version A has the "V. " <span> inside the body <p>, whereas B and C have it outside. Version B and Version C differ in that Version B has "V. ", whereas C has "V" with no punctuation or spacing.

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. "
}
Another obvious one, which was meant to work with Version A, also fails because KFX does not support "display: inline-block". This CSS would have set up a normal hanging indent of 2em, and made the "V. " <span> 2em wide so it took up that whole indent.

Code
span { width: 2em; display: inline-block;
}
p {
text-indent: -2em;
padding-left: 2em;
}
The least-kludgey solution is this:

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;
}
My understanding is that on a device that handles CSS correctly, the foregoing code would achieve the desired result. It looks right in the Sigil preview. It looks almost right on Kindle, but unfortunately, this code creates a normal firstline indent with width equal to the width of the <span> (so, in this case, 1.25em). I don't understand why it would do that. I have tried forcing the <p> to ignore the <span>, using things like "position: absolute" and "position: relative," to no avail. I also tried and failed to set the <span>'s height to equal the height of the <p> element, which would give me a flush margin, to no avail. Weirdly, if I increase the padding-left property enough, for instance to "padding-left:4em," the firstline indent goes away. But 4em is a much larger left margin than I want.

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;
}
If used with Version B, the "." wraps onto the next line, like so. And if the text in the <p> is only one line long, the "." that wraps will mess up the alignment of the following paragraph.

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?
Reply 

#2  jhowell 05-17-2020, 06:45 PM
Two workable solutions for this sort of problem are to either use "float: left;" or a table with two columns.
Reply 

#3  Quoth 05-18-2020, 05:35 AM
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.
Reply 

#4  Hitch 05-18-2020, 09:06 AM
Quote Quoth
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.
Hmmm....that won't work for KF7. Sadly.

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
Reply 

#5  RbnJrg 05-18-2020, 10:06 AM
** 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">&#x2002;&#x2002;&#x2002;&#x2002;</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">&#x2002;&#x2002;&#x2002;&#x2002;</span>This is the response. It, too, has a flush left margin.</p>
And in your .css file write:

Code
p { text-indent: 0; text-align: justify;
}
.hanging { text-indent: -3em; margin-left: 3em;
}
.italic { font-style: italic;
}
.preserve { white-space: pre;
}
Here you can see how it looks as .KFX:

show attachment »

and here as .epub:

show attachment »

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.
[epub] Hanging text.epub (2.3 KB, 38 views)
Reply 

#6  Quoth 05-18-2020, 10:41 AM
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?
Reply 

#7  TheRealJohnAdams 05-18-2020, 12:25 PM
Quote RbnJrg
** 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">&#x2002;&#x2002;&#x2002;&#x2002;</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">&#x2002;&#x2002;&#x2002;&#x2002;</span>This is the response. It, too, has a flush left margin.</p>
And in your .css file write:

Code
p { text-indent: 0; text-align: justify;
}
.hanging { text-indent: -3em; margin-left: 3em;
}
.italic { font-style: italic;
}
.preserve { white-space: pre;
}
Here you can see how it looks as .KFX:

show attachment »

and here as .epub:

show attachment »

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.
That looks really good! Did you pick the number of en spaces manually based on the width of the "V." and "R.", or is there something about whitespace: pre that makes it line up correctly?
Reply 

#8  jhowell 05-18-2020, 01:33 PM
Quote RbnJrg
Here you can see how it looks as .KFX
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.
screenshot.jpg 
Reply 

#9  RbnJrg 05-18-2020, 01:54 PM
Quote jhowell
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.
Indeed. Something has changed since you posted this:

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).
Reply 

#10  RbnJrg 05-18-2020, 02:00 PM
Quote TheRealJohnAdams
That looks really good! Did you pick the number of en spaces manually based on the width of the "V." and "R.", or is there something about whitespace: pre that makes it line up correctly?
The property "whitespace: pre" doesn't affect the output; it's only usefull for ADE. On the other hand, the chars "&#x2002;" (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"
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register