Coding Phase - Week 2 and 3 Report

Hi,
This is a combined report for week 2 and 3 since I was not able to work for sometime in between due to some issues.

What's done

  • Build the basic embedded viewer using pdf.js
  • Support annotation rendering (yet to test for all types)
  • Lazy page rendering (currently fixing a few things)

What to do next week

  • Lazy page rendering (finish it)
  • Preserve the last scroll position while re-rendering.
  • Add links to a specific page or section of the pdf.

PS: will upload the latest changes soon after fixing a few things in the branch and post it here.

Update: I have updated the branch now - GitHub - asrient/joplin at pdf-viewer

7 Likes

Thanks for the update. When you start creating pull request, please remember to split them into smaller part. For example, just the PR to add support for pdf.js, then another for preserving the scroll, etc. The smaller the PR the better.

2 Likes

Alright, I will make a PR soon keeping that in mind.

Update

This is the basic embedded viewer I have built so far, I will improve upon the UI with time but I just wanted to show everyone the new horizontal scroll approach, it takes up less space, fits more pages and does not interfere with normal scrolling of the page, that's why I think it's a better approach. Let me know if you might find any issues.

Can think of many reasons not to have horizontal scroll, and very few to have it. You might need to better explain what problem this is solving.

+1 to this. I much prefer being able to scroll thought the document and attachments with only mouse wheel

This is definitely one benefit to it that I can see. It is annoying when I have a note with a large embedded pdf and the pdf viewer "steals" the scrolling.
However horizontal scrolling isn't great either, especially without a tilting scrollwheel or dedicated buttons so translating up/down scrolling to left/right would work but then we are just back at the original issue.

On the subject of pdf navigation, is it easy to switch between text select & hand tool? (or at all and if not, are there plans to implement it?).

Some points in favour of horizontal scroll

  • Does not interfere with the normal.
  • Gives a thumbnail preview of all pages.
  • Takes up less space in the screen.

The idea was that the embedded viewer is just a thumbnail preview of the pdf file, easy to see what's inside and getting a brief overview of the content and for reading/editing there will be the expanded viewer, you can just double-click on a particular page on the embedded viewer and it will open in the expanded view.

Some disadvantage of the approach I can think of right now

  • Not able to use the mouse wheel for scrolling the viewer. (Though if you're using a trackpad, you can use the scroll gestures)
  • Not meant for reading the content directly, another click is required to open it in the expanded viewer.

Let me know about other disadvantages I might have missed.

To compensate for the mouse wheel scroll I'm thinking of

  • Adding a feature similar to hand tool where you can drag and move the pages.
  • Add side buttons for better navigation (on left and right), you will also be able to long press the buttons to keep scrolling.

In the last point I also have an idea where because its tedious to hold a long click, we can start scrolling on hover over the buttons (after some delay in time to prevent unintentional scroll).

Let's discuss here which approach would be better for Joplin and its users.

1 Like

There are accessibility issues with horizontal scrolling, e.g. "If a user has to scroll in order to see a full line of text, it becomes very difficult to then follow to the next line." (see https://stackoverflow.com/a/61942943 and https://nngroup.com/articles/horizontal-scrolling).

Microsoft experimented with horizontal scrolling in Windows 8 — both the OS and the app store — and failed miserably. It was all gone in Windows 10. Of course, this doesn't mean that horizontal scrolling is always bad, but it's just something to think about.

Personally I'm not a fan, because it breaks the established workflow, which normally consists of vertical scrolling only. Is there any other PDF viewer that scrolls horizontally like that? The ones I've used were always vertical.

The only case that comes to my mind, where horizontal scrolling is common, is when using spreadsheets, and that's only because there's no space to fit all columns on the screen. The experience isn't great though.

1 Like

This is a good argument, also thanks for the article links, quite an interesting read. I was looking for a good site for UI/UX research to read.

I did some research on how other apps are doing it.

Evernote

They show a single page preview with navigation buttons. (Web version)

OneNote

Screenshot 2022-07-07 at 9.05.36 PM

They just show an icon, no previews.

Notion

Screenshot 2022-07-07 at 9.06.15 PM

No previews either.

Apple Notes

Screenshot 2022-07-07 at 9.15.12 PM

This is for pdfs that are scanned from within the app itself. For other imported pdfs they just display the first page as preview.

Obsidian shows a preview in the same fashion as our current previewer (using chrome's inbuilt viewer).

Observation

Not a lot of note taking apps actually provides an actual pdf preview within the note and very few with support for scrolling/navigating through the pages from within the preview.

Note that this discussion of scroll is only about the embedded viewer, the full screen viewer will always have vertical scroll.

1 Like