Question

I need to display large-ish text files (under 10 MB) on mobile device browsers. Downloading the file in chunks isn’t currently supported.

What I currently do right now is the following:

1. Download file
2. Put file contents into a <pre> tag

The problem with this is that the <pre> doesn’t do word-wrapping well with the word-wrap:break-words CSS. It breaks words (obviously) in unacceptable ways and makes the displayed text unreadable. No word-wrapping isn’t an option, because you don’t want horizontal scrolling (and mobile Safari simply refuses to spawn horizontal scrollbars on <pre> elements)

Transforming the plain text into equivalent HTML and then inserting said HTML into the DOM takes forever (the insertion is the bottleneck here; conversion time is on the order of milliseconds).

Any ideas as to how to display plain text in an acceptable fashion on a mobile device?

Edit:

Removed the part about using web workers because it can’t do DOM manipulation and at the time, I thought text processing was the bottleneck

Answer 1

The way I did it was as follows:

<pre id='text_preview'>
</pre>

Approximate code below.

$.get("url/of/text/file.txt", function(response) {
    var fileText = response, pageNumber = 1, pageSize = 105600;
    //first 100 kb of content, assuming 8 bytes/char
    //don't have exact value for this, using approx
    $('#text_preview').text(fileText.slice(0, pageNumber * pageSize);
    window.onscroll = function() {
       //implementation of this left as an exercise for the reader
       if(scrollNearBottom()) {
          pageNumber++;
          $("#text_preview").append(fileText.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
       }
    }
});

Obviously, this won’t help my need to find text using Ctrl+F but does satisfy the requirement that I be able to display large e-books.