Two facing pages in the viewer …solved!!

[pollito pito]

Ok guys, here is a solution for those of you that use the calibre viewer as reader
and want to use the whole landscape screen for displaying two pages:

1-Make a backup copy of the read-only “images.js” file on your folder
\Calibre2\resources\viewer\
2-Extract into that folder the attached “images.js”.
3-Start the wiewer.
3-To move left / right use the arrow keys on the keyboard.

There are two limitations:
1-It will not “remember” the last viewed pages, just the last viewed chapter. I did not
find a way of updating the “calibre_current_page_bookmark”. If someone could tell
me what function I have to call or provide some idea, I could try to implement it.
2-All the calculations are in px, so it may not scale well. If there is interest I could try to
convert them to em.


For the not initiated ones some background:

Modern PC screens are not tall; they are wide, therefore scrolling to the side
is much more natural that scrolling down: an small fact that seems to be
ignored by most web developers. Have you seen Google fast flip? They
almost got it right; you are supposed to key left or right, but the page they serve
is taller that the viewing area .
Now, calibre viewer is supposed to be just a simple reader, however it is such
a good piece of software that it is simply a pity not to use it as a Reader.
Unfortunately if you used it in full screen you end up with impossibly long rows,
very uncomfortable for reading. Of course, one can set the viewer size in such a
way that it would produce pages of reasonable width, but then you have all sort
of disturbing elements from desktop and what not. (There was even a request some
days ago for a way of dimming everything but the viewer reading area.) Besides,
the waste of horizontal space.
A compromise could be to show two facing pages and use the viewer in full screen
mode. But how to make it happen? You see, to request “officially” such a feature would
mean to potentially divert valuable developer’s time to something that, I am sure,
not very many are going to use. So I decided to give it a try myself.
The starting point of my quest was an article (and script) by Cédric Savarese:

http://www.alistapart.com/articles/css3multicolumn/

From there I came to Peter Craddock site. He has a tutorial on building
a book look-alike page, that was extremely useful. But he is also a writer,
and after seeing some of his writings here:

http://www.arpia.be/2010/04/an-opening-scene/#

I thought: wow! that is what I want to have in the calibre viewer.
Yet, after a lot of experimenting I had to drop both approaches. They are (at least for me )
very difficult to implement.
So, I went on and found a jQuery Plugin called ‘js-columns’ by Kenneth Kufluk.
After some minor changes and the addition of a couple of lines of code, I managed
to have it working in the viewer. There are two problems, though: The response to the
paging (page changing) is very slow because of the workings of the script, but more
important, it would not work in several of my books.
Then I decided to restart with the very first idea: To use the build in multi column module.
That’s how I came to this solution. The logic is the following:
1-Apply a temporary single-column style to the document, forcing the width to the one
each of the facing pages is going to have in the final layout.
2-Calculate the doc length and the number of pages it will have and the amount to
jump-scroll left or right.
3-Apply a two column style.
4-Trap the left or right arrow keys and jump-scroll the doc to the next/previous two pages.

Here is also the user style sheet I’m using:

body {
color:rgb(0,0,0) !important;
background-color:rgb(235,235,235);
text-align:justify;
//set the font-size to 24px in the GUI General tab
//font-size:24px !important;
text-indent: 2em;
}


Sorry for the long post.

[kovidgoyal]

That's cool, I can integrate this into the viewer as an option (if the user selects the option, on the next restart the viewer will load the multicol javascript).

Couple of questions:

1) I see you have a comment saying document.ready does not always work. What happens when you use document.ready?

2) Do we need the alerts for next chapter?

3) Do we need to reload the document on resize, instead of just redoing the layout

4) What was the problem with bookmarks/last read location exactly?

[pollito pito]

Originally Posted by kovidgoyal

That's cool, I can integrate this into the viewer as an option (if the user selects the option, on the next restart the viewer will load the multicol javascript).

That would be truly cool!

Couple of questions:

1) I see you have a comment saying document.ready does not always work. What happens when you use document.ready?

I do not know what is the exact order in wich the settings (custom css, ebook specific css, etc) are applied. The fact is that
the document.ready is triggered in some ebooks more than once. In those cases the value returned by $("body").height() is either
much too large or a bit too small.

2) Do we need the alerts for next chapter?

Definitively not. It’s just a hack to let the user know the end or the beginning of the chapter was reached. I am using it just
because I do not know how to fetch the next / previous chapter. Ideally one should call here “goto next” or “goto prev” functions.

3) Do we need to reload the document on resize, instead of just redoing the layout

Again a hack, related to the next of your questions. To properly redo the layout, one would need to know what page
is on the display. I could get it from a var on my “script”, however it would be much better to get it from the
calibre_current_page_bookmark. But that I could not get because I do not know how to manually update and read the
calibre_current_page_bookmark. Note, that the side scrolling has no effect on the automatic updating of the position.
I took me a while (and a lot of reading) to realize that for the rendering engine a multicolumn page not taller than the
viewportHeight, is just one page that is not scrollable in the vertical direction. So, even if you scroll to the side, for it
you are always at the beginning of the first page.
I hope I make sense, its late in here…

4) What was the problem with bookmarks/last read location exactly?

See 3

[kovidgoyal]

Hmm, this will require some careful thought. I'm a little too busy at the moment with the 0.7 beta process, so please open a ticket and attach your javascript to it. I will look into integrating/improving it as soon as the 0.7 beta process is done.

[pollito pito]

Originally Posted by kovidgoyal

Hmm, this will require some careful thought. I'm a little too busy at the moment with the 0.7 beta process, so please open a ticket and attach your javascript to it. I will look into integrating/improving it as soon as the 0.7 beta process is done.

I know that this is already a bit old thread, sorry, I was out of the net for some days.
Anyway, I do not think that it was worth opening a ticket for a feature that nearly no one uses. Besides that, as I said before, I can not write python, but I can read it (sort of). Looking at the code makes me think that this is not such a trivial thing to implement. The most important point are the limitations of the WebKit concerning the implementation of the CSS3 Multi-Column Module. Irrespective of what’s on the docs, I can categorically say that the “Column breaks” do not work and therefore, to implement in the viewer a smooth two-facing-pages mode will require a lot of coding.
Definitively, the developers’ time is better employed in something else.

However I can try to improve the scripted solution a bit more. Maybe Kovid can answer a couple more questions?

-does the viewer accept cookies?

-why when I set the overflow on the user style (either "overflow":'auto'; or ( "overflow-x":'auto' and "overflow-y":'auto' )
the viewer show two sets of scroll bars, but not so if I set the overflow to ‘scroll’? Moreover the scroll distance allowed by the more external of the two horizontal bars is not always correct, whereas the one of the inner one is.

-can you explain the structure of the bookmarks:
(lp1
(S'calibre_current_page_bookmark'
S'21#body|0.000000'
tp2
a.

(lp1
(S'calibre_current_page_bookmark'
S'21# > *:eq(0) > *:eq(1) > *:eq(35) |1'
tp2
a.

-does the viewer exports a function like “go_nex” or “go_prev”?

Thanks a lot

[kovidgoyal]

No, the viewer doesn't accept cookies.

scrollbars are shown on each "block" level element, so if you multiple block level elements, you get multiple scrollbars.

The syntax of the bookmarks is a jquery selector that point to a element in the DOM. when going to a bookmark, calibre simply tells jquery to scroll to that element.

[pollito pito]

Originally Posted by kovidgoyal

No, the viewer doesn't accept cookies.

scrollbars are shown on each "block" level element, so if you multiple block level elements, you get multiple scrollbars.

The syntax of the bookmarks is a jquery selector that point to a element in the DOM. when going to a bookmark, calibre simply tells jquery to scroll to that element.

OK.
Back to work finding some other solution...
Do you have some idea on how to scritp the "goto_next" , "goto_prev" ?

[kovidgoyal]

You wont be ale to do it in javascript as javascript works only with the current document and an ebook can contain multiple html file.

You basically have to write equivalent versions of the next_page and previous_page functions in python for horizontal scrolling.

[pollito pito]

Originally Posted by kovidgoyal

You wont be ale to do it in javascript as javascript works only with the current document and an ebook can contain multiple html file.

You basically have to write equivalent versions of the next_page and previous_page functions in python for horizontal scrolling.

Well, I was thinking about “goto_next_section” or “goto_prev_section”.
Correct me if I’m wrong, but the table of contents should be accessible through JS or maybe the temporary opf or ncx files.
If I could just but read (and write!!) the calibre_current_page_bookmark'…

[kovidgoyal]

Ah well navigating the TOC sections via javascript is not really supported as the TOC is maintained in python code in a separate object.

What exactly do you want? A key press that will cause the viewer to go to the next/previous TOC section?

[pollito pito]

Originally Posted by kovidgoyal

Ah well navigating the TOC sections via javascript is not really supported as the TOC is maintained in python code in a separate object.

What exactly do you want? A key press that will cause the viewer to go to the next/previous TOC section?

Yes!!

[kovidgoyal]

that would have to be done in python, not javascript (the toc is only available to the python code)

[pollito pito]

sorry to hear that , I’m running out of options
I assume that there’s no access either to the calibre_current_page_bookmark , or you would have mentioned it, right?

[kovidgoyal]

yeah you have to write python to interface with things like bookmarks/toc

the viewer doesn't export a full javascript interface, as I find programming in python a lot nicer and easier to maintain debug over the long term.

[pollito pito]

I have a couple of new ideas and a question .
The client-side storage function sessionStorage works fine in calibre viewer but the localStorage does not.
Is it a bug or is intentional?
Is it possible to enable the localStorage?

Thanks