ebook.com preview is mangled.

[roland1]

I am also more inclined to use the basic html building blocks in assuming that readers default to them. I know that when I write my descriptions at Amazon or elsewhere, that they also default to basic html tags.

But JSWolf's example, I believe, is also meant to identify specific components in the book structure to make it easier to understand what is happening and why in his lesson.

Also, it was good to read about Ben Mears again—wondered what happened to him.

(But seriously folks, I think this back and forth dialogue can only do us good, perhaps even to cast some light on something that an ebook expert might brush up on.)

[Hitch]

Originally Posted by roland1

I am also more inclined to use the basic html building blocks in assuming that readers default to them. I know that when I write my descriptions at Amazon or elsewhere, that they also default to basic html tags.

But JSWolf's example, I believe, is also meant to identify specific components in the book structure to make it easier to understand what is happening and why in his lesson.

Also, it was good to read about Ben Mears again—wondered what happened to him.

(But seriously folks, I think this back and forth dialogue can only do us good, perhaps even to cast some light on something that an ebook expert might brush up on.)

FWIW I'm with Turtle--always use h1-h6 tags for headings. As he explained, it's semantic and it's important for accessibility. AND truth be told, if you work in HTML, it makes life easier, things easier to find, etc.

Hitch

[roland1]

Just checked my book html code again in SIGIL — it actually looks excellent in "EpubJSReader"; best preview I've seen of all the readers, I think.

Maybe we could outlaw all other readers? (just thinking out loud).

[roland1]

Here's some code from my book — list and tables stuff. But you can see, I'm jumping between measurement units —px,rem,%—and declaring font families. Comments?
(NOTE: the final output looked EXACTLY as I wanted it to in the reader; but the preview in at least one online store has destroyed my hopes of it translating universally—and that was only with a simple paragraph tag). NOTE 2:, I'm gonna lose the "rem" stuff in my next edition.


ul {
font-family:"adobe myriad pro","open sans","sans serif";
padding-left:0;
margin-left:0;
list-style-type: none;
}

ul li {
padding-left: 2.5rem;
background-image: url(../Images/checkbox_icon.png);
background-position: 0 3px;
background-size: 1.0rem 1.0rem;
background-repeat: no-repeat;
font-size:0.9em;
line-height: 140%;
margin:0.5rem
}




table.ipsfa {
font-family:"adobe myriad pro","open sans","sans serif";
border-collapse:collapse;
font-size:0.7rem;
line-height:130%;
margin:2rem auto;
}

table.ipsfa th, td {
border: 1px solid #888;
padding:8px;
height: 22px;
}

th {
background-color: #efefef;
letter-spacing:1px;
}

.numbered-list ol {
font-size:1rem;
font-family:"Adobe Myriad Pro","Sans Serif";
text-align:justify;
margin: 2rem 1% 1.5rem 0.75rem;
padding-left:1rem;
list-style-type:decimal;
}

.numbered-list li {
margin: 0.5rem auto;
padding-left:0.5rem;

}

[JSWolf]

Originally Posted by Turtle91

I'm going to throw a semantics flag on Jon here

I've edited the code for better use of headings.

Here is some HTML code.

<h1>CHAPTER ONE</h1>
<h2>BEN (I)</h2>
<h3>1</h3>
<p class="noindent">By the time he had passed Portland going north on the turnpike, Ben Mears had begun to feel a not unpleasurable tingle of excitement in his belly. It was September 5, 1975, and summer was enjoying her final grand fling. The trees were bursting with green, the sky was a high, soft blue, and just over the Falmouth town line he saw two boys walking a road parallel to the expressway with fishing rods settled on their shoulders like carbines.</p>

<p>He looked down at his arms. They had broken out in goose flesh.</p>
<h3>2</h3>
<p class="noindent">He deliberately skirted town, crossing into Cumberland and then coming back into ’salem’s Lot from the west, taking the Burns Road. He was amazed by how little things had changed out here. There were a few new houses he didn’t remember, there was a tavern called Dell’s just over the town line, and a pair of fresh gravel quarries. A good deal of the hardwood had been pulped over. But the old tin sign pointing the way to the town dump was still there, and the road itself was still unpaved, full of chuckholes and washboards, and he could see Schoolyard Hill through the slash in the trees where the Central Maine Power pylons ran on a northwest to southeast line. The Griffen farm was still there, although the barn had been enlarged. He wondered if they still bottled and sold their own milk. The logo had been a smiling cow under the name brand: “Sunshine Milk from the Griffen Farms!” He smiled. He had splashed a lot of that milk on his corn flakes at Aunt Cindy’s house.</p>

Here is the CSS code that goes with it.

h1 {
  font-family: sans-serif;
  font-size: 1.7em;
  margin-top: 0.8em;
  margin-bottom: 0.6em;
  text-align: center;
  text-indent: 0;
}
.h2 {
  font-family: sans-serif;
  font-size: 1.7em;
  font-weight: bold;
  line-height: 0.7;
  text-align: center;
  text-indent: 0;
}
.noindent {
  text-indent: 0;
}
.h3 {
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  text-align: center;
  text-indent: 0;
}

[JSWolf]

Originally Posted by Hitch

FWIW I'm with Turtle--always use h1-h6 tags for headings. As he explained, it's semantic and it's important for accessibility. AND truth be told, if you work in HTML, it makes life easier, things easier to find, etc.

Hitch

The reason I forgot the header tags is because it was edited from an existing eBook and I didn't need the header tags to create the ToC. But I've since edited the code so it's good to go with header tags.

Thanks Turtle for the reminder about the header tags.

[JSWolf]

Originally Posted by roland1

Here's some code from my book — list and tables stuff. But you can see, I'm jumping between measurement units —px,rem,%—and declaring font families. Comments?
(NOTE: the final output looked EXACTLY as I wanted it to in the reader; but the preview in at least one online store has destroyed my hopes of it translating universally—and that was only with a simple paragraph tag). NOTE 2:, I'm gonna lose the "rem" stuff in my next edition.


ul {
font-family:"adobe myriad pro","open sans","sans serif";
padding-left:0;
margin-left:0;
list-style-type: none;
}

ul li {
padding-left: 2.5rem;
background-image: url(../Images/checkbox_icon.png);
background-position: 0 3px;
background-size: 1.0rem 1.0rem;
background-repeat: no-repeat;
font-size:0.9em;
line-height: 140%;
margin:0.5rem
}




table.ipsfa {
font-family:"adobe myriad pro","open sans","sans serif";
border-collapse:collapse;
font-size:0.7rem;
line-height:130%;
margin:2rem auto;
}

table.ipsfa th, td {
border: 1px solid #888;
padding:8px;
height: 22px;
}

th {
background-color: #efefef;
letter-spacing:1px;
}

.numbered-list ol {
font-size:1rem;
font-family:"Adobe Myriad Pro","Sans Serif";
text-align:justify;
margin: 2rem 1% 1.5rem 0.75rem;
padding-left:1rem;
list-style-type:decimal;
}

.numbered-list li {
margin: 0.5rem auto;
padding-left:0.5rem;

}

Font-family is very wrong. Just use sans-serif
REM is very wrong. Just use em
Line-height is very wrong. Delete the lines
Margin: is very wrong Use the full margin like margin-top:
% is very wrong in your use case. Just use em

It's no wonder the preview doesn't work properly.

[JSWolf]

Originally Posted by roland1

Just checked my book html code again in SIGIL — it actually looks excellent in "EpubJSReader"; best preview I've seen of all the readers, I think.

Maybe we could outlaw all other readers? (just thinking out loud).

But if you use ADE 2.0.1, it won't look so good. In fact, there's a chance that the entire CSS may be ignored. S you need to fix your CSS and maybe your HTML code and use a program such as ADE 2.0.1 that's not forgiving.

I believe that epubJSReader is way too forgiving.

[roland1]

Originally Posted by JSWolf

But if you use ADE 2.0.1, it won't look so good. In fact, there's a chance that the entire CSS may be ignored. S you need to fix your CSS and maybe your HTML code and use a program such as ADE 2.0.1 that's not forgiving.

I believe that epubJSReader is way too forgiving.

I'm going to try a previewer that hates everybody. ADE might be the ticket.

UPDATE: Just downloading. They've got v3.0, too (2014). Is that okay, or different somehow?

UPDATE 2: ADE 2.01 has shown me 3 significant errors (list icon size is immense/text overflowing in one large table/blue link underlines for all my index listings —which was also true in iBooks. Guess I'll have to fix that anchor tag's css.)

HOWEVER — all the paragraph settings and headings and all else (tables, index, etc.) looked perfectly fine —*unlike that monstrosity at ebooks.com.

So, regardless of whether my CSS is ideal or not, it seems that the majority of readers that I've tried (4 or 5 now) seem to render it perfectly fine —*or at least respectably. So it does suggest that whatever previewer is being used at ebooks.com must be brutally plain and simple.

[phillipgessert]

I'd not use background images at all, and you should definitely normalize those units. Text-related stuff (including margins and line-height) should usually use ems. % is most often used for positioning from the left or right, such as with images. px are used very rarely, and mostly for borders. And they should not mix like they do in that margin setting for ".numbered-list ol."

Incidentally, ol is already a numbered list that uses list-style-type: decimal. You might see what you can get away with with completely unstyled, semantic HTML. I'm not saying it will be suitable like that, but you might be surprised how little you actually have to change. It can be a useful exercise in helping make sure you aren't defining things in CSS that you can actually get away with leaving alone, thus eliminating potential points of failure.

[JSWolf]

Originally Posted by phillipgessert

I'd not use background images at all, and you should definitely normalize those units. Text-related stuff (including margins and line-height) should usually use ems. % is most often used for positioning from the left or right, such as with images. px are used very rarely, and mostly for borders. And they should not mix like they do in that margin setting for ".numbered-list ol."

Incidentally, ol is already a numbered list that uses list-style-type: decimal. You might see what you can get away with with completely unstyled, semantic HTML. I'm not saying it will be suitable like that, but you might be surprised how little you actually have to change. It can be a useful exercise in helping make sure you aren't defining things in CSS that you can actually get away with leaving alone, thus eliminating potential points of failure.

Good catch on the brackground. I did miss that. One problem with manually doing numbered lists is they can become off depending on the user's font and font size. If ol works, then stick with that.

[roland1]

I'm just testing a lorum ipsum ebook mockup with your styles, JSWolf.

I'm adding some of my own code, too, obviously. But it's definitely barebones styling.

re; my ebook: I think what I need to do is just go back and fix some of the more obvious discrepancies, like the mixing/misuse of measurement units. Again, when I was doing all that stuff, it was experimental. But it worked, so I kept it all in there.

Guess it's like playing Russian Roulette with my ebook setup.

[roland1]

I think I began with the kitchen sink already thrown in - just from being cocky and confident that surely...it's just like building a website that you hack away at 'til it works in a few browsers.

I think I'm going to approach it as you say, from a minimal perspective, and then—CAREFULLY—add other code to give it a bit more style and finesse.

Originally Posted by phillipgessert

I'd not use background images at all, and you should definitely normalize those units. Text-related stuff (including margins and line-height) should usually use ems. % is most often used for positioning from the left or right, such as with images. px are used very rarely, and mostly for borders. And they should not mix like they do in that margin setting for ".numbered-list ol."

Incidentally, ol is already a numbered list that uses list-style-type: decimal. You might see what you can get away with with completely unstyled, semantic HTML. I'm not saying it will be suitable like that, but you might be surprised how little you actually have to change. It can be a useful exercise in helping make sure you aren't defining things in CSS that you can actually get away with leaving alone, thus eliminating potential points of failure.

[JSWolf]

Originally Posted by roland1

I think I began with the kitchen sink already thrown in - just from being cocky and confident that surely...it's just like building a website that you hack away at 'til it works in a few browsers.

I think I'm going to approach it as you say, from a minimal perspective, and then—CAREFULLY—add other code to give it a bit more style and finesse.

The thing to do is when you need to do something other then a standard paragraph, decide what it is you want/need to do and do it with minimal code. Do not toss in code that's not needed. The simpler your CSS is, the better it will work in more cases. Just make sure that whatever you use to test supports CSS. for example, a lot of Android programs basically override a lot of the CSS or just plain ignore it.

[phillipgessert]

It’s also good to pick a measure of a unit and select some sane multiple of it for all similar measures. I do practically everything in different multiples of 1.2em, and I imagine many do the same. .6, 1.2, 1.8, 2.4.

If you like this sort of thing, the combo of Bringhurst’s book on typography + Duckett’s on HTML/CSS, plus lots of time on these forums, will get you far.