View Full Version : Replacing javascript with CSS - possible ?


Bilingual
05-17-2013, 04:28 PM
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.

DaleDe
05-17-2013, 05:34 PM
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

DomesticExtremis
05-17-2013, 08:24 PM
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...

Bilingual
05-18-2013, 09:02 AM
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 :book2:

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?

DaleDe
05-18-2013, 01:01 PM
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

Doitsu
05-18-2013, 04:10 PM
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.)

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 (http://www.mobileread.com/forums/showthread.php?t=53475)" edition.

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 (http://wiki.mobileread.com/wiki/Fixed_layout_ePub) 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.

DaleDe
05-19-2013, 02:04 AM
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

mrmikel
05-19-2013, 08:37 AM
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.

Bilingual
05-19-2013, 12:54 PM
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:

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?

AlPe
05-20-2013, 07:56 PM
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 (http://www.albertopettarin.it/img/t1_dr.jpg) is worth 1,000 words, right?)

AlPe
05-20-2013, 08:02 PM
Tried this:


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

Bilingual
05-23-2013, 11:56 AM
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.

RbnJrg
05-23-2013, 10:47 PM
What about a two columns layout? It works fine in some eReaders (i.e. Kindle) although not in ADE :)


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:


<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 :)

Jellby
05-24-2013, 04:27 AM
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 ;)

RbnJrg
05-24-2013, 12:53 PM
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 :) :D :o

However, there is a trick that allows you to read epubs in KF:

http://blog.the-ebook-reader.com/2011/11/29/how-to-read-epub-ebooks-on-kindle-fire-android-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

DaleDe
05-24-2013, 01:12 PM
Hi Jellby;

Yes, it sounds weird to speak about epub in Kindle :) :D :o

However, there is a trick that allows you to read epubs in KF:

http://blog.the-ebook-reader.com/2011/11/29/how-to-read-epub-ebooks-on-kindle-fire-android-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

Well not only does an ePub app exist for the Kindle fire but KF8 is more ePub than it is mobi. It is ePub content in a mobi wrapper (Palm pdb) instead of zip file.

Dale