readium-shared-js
readium-shared-js copied to clipboard
readium
RTL Hebrew books do not render properly - columns are split
This is a BUG report
Reported on the IDPF forum by hagiler: http://idpf.org/forum/topic-3020
"I design hebrew e-books for several clients, usually using their own app for books. However, one client wanted to test the book on Readium and found out that the text looks weird: http://imgur.com/I8yd4s8 Note how half of the second page moves to the right of the first page.
I've tried it myself and got the same result, even with books that used to work before. I've also tested it with several english epubs which seemed to work fine, so I'm pretty sure it's only in Hebrew.
Did anything change in the last few versions that might have caused this? I can provide a sample book if needed."
Expected: Hebrew text will be laid out properly.
Result: Text is sometimes broken across three columns.
Steps to reproduce.
- Load the test book (requested, pending)
- Page through it
- Sometimes the page is broken across 3 columns.
Browser/OS: Not known yet.
It appears that we have a fix for this, but we are seeing a different problem (but similar, in Arabic). We are looking at the other problem now.
Here the sample files provided by the user. Not yet tested to verify the fix.
https://github.com/readium/readium-test-files/blob/master/issue-files/shared-js/282/Hashlachot_Getbooks.epub
https://github.com/readium/readium-test-files/blob/master/issue-files/shared-js/282/adam_zar.epub
I can reproduce with the latest cloud reader app (built from develop branch):
https://readium.firebaseapp.com/?epub=https%3A%2F%2Frawgit.com%2Freadium%2Freadium-test-files%2Fmaster%2Fissue-files%2Fshared-js%2F282%2FHashlachot_Getbooks.epub&goto=%7B%22idref%22%3A%22Hashlachot_Getbooks-3%22%2C%22elementCfi%22%3Anull%7D
(Chrome web browser, full screen, on Window 10)
@JCCR there's a CFI -related message in the web console. Would you mind taking a look?
@JCCR in that same ebook ( https://github.com/readium/readium-test-files/blob/master/issue-files/shared-js/282/Hashlachot_Getbooks.epub ), there's a "severe" CFI error:
Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 14 is larger than or equal to the node's length (13)
at cfi_navigation_logic.js line 914
Press the left arrow (i.e. next page) and you should see an infinite loader / spinner:
https://readium.firebaseapp.com/?epub=https%3A%2F%2Frawgit.com%2Freadium%2Freadium-test-files%2Fmaster%2Fissue-files%2Fshared-js%2F282%2FHashlachot_Getbooks.epub&goto=%7B%22idref%22%3A%22Hashlachot_Getbooks-1%22%2C%22elementCfi%22%3A%22%2F4%5BHashlachot_Getbooks-1%5D%2F2%2F2%2F2%2C%2F1%3A0%2C%2F1%3A1%22%7D
I did run my tests over several browsers and operating systems. Google chrome fails on most of Os :windows 7 ,windows 8,windows 10 ,ios(google chrome app in iphone/ipad) IE 11and edge worked correctly under windows Safari in IOS worked too So this might be related to something in google chrome
Any updates?
thanks @mahag, for your tests. no development news on that front as far as I can tell.
I am not able to reproduce this bug in the latest Chrome (Windows 10): https://readium.firebaseapp.com/?epub=https%3A%2F%2Frawgit.com%2Freadium%2Freadium-test-files%2Fmaster%2Fissue-files%2Fshared-js%2F282%2FHashlachot_Getbooks.epub&goto=%7B%22idref%22%3A%22Hashlachot_Getbooks-3%22%2C%22elementCfi%22%3Anull%7D
I am not able to reproduce with this one either: https://readium.firebaseapp.com/?epub=https%3A%2F%2Fcdn.rawgit.com%2FIDPF%2Fepub3-samples%2Fmaster%2F30%2Fisraelsailing&epubs=epub_content%2Fepub_samples.opds&
Helicon's dev says that this fixes the bug (which ; unfortunately ; I am not able to reproduce):
https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js#L779
@ -45905,9 +45919,15 @@ var ReflowableView = function(options, reader){
function showBook()
{
+ console.log("PATCHED by OZ");
+ var currOpacity = _currentOpacity;
if (_currentOpacity != -1)
{
- _$epubHtml.css('opacity', _currentOpacity);
+ _$epubHtml.hide();
+ setTimeout(function() {
+ _$epubHtml.show();
+ _$epubHtml.css('opacity', currOpacity);
+ }, 50);
}
_currentOpacity = -1;
}
@mahag We believe so, but the bug is hard to reproduce. Can you reproduce with the current build?
I am trying to get the current build. I just redo the steps for branch name master correct?
I was able to download readium on a different machine and it worked. I place the cloud-reader-lite folder on my server and placed the epub in it and opened the url in google chrome i got the same problem
@danielweck Looking at the code in reflowable_view.js (in develop) it does not appear that the patch from Helicon was ever merged in and/or tested? Is that a correct statement?
I did retry develop and run my file in readium but still the issue occurs. In developer tools there is an error , am not sure if it is related to the display.
Uncaught TypeError: Cannot read property 'off' of null
And this is the error in console when running the master branch version
Discontiguous selection is not supported.
In both tests I am using same epub file
Please build the cloud reader with source maps, so that you can debug into non-minified / uglified Javascript source code. Use 'npm run prepare && npm run dist+sourcemap' (the resulting app in the "dist/cloud-reader-lite" folder will contain the additional source maps (large .map files, web browsers only load them when debugging from the web inspector).
This is what i got
I noticed that once a new chapter opens and we flip pages to read it this wrong display occurs while if go back to it (flipping in the opposite direction) as if reading it backwards from last page to 1st page the display is correct.
similar thing happen on Android RTL books right margin is cut. but when you flip pages till last page in chapter - and then flip back - the pages are not cut anymore and located in the correct position. (till you open new chapter - and then its cut again)
Rangy is not used for anything critical in Readium (only a prototype feature which isn't actually used by content creators). The console message is a warning that can be ignored.
I see that in some cases when RTL issue is reported - you mention "helikon" version. is there an "Helicon" stream or branch were we can see their contribution to the code?
@looknear try this small patch in the showBook() function:
https://github.com/readium/readium-shared-js/issues/282#issuecomment-222006996
Sorry for stupid newbie question - where you change it? it is found in readium_shared_js_all (single and multi dirs) - which is overridden on compile with Android Studio back to default.... is there some architecture document or some development process tutorial?... (or i'm asking too much...:)) ) also - if helicon fixed it - where is their branch?... why to fix twice? when it will move into dev branch?
@looknear I strongly suggest that you build your own cloud reader app (including source maps so that you can debug into non-minified / uglified Javascript source code), in order to integrate your custom code, etc.
It's simple enough once you have NodeJS isntalled: run npm run prepare && npm run dist+sourcemap from your command line (the generated app will be in the dist/cloud-reader-lite folder).
Helicon's custom code is:
https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js#L783
@ -45905,9 +45919,15 @@ var ReflowableView = function(options, reader){
function showBook()
{
+ console.log("PATCHED by OZ");
+ var currOpacity = _currentOpacity;
if (_currentOpacity != -1)
{
- _$epubHtml.css('opacity', _currentOpacity);
+ _$epubHtml.hide();
+ setTimeout(function() {
+ _$epubHtml.show();
+ _$epubHtml.css('opacity', currOpacity);
+ }, 50);
}
_currentOpacity = -1;
}
Thanks you. i managed to see the change in the app. you are right. better testing on cloud as web app - on clean js... (hoping webview will give same result). will play with it some more. anyway - the patch fix the right cut margins..., thanks.
by the way... the link you sent to the file - does not contain the above patch.