Content Missing In Chrome Apps

[sanjaynainani]

I am making a chrome app. There is content miss issue in Arabic Books, while the english books display the complete content. Although the content is available in the IFrame, But is not displayed on the view. So It goes on to display the next chapter. The Below image is of a new chapter, it has only that content which can be accommodated in the view. As it depends on the width and height.

But If we check the total elements, we can see that still there are some elements left to be displayed on the next page. But still the next chapter is called. As the next image shows

But when I click next, Instead of displaying the remaining content. It jumps up to the next chapter. I Cannot understand why this is happening. As it is working fine with English Books. I could debug the methods where the content was set according the scroll height but could not find a proper reason for it. Any help would be much appreciated.

[fchasen]

Are you using any custom fonts in the Arabic book? Could be that when they load the width changes significantly.

If you have a sample book I could test with it would be easier to debug.

As always language support help is greatly appreciated!

[sanjaynainani]

No there are no custom fonts for it. It works fine in the web version, but not in chrome packaged apps. I am working in order to make a chrome app. arabic-book-sample.zip

Thanks for the quick reply.

[sanjaynainani]

And also currently I have changed a couple of the things in epub.js to make it work for chrome packaged apps as there some functions like document.write() do not work, Currently I'm able to work it out with some changes, so wanted to ask If there is some version which does not work with document.write(). That would be really helpful.

[sanjaynainani]

Hi @fchasen

I have tried removing document.write() by using this.iframe.contentWindow.location.replace(url);

It works in the web version, and trying to work it out for chrome apps, but it gets stuck at a point where it does not move forward from display chapter, showing an error as "not found, try fuzzy match".

For your help below is the code, that I'm doing to replace the document.write() in the method EPUBJS.Render.Iframe.prototype.load = function(contents, url).

EPUBJS.Render.Iframe.prototype.load = function(contents, url){
    var render = this,
            deferred = new RSVP.defer();

    var buf = new ArrayBuffer(contents.length * 2)
    var bufView = new Uint16Array(buf);
    for (var i = 0, strLen = contents.length; i < strLen; i++) {
    bufView[i] = contents.charCodeAt(i);
    }
    var unit8Array = new Uint8Array(buf)
    var blob = new Blob([unit8Array], { type: 'application/xml' })

    // type - e.g. application/xml, text/html, etc.

    url = URL.createObjectURL(blob);

    if(this.window) {
        this.unload();
    }

    this.iframe.onload = function(e) {
        var title;

        render.document = render.iframe.contentDocument;
        render.docEl = render.document.documentElement;
        render.headEl = render.document.head;
        render.bodyEl = render.document.body || render.document.querySelector("body");
        render.window = render.iframe.contentWindow;

        render.window.addEventListener("resize", render.resized.bind(render), false);

        // Reset the scroll position
        render.leftPos = 0;
        render.setLeft(0);

        //-- Clear Margins
        if(render.bodyEl) {
            render.bodyEl.style.margin = "0";
        }

        // HTML element must have direction set if RTL or columnns will
        // not be in the correct direction in Firefox
        // Firefox also need the html element to be position right
        if(render.direction == "rtl" && render.docEl.dir != "rtl"){
            render.docEl.dir = "rtl";
            render.docEl.style.position = "absolute";
            render.docEl.style.right = "0";
        }

        deferred.resolve(render.docEl);
    };

    this.iframe.onerror = function(e) {
        //console.error("Error Loading Contents", e);
        deferred.reject({
                message : "Error Loading Contents: " + e,
                stack : new Error().stack
            });
    };

    // this.iframe.contentWindow.location.replace(url);
    this.document = this.iframe.contentDocument;

  if(!this.document) {
    deferred.reject(new Error("No Document Available"));
    return deferred;
  }

//  this.document.open();
//  this.document.write(contents);
//  this.document.close();

    this.iframe.contentWindow.location.replace(url);
    return deferred.promise;
};

I would really appreciate your suggestions on how should we move forward.