Not sure how much this would be doable but I imagine how great it would be to:
- upload PDF / webpage
- highlight text
- connect text to a card
- connect various cards
It could then work a little bit like https://www.liquidtext.net
1 Like
I love this idea—it’s one I’ve had for a while myself. I’ve used Kinopio before to study a Bible passage, and annotating words and being able to connect them very natural. Now that there are even more features like resizable images, tags, more ways to format, it feels like there are more building blocks to get closer to this kind of use case.
For example, you can imagine a big block of text that you screenshot and paste as an image, and then you could create cards that correspond to words in that text that you want to connect. The difficulty is, it’s easy to accidentally click on the image and make it cover other cards. So maybe if there a way to lock certain cards to the back, or to manage layers, then that would be even more feasible.
There are still lots of details to work through, but I love the thrust of this idea.
I also recommend the screenshot then upload image approach for this. Both PDF and webpages as backgrounds pose some issues:
- html cannot natively read pdf (your browser uses a system or adobe plugin to do this), I think it’s impossible to just put a pdf tag of some sort on a webpage
- arbitrary website backgrounds carry potential performance risks depending on the embedded website
- for both pdf and websites, how do you scroll the pdf/website background vs how do you scroll the space? can you click links or select text on the pdf/website background layer?
That is definitely challenging: I think that maybe the easiest solution would be:
- upload URL or PDF that will be converted into images (if they don’t exceed some amount of pages / characters)
- images put into the background
For future maybe something more interactive.
1 Like
That’s a good workaround. One could accomplish this now by opening an image editor and sticking the desired PDF image on top of a background. So that is a bit of friction. And if you did that, the PDF image would also tile, which is undesirable. But we’re pretty close.
When I tried that, the links were also not visible.
I mean, it could be simply be page after page in the background. It could be even uploaded in the way that each page would be a separate space within NAME_OF_PDF/PAGE, like this:
1 Like
I’m interested to see how well this works. I had a space where I was using the background to align things, but things kept getting misaligned/moved. It wasn’t that important so I didn’t investigate, but keep an eye on it.
Which links?
To be honest, I don`t want to upload twenty pages manually. This would need some official support - but I would like to show how interesting it could be.
1 Like
Between cards. They were hidden behind the main image for some reason.
1 Like
Yes, I hear you. I agree, manual is too tedious to be practical right now.
Ah yeah, that makes sense. All connections are behind cards, so my initial wont’ work as well as I imagined.
1 Like
So from a technical perspective, because of limitations of the web, there are two very different ways to approach this:
-
using the server to transform pdf pages into image files. I can do this with a lib like PDF.js - Home. This approach lets you save and manipulate individual card page images.
-
rendering the whole pdf client-side as a scrollable container inside a card (using something like PDF.js - Examples) . In this case the whole pdf would live inside a card, kind of like a codeblock (Bigger, Better Code Blocks). This approach is simpler UI-wise but you can’t reference or point to individual pages in the pdf.
for #1 , the flow looks kind of like this:
it’s a big flow
bump: requested in https://twitter.com/nerdymomocat/status/1763086137596555397
I would personally like to be able to take screenshots of pdf as cards which have a circle button when clicked, open the pdf in a scrollable card element and scroll to the location that the card came from. Some examples of where this method is present is → liquid text, board notes, guga whiteboard, muse, and area highlights in Readwise. It makes it so much easier to read multiple papers on one whiteboard (like a silent reading, where everyone is clipping important parts of a page and laying it down on the surface).
2 Likes
ok this approach sounds the most like/compatible-with approach #1 mentioned above: Idea: Use a webpage or PDF as background - #12 by pirijan
using the server to transform pdf pages into image files. I can do this with a lib like PDF.js. This approach lets you save and manipulate individual card page images.
where each page in a pdf will become it’s own seperate image card.
(imagine that each of these stacked images is a page from the pdf that you can move around and resize).
It sounds like in almost all cases you’ll want to convert All the pages of the pdf into image cards, rather than choosing specific pages to convert?
2 Likes
This would not be useful to me unfortunately (I often just need source located snippets rather than complete pages), but should be useful to most people; so I do think it is a good idea!
People can delete the page cards they don’t want anyway so that should be fine too.
2 Likes