"Reader Mode" theme component feedback

Yeah these are great suggestions. Not sure how I’d accomplish it via just a theme component, but it’s cool to think about.

Also, today I added an update to the component which adds some readability settings.

One issue I found though is that it is interacting poorly with our DiscoTOC component installed here on meta. I have some ideas on how to fix it and will try to get to that this week.

3 Likes

Very nice component. Two suggestions:

  • I think Palatino is a good addition for Reader Mode.
  • Line height would be a useful slider to add.
2 Likes

Nice!

It looks like this way if you are not an admin/mod.
Do you think it would be possible to keep the icons in the same place without moving them? :thinking:

2 Likes

Thanks, this is actually just due to the discoTOC theme component we have installed here on dev. I will work this week on getting the two components playing nicely together.

2 Likes

It would be awesome if we could “store” my reader mode settings so they persist across topics. From a technical standpoint, there are many ways we could do this.

2 Likes

I wonder how we could improve the flickering/refreshing/ghosting when the setting is used:

1 Like

Great idea!

Ooof that’s a lot of jitter! What browser is this? Im not seeing this in chrome.

Chrome 124.0.6367.61, windows 11 :smile:
I did try without any extensions and it’s the same.

I think it’s because the positioning (top) is being constantly updated when it should not (the top value seems to be influenced by the font size, the panel should be static here :thinking: )

On Firefox, it does the same, however, sometimes (could not figure out reliably yet), the positioning doesn’t update, then it’s smooth:

I will try to give better feedbacks later.

1 Like

I’m not exactly sure if this will help, but your post gave me an idea.

For the width slider, the step increment was super small, set to 1px, and it seemed smooth.

The font step was too large though, and I’ve decreased it tremendously. So font size changes should feel a bit more smooth now, at least in terms of actual text increase & decreasing in size.

The top positioning of the settings menu you mean?

1 Like

Yes, the settings panel. It seems to be relative to the main outlet, seeing the big number.

I wonder if the settings panel could be relative to the timeline controls. I’m not sure if that’s feasible, though.

For example, If I move the panel there, you can see the positioning doesn’t change because, relative to the timeline, that doesn’t move. Do you see what I mean?

Technically it is, but I am using a built in discourse component <DMenu>. I may have to ask the owner for some input on what is going on there.

1 Like
EDIT: Nah, bad idea, don't follow this, please.

You’re right!

I think there is a way of telling DMenu in what container you want to insert your code, using this.menu.registerPortalOutletElement.

I did a test by creating a container in .timeline-controls and then passing that container element to registerPortalOutletElement, and it worked for me. I don’t know if this is the best way, but it did the job. :thinking:

See below

Thanks Joffrey!

1 Like

IIRC that’s only designed to be used once, when the app boots. Calling it later will move all future DMenu invocations to that element, so it’ll break a ton of other stuff :sweat_smile:

2 Likes

OH. :sweat_smile: My bad. I thought it was set whenever the component was inserted; I even tested it before posting. I probably got confused with the inline menu, then. Never read code when you’re tired ahah.

EDIT: I just checked again, and yes, it’s set once. I was lucky it didn’t break anything. :smile:

2 Likes

Thanks for this component, I am really enjoying using this component! I would love to see:

  1. Color options in the reader mode options. I personally like to keep Meta in light mode, but it would be nice if I can switch to dark/sepia color scheme while in reader mode.

    Similar to Safari’s reading mode:

  2. I would love if clicking on the outside of the topic cancels reader mode rather than needing to press the button again.

  3. It would be nice if the reader mode settings persist across topics as well as if there is a :arrows_counterclockwise: Reset button to bring it back to default settings.

  4. It would be nice if the avatar flairs also had reduced opacity. It seems like they are more emphasized in reader mode because they are in full color.
    Avatar flair

4 Likes

@Arkshine our very own Joffrey kindly updated core. You can now use @inline={{true}} in <DMenu> to render the pop up inline within the container.

The update is now live here on meta.

3 Likes

This is great, It’s actually the UI I would like to get to eventually. I stuck with simple browser defaults for now in terms of font size, selection, & content width.

I also really like The Arc Browsers UI for their boosts feature

Though I will steer clear from letting wingdings be a font family you can use in reader mode :stuck_out_tongue_winking_eye:

2 Likes

Awesome! :tada:

No more jittering on my side. All good! Thanks, both of you :+1:

3 Likes

I love this and expect most of our users will love it too. Unfortunately, the mismatch in opacity highlighted by Keegan is also the thing that’s holding me back from adding it to our instance:

I actually prefer it in the other direction, where the user profile and flair remain full colour, however I agree that the real issue is the mismatch between opacity of flairs and profile pictures.

The other three points from Keegan elegantly sum up everything else I was thinking.

Can’t wait to see more development on this :star_struck:


Edit:
Comment from a colleague:

I like it! So much that I would even be interested in being able to choose that having it active is the default"

4 Likes

I’ve updated this today. :smile: Thanks for the kind words, I am happy you are finding it useful.

1 Like