epub code snippets (html / css)

[radius]

Originally Posted by quillaja

using the definition list <dl></dl> works really well for plays.

Hey, great idea!

[JSWolf]

Does anyone have an ePub to show <dl></dl>?

[quillaja]

Originally Posted by JSWolf

Does anyone have an ePub to show <dl></dl>?

well, i have one or two, but i haven't yet made them "public" on feedbooks, because i'm still editing them. the example code shows basically the same way i used this in the epubs, though the words are different. this works, at least on my prs-600 and ADE, and mostly works in FBReader (the formatting is off, but fbreader doesn't full support epub anyway).

do you want a pic of <dl> on the sony reader?

[quillaja]

To make columns in an ePub, use the following CSS property on any block element, such as "body" or "div":

oeb-column-number: [integer] | auto;

from the ePub OPS specification:

Specifies a number of columns in which to render content; may be applied to all block level elements. Reading Systems are free to support integer values other than 1, or may map them to 1. Reading Systems may support column balancing. A value of auto allows the Reading System to decide on the optimal number of columns in which to render content, considering available width, font sizes, or any other metrics it considers relevant for readability.

Anyway, I tested "2" and "auto" on my prs-600 and in ADE. Both worked, although the prs-600 "decided" just to use 1 column. I had to make the font size very small in ADE to make AUTO display as 2 columns. However, hard-coding 2 into the CSS made 2 columns display on the sony reader.

Pretty cool! =)

[quillaja]

Originally Posted by quillaja

well, i have one or two, but i haven't yet made them "public" on feedbooks, because i'm still editing them.

I've since "published" the books i mentioned earlier. They are Jane Austen's Juvenilia, volumes 1, 2, and 3. Volumes 1 and 2 use <dl> for the few mini plays that Austen wrote. http://feedbooks.com/author/18

My personal favorite of these mini plays is "The Mystery." =)

[charleski]

Originally Posted by Jellby

When there is some punctuation before the drop cap, this code may be useful:

span.predrop {
  font-size: 25%;
  font-weight: normal;
  vertical-align: top;
  line-height: 1.9;
}

use it with:

<span class="drop"><span class="predrop">&lsquo;</span>I</span><span class="first"> was</span> never so upset in my life!&rsquo;

I've been experimenting with this code (testing it in ADE), and found it was causing the dropcap to be shifted over to the right for some reason I can't fathom. I finally fixed it by adding a margin-left correction:

span.predrop {
  font-size: 25%;
  font-weight: normal;
  vertical-align: top;
  line-height: 1.9;
  margin-left: -0.5em
}

This is for a dropcap on lines that start with a quotemark. If I remove the quote and the predrop code so that the dropcap is a single character, then it works fine and is aligned properly. If I add just the quotemark (so the dropcap span is

<span class="drop">&lsquo;I</span>

)
then the left margin of the dropcap region shifts over to the right by about 0.5em. Adding the predrop span as originally coded doesn't change this, though it aligns properly when I add the margin-left correction.

My familiarity with CSS is stilll somewhat rudimentary, so I wonder if there's something I'm missing here, though it works right now.

[GeoffC]

Originally Posted by quillaja

To make columns in an ePub, use the following CSS property on any block element, such as "body" or "div":

oeb-column-number: [integer] | auto;

from the ePub OPS specification:



Anyway, I tested "2" and "auto" on my prs-600 and in ADE. Both worked, although the prs-600 "decided" just to use 1 column. I had to make the font size very small in ADE to make AUTO display as 2 columns. However, hard-coding 2 into the CSS made 2 columns display on the sony reader.

Pretty cool! =)

Creating two columns may be a useful ploy with poetry, there is nothing worse than having a verse split at the screen base. But this as a solution raises the question as to whether there is sufficient width in reading devices for it to work satisfactorily.

Do you have any screenshots of the Sony to 'see' how it looks ?

[GeoffC]

...OOOoooooohhhh....

now that is a very nifty trick [I also see Nrapallo mentioned it on .imp].
I only tested this on a small book and on ADE (and yes, even with the full width of my PC screen) the font has to be tweeked to the minimum.

thank you - I shall now go and 'play' some more with this .....

[traskilajussi]

I have bit of a problem:

I made an svg file (and validated it at w3 validator) -
made an xhtml file using <object> to link to the svg file
(and validated the xhtml at w3)
then I made an epub using the xhtml file as cover and validated the book at
epubcheck...
and yet neither Boookworm nor Firefox add-on play the cover

on browser the cover page plays...

any ideas?
cheerd, Jussi

[JSWolf]

Originally Posted by traskilajussi

I have bit of a problem:

I made an svg file (and validated it at w3 validator) -
made an xhtml file using <object> to link to the svg file
(and validated the xhtml at w3)
then I made an epub using the xhtml file as cover and validated the book at
epubcheck...
and yet neither Boookworm nor Firefox add-on play the cover

on browser the cover page plays...

any ideas?
cheerd, Jussi

Did you try your ePub with ADE? Did it work? If it works in ADE, then blame Bookworm and the Firefox add-on.

[traskilajussi]

Thanks ... can't verify on ADE (I'm on Ubuntu) - then again may be there
isn't a problem in the book itself: when opening the book on bookworm using my S60 mobilephone the cover plays correctly...

I attach the book if someone's interested enough to take a look

cheers, Jussi

[GeoffC]

the cover shows in ADE, but very very small.

chapter one is on its own,
but chapter two expands out to the remaining chapters and the notes.

the picture at the end of Alphonse Aulard shows up well ....

as to everything else, the display looks good, expands into two columns and has a background to it....

[traskilajussi]

Thanks Geoff - so the book works.

[GeoffC]

yes - as far as I can see, in ADE, it does ....

it also works on the PC version of the Sony Reader - although on that I only get a single column.

there may be coding issues with the TOC, but that's a minor issue ....

[Jellby]

One sometimes wants to have a way to detect which reader is being used, so that some feature can be disabled or some workaround activated. There is no standard way to detect the reader, but something can be done to detect the Adobe engine, and activate or deactivate CSS stuff depending on whether the book is being rendered by Adobe or not.

The "trick" is just using Adobe's conditional CSS in the page template file (xpgt). Since at the moment only Adobe understands and uses the xpgt, whatever you put in this file will only be read by Adobe. So you could have, in your standard CSS file:

.ade { display: none; }

to hide ADE-only stuff from other renderers. And, in the xpgt file:

<ade:style>
  <ade:styling-rule selector=".noade" display="none"/>
  <ade:styling-rule selector="div.ade" display="block"/>
  <ade:styling-rule selector="span.ade" display="inline"/>
</ade:style>

to hide "non-ADE"-only stuff and show ADE-only stuff. This is demonstrated in the attached test ePUB, which will tell you whether you are using the Adobe engine (Sony, Cybook, etc.) or not (Calibre, for instance). The file also shows a couple of Adobe bugs which don't matter in this thread.