[Tex2002ans]

Originally Posted by keress

Then I tried viewing it in Adobe Digital Editions. I'm very disappointed. It's rendering fonts in funky ways. I have a slight variant for the first paragraph in a chapter. It just has no initial indent. And there's a span styling a Drop Cap. In Adobe, that whole paragraph is rendered as bold. No drop cap is displayed. I thought maybe it was getting the 'bold' idea from the drop cap, but that doesn't use a bold, so it makes no sense. It seems Adobe can't handle a simple 'span.'

Your CSS is wrong, and ADE doesn't like CSS that's broken. One error and ADE will potentially throw the entire thing out.

There are serious issues with semicolons in the wrong place, causing the entire CSS file to not be parsed properly.

If you run your CSS through W3C's CSS Validator, you can see all the issues:

https://jigsaw.w3.org/css-validator/validator

You could also run it through Calibre Editor's Tools > Check Book.

* * *

One example,

@font-face {
font-family: "Cormorant Infant";
font-weight: normal;
font-style: bold; <---- This line invalid
src: url("../Fonts/CormorantInfant-Bold.ttf");
}

font-style: bold isn't valid (normal/italic is). And based on the filename, you meant to put:

font-weight: bold;
font-style: normal;

Originally Posted by keress

I don't get it. I'm using very basic, solid CSS tags. All weird MS Word stuff is gone. Why can't Adobe read basic CSS?

There's many other potential issues with your CSS too.

1. For font-size, best to not use rem. Change it to em.

rem isn't well supported across devices.

It's also a poor idea to use px/pt in ebooks (because of DPI issues). Best to change those to em too.

2. You have many forced color (black + gray fonts). This will lead to:

• black-on-black text
• and/or won't allow users to override with their own colors
• the potential to break Night Mode

Remove the forced color.

3. Why are you using max-width on paragraphs?

p.Ghosts, li.Ghosts, div.Ghosts
	{
	margin:0 auto 12px;
	max-width: 700px; <--- This line

Just get rid of this. Readers will set their own margins in their devices.

4. Paragraphs with margins above/below AND indentation is extremely poor typography. Go with either:

A. Text-indent + no margins (what I recommend).

B. No indentation + margin above (this is called "Block Paragraphs"). (Websites usually use this type of spacing, but books aren't typeset this way.)

It's best just to leave this stuff up to user preferences.

Question: ... you said you already "created a Kindle version". I'm assuming you did DOCX->Kindle Previewer?

The reading experience of that ebook is going to be extremely subpar.

* * *

Other Errors I Noticed

1. You still have many apostrophe as dumb quotes. Turn those into RIGHT SINGLE QUOTES.

' -> ’

You may want to run your book through another Smarten Punctuation pass...

2. There are quite a few stray non-breaking spaces:

<p class="Ghosts">&nbsp;“<i>Srće moje</i>,” Jovanka continued. [...]</p>

[...]

<p class="Ghosts">&nbsp;“Yes, my girl!” said Srđa with great excitement suddenly appearing before her. [...]</p>

Replace with a normal space, then run Sigil's Tools > Reformat HTML > Mend and Prettify All HTML Files.

3. There's also a few stray leftovers from Word's HTML:

<i><span style='font-size:9.5pt;line-height:115%;
font-family:"Arimo",sans-serif;letter-spacing:.4pt'> </span></i>

[...]

<span style='font-size:9.5pt;line-height:115%;font-family:
"Arimo",sans-serif'>.</span>

Unsure what else slipped through. Do a search for span style= and you'll probably find them all.

4. You accidentally have a ─ (U+2500 BOX DRAWINGS LIGHT HORIZONTAL) instead of an EM DASH — (U+2014).

You can use Sigil's Tools > Reports > Characters in HTML to find all the characters used in your book. Investigate/Remove any of the funky ones.

Also, your book is plagued with soft hyphens. These are a very poor idea in ebooks, plus they break things like Search + Sigil's spellchecking. Eliminate these.

Originally Posted by DNSB

Then we have the naked img tags. I'd suggest wrapping them in a <p> tag with appropriate class.

Better to use <div>s. Typically no margins or anything is inherited.

Also, with images, it's best to use helpful alt attributes.

<img alt="image003" src="../Images/image003.jpg" class="full-image"/>

alt is read by Text-to-Speech, so it is important to give these meaningful descriptions:

alt="A man down by the river."

If you can't think of a description, then it's best to leave alt="" blank instead of full of gibberish like alt="image003".