Mokuro: Read Japanese manga with selectable text inside a browser

Japanese Language Resources
90

Alright I got something working :slight_smile:

I haven’t forked Mokuro, can look into that later, for now you have to make the changes directly in the html file you usually use. Also, that will break some other things so make a backup of the html file if you want to have a possibility to use the old behavior.

To display all pages at once and be able to scroll vertically in both directions, you need to swap code in two places.

  1. Make a copy of your html file, to have a backup in case the editing goes wrong
  2. Find this block: (around line 84)
#pagesContainer {
    display: inline-flex;
    flex-direction: row;
    overflow: visible;
}

#pagesContainer.inverted {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.page {
    display: none;
    float: left;
    margin: 0 -1px 0 0;
}
  1. Replace it with this block:
#pagesContainer {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

#pagesContainer.inverted {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.page {
    display: block;
    margin: 0 0 1px 0;
}
  1. Now find function updatePage, around line 745. The block containing all function updatePage and function firstPage that you will be replacing is this one:
function updatePage(new_page_idx) {
    new_page_idx = Math.min(Math.max(new_page_idx, 0), num_pages - 1);

    getPage(state.page_idx).style.display = "none";

    if (state.page2_idx >= 0) {
        getPage(state.page2_idx).style.display = "none";
    }

    if (isPageFirstOfPair(new_page_idx)) {
        state.page_idx = new_page_idx;
    } else {
        state.page_idx = new_page_idx - 1;
    }

    getPage(state.page_idx).style.display = "inline-block";
    getPage(state.page_idx).style.order = 2;

    if (!state.singlePageView && state.page_idx < num_pages - 1 && !isPageFirstOfPair(state.page_idx + 1)) {
        state.page2_idx = state.page_idx + 1;
        getPage(state.page2_idx).style.display = "inline-block";

        if (state.r2l) {
            getPage(state.page2_idx).style.order = 1;
        } else {
            getPage(state.page2_idx).style.order = 3;
        }

    } else {
        state.page2_idx = -1;
    }

    document.getElementById("pageIdxInput").value = state.page_idx + 1;

    page2_txt = (state.page2_idx >= 0) ? ',' + (state.page2_idx + 1) : "";
    document.getElementById("pageIdxDisplay").innerHTML = (state.page_idx + 1) + page2_txt + '/' + num_pages;

    saveState();
    zoomDefault();
    if (state.eInkMode) {
        eInkRefresh();
    }
}

function firstPage() {
    updatePage(0);
}
  1. Paste this on it instead:

document.addEventListener('keydown', function(event) {
    // Scroll speed in pixels
    const scrollSpeed = 50;

    switch (event.key) {
        case 'ArrowUp':
            window.scrollBy(0, -scrollSpeed);
            break;
        case 'ArrowDown':
            window.scrollBy(0, scrollSpeed);
            break;
    }
});

function updatePage(new_page_idx) {

}

function firstPage() {
    for (let i = 0; i < num_pages; i++) {
        let page = getPage(i);
        page.style.display = 'block';
    }
}

After these changes, all pages will be displayed at once, and you’ll be able to scroll vertically in both directions.

It is not optimal yet, might need to add something for controlling the zoom via the mouse, for me it is working OK if I use the menu and choose scale 1:1 or fit to screen

4 Likes