Formatting for retailers: please help!

[AS7]

Hello all,

Thank you for your replies, sorry for the delay! I'm still working on this. (And I have the flu. ;_; )

@Mods Please don't close the thread just yet

To get back to my initial issue, the preview on Kobo: I've created a Kobo account, and the issue with the preview (the title page elements splitting up around images) is the same as when I uploaded the file on Kobo through Draft2Digital (as could be expected).

So I'm using Kobo, which seems to be the most "unforgiving" platform as far as CSS is concerned, as a testing ground to fix the issues with the file. So far not so good: I find the Kobo previewer's reactions to the CSS absolutely baffling.
For example, it makes a line with font-size: 0.625em; LARGER... and a line with font-size: 2em; SMALLER.

I've contacted their support about this...

When the issue is solved, anyhow, I'll post my takeaways here.

@Quoth

If you are needing to edit CSS for anything other than an image you are not using Word paragraph styles properly.

I have 40 <blocks>, all with different CSS specs, so I'm in deep trouble, aren't I
I'd need to overhaul the entire CSS in Word then... But I have <underlines> for some paragraphs, for example. Shouldn't these be embedded in Styles? I thought that everything had to go in a Style.

@Turtle91
That's gold! Thank you for posting this visual demo!
I'd definitely buy your course or your templates
Just a question: for the line "This is the first paragraph in the chapter with a drop-cap or other special styling", how did you... hmm... well how did you form <p class="first"> to get this result?

@JSWolf

There are some problems with the CSS. You do not want ot use line-height at all as it makes some Readers such as Kobo not work properly with the line height setting. Also, you want to spell out the margins in full as some B&N nook Readers do not like the margin shorthand. Also, if you are using a center, you also need a text indent of 0. And finally, you do not use pt in margins. You use ems. And finally, the padding of 0 is not needed.

OK, thank you! I'm adding this to the expanding List of Things to Fix™

@Jellby
Thank you for the input!

I'm a bit overwhelmed at this stage. (Time constraints...) Despite the CSS issues, the book displays well on KDP, Google Play and Apple Books, and I may not have time to perform an overhaul before the end of the year. Kobo's the problem...

Best,

AS7

[Turtle91]

Originally Posted by AS7

@Turtle91
That's gold! Thank you for posting this visual demo!
I'd definitely buy your course or your templates
Just a question: for the line "This is the first paragraph in the chapter with a drop-cap or other special styling", how did you... hmm... well how did you form <p class="first"> to get this result?

lol
I intentionally didn't include my formatting because I didn't want to distract from the point I was making. You'll find that there are many different opinions here on what is "the one true way" of styling your work. Some people have good points, some are just straight up opinion, or their reasons only apply to old devices that I don't particularly care about. My reading app of choice is very good about supporting the css standards, so I don't have a problem using css the way it was intended. Some devices/apps may not support css as well, so you would have to provide fallback styling and/or media queries to make sure it works on your target device(s).

I got that styling to work by using css pseudo-elements ::first-line and ::first-letter with the following:

CSS:
p.first               {text-indent:0; font-size:1em; clear:both}
p.first::first-letter {font-family:serif; font-size:2em; font-weight:bold;
                       float:left; margin:-.1em .1em}
p.first::first-line   {font-variant:small-caps; font-size:1.15em}

HTML:
<p class="first">This is the first paragraph in the chapter.</p>

You can obviously substitute your own styling choices as you desire.

Cheers!


Edit: One thing I don't like about use of "first-letter" is that it includes any punctuation with the first letter styling. Sometimes that can be distracting. eg “This is the first...

I've gotten used to it, but I wish the powers that be would fix that.

[AS7]

Hello Turtle91!

You'll find that there are many different opinions here on what is "the one true way" of styling your work. Some people have good points, some are just straight up opinion, or their reasons only apply to old devices that I don't particularly care about.

Alas, I don't have the competence to distinguish between best practices and opinions at this stage But it's good to know!

I got that styling to work by using css pseudo-elements ::first-line and ::first-letter...

Ooh I get it, thanks for teaching me about pseudo-elements! Looks like there are plenty of CSS tricks to work with.

[JSWolf]

Originally Posted by Jellby

Unless you want the margins to have a fixed size, and not to depend on the font size (which I agree won't typically be the case here).



Depends on what the "block" class will be applied to. You need padding 0 for the same reason you need text-indent 0: to cancel possibly inherited values.

If the code is written correctly, you won't have inherited padding.

[JSWolf]

Originally Posted by AS7

Hello Turtle91!
Ooh I get it, thanks for teaching me about pseudo-elements! Looks like there are plenty of CSS tricks to work with.

Do not use any psuedo elements. There is a lot of software out there that these will not work with. Keep it simple and psuedo elements are not simple.

[JSWolf]

@Turtle91, you should know better then to recommend code that doesn't work in a lot of cases such as psuedo elements. Yes it's valid ePub 3 code, but for a lot of software, it won't work. Keep the code as ePub 2 compatible as possible even if the eBook is ePub 3. Unless you need ePub 3 specific feature(s).

[Turtle91]

@arbiterofcorrectcode,

Or you can just read what I said...

[Quoth]

The psuedo elements are best for web page CSS, or your own home use. not real ebooks via retail distribution. As remarked they look strange with punctuation, but any form of “different from default body style” styling of text other than maybe oblique/italic looks strange with punctuation, no matter how it's styled. There is also a theory that punctuation should not be italic and only bold in a bold heading/title.

[Turtle91]

FYI:
pseudo-elements, and pseudo-classes, have been around a lot longer than ePub3. as a matter of fact that is one of the differences that may confuse some people...when to use a single colon vs a double colon (:first-line or ::first-line). The double colon was introduced in CSS3 as an attempt to differentiate between a pseudo-element and a pseudo-class. Before that (CSS1 and CSS2) a single colon was used for both. It is actually recommended to use a single colon for everything IF you are worried about backwards compatibility.

Whether a device, or software, supports pseudo elements is completely on them. Your older devices, and older ADE, don't support much of anything...but.... as I wrote... "I don't care". Does the current version of ADE (finally) fully support CSS1 (not to mention CSS2 or CSS3)??

Please make sure you read someone's post before you start arguing against it... it tends to make for bad optics.

[Turtle91]

Originally Posted by Quoth

The psuedo elements are best for web page CSS, or your own home use. not real ebooks via retail distribution. As remarked they look strange with punctuation, but any form of “different from default body style” styling of text other than maybe oblique/italic looks strange with punctuation, no matter how it's styled. There is also a theory that punctuation should not be italic and only bold in a bold heading/title.

I'd agree with the "via retail distribution" aspect...that's why I mentioned that they needed to ensure that it would work on their "targeted device" AND MY BOOKS ARE "REAL EBOOKS"!

As far as looking strange...yes, they can, as I mentioned. I wish they would fix that. As I also said, you can get used to it. What I didn't mention was that, before I got used to it, I tended to be liberal with enforcing grammar rules in that respect. For the few first-paragraphs-in-the-chapter-that-also-start-with-punctuation... I just deleted the leading punctuation.

The vast majority of readers (and, unfortunately, a good chunk of authors) don't know (or don't care) about grammar rules and they wouldn't ever notice the missing punctuation. I even tested it against my latin-teacher wife and she never noticed it... although, to be fair, Latin didn't really care so much about punctuation to begin with...

Edit:
In addition, if your device, or software, does not support the pseudo-elements, they are required to fail gracefully. ie they don't crash, they will just ignore the unknown tag. In this case it would revert to a normal looking paragraph with no indent and not wrapped around any floaters. If the device does puke on it...then it is not standards-compliant.

[Quoth]

The Romans would read a scroll the day before because they had much less punctuation than the Greeks, possibly often none at all!

As far as looking strange...yes, they can, as I mentioned. I wish they would fix that. As I also said, you can get used to it. What I didn't mention was that, before I got used to it, I tended to be liberal with enforcing grammar rules in that respect. For the few first-paragraphs-in-the-chapter-that-also-start-with-punctuation... I just deleted the leading punctuation.

Yes, that's what I was trying to write. If you have any kind of fancy lead-in, then I can't see how “They” can fix it. You either delete the opening quotes, don't special style it or never start with a quotation or dialogue.

If one person is speaking and a new paragraph is needed, then the rule is that there is no closing quote, yet the start of the next paragraph has an opening quote. I'd not do an initial drop cap or an initial large cap (works better on ereaders), but if I did, I'd add a rule to our style guide:
In the case of a first paragraph with an initial drop cap or an initial large cap there should be no opening punctuation mark. Various languages might have « ¡ ¿ etc. Only use an initial drop cap or an initial large cap at the start of a chapter, section or other major break where perhaps chapter titles are not used.

I don't know why you'd ask a Latin teacher anything about grammar or punctuation. Also its connection to current English is overstated.

[Turtle91]

Originally Posted by Quoth

I don't know why you'd ask a Latin teacher anything about grammar or punctuation. Also its connection to current English is overstated.

lol

Because she is so much smarter than me... and I rarely can get anything past her... I take it as a win that she didn't notice the missing leading punctuation.


ANYTHING relating to rules has no place in the English language!!
I'd take Korean over English any day for having logical, consistent, rules! Alas, I was born here and raised by an English major...

[meinno]

Try exporting your ebook to EPUB3 instead of EPUB2. EPUB3 has better support for custom fonts and advanced layout options. Also be sure your CSS is valid and all HTML tags are properly closed. Using the EPUB3 output profile in Calibre with the latest editor version may help resolve some of these rendering inconsistencies across retailers. Best of luck with the publishing process!

[Turtle91]

Welcome to MR, meinno!

[Quoth]

Originally Posted by Turtle91

lol

Because she is so much smarter than me... and I rarely can get anything past her... I take it as a win that she didn't notice the missing leading punctuation.

Ah, so the Latin is a rubeum allec.