Replacing javascript with CSS - possible ?

[Bilingual]

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]

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]

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]

Originally Posted by DaleDe

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?

[DaleDe]

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]

Originally Posted by Bilingual

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

Originally Posted by DomesticExtremis

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.

Originally Posted by DaleDe

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.

[DaleDe]

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]

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]

Originally Posted by mrmikel

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]

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

[AlPe]

Originally Posted by Bilingual

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]

Originally Posted by AlPe

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]

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]

Originally Posted by RbnJrg

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]

Originally Posted by Jellby

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