Displaying webpages as two or more columns

Add-ons Development
#1

Many websites are not designed for widescreen monitors. For example, google search uses about a fourth of the width of my screen.

I’d like to create an addon that displays a given webpage in two or more columns, like a newspaper. Think about printing a document and configuring your print layout to have more than one page per side. That’s what I’d like.

Of secondary importance, I’d like the columns to scroll smoothly together. For example, if a page were displayed as two columns, the text at the top of the right column would move to the bottom of the left column as the user scrolled down the page.

Is some or any of this do-able? I’d be grateful if anyone’d share tips on how this could be achieved technically or what I should look into. I have some experience modifying some simple addons, but am a beginner.

Thank you.

#2

Hey @nozillium!

That’s a great question and a great idea too.

Some of that is definitely doable – at least to some extent. The first thing that comes to my mind is utilizing the CSS property columns to define how many (and how wide) columns the content is divided into.

It might also require some adjusting of parent elements to widen them wide enough so that you’ll get the benefits of the full width of the screen.

The second part of your question, if I understood correctly would mean reverting back to single column once the end of the page is reached. For that, you could listen to the scroll event and calculate when it reaches the end of the element.

I hope these starter points give you something to look into and start tinkering with some prototypes!

1 Like
#3

juhis, thank you! This gives me an idea of what to look into/how to get started!

1 Like