Solved - marginals in ePub

[K-Thom]

For a customer I hab to find a solution for marginals in ePub; in this case a theater script with the names of the actors.

Seems like I finally came up with a solution which works as well in ADE as on iBooks as on the Bookeen Opus.

This solution ist limited to the fact that the marginals will only work on the first line of a new parapgraph. Which shouldn't normally be a problem, but I just wanted to mention it.
Maybe someone comes up with a solution to place a marginal in the middle of a paragraph.

The main text is in paragraphs, the marginal is in a div plus a span (necessary for iBooks to keep the formatting).

Right below is a link to the html-file with the CSS and the final ePub. I'm no CSS stylist, so hopefully no web designer will be offended by the code.

It's all in German, just in case. Comments are welcome for sure, especially if this solution works on other devices too!

Basic html:
http://www.die-ebook-manufaktur.de/test/marginalien.htm

ePub:
http://www.die-ebook-manufaktur.de/t...rginalien.epub

[theducks]

At first, That appears to be a 'Hanging Indent' , but closer inspection shows that the rest of the line is part of the normal paragraph block.
I see you used

        div.marg {font-size: 1em; float:left; width: 125px; text-align: right; font-style:italic;}

to accomplish this

[Jellby]

That looks fine.

But consider that the document might be read in small screens or with large fonts, so maybe:

(a) Using absolute units (125px) might not be a good idea.

(b) "Wasting" valuable space in the right side just because some name will appear there from time to time might look not so good.

For an e-book, I'd probably use some other style, like putting the character names in their own lines (paragraphs), or just writing them in bold, with some space to set them appart from the text. It won't look so pretty, but it can be more readable in a wider variety of systems.

When you test your code in a browser, resize the window to simulate a smaller screen.

[K-Thom]

Yep, sure, it isn't a solutions for small screens. One the iPhone you would have to just use it landscape.

I do keep in mind that ePub isn't meant for two columns anyway. As marginals aren't either. So this is just a solution to save my day. While still being readable on larger screens, though.

[nrapallo]

The marginals used this way are a perfect example of what should be defined using "definition list" constructs i.e. using <dl>, <dt> and <dd>.

I edited your html to replace each <div> block with a <dt> (definition term) block and <p> block with a <dd> (definition definition) block. I then wrapped the entire "list" in a <dl> block and added the following CSS (note the grey background for the marginals):

  dt { font-size: 1em; float: left; width: 8em; text-align: right; font-style:italic; background-color: #ddd;}
  dd { margin: 0 0 1em 9em;}

To me, the resulting .html (attached below with a .txt suffix!) and .epub are a near perfect match to your code!!!

I have used this "definition list" construct before, namely in a conversion of my Webster's Dictionary 1913 in anticipation of having an official dictionary syntax incorporated into EPUB3 using this very same syntax. However, it seems my anticipation was premature...

How well does this appear in your epub reader?