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 .....