(Solution) Formatting issues converting from azw3 to epub

[JSWolf]

Originally Posted by Quoth

&nbsp is just a non-breaking space. Those should be rare.

I've seen quote a lot of <p>&nbsp</p> to make a line space.

[Quoth]

Originally Posted by JSWolf

I've seen quote a lot of <p>&nbsp</p> to make a line space.

Crazy.

[nabsltd]

Originally Posted by Quoth

Crazy.

Even crazier because it doesn't always create the space the author intended.

Kindles have a bug where it won't render space (margins, padding, etc.) correctly at the start of the HTML file (chapter start, etc.), and also incorrectly collapses anything rendered as blank space (like &nbsp along with actual whitespace.

It's likely caused by not special casing the "don't show blank space at the top of the screen on page turn" logic. This makes sure that if something like a scene break paragraph starts at the top of the screen, the blank space isn't needlessly rendered. That is a case where you do want to treat &nbsp; as if it was actual whitespace.

The workaround is to put a paragraph at the top of the page, and put content with visibility: hidden; styling.

[theducks]

Originally Posted by Quoth

Crazy.

It stops some really stupid 'cleanup empty tag' code

Maybe I use them wrong, but I deal with lots of cases with 2 words that look really strange when split up
Have a good
day

[Quoth]

Originally Posted by theducks

It stops some really stupid 'cleanup empty tag' code

Maybe I use them wrong, but I deal with lots of cases with 2 words that look really strange when split up
Have a good
day

That's what they are for. Also figures + units (though technically a half size non-breaking space or similar).

But "crazy" referred to <p>&nbsp</p>
Extra space between paragraphs should be a last or first paragraph with extra margin. They shouldn't be used in an attempt to replicate horizontal or vertical tabs. Tabs were for typewriters.
https://en.wikipedia.org/wiki/Non-br...idth_variation

Edit:
Sometimes a word with a hyphen shouldn't wrap
https://en.wikipedia.org/wiki/Hyphen...eaking_hyphens
No idea if they work in some or all ebooks. Only regular and ordinary non-breaking spaces work universally in ebooks, but safe to have other sizes of space in PDFs, because likely if it works on your PDF, it will work for printer/POD etc.

[Quoth]

Originally Posted by nabsltd

Kindles have a bug where it won't render space (margins, padding, etc.) correctly at the start of the HTML file (chapter start, etc.)

I think "margin-top" is ignored on many systems, not just kindle at the new file/ new page, even some LO Writer versions. I must re-check padding-top, which works on epub. I thought it was OK on azw3.
The only place I use padding-top generally is any style in LO that has "insert new page". I avoid columns and tables.

[SillyStegosaurus]

Alright I gave it another try. My interest in fixing this is mostly for technical knowledge at this point, as it's readable with the az3w -> mobi -> epub workaround I mentioned in my initial post.

DNSB: I mended and prettified the HTML with Sigil. Same results. You are correct, Almost everything is in one xhtml. The cover page has its own xhtml, and then the entirety of the book has a different one.

The book is a book of poems, "Cradleland of Parasites" by Sara Tantlinger. The sample on Amazon was, unfortunately, just the table of contents and does not show the error. It first shows up in the first poem. Here's code from the prettified and mended html I have open in Sigil right now:


<div style="page-break-after:always"></div>

<h1 style="margin:1.75% 0.00% 0.88% 4.62%; text-indent:-1.8em; page-break-before:always; page-break-after:avoid; widows:0; orphans:0"><a name="__RefHeading__36330_1247423656"></a><span style=" font-size:1.3rem; font-weight:bold">On a White Horse</span></h1>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem"> </span></p>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem">I am the rider of the white horse</span></p>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem">enigmatic in interpretation</span></p>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem"> </span></p>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem">I do not ride as the Holy Spirit,</span></p>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem">you will find no gospel spread</span></p>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem">beneath my horse’s hooves</span></p>

<p style="margin:0.00% 0.00%; widows:0; orphans:0"><span style=" font-size:1.0rem"> </span></p>


The formatting error is:
Rather than the title showing, "On a White Horse", it shows, "a White Horse". Many other poem titles are similarly cut off.

I attempted 2 modifications:
1. Pre-pended a bunch of spaces " On a White Horse" until the title showed fully in Sigil's preview pane. Result: No difference.

2. Pre-pended a bunch of periods "............On a White Horse" and looked in Sigil's preview pane. The periods did successfully move the characters over.

I think I could laboriously prepend periods in front of each mangled title to fix them, but a manual solution like that doesn't seem worth it.


JSWolf: Converting in Calibre was my first try and it reproduced the same issues. But, does Calibre remove in-line styles automatically?

[Quoth]

Originally Posted by SillyStegosaurus

But, does Calibre remove in-line styles automatically?

I don't think so.
You can create CSS and then use regex to replace the stupid inline styles with the more sensible css Classes.

I suspect this is an old title perhaps made using some mad HTML3 software and a source MS Word with no use of paragraph styles.

Adding spaces won't work. The margins are wrong.

Edit
Replace margin:0.00% 0.00%; globally with nothing, in Sigil or Calibre as that makes no sense.

Replace style=" font-size:1.0rem" with nothing or all .0rem with .0em
Ebooks should never use rem
margins should never be 0.00%, or % at all. They are 0, or a number of em or at worst pt (1em = 12pt)
I'd only ever use % for an image width or an image height, with the other axis as auto. Nothing else should be auto.

azw3 and epub are a subset of HTML5.
Styles shouldn't exist, only CSS class names: Fivre line verse:
<p class="first-line">first line of verse</p>
<p class="verse-body">line of verse</p>
<p class="verse-body">line of verse</p>
<p class="verse-body">line of verse</p>
<p class="last-line">last line of verse</p>

Then the CSS sets top, left, right, bottom margins, text-align, font stuff

Edit
There are loads of ways to do it.

[jhowell]

Originally Posted by SillyStegosaurus

<h1 style="margin:1.75% 0.00% 0.88% 4.62%; text-indent:-1.8em; page-break-before:always; page-break-after:avoid; widows:0; orphans:0"><a name="__RefHeading__36330_1247423656"></a><span style=" font-size:1.3rem; font-weight:bold">On a White Horse</span></h1>

The negative text indent is causing the beginning of the line to be moved off the screen.

[Quoth]

I think I wrote many posts ago to delete all negative margins. I assumed that had been done!

[SillyStegosaurus]

Ok wow thank you, at the end of the day simply removing the negative text indent was the solution! I had tried to find any negative margins but I missed it. This negative margin is in the xhtml. I think I was looking in the css that Calibre had produced and then got lost in the details.

I replaced all the negative indents with a more positive 0.25em and it's great now. This output looks better than the Calibre conversion! Once again thanks for all the help!

[JSWolf]

Originally Posted by Quoth

I think "margin-top" is ignored on many systems, not just kindle at the new file/ new page, even some LO Writer versions. I must re-check padding-top, which works on epub. I thought it was OK on azw3.
The only place I use padding-top generally is any style in LO that has "insert new page". I avoid columns and tables.

When I used to use a 2em blank space for section breaks, I used padding-top: 2em; as that worked when the section break came at the end of the screen. It would show the space at the top of the next page.

[JSWolf]

Originally Posted by Quoth

I don't think so.
You can create CSS and then use regex to replace the stupid inline styles with the more sensible css Classes.

I suspect this is an old title perhaps made using some mad HTML3 software and a source MS Word with no use of paragraph styles.

Adding spaces won't work. The margins are wrong.

Edit
Replace margin:0.00% 0.00%; globally with nothing, in Sigil or Calibre as that makes no sense.

Replace style=" font-size:1.0rem" with nothing or all .0rem with .0em
Ebooks should never use rem
margins should never be 0.00%, or % at all. They are 0, or a number of em or at worst pt (1em = 12pt)
I'd only ever use % for an image width or an image height, with the other axis as auto. Nothing else should be auto.

azw3 and epub are a subset of HTML5.
Styles shouldn't exist, only CSS class names: Fivre line verse:
<p class="first-line">first line of verse</p>
<p class="verse-body">line of verse</p>
<p class="verse-body">line of verse</p>
<p class="verse-body">line of verse</p>
<p class="last-line">last line of verse</p>

Then the CSS sets top, left, right, bottom margins, text-align, font stuff

Edit
There are loads of ways to do it.

I'll disagree that margins should never be %. I have on instance where it's OK to be % and it's OK to change the size of the content. This is the CSS I use for section breaks.

hr {
  margin-top: 0.9em;
  margin-right: 40%;
  margin-bottom: 0.9em;
  margin-left: 40%;
  border-top: 2px solid;
}

As to the classes for first-line and last-line, get rid of them. Use a <blockquote> instead and just use the same class as the other lines.

[theducks]

Originally Posted by JSWolf

When I used to use a 2em blank space for section breaks, I used padding-top: 2em; as that worked when the section break came at the end of the screen. It would show the space at the top of the next page.

WHERE is there always a 100% solution when there are uncontrolled (Users, Manufactures code) variables? Huh!

I consider any solution that conforms to the 80% rule, a win.

BTW How did we (the community) become so nit-picky about 100% perfect rendering under any conditions?
I have a ton of dead tree books that all I can change is how I light them.

[Quoth]

Originally Posted by JSWolf

I'll disagree that margins should never be %.
As to the classes for first-line and last-line, get rid of them. Use a <blockquote> instead and just use the same class as the other lines.

We'll disagree.
You can do <hr class="quart" />
.quart {
height: 2px;
width:25%
}
The left & right margins are not needed. You might add padding-top margin-top and margin-bottom
<blockquote> with no class is really HTML3, or webpages <p class="something"> is better because then behaviour is not based on renderer behaviour, not source design. Of course some argue that <blockquote> has extra semantic meaning, but you don't argue that for the alternatives to <i> and <b> (which like superscript and subscript occur within a paragraph. The <div class="whatever"> might enclose a verse.

BUT there are many ways to do verses. The worst idea is explicit whitespace or empty newlines.

Also if making ebooks from MS Word or LO Writer you don't get blockquotes or % margins.