Pagination in Reader

[teemue]

Please add an paginated layout to make it look more like an ordinary book :) Great work!

[Acclorite]

This might be very troublesome, considering current Reader system and progress tracking. Thank you for your idea, when I will finally have time and implement what's in my priority I will look into ways to do this.

But right now I am full of work and have 20+ TODOs, and this feature will surely need me to rewrite a couple of thousands of lines. What I can say is that this feature most likely will not be implemented in the near feature.

Sorry and if you have more ideas, feel free to create new Issues. Although I have lots of ideas, another couple of them won't harm, will they?

[Acclorite]

Suggestions needed.

This might be very troublesome, considering current Reader system and progress tracking.

Would I know that the "troublesome" part is not even close to progress tracking.

To create "paged" layout I need to split text into pages, separating paragraphs when they overflow and here's the first problem: There is no way of doing that not manually, at least I don't know one. Splitting pages would mean calculating how much paragraphs one page may take, then split one paragraph in two if it overflows (cannot fit).

What does that mean?
I need to process sometimes enormous amount of text, split it, and, of course, reprocess it when config changes (e.g. text size increases).

What is the problem with that?
It takes a lot of RAM and time to process, if we actually move aside implementation (which is the main problem).

I checked a lot of readers past days, sadly, there seems to be no Jetpack Compose Readers with Paged layout. The ones who gave me good idea is FBReader and Readera, which I think both have a great paged layout, but Closed Source / XML as it seems.

Let's start with FBReader, it gave me really good idea about using LazyColumn with ugly, but kinda working scroll by exactly one screen height, to imitate "pages". Simple example:

            val text = remember { /* just List<String> here as text */ state.value.text }
            // List state to scroll by one screen
            val lazyListState = rememberLazyListState()
            val scope = rememberCoroutineScope()

            val screenHeightWithInsets = with(LocalDensity.current) {
                LocalConfiguration.current.screenHeightDp.dp.toPx() + // Screen height
                        WindowInsets.systemBars.getTop(this) + // System bars
                        WindowInsets.systemBars.getBottom(this)
            }

            LazyColumn(
                Modifier
                    .fillMaxSize()
                    .padding(horizontal = 24.dp, vertical = 36.dp),
                state = lazyListState,
                userScrollEnabled = false
            ) {
                itemsIndexed(
                    text,
                    key = { index, _ -> index }
                ) { _, paragraph ->
                    // Test Text
                    Text(
                        text = paragraph,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )

                    // Some space between paragraphs
                    Spacer(modifier = Modifier.height(24.dp))
                }
            }
            
            // Box to create "tap zones"
            Box(modifier = Modifier.fillMaxSize()) {
                Box(modifier = Modifier
                    .fillMaxHeight()
                    .fillMaxWidth(0.3f)
                    .clickable {
                        scope.launch {
                            lazyListState.scrollBy(-screenHeightWithInsets)
                        }
                    }
                )
                Box(modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .fillMaxHeight()
                    .fillMaxWidth(0.3f)
                    .clickable {
                        scope.launch {
                            lazyListState.scrollBy(screenHeightWithInsets)
                        }
                    }
                )
            }

This works kinda good, moves you to the next "page" by scrolling exactly one screen further/backward, except bottom and top lines can be cut. Problem is to efficiently hide/move overflown text.

Second example is Readera. I think it has great paged layout, it processes text super fast, correctly cuts overflown lines. This time I tried to use HorizontalPager, which, of course looks much better, but creates much more problems. I will not include here an example, as it is complicated and even less performant, but you can look at StackOverflow question, which is where I got "idea" about implementation.

Problem is to correctly measure, cut and process overflown text, ensure performance and make it not-take-10-fucking-minutes-to-process.

What I propose

Of course, I thought about some ways of making it at least close to paged layout.. And here is what I came up with:

Using the first example, but letting user freely scroll up and down. Essentially it is not "paged" layout, but more like convenient tap zones and gestures to scroll exactly by one screen height, imitating "pages". Also provide top and bottom margin support as side feature, for better readability when using only (at least as much as possible) paged layout.

• Pluses
  • Freedom to user, can both scroll and go to the next page with gestures/taps.
  • Large amount of possible customization: Different tap zones, gestures, combinations, maybe "page" switching effects.
  • Does not impact performance nor loading time. Simply as fast as current reader is (which is not really, but I can improve that).
  • No problems with progress tracking. Progress will work exactly the same.
• Minuses
  • Does not fully cover "paged" layout.
  • No separation into pages. Brings less customization to variants of showing text (like pages/free scroll option)
  • Cuts words at the top and the bottom. User scroll up/down may be needed after going to the next page to see full text.

In the end, what I propose is more page like gestures/tap zones for Reader, not Pagination.

How can you help?

What I need is possible different solutions, workarounds or ideas. I would really appreciate a fresh look on this topic, maybe your eyes will tell you more than mine do. If you know matching libraries / projects, where this layout was implemented (Jetpack Compose!) this will also help. I know this feature is really important as for Reader and I'd say crucial, that's why I want to do at least something.

[Acclorite]

Also, I think it would be easier to understand if showing with an example, so here's my proposal's expected gestures behavior.

gestures_test.webm

[nNoidea]

Please add an paginated layout to make it look more like an ordinary book :) Great work!

I like this idea mainly due to how easy it is to accidentally scroll in scroll mode.