05-17-2013, 03:28 PM | #1 |
Member
Posts: 12
Karma: 10
Join Date: May 2013
Device: none
|
Replacing javascript with CSS - possible ?
Hello all
I would like to compile a bilingual ebook, and ideally, both language versions should scroll simultaneously on each side of a horizontal division. In HTML/CSS/JS, it seems doable, example here: http://jsfiddle.net/7tyb5/ Question: Is there a epub/KF8 standards-compliant way of obtaining a similar effect? I assume JS in ebooks is flaky at best, but maybe some obscure CSS-magic can do the same trick. |
05-17-2013, 04:34 PM | #2 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
EPub files are not be to be scrolled. They are meant to work like a book and change pages. The best way to keep 2 columns in sync though out the book is to use a table. But some eBook readers balk at really large tables so it can be a bit tricky.
the example you showed did not scroll well anyway. If you want scrolling you are better off using html and a browser. Dale |
05-17-2013, 07:24 PM | #3 |
Addict
Posts: 243
Karma: 359054
Join Date: Nov 2012
Device: default
|
A two column table would provide the mechanics,
but the differences in word length and verbosity of the different languages would make it difficult for them to synch well. Imagine Finnish/Chinese for example... |
05-18-2013, 08:02 AM | #4 | |
Member
Posts: 12
Karma: 10
Join Date: May 2013
Device: none
|
Quote:
Nevertheless, I'd really like to present each page in a book with the top half showing a text in one language, and the bottom half showing the corresponding text in another language. I'm aware, that a text will have different sizes in two languages. In a two-column tabular view, this is usually solved by putting each paragraph in a separate table cell and accepting whitespace in the bottom. Now, the tricky part is, that I'd prefer the cell in the second row to be below the cell in the first row - to move the right cell below the left cell, so to speak. As my previous example showed, it can be done with JS, but could it be done with methods supported by e-book readers? |
|
05-18-2013, 12:01 PM | #5 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
SVG might be the best option here. It will support text and you can place it exactly where you want on a page. Getting it to happen automatically would be the difficult part but there are tools that will convert Latex to SVG so this might be an option. You can read about SVG on our wiki.
Dale |
05-18-2013, 03:10 PM | #6 | |||
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
Quote:
Quote:
|
|||
05-19-2013, 01:04 AM | #7 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Fixed layout eBooks are not supported except for ePub 3 which as you have already said is not supported with very many readers and they are custom for each device. SVG is supported in ePub 2 and on most devices. The image text should scale automatically for different size screens and it will behave basically the same as fixed layout anyway on run on more devices.
Fixed layout ePub is described in our wiki. Dale |
05-19-2013, 07:37 AM | #8 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
PDF might be the way to go for this sort of project. Things will always be where they need to be, and if you can get it right in a word processor or layout program it will be right in the final document.
With two languages it is pretty important that the words DON'T move around, so whatever word-word correspondence exists is maintained. |
05-19-2013, 11:54 AM | #9 |
Member
Posts: 12
Karma: 10
Join Date: May 2013
Device: none
|
I detest PDF for anything but paper hardcopies. It always looks like crap on-screen.
Tried this: Code:
body { margin:0; padding:0; height:100%; } .upper { height:50%; width:100%; background-color:#B2FFFF; overflow:auto; } .lower { height:50%; width:100%; background-color:#98FB98; overflow:auto; } However, in an EPUB the full text of each part just appears consecutively. SVG looks intriguing, but I can't seem to find any working examples of text within an SVG-wrapper. Any pointers? Last edited by Bilingual; 05-20-2013 at 07:05 AM. Reason: spelling errors |
05-20-2013, 06:56 PM | #10 |
Digital Amanuensis
Posts: 727
Karma: 1446357
Join Date: Dec 2011
Location: Turin, Italy
Device: Several eReaders and tablets
|
Interestingly, I wrote about parallel texts here: http://www.albertopettarin.it/rs.html
In short: I think that this kind of functions should be put in the reading systems, not in fancy CSS/JS gimmicks. The eBook should contain only those metadata that make the app "recognize" that parallel display (or other "advanced" rendition) is needed. (A picture is worth 1,000 words, right?) Last edited by AlPe; 05-20-2013 at 07:02 PM. |
05-20-2013, 07:02 PM | #11 |
Digital Amanuensis
Posts: 727
Karma: 1446357
Join Date: Dec 2011
Location: Turin, Italy
Device: Several eReaders and tablets
|
That's not going to work, because height is taken w.r.t. the whole XHTML page (logical) height, not the viewport (logical) height.
|
05-23-2013, 10:56 AM | #12 | |
Member
Posts: 12
Karma: 10
Join Date: May 2013
Device: none
|
Quote:
I seem to have embarked on a non-trivial task beyond most current system's abilities, so I'll put the project on the back-burner for now. |
|
05-23-2013, 09:47 PM | #13 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
What about a two columns layout? It works fine in some eReaders (i.e. Kindle) although not in ADE
Code:
h1 { clear: both; font-size: 1.4em; margin: 0; padding: 1em 0 2em; text-align: center; } h2 { font-size: 1.2em; margin: 0; padding: 1em 0 2em; text-align: center; } p { font-size: 1em; text-align: justify; margin-bottom: 1em; } .col1 { float: left; width: 50%; } .col2 { float: left; width: 50%; } div.col1 p { margin-left:0; margin-right: 0.75em; } div.col2 p { margin-left: 0.75em; margin-right: 0; } Code:
<h1>Title</h1> <div class="col1"> <h2>Title in one language</h2> <p>...Text in one language...</p> ... ... </div> <div class="col2"> <h2>Title in another language</h2> <p>...Text in another language...</p> ... ... </div> Last edited by RbnJrg; 05-23-2013 at 09:54 PM. |
05-24-2013, 03:27 AM | #14 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
05-24-2013, 11:53 AM | #15 | |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Yes, it sounds weird to speak about epub in Kindle However, there is a trick that allows you to read epubs in KF: http://blog.the-ebook-reader.com/201...epub-app-list/ But you are right and your point is valid; I wouldn't speak about epub in Kindle. What I meant is that the mobi file I got from my posted epub, looked fine in Kindle. It's possible for a native epub reader to read the file also in that way. Maybe someone here with a Nook or Sony or Kobo reader can give us an answer about how appears the file in his reader device. Regards Rubén |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Replacing code without replacing text? | ElMiko | Sigil | 6 | 11-30-2011 08:14 PM |
Override ePub CSS with userStyle.css? | barium | Sony Reader Dev Corner | 11 | 07-16-2011 03:25 PM |
css pseudo elements and adjacent combinators in extra css? | ldolse | Calibre | 2 | 12-21-2010 05:09 PM |
I need Javascript help | Nate the great | Workshop | 4 | 04-04-2009 12:55 AM |
iLiad Javascript? | jsc | iRex Developer's Corner | 1 | 09-10-2006 07:17 AM |