Many (most?) html files need a viewport tag

[eshellman]

@JohannesSeikowsky: (gutenbergtools/gutenbergsite#170)
I tried yesterday to actually read a Gutenberg book on my smartphone and it seems to me that the page of the book is not really well adjusted for reading on mobile. The page I'm talking about is the one users get to when clicking the "Read now" button on the page of a book.

@Rossolson : Setting the viewport is the fundamental first step in supporting mobile-friendly views. (I haven’t dug into the code from that time, and I’m now wondering if there was a bad viewport setting that was removed entirely rather than fixed.)

History: when ebookmaker first started converting xhtml to HTML5, it automatically added a viewport meta tag. However, it was found that in a minority of cases, it disfigured the HTML.

To make the books more mobile friendly, we should see how we can start adding it again without damaging previously fine HTML.

I think that #66712 convinced me to cease adding the viewport tag. without it, it responds beautifully on iphone, (using media queries) with the added viewport tag, it acquires a large right margin making the text much less readable.

I think it's not too hard to open a file in a headless chrome browsre and use injected javascript to measure the viewport, comparing it to what the viewport tag would set. That should indicate if setting a viewport on the file is likely to cause problems. opening our files in headless chrome is slow; but we're going to be doing that anyway for pdf generation (#258); so we'll have to tackle that anyway.

[Rossolson]

Can the first step be something like:

if ebookNumber < 50 && bookContnent.notcontains("viewport") then bookContent.inject("viewport")

just enough for us to test a specific set of books?

[JohannesSeikowsky]

I think that would be good! Lmk once that happens and I can help with checking the results

[eshellman]

Can the first step be something like:

if ebookNumber < 50 && bookContnent.notcontains("viewport") then bookContent.inject("viewport")

just enough for us to test a specific set of books?

No. The first step would be: manually inject viewport into 100 books and compile a list of problems, if any.

[JohannesSeikowsky]

That makes sense too. Quicker to get going in this way as well.
@Rossolson If you wanna get a spreadsheet set up and make a start, I can do a bunch too.
Maybe we can get one more person to split the work and that should be ok for the first 50 or so.
15-20 each seems ok. Maybe Thenlie if he's free/willing.

[Rossolson]

The spreadsheet is here: https://docs.google.com/spreadsheets/d/117jKD7ehhg2QidGi7TqFfZFN7WHKHgNneqkDvJ7FdJE/edit?usp=drivesdk and I have begun working on Ebook #1 to get it up to the point of working well with the viewport. Once I resolve that, I will continue working on the 100 first ebooks, and would like to have the top from here evaluated: https://www.gutenberg.org/browse/scores/top

[eshellman]

I think that measuring the minimum width of a page can help indicate whether setting the viewport might be problematic. javascript to measure that should be something like:

function getPageMinWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.body.clientWidth,
    document.documentElement.clientWidth
  );
}

console.log("Minimum page width:", getPageMinWidth(), "px");