This is an example of a text which I would be exploring with the help of the pretext library. The library is used to layout text outside of the DOM. This comes with a lot of performance benefits, since DOM calculations can be expensive, and since layout is now cheap. It allows us to do some very interesting things. For instance, we can do a live modified layout like this very example. It is not exactly trivial, but once we understand the logic, I can see some cool uses for the library. Although I have not yet quite understood, how one should go about with multiple paragraphs, this demo shows one single paragraph working quite well.

As a next step, we should try extending our learnings into multiple paragraphs, and see how multiple paragraphs affect our interactive layout. We definitely want to preserve the document structure. That is to say, different paragraphs shoudl look like different paragraphs, maybe in the future, then we can explore things like drop caps as well

It seems since we are able to generalise this to multiple paragraphs, adding a third paragraph should not be a problem, however there are most certainly complications, we need to watch out for. For instance what happens when there is a scroll on the page, since the relative position of elements now depends on the scroll as well. Perhaps with a third paragraph and zoom, it should all be clear, and we should be able to make the required adjustments to support a scroll on the page as well with no problems.

Since your cursor is not quite visible and the intent of this demo is to be a bit flashy, you will be forced to use your keyboard for certain interactions. If you want to for instance visit the github repository for this project. You might press the "g" key on your keyboard.

This demo was built using the pretext library by GitHub user Chenglou, please give them a star on GitHub. Press p to navigate to their github repository.