Mobileread
Weird Formatting Issues, Extra Spaces
#1  Rand Brittain 09-15-2020, 08:42 AM
I recently bought a copy of some translated Japanese books made by Kodansha. The book isn't actually in Japanese, but it looks like it uses Kodansha's stylesheets and so forth, and it's doing some weird things when I send it to an ebook reader. It looks completely normal in Calibre or Sigil, but when I send it to my Kobo or my Bookeen Diva, there's a giant space after every apostrophe and some letters will just disappear.

I've cleaned out several thousand unused styles and I can't find anything in them that I would expect to cause this. The encoding is UTF-8, just like the ebooks I make myself. Can anybody tell me what the source of this problem might be?
Reply 

#2  Turtle91 09-15-2020, 02:49 PM
It might make it easier to help if we could see the CSS and a sample of the HTML that exhibits the error. If it is copyrighted, then you can Borkify it before posting.
Reply 

#3  Rand Brittain 09-15-2020, 09:49 PM
I can't get Borkify to work, so I'll just post a bit of a page.

Code
<div class="indent-2em"> <p>“If something’s on your mind, just say it.”</p> </div> <div class="indent-2em"> <p>The man seemed bothered by her question.</p> </div> <div class="indent-2em"> <p>“It’s not like that─I’m just a little out of place. I’m an island monkey. I don’t think I’ve ever stepped on wood so shiny.”</p> </div>
The CSS is as follows:

Code
body { font-size: 100%; vertical-align: baseline; background: transparent; text-align: justify;
}
div, p { display: block; margin: 0; padding: 0;
}
body, div, p { text-indent: 0;
}
body > p, div > p { text-indent: inherit;
}
h1, h2, h3, h4, h5, h6 { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: inherit; background: transparent;
}
img { width: auto; height: auto; margin: 0; padding: 0; border: none; vertical-align: baseline; background: transparent;
}
a { font-style: inherit; font-weight: inherit; text-decoration: inherit; color: inherit; background: transparent;
}
.align-center { text-align: center;
}
.align-right, .align-end { text-align: right;
}
.hltr a { text-decoration: underline;
}
a:link, a:visited, a:hover, a:focus, a:active { color: #00f;
}
img.gaiji, img.gaiji-line, img.gaiji-wide { display: inline-block; margin: 0; padding: 0; border: none; background: transparent;
}
img.gaiji { width: 1em; height: 1em;
}
.hltr img.gaiji, .hltr img.gaiji-line, .hltr img.gaiji-wide { vertical-align: text-bottom;
}
.fit { display: inline-block; page-break-inside: avoid; max-height: 100%; max-width: 100%;
}
.hltr .fit { vertical-align: top;
}
.super { font-size: x-small; vertical-align: super;
}
.hltr .gfont, .vrtl .gfont { font-family: sans-serif;
}
.font-090per { font-size: 90%;
}
.font-110per { font-size: 110%;
}
.bold { font-weight: bold;
}
.italic { font-style: italic;
}
.indent-2em { text-indent: 10%;
}
.hltr .h-indent-2em { text-indent: -2em; padding-left: 2em;
}
.hltr .start-3em { margin-left: 3em;
}
.hltr .start-5em { margin-left: 5em;
}
.hltr .end-3em { margin-right: 3em;
}
.hltr .align-right, .vrtl .hltr .align-right { text-align: right; padding-left: 3em;
}
a:visited { color: #00008b;
}
.cover-page .main { margin: 0; padding: 0; text-align: center;
}
.image-page .main { margin: 0; padding: 0; text-align: center;
}
Reply 

#4  Rand Brittain 09-15-2020, 10:00 PM
And here's an example of what comes out:

image »
Reply 

#5  theducks 09-15-2020, 10:02 PM
It looks like a space after the apostrophe
The body style is JUSTIFY
the space allow the justify to pad in that plac. Normally it is just whatever's
no space
Also the style for the paragraph indent (2em) reads 10%
Reply 

#6  Rand Brittain 09-15-2020, 10:04 PM
It's not normal for justified text to behave that way. It's definitely not normal for it to split "they're" into "they" and "re" on two separate lines, so I don't think it can be a justification issue.

The text is also not supposed to be italic and Calibre and Sigil don't render it that way.
Reply 

#7  theducks 09-15-2020, 10:10 PM
The only unusual (tome) is that Background: transparent

ADE was notorious for ditching a CSS with errors
Reply 

#8  Rand Brittain 09-15-2020, 10:21 PM
Quote theducks
ADE was notorious for ditching a CSS with errors
Ah! Good point. That would explain why it keeps intermittently reading everything in italic, but only sometimes. Let me run ePubCheck on it and make sure it's completely error-free...

But no. Correcting everything that ePubCheck doesn't like still doesn't solve the problem.

/stares

Ah! I found it! The xhtml attribute still has lang:"ja" set. I knew it was going to be something like that. Switching it to lang:"en" fixes all the issues.
Reply 

#9  Turtle91 09-16-2020, 11:04 AM
great...glad I could be of help...lol
Reply 

#10  JSWolf 09-16-2020, 02:42 PM
Quote Rand Brittain
It's not normal for justified text to behave that way. It's definitely not normal for it to split "they're" into "they" and "re" on two separate lines, so I don't think it can be a justification issue.

The text is also not supposed to be italic and Calibre and Sigil don't render it that way.
Take this ePub and load it in the Calibre editor. Then fromt he Tools menu, select "Remove unused CSS rules". This will remove any CSS classes that are not used in both the CSS and the HTML. If there is an error in the CSS that's not being used, then that will go away. The next thing to do is check for errors using Calibre's error checker. That's the icon that looks like a bug. Fix any errors showing there. Then run epubcheck. If you don't have epubcheck, install the epubcheck plugin for the editor.

One final thing to do is from the Tools menu select "Congress images losslessly". This will remove the crud inside the images without changing the image quality. By removing the crud, you make them smaller.

And finally, test your ePub in ADE and see what happens.
Reply 

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