# "Reader Mode" theme component feedback

**URL:** https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314
**Category:** Feature
**Tags:** feedback, completed, reader-mode
**Created:** [April 17, 2024, 1:55pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314 "2024-04-17T13:55:07Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 22, 2024, 10:06pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/21 "2024-04-22T22:06:18Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [April 23, 2024, 5:13am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/22 "2024-04-23T05:13:00Z")

</div>

Very nice component. Two suggestions:

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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 23, 2024, 6:14am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/23 "2024-04-23T06:14:00Z")

</div>

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? 🤔

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 23, 2024, 2:37pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/24 "2024-04-23T14:37:18Z")

</div>

> [@Arkshine](#):
>
> 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?

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.

---

<div class="post-metadata">

### Author: ![isaac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/isaac/32/235758_2.png) [@isaac](https://meta.discourse.org/u/isaac)
#### Post date: [April 23, 2024, 5:37pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/25 "2024-04-23T17:37:02Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 23, 2024, 6:06pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/26 "2024-04-23T18:06:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 23, 2024, 7:26pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/27 "2024-04-23T19:26:53Z")

</div>

> [@isaac](#):
>
> 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.

Great idea!

> [@Arkshine](#):
>
> I wonder how we could improve the flickering/refreshing/ghosting when the setting is used:

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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 23, 2024, 8:11pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/28 "2024-04-23T20:11:42Z")

</div>

> [@jordan.vidrine](#):
>
> Ooof that’s a lot of jitter! What browser is this? Im not seeing this in chrome.

Chrome 124.0.6367.61, windows 11 😄  
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 🤔 )

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.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 23, 2024, 8:51pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/29 "2024-04-23T20:51:11Z")

</div>

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.

> [@Arkshine](#):
>
> 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 🤔 )

The top positioning of the settings menu you mean?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 23, 2024, 9:36pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/30 "2024-04-23T21:36:15Z")

</div>

> [@jordan.vidrine](#):
>
> The top positioning of the settings menu you mean?

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?

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 23, 2024, 9:52pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/31 "2024-04-23T21:52:28Z")

</div>

> [@Arkshine](#):
>
> I wonder if the settings panel could be relative to the _timeline controls_. I’m not sure if that’s feasible, though.

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.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 23, 2024, 10:52pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/32 "2024-04-23T22:52:20Z")

</div>

> **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. 🤔

See below

> [@"Reader Mode" theme component feedback](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/36):
>
> @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.

Thanks Joffrey!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [April 24, 2024, 8:33am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/33 "2024-04-24T08:33:21Z")

</div>

> [@Arkshine](#):
>
> registerPortalOutletElement

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 😅

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 24, 2024, 10:56am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/34 "2024-04-24T10:56:26Z")

</div>

OH. 😅 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. 😄

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [April 24, 2024, 5:29pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/35 "2024-04-24T17:29:35Z")

</div>

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.

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 🔄 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.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 24, 2024, 8:33pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/36 "2024-04-24T20:33:44Z")

</div>

@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.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 24, 2024, 8:35pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/37 "2024-04-24T20:35:16Z")

</div>

> [@keegan](#):
>
> ![The image displays a pop-up menu for font selection with various font names listed, such as "Athelas," "Charter," "Georgia," and "Iowan," which is currently selected as indicated by a checkmark. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/c/9/e/c9e231275c631f4004ed7f05239e3480bb17c5ed.png)
> 
> The image displays a pop-up menu for font selection with various font names listed, such as “Athelas,” “Charter,” “Georgia,” and “Iowan,” which is currently selected as indicated by a checkmark. (Captioned by AI)878×934 195 KB

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/a/4/ba442a1d0e42e20eddd159129acf16d6fa8d2c55.png)

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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 24, 2024, 9:55pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/38 "2024-04-24T21:55:53Z")

</div>

Awesome! 🎉

No more jittering on my side. All good! Thanks, both of you 👍

---

<div class="post-metadata">

### Author: ![Tris20](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tris20/32/264639_2.png) [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [April 26, 2024, 9:27am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/39 "2024-04-26T09:27:34Z")

</div>

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:

> [@keegan](#):
>
> 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.

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 🤩

* * *

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"

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 29, 2024, 8:43pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/40 "2024-04-29T20:43:56Z")

</div>

> [@Tris20](#):
>
> I agree that the real issue is the mismatch between opacity of flairs and profile pictures.

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

[Previous page](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314.md?page=1)

[Next page](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314.md?page=3)
