epub code snippets (html / css)

[Keroberos]

I was looking for a way to have multiple items in a single line header (book# section# chapter#) spread out over the full width of the page and figured out a way to do it using a html table.

It works well in everythin I could test it in (nook classic, Bluefire Reader on my iPod Touch, Calibre, the Firefox ePub Reader, ADE 1.7.2 and 1.8 preview, and Sony Reader Library). And it converts decently to mobi using Kindlegen.

Here's the html code.

  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td class="leftgrey">BOOK #</td>

      <td class="centergrey">Section #</td>

      <td class="right">Chapter #</td>
    </tr>
  </table>
  <hr />

And here's the css.

 table  { 
margin-top : 2em; 
margin-bottom : 0;
 }
 td  { 
font-family : sans-serif; 
font-size : 1.5em; 
width : 33%; 
 } 
 .left  { 
text-align : left; 
 } 
 .leftgrey  {         /* --- Use for greying out unchanging items --- */
text-align : left; 
color : #cccccc; 
 } 
 .center  { 
text-align : center; 
 } 
 .centergrey  {      /* --- Use for greying out unchanging items --- */ 
text-align : center; 
color : #cccccc; 
 } 
 .right  { 
text-align : right; 
 } 
 hr  { 
margin-top : 0; 
border : 0; 
background-color : black; 
height : 3px; 
 }

[carmenchu]

Thanks.
Another point: DO or DO NOT most readers react to the addition of font-family for small-caps?
Thanks again.

[Toxaris]

Most readers ignore smallcaps at the moment.

[adv_dp_fan]

iBooks handles small-caps but one thing I noticed, if you set font-size: 1em and use small-caps, they won't display properly but setting the font-size of the small-caps to 1.1em or 0.9em and suddenly they work.

[carmenchu]

Tanks -- information always of value when editing.

[DaleDe]

Originally Posted by carmenchu

Thanks.
Another point: DO or DO NOT most readers react to the addition of font-family for small-caps?
Thanks again.

If you embed a font that uses only small caps and reference it then it will work but the CSS method does not work.

[AbominableDavid]

My apologies if this is old hat to everyone, but it is new to me.

I've always been a little bothered by "quoted quotes" in epubs - when you've got a character speaking, and he's quoting something else. Having a double quote followed immediately by a single quite looks pretty bad, to me; it looks like a triple quote in most epubs I've seen. Putting a space between the double quote and single quote also looks pretty bad to me.

It occurred to me on my drive home this morning that I could fix that with css.

.space
{margin-left: 2pt;
}

Then use the following in my html:

<p>"<span class="space">'</span></p>

It produces results like in the attached image in ADE (and similar results in my PRS650).

I haven't decided yet if I'm OCD enough to start doing this in all my books.

[Jellby]

I've always thought that this should be handled by font kerning...

[pdurrant]

Originally Posted by AbominableDavid

I've always been a little bothered by "quoted quotes" in epubs - when you've got a character speaking, and he's quoting something else. Having a double quote followed immediately by a single quite looks pretty bad, to me; it looks like a triple quote in most epubs I've seen. Putting a space between the double quote and single quote also looks pretty bad to me.

It occurred to me on my drive home this morning that I could fix that with css.

.space
{margin-left: 2pt;
}

I've done this before now. I think it's probably worth the trouble. I'd also urge you to use 'proper' quotes in your ebooks, i.e. “” and ‘’.

[DaleDe]

Nice solution. I had thought of using CSS with letter-spacing to fix this problem and then set the span to the full " ' combination since it can also be ' " then there is also things like " ' ".

Dale

[AbominableDavid]

Originally Posted by pdurrant

I've done this before now. I think it's probably worth the trouble. I'd also urge you to use 'proper' quotes in your ebooks, i.e. “” and ‘’.

I normally do use proper quotes - straight quotes were just easier for testing purposes since they're right there on the keyboard.

Originally Posted by DaleDe

Nice solution. I had thought of using CSS with letter-spacing to fix this problem and then set the span to the full " ' combination since it can also be ' " then there is also things like " ' ".

Do most epub readers recognize the letterspacing attribute? I didn't even know that existed until just now - I'll have to do some testing with it later. It would certainly be easier to do it that way than to create one for " ' and another for ' ".

[Jellby]

Or you could add one of the different non-breaking spaces available in Unicode:

  -> Normal size, although it usually does not expand with other normal spaces when the line is justified.
& #8199; -> Figure space, shouldn't be much different from  .
& #8239; -> Narrow no-break space. I'd favour this one.
& #8288; and & #65279; -> These are zero-width, and have other uses.

[roger64]

@Jellby

About & #8239; -> Narrow no-break space.

" This char is also used in French before ";?!»" chars and after "«". "

As a French, this space entity interests me a lot of course. It's what we call or close to "espace fine insécable". However I can see no way to use it for EPUB purposes. Sigil erases it immediately, ADE will probably flag it with a question mark as it did with   (this last one at least is recognized by Sigil) )

It seems we need special software to handle this? But how can we expect to transfer it to ebook-readers which follow ADE specifications? This has always puzzled me.

Emulation, though possible, seems to be too cumbersome for these small animals.
texte<span class=*»fine*»>nbsp</span>texte
Related CSS*code:
.fine {font-size: 30%; }

If you could provide some more comments on this, I would be very interested.

[Jellby]

I don't know what Sigil does, but my reader (Cybook Orizon, which uses an Adobe engine internally) supports it fine, at least with the fonts I use.

[DiapDealer]

However I can see no way to use it for EPUB purposes. Sigil erases it immediately,

Sigil doesn't erase it at all. It just un-entities it... meaning you probably can't see it in the Code View. But it's still there and it still renders properly in the Book View.

The regex expression \x{202f} will find all occurrences of the narrow, non-breaking spaces that you thought were erased (in Code View).

This is all based on Sigil 0.5.3.

ADE will probably flag it with a question mark as it did with &thinsp;

My Desktop ADE doesn't recognize it with default fonts, but I have no idea how portable devices might behave.