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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-17-2013, 04:28 PM   #1
Bilingual
Junior Member
Bilingual began at the beginning.
 
Posts: 7
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.
Bilingual is offline   Reply With Quote
Old 05-17-2013, 05:34 PM   #2
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 10,521
Karma: 9826952
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2
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
DaleDe is offline   Reply With Quote
Old 05-17-2013, 08:24 PM   #3
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 178
Karma: 359000
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...
DomesticExtremis is offline   Reply With Quote
Old 05-18-2013, 09:02 AM   #4
Bilingual
Junior Member
Bilingual began at the beginning.
 
Posts: 7
Karma: 10
Join Date: May 2013
Device: none
Quote:
Originally Posted by DaleDe View Post
EPub files are not be to be scrolled. They are meant to work like a book and change pages.
Choice of words aside, I consider pageturns a form of scrolling. We don't have to agree on that, though

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?
Bilingual is offline   Reply With Quote
Old 05-18-2013, 01:01 PM   #5
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 10,521
Karma: 9826952
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2
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
DaleDe is offline   Reply With Quote
Old 05-18-2013, 04:10 PM   #6
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 3,485
Karma: 9127314
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Bilingual View Post
I assume JS in ebooks is flaky at best, but maybe some obscure CSS-magic can do the same trick.
The short answer is no, unless you target your books for ePub 3 capable devices, because neither ePub 2 nor KF8 support Javascript. (ePub 3 does, but very few devices besides iPads and some Kobo devices support it.)

Quote:
Originally Posted by DomesticExtremis View Post
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.
Tables can be tricky and 6" screens are not exactly ideal for 2 column layouts. IMHO, the best option is still interlinked text. One good example is Jellby's multilingual "Divine Comedy" edition.

Quote:
Originally Posted by DaleDe View Post
SVG might be the best option here. It will support text and you can place it exactly where you want on a page.
IMHO, fixed layout ebooks would probably a better solution than .svg files. Also, AFAIK, you cannot change the font size of text in embedded .svg files using the reader's font option settings, which limits their usefulness in ebooks.
Doitsu is offline   Reply With Quote
Old 05-19-2013, 02:04 AM   #7
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 10,521
Karma: 9826952
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2
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
DaleDe is offline   Reply With Quote
Old 05-19-2013, 08:37 AM   #8
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,086
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.
mrmikel is offline   Reply With Quote
Old 05-19-2013, 12:54 PM   #9
Bilingual
Junior Member
Bilingual began at the beginning.
 
Posts: 7
Karma: 10
Join Date: May 2013
Device: none
Quote:
Originally Posted by mrmikel View Post
PDF might be the way to go for this sort of project.
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;
}
Without JS it sorta works in a browser with the reading space evenly divided horizontally and each part nicely put into each semi-screen.

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 08:05 AM. Reason: spelling errors
Bilingual is offline   Reply With Quote
Old 05-20-2013, 07:56 PM   #10
AlPe
Digital Amanuensis
AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.
 
AlPe's Avatar
 
Posts: 721
Karma: 1440161
Join Date: Dec 2011
Location: Venice, 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 08:02 PM.
AlPe is offline   Reply With Quote
Old 05-20-2013, 08:02 PM   #11
AlPe
Digital Amanuensis
AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.
 
AlPe's Avatar
 
Posts: 721
Karma: 1440161
Join Date: Dec 2011
Location: Venice, Italy
Device: Several eReaders and tablets
Quote:
Originally Posted by Bilingual View Post
Tried this:
Code:
.upper
{
height:50%;
width:100%;
background-color:#B2FFFF;
overflow:auto;
}

.lower
{
height:50%;
width:100%;
background-color:#98FB98;
overflow:auto;
}
That's not going to work, because height is taken w.r.t. the whole XHTML page (logical) height, not the viewport (logical) height.
AlPe is offline   Reply With Quote
Old 05-23-2013, 11:56 AM   #12
Bilingual
Junior Member
Bilingual began at the beginning.
 
Posts: 7
Karma: 10
Join Date: May 2013
Device: none
Quote:
Originally Posted by AlPe View Post
Interestingly, I wrote about parallel texts here: http://www.albertopettarin.it/rs.html
Thanks for the link - interesting reading, but depressing conclusion.

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.
Bilingual is offline   Reply With Quote
Old 05-23-2013, 10:47 PM   #13
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 746
Karma: 2641071
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;
}
In the .xhtml file the code would be:

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>
As you can see, no javascript
Attached Thumbnails
Click image for larger version

Name:	screen_shot-4949.gif
Views:	527
Size:	31.7 KB
ID:	106187   Click image for larger version

Name:	screen_shot-4950.gif
Views:	530
Size:	42.1 KB
ID:	106188   Click image for larger version

Name:	screen_shot-4951.gif
Views:	127
Size:	43.4 KB
ID:	106189  
Attached Files
File Type: epub Two Cols.epub (4.3 KB, 120 views)

Last edited by RbnJrg; 05-23-2013 at 10:54 PM.
RbnJrg is offline   Reply With Quote
Old 05-24-2013, 04:27 AM   #14
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,997
Karma: 8796439
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by RbnJrg View Post
What about a two columns layout? It works fine in some eReaders (i.e. Kindle) although not in ADE
When talking about ePub, it sounds weird to say that it works in Kindle, you know
Jellby is offline   Reply With Quote
Old 05-24-2013, 12:53 PM   #15
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 746
Karma: 2641071
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Jellby View Post
When talking about ePub, it sounds weird to say that it works in Kindle, you know
Hi Jellby;

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
RbnJrg is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Replacing code without replacing text? ElMiko Sigil 6 11-30-2011 09:14 PM
Override ePub CSS with userStyle.css? barium Sony Reader Dev Corner 11 07-16-2011 04:25 PM
css pseudo elements and adjacent combinators in extra css? ldolse Calibre 2 12-21-2010 06:09 PM
I need Javascript help Nate the great Workshop 4 04-04-2009 01:55 AM
iLiad Javascript? jsc iRex Developer's Corner 1 09-10-2006 08:17 AM


All times are GMT -4. The time now is 04:57 AM.


MobileRead.com is a privately owned, operated and funded community.