Line Break Madness on Nook

[AuthorGreg]

Hitch,

Right now I have W&O's set to zero, per Wolf's advice, and that is declared in the body tag.

I've tried declaring margins at the tops and bottoms, switching back and forth between setting them at opening paragraphs or below the chapter headings. When I set them at the bottom the margins end up collapsing. When I set them at the top they work for P tags, but not for H1 or H2 tags.

At one point all the paragraphs ran together, including in spots where I didn't want them to (like in the front matter with the legalese). I think that's when I was declaring bottom margin on everything.

Paul's code didn't work for me, at least not on this.

Still trying,

Greg

[AuthorGreg]

Well, comically enough, I've altered my CSS so much that now it doesn't even properly format on my own Nook Simple Touch, unless I use Publisher Defaults. It formats properly in ADE and Chrome, but not side-loaded sans Publisher Defaults.

I've removed the book from sale. I'm either going to figure this out for myself, or I'll break down and pay someone. But I've got to get back to the ole day job, ya know.

Thanks, everyone, for your input and advice.

Greg

[Tex2002ans]

Originally Posted by AuthorGreg

Well, comically enough, I've altered my CSS so much that now it doesn't even properly format on my own Nook Simple Touch, unless I use Publisher Defaults. It formats properly in ADE and Chrome, but not side-loaded sans Publisher Defaults.

I've removed the book from sale. I'm either going to figure this out for myself, or I'll break down and pay someone. But I've got to get back to the ole day job, ya know.

I can take a look at the book/CSS if you want. Please PM or email me the EPUB (my email is: *insert my MR username* @ gmail.com). It would stink to not have a book up for sale just because of some (probably silly) formatting issues.

[AuthorGreg]

Sent!

Thanks,

Greg

[AuthorGreg]

Problem solved, thanks to Tex2002ans. After I recover from burnout on this project I will delve into the code to see how the magic works.

Why, oh why, Barnes & Noble, do you have to take something so simple and make it complete junk?

Rhetorical question....

G

[Tex2002ans]

Originally Posted by AuthorGreg

Problem solved, thanks to Tex2002ans. After I recover from burnout on this project I will delve into the code to see how the magic works.

You are welcome. Now, I don't know EXACTLY why B&N was exploding on this particular book, the only odd thing I spotted in AuthorGreg's CSS was this behemoth at the top:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0px;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

I assume something in there was interfering with the B&N conversion.

Side Note: Probably not a good idea to include such "reset" code in your EPUB... some conversion tools probably won't take too kindly to that.

I decided to just scrap/redo his CSS from scratch, and replaced it with my tried/true tested minimal CSS that I use in all of the books I convert. According to AuthorGreg, my cleanup seems to have converted through B&N fine, and this book is back on sale looking better than ever!

[Hitch]

Originally Posted by Tex2002ans

You are welcome. Now, I don't know EXACTLY why B&N was exploding on this particular book, the only odd thing I spotted in AuthorGreg's CSS was this behemoth at the top:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0px;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

I assume something in there was interfering with the B&N conversion.

Side Note: Probably not a good idea to include such "reset" code in your EPUB... some conversion tools probably won't take too kindly to that.

I decided to just scrap/redo his CSS from scratch, and replaced it with my tried/true tested minimal CSS that I use in all of the books I convert. According to AuthorGreg, my cleanup seems to have converted through B&N fine, and this book is back on sale looking better than ever!

That's super. And very good of you, Tex.

Hitch

[JSWolf]

Can the new CSS please be posted? I am interested in having a look. Thanks.

[Tex2002ans]

Originally Posted by Hitch

That's super. And very good of you, Tex.

Hitch

This stuff is INFINITELY easier than the dreaded PDF -> EPUB. It is a pleasure to work on purely digital books... I was able to figure out AuthorGreg's CSS and whip it into shape with ~an hour and a half of tweaking (while super sleepy right before bed time ).

Also did a few in-depth emails back/forth, and got his initial PDF/Word document so I could just double-check to make sure everything was A-Ok (and try to get more of the "spirit" of what he was initially trying to get across in the print into the EPUB).

It is just great to get another book out there to change the world.

Originally Posted by JSWolf

Can the new CSS please be posted? I am interested in having a look. Thanks.

Whoops, I meant to say that I tried to keep as much as possible of AuthorGreg's initial CSS classes (he had a lot of very specific CSS classes already built-in to his book/code, so I didn't want to mess too much with that). I tossed in just a few of my typical CSS (@page, body, p, .margintop).

I took out anything I thought was interfering with B&N, and just left in very basic things (alignment, font-size, font-style, margins, padding, text-indent).

@namespace "http://www.w3.org/1999/xhtml";
@page {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Overall Book CSS */

body {
    margin-left: 5%;
    margin-right: 5%;
}

p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.2em;
    text-align: justify;
    text-indent: 2em;
}

h1 {
    font-style: italic;
    padding-top: 100px;
    text-align: center;
    text-indent: 0;
}

h2 {
    font-style: italic;
    text-align: center;
    text-indent: 0;
}

p.ChapterSubHeading {
    text-indent: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
    font-size: 1.3em;
    font-style: italic;
}

span.raisedcap {
    font-size: 2.5em;
}

p.SectionBreak {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
    text-indent: 0;
    text-align: center;
}

span.i {
    font-style: italic;
}

span.b {
    font-weight: bold;
}

.center {
    text-indent: 0;
    text-align: center;
}

p.noindent, p.texttop {
    text-indent: 0;
}

p.margintop {
    margin-top: 1em;
}

img {
    max-width: 100%;
}

/* Table of Contents CSS */

p.tocone {
	margin-top: 1em;
	margin-left: 30px;
    text-indent: -30px;
}

p.toctwo {
    margin-left: 60px;
    text-indent: -30px;
}

/* Author attribution page */
p.ANovelBy, p.GregoryShultz {
    font-size: 1.3em;
    margin-top: 1em;
    font-style: italic;
    text-indent: 0;
    text-align: center;
}

/* Legalese page -- see how I'm avoiding declaring bottom margins */
p.LegalMatterFirstLine {
    font-size: 0.9em;
    text-indent: 0;
    text-align: left;
}

p.LegalMatterLine1 {
    font-size: 0.9em;
    text-indent: 0;
    margin-top: 1em;
    text-align: left;
}

p.LegalMatterLine2 {
    font-size: 0.9em;
    text-indent: 0;
    text-align: left;
}

/* Dedication page - content003.html */
p.dedication {
    font-size: 1.3em;
    font-style: italic;
    padding-top: 1em;
    text-indent: 0;
    text-align: center;
}

/* All of the Notes/Letters/Signs content026.html, content030.html, content033.html */

div.letter, div.note, div.sign {
    background-color: #D1D3D4;
    border-bottom: 3px double;
    border-top: 3px double;
    border-left: 3px double;
    border-right: 3px double;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    line-height: 1.7em;
    text-align: center;
}

p.NoteSalutations {
    font-style: italic;
    margin-top: 1em;
    margin-bottom: 1em;
    text-indent: 0;
}

p.NoteSalutations, p.NotePS {
    margin-top: 1em;
    text-indent: 0;
}

/* Interview in content026.html (I also use note salutation styles as defined below... */
p.InterviewFirstLine {
    text-indent: 0;
    margin-top: 1em;
}

p.InterviewLines {
    text-indent: 0;
}

p.AfterInterviewPassage {
    margin-top: 1em;
}

/* In content035.html */
p.ContactInfo {
    text-indent: 0;
    text-align: center;
    margin-top: 1.5em;
}

I added in Raised Caps into his book, and I also used this "box" code which I find looks great on e-ink/color (and degrades gracefully). I initially posted about it here:

https://www.mobileread.com/forums/sho...25&postcount=9

to help emphasize a few of his "letters" and "sign" in the book.

Here is a comparison shot of the Old/New CSS in action (with Lorem Ipsum and Sample Text):





I have attached a Sample EPUB using the same CSS.

Side Note: If you are interested in my typical CSS that I use in nearly all books... just take a look for any EPUBs I have posted around on MobileRead (I post them all over the place), or take a look at my site (I have ~180 EPUBs up so far... I convert a new PDF -> EPUB every few days). I just use a very minimal base, and then just do very minimal tweaks per EPUB (to try to match the original "spirit" of the PDF).

Here are the latest few EPUBs I posted as examples of things while explaining my methods/ideas on MobileRead:

https://www.mobileread.com/forums/sho...6&postcount=45
https://www.mobileread.com/forums/sho...8&postcount=23

Edit: Added Fake Text screenshots + Sample.

[mrmikel]

Thanks for the example css. It can serve as a good starting point for anyone just getting into making ebooks. It will also serve as a good replacement stylesheet when nothing seems to be working right in one's own (often because of operator headspace!)

[Tex2002ans]

Originally Posted by mrmikel

Thanks for the example css. It can serve as a good starting point for anyone just getting into making ebooks. It will also serve as a good replacement stylesheet when nothing seems to be working right in one's own (often because of operator headspace!)

No problem. That is one of the best ways to learn, taking apart other EPUBs and seeing how they do it.

If you are an author looking for good, basic CSS, I would recommend going to take a look at the other books I do... that code is extremely minimal/no nonsense (while still looking good). Very easy/maintainable, and I see no problems with it in any sort of devices/sizes/future formats.

[mrmikel]

My headspace was trying to use superscript. I tried and tried and class="sup" didn't work. Then I saw in the css, no dot! Just put in  and it just works! DUH!

That's why its nice to have a good stylesheet I had nothing to do with. It can point out there is nothing wrong with the HTML!

[JSWolf]

I have one very big issue with the CSS now in use and to me, it's a major flaw that seriously needs to be fixed and another version of the book uploaded.

NEVER EVER use margins that are not fixed. 5% is not fixed and the will be different with different screen sizes. Also, 5% is huge, It's a worthless margin. The way to do is is 5px. That's an acceptable left/right margin. But with 5%, a new version of this book will hve to be made to fix this. Sorry to have to be so harsh, but this needs to be pointed out big time as it is a major mistake.

AuthorGreg, looks like you'll be submitting a new version one you fix the left/right margins. At least I hope so. 5% is huge for a margin. That's 10% of the screen not used. On a larger screen like say an iPad, that will be even larger margins as 5% of the larger iPad screen is even more wasted space.

[AuthorGreg]

I never thought designing an ePub would be akin to rocket science, but boy what a great divide it can cause. I bought books on how to design ePubs from Amazon. I won't bother to mention the author names, but after having fully consumed those volumes I still wasn't able to produce an ePub that could survive Nook Press's version of a "meatgrinder."

Tex showed me the way, though, and I'm very grateful. So if the worst of his code's shortcomings is the left and right margin settings, I'm good with that. I change two values in the CSS file and that's that.

All I wanted was to remove line spaces between paragraphs. I NEVER thought that could be so hard. Wow.

Thanks to everyone for tolerating my persistence in this thread. I believe we all need to think about how to make this easier. Tex's code is easy to comprehend for me. HE should write a book.

G

[Tex2002ans]

Originally Posted by JSWolf

NEVER EVER use margins that are not fixed. 5% is not fixed and the will be different with different screen sizes. Also, 5% is huge, It's a worthless margin. The way to do is is 5px. That's an acceptable left/right margin. But with 5%, a new version of this book will hve to be made to fix this. Sorry to have to be so harsh, but this needs to be pointed out big time as it is a major mistake.

Well, I think it looks nice. I found small pixel margins to be too close to the edge of the device (and not pleasurable FOR ME ).

Also, I like that I have the blockquotes at 10% (double the left/right margins of the book). I also think that this looks pleasurable on any screen size. (I originally did most of my EPUB reading on a 22" PC Monitor... none of these tablets can get much larger than that).

I found that if you use some sort of pixel margins for those, on a small device the margins will look too big, and on a large device, the margins will look too small. Having them double looks extremely pleasurable (again, TO ME).

I have also tested this on something as small as a cell phone (the 5% margins are small), I have done a ton of reading on my Nook (the 5% margins look great there too), and I still do a lot of reading on my PC (the 5% margins also look fantastic there).

I have also found with a lot of these newer devices, even if you do pick Publisher Defaults, you are still able to override with your own margin decisions (unless I am mistaken? I haven't messed around with a newer ereader in a LONG time). So something like iBooks/Marvin/Mantano will still allow you to adjust the margins without having to go into the CSS and tweak it.

Can't satisfy every single person with the default CSS, but this is why the reading programs/devices are now allowing you to adjust a lot of these settings (so I sort of see it as a non-problem if you make the default CSS pleasurable enough). I think the reading devices themselves are going to only get MORE customizable from here.

Originally Posted by AuthorGreg

I never thought designing an ePub would be akin to rocket science, but boy what a great divide it can cause. I bought books on how to design ePubs from Amazon. I won't bother to mention the author names, but after having fully consumed those volumes I still wasn't able to produce an ePub that could survive Nook Press's version of a "meatgrinder."

Yeah, I mentioned this in our emails back and forth... a lot of the information in these books becomes outdated as the submission sites change/get updated/get worse... and some weird code which may have worked perfectly fine BACK THEN (for example, maybe that "reset code" worked at some point in the past), it will break and cause you headaches NOW.

Originally Posted by AuthorGreg

Tex showed me the way, though, and I'm very grateful. So if the worst of his code's shortcomings is the left and right margin settings, I'm good with that. I change two values in the CSS file and that's that.

Indeed.. that is the beauty of CSS.. you can easily go in and tweak it to how you want! And I made sure to make it easy for YOU to understand/personally maintain this CSS in the future. Easy peasy, lemon squeezy!

Originally Posted by AuthorGreg

Thanks to everyone for tolerating my persistence in this thread. I believe we all need to think about how to make this easier. Tex's code is easy to comprehend for me. HE should write a book.

Thank you.... but I think I will stick to helping on these forums.... writing tutorials is a ton of work, and writing a book... now THAT would take some time (especially with how in-depth/didactic I like to go).