Add a "print" feature to print the contents of the article iframe

[Jaifroid]

The work on this has been done in kiwix/kiwix-js-pwa#13 and is experimentally implemented in the latest versions of WikiMed and Wikivoyage in the Microsoft Store.

The issue is that in most browsers (all?) when invoking print in Kiwix JS, visible areas of the app interface are sent to the printer, and only one page is printed, even if the article in the iframe consists of multiple pages. The solution to this is to invoke window.print() inside the scope of the iframe. This can be done with window.frames[0].frameElement.contentWindow.print(); and probably also with other DOM methods of getting the contentWindow of the iframe.

At the most basic level, what is needed is to intercept Ctrl-P both in the iframe and in the top-level document (it can fire in either context depending on where the user has clicked). However, most naïve users don't know about Ctrl-P, or don't use it, or may be using a Mac (though Command-P may be the equivalent there). So for them, a Print button or Print menu item has to be provided.

Finally, Wikipedia documents contain a number of elements that the user may not wish to print, e.g. navigation boxes that are useless in a printed document, or long lists of references that take up multiple pages. We can either offer the user a choice of elements to filter out (using CSS @media print rules), or we can just eliminate the most obvious ones behind the scenes (navigation elements).

In Kiwix JS Windows, I implemented a dialogue box with bootstrap modal to allow the user to include or exclude elements. Most of the elements are specific to Wikipedia and Wikivoyage.

I'll start by backporting the keydown intercept (it has to be keydown, or else the browser's own print dialogue opens anyway) and getting printing working from the iframe. Then we can decide what else we want.

[Jaifroid]

In #888 @mossroy commented:

If you just use ctrl-p in your browser, it will (badly) print the UI and only the beginning of the content (see #887) It works well if you ask the browser to print the content of the iframe. On Firefox, you can right-click in the content, choose "this frame" -> "print the frame".

To avoid this issue, I don't see a better solution than to provide a "print" feature in the app, that would trigger the browser print on the iframe:

document.getElementById("articleContent").contentWindow.print()

[Jaifroid]

@BBentleyDev Take a look at the implementation of print on https://pwa.kiwix.org . It intercepts key presses for Ctrl-P and also has a button in the task bar for printing. It includes a dialogue box that allows the user to choose what to print for Wikipedia articles, but this might need to be made more generic, as we now support many more ZIM types, and it is probably not a good idea to tie the feature to any specific ZIM type.

The use of a print button in the UI may be dependent on #523.

[mossroy]

I confirm we should not do anything specific to a ZIM type here.
It probably means something much simpler: no printOptions, no settings in the UI.
But trapping ctrl-p is probably a good idea, I agree.

[Jaifroid]

It might be worth checking whether overriding the window.print() function so that it runs code to print the contents of the iframe instead of the main window, could provide a very simple solution that would work with the browser-provided print options (i.e. Ctrl-P and any UI printing controls). This would only work if the browser uses JavaScript for its own implementation of these controls, and this may vary per-browser. It's probably a long shot, but worth checking.

If above doesn't work, then as I wrote in the first post, it's necessary to trap the keydown event for Ctrl-P/Command-P, because keyup or keypress events don't fire before the browser intercepts Ctrl-P.

Finally, if it's not possible to intercept the browser's Print menu/controls, then I think a print button would be necessary, because you can't rely on any users knowing the keyboard shortcut -- only a (small) minority of users ever use keyboard shortcuts in my experience. In Kiwix JS Windows, I re-used the "About" button for this: it becomes a Print button when the user is viewing an article.

[mossroy]

I totally agree.
Except that I find questionable to re-use the About icon.
IIRC, it was to save space on devices with small screens?

If necessary, we could do that in two steps:

• add a "print" icon, next to the "random" one in this issue
• postpone to Rework User Interface like Kiwix JS Windows #523 the way to improve the UI

[Jaifroid]

Yes, it was too save screen space. I agree with the suggestion of postponing UI-related issues to #523.

[Rbcoder1]

I am currently working on #523 and just changed the navigation UI

So still add the button for printing the content of zim file
And add it into navbar.

[Jaifroid]

The thing is, we don't have a print function in Kiwix JS. This issue would need to be implemented before adding a print button to the new UI.

[Rbcoder1]

Yes so i am just fix the ui of navigation bar and then add a print function it.