ebook.com preview is mangled.

[roland1]

Anyone have a problem with this—using a utf8 character in a list?

I guess I'll have to declare a utf8 standard in my html headers, no doubt. I want to replace the image-based checkmark icons I am using in my ul lists and these 2714s will do fine.

ul li::before {
content: "\2714";
display: inline-block;
margin-right:0.5em;
}

----below for ref only-----

ul {
font-family:sans serif;
padding-left:0;
margin-left:0;
list-style-type: none;
}

ul li {
padding-left: 2.0em;
font-size:0.9em;
margin:0.5em

[roland1]

Or do I really have to suffer those squares and disks in html ul list code?

[Hitch]

Originally Posted by 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.

Oh, Phillip, Bringhurst? You're an evil bastard. LOLOL. It sits next to my desk, 24/7 and I refer to it often, but...dang, brother.

Hitch

[phillipgessert]

Originally Posted by roland1

Or do I really have to suffer those squares and disks in html ul list code?

I am pretty sure that the only way to keep proper left-side alignment on lists is to roll with defaults. Trying to swap em out with :before / list-style-type:none replacements pretty much always throws that off. Probably because you’re relying on the metrics for one font to get it right, but the user will probably be using another.

[roland1]

I was trying momentarily to live in denial. But yeah, it looks like the only place I can really stretch out stylistically is in my print books. And for my ebooks, I can just take up alcoholism. Perfect balance.

Originally Posted by phillipgessert

I am pretty sure that the only way to keep proper left-side alignment on lists is to roll with defaults. Trying to swap em out with :before / list-style-type:none replacements pretty much always throws that off. Probably because you’re relying on the metrics for one font to get it right, but the user will probably be using another.

[Hitch]

Originally Posted by roland1

I was trying momentarily to live in denial. But yeah, it looks like the only place I can really stretch out stylistically is in my print books. And for my ebooks, I can just take up alcoholism. Perfect balance.

You can try to replace the default HTML bulls, etc., all you want--but at least, for the Kindleverse, if you do, you have to manually code the layout of the lists (the hanging indent) and it doesn't work like the ol and ul coding. Not nearly as well. Ditto changing the indents. In fact, just don't eff with it at all, right?

Hitch

[DiapDealer]

Hey guys and gals: as worthy as this conversation is... it's just not Sigil-centric enough to keep having it here. I'm going to move it out of Sigil and into the Workshop forum.

[roland1]

The more the merrier.

[roland1]

I'm just looking at the SIGIL wiki html lesson page to further educate myself as to what is possible/impossible with ebooks.

Does anyone have a comment about using <div> tags? I never used them in my ebook because I didn't think nesting was necessary for what I do. But I see the selector being used with image/caption combos. Any thoughts — pros or cons about their usage?

[roland1]

Originally Posted by Hitch

You can try...[snip]...just don't eff with it at all, right?

Hitch

I'm getting the impression that ebooks are to print book design what the desert is to the jungle. I miss all those little monkeys.

[Turtle91]

Originally Posted by roland1

I'm just looking at the SIGIL wiki html lesson page to further educate myself as to what is possible/impossible with ebooks.

Does anyone have a comment about using <div> tags? I never used them in my ebook because I didn't think nesting was necessary for what I do. But I see the selector being used with image/caption combos. Any thoughts — pros or cons about their usage?

Reverting back to the semantics reasoning... If it has a specific tag: paragraph, heading, blockquote, list, etc. then you should be using those. The <div> is used pretty much for everything else... images, poetry, or, I like to use them when there is a group of items, usually paragraphs, that I like to style separately without having to define a class on every paragraph.

For example, instead of this:

p           {normal paragraph styling}
p.different {different paragraph styling}

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

You could use:

p               {normal paragraph styling}
div.different p {different paragraph styling}

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

<div class="different">
  <p>This is a different style of paragraph.</p>
  <p>This is a different style of paragraph.</p>
  <p>This is a different style of paragraph.</p>
  <p>This is a different style of paragraph.</p>
</div>

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

It makes the code much cleaner and IMO easier to keep track of what you are trying to accomplish.

I'm sure there are other uses/techniques people have around here.

One thing that really drives me nuts is when I see people use the <div> to replace an item that has it's own, semantically correct, tag. For example:

<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
forever...

[roland1]

Yeah, that makes pretty good sense.

[DNSB]

Originally Posted by roland1

Anyone have a problem with this—using a utf8 character in a list?

I guess I'll have to declare a utf8 standard in my html headers, no doubt. I want to replace the image-based checkmark icons I am using in my ul lists and these 2714s will do fine.

While the epub standard does specify UTF-8 (or UTF-16) encoding, the issue I've seen is where the font being used does not support a glyph and the renderer does not substitute the glyph from another font. A tofu character instead of a checkmark might irritate some users.

The standard first line in an epub text file is:

<?xml version="1.0" encoding="utf-8"?>

I'm assuming that you are using either & # 10004; or & # x2714; for the character (MobileRead has issues with displaying special characters so I placed a couple of spaces inside the entities). Sigil will change those numeric entities to the character entity since epub3 by default only allows 5 numeric entities.

[Quoth]

Originally Posted by roland1

Or do I really have to suffer those squares and disks in html ul list code?

it's best to use a list style in the Wordproccessor with NO bullets, symbols or numbers or letter prefixes and explicitly type them in at the start of each list item. Works 100% on every kind of Kindle, Kobo, Nook, Sony and App. Using a list style with bullets or symbols, or auto incrementing numbers or letter prefixes can fail or render incorrectly.

Avoid using any special font for bullets as by default that won't work on a Kindle. Only works if the font is embedded AND the user selects Publisher on the reader GUI.
Some apps don't even use embedded fonts in an ebook!

[JSWolf]

Originally Posted by 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.

1.2em for the indent. 1em for a line space. 1.5em for left/right in a blockquote for the offset text. I don't do anything in multiples of 0.6/1.2em. It just does not work (IMHO). It uses extra space.