Add single page view for browsers

[NCC1701M]

The document in the browser will be displayed with two pages side by side. This even doesn't change when reading the document on a smaller device like a tablet or a phone. This isn't pretty comfortable and responsive.

Instead add an optional single page view for browser, like the Adobe Acrobat Reader provides. So people can scroll through the pages more comfortable and more space to the left and right can be used to display the page.

This single page view could also be switched to when the size of the browser falls below a certain size.

[julientaq]

hello.

pagedjs has no css to show pages on screen by default. It’s up to the user to set a css to preview the page if they want to.

That said, we have a basic interface.css we use often which has the possibility to show page vs spread (the css file is commented to easily allow this).

https://gitlab.coko.foundation/pagedjs/interface-polyfill/blob/master/interface.css

One detail. we shouldn’t take the window size into account to define how the pages are gonna show. Pagedjs is a tool to make paginated version (pdf and print) and can’t compete with all the tools for accessibility a single html page can bring.

Someone on a very small screen may want to make a very big book, and it’s up to them to decide how they wanna do it.

But your issue makes me wonder if we should have a paged.preview.js to give a preconfigured screen preview for user who’d need it.

[NCC1701M]

I was refering to the interface.css because it was mentioned here.

So I thought you might support also other layouts for browsers.

But your issue makes me wonder if we should have a paged.preview.js to give a preconfigured screen preview for user who’d need it.

In my opinion this would be great

[itlackey]

I changed the width property of .pagedjs_page to use minmax which allows one or two page layout depending on viewport width. This is a quick hack but worked for my use case.

  .pagedjs_pages {
        display: flex;
        width: minmax(var(--pagedjs-width), calc(var(--pagedjs-width) * 2));
        flex: 0;
        flex-wrap: wrap;
        margin: 0 auto;
        justify-content: center;
    }

This does not solve the problem of viewing on small screens. However, this strategy of modifying the interface.css could go a long way in making the preview more responsive.

[NCC1701M]

@itlackey Works great, except for the very first page. To align this page the following is needed as well:

.pagedjs_first_page {
    margin-left: 0;
 }

But on small screens it still uses the default page-width and height like 210mm x 297mm for A4.

[FloNeu]

@NCC1701M How about using transform: scale() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale (probably paired with some parent container trickery to center the pages an hide the overflow - as it only visually changes the element size.)

Or zoom on the page element (maybe easier) https://developer.mozilla.org/de/docs/Web/CSS/zoom

Haven't tried it but that's what came to mind. Will be experimenting on it soon as i have to get a project done using pagedjs soon.

[julientaq]

That’s exactly what we had in a previous hook. i’ll try to find it asap.