Register Guidelines E-Books Search Today's Posts Mark Forums Read

 MobileRead Forums > ePub Solved - marginals in ePub

 03-29-2011, 09:29 AM #1 K-Thom The one and only   Posts: 3,302 Karma: 535819 Join Date: Oct 2008 Location: Berlin, Germany Device: yup! Solved - marginals in ePub 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
 03-29-2011, 01:48 PM #2 theducks Well trained by Cats     Posts: 21,213 Karma: 20803230 Join Date: Aug 2009 Location: (The original) Silicon Valley, USA Device: K4NT, Galaxy Tab 2(RIP) 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 Code: ` div.marg {font-size: 1em; float:left; width: 125px; text-align: right; font-style:italic;}` to accomplish this
 03-29-2011, 02:39 PM #3 Jellby frumious Bandersnatch     Posts: 7,078 Karma: 9567891 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura 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. Last edited by Jellby; 03-29-2011 at 02:43 PM.
 03-29-2011, 07:05 PM #4 K-Thom The one and only   Posts: 3,302 Karma: 535819 Join Date: Oct 2008 Location: Berlin, Germany Device: yup! 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.
03-30-2011, 12:04 AM   #5
nrapallo
GuteBook/Mobi2IMP Creator

Posts: 2,958
Karma: 2530691
Join Date: Dec 2007
Device: REB1200 EBW1150 Device: T1 NSTG iLiad_v2 NC Device: Asus_TF Next1 WPDN
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):
Code:
```  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...

Attached Files
 marginalien-NR.htm.txt (5.9 KB, 130 views) marginalien-NR.epub (4.4 KB, 98 views)