klembot / twinejs

Twine, a tool for telling interactive, nonlinear stories
https://twinery.org
GNU General Public License v3.0
2k stars 295 forks source link

Please, let us choose passage editor font color and background color. It's needed for readability. #1378

Open randomname42 opened 1 year ago

randomname42 commented 1 year ago

Is your feature request related to a problem? Please describe.

Edit: This got kind of wordy. There's a more concise description of the problem in the "additional context" section.

I saw today in Discover that the Linux flatpak for Twine was updated to 2.6.1. I installed it and immediately found regret. If I knew of a way to revert to a previous version of a flatpak I would, because the I am having that bad of a problem with the change to how passage editing looks.

My only pc is a Steam Deck. The screen is small. Readability can be a very big issue in some games or programs because of the small screen size. Despite that fact, before updating to the 2.6.1 flatpak, I was not having any readability issues or eye strain using the passage editor in Twine.

Right away upon opening the passage editor after the update, it was very clear how much harder it was to read. I looked at the settings and saw that now there were options for font and font size (I don't remember there being settings for that in the previous version).

However, after trying for literally more than three hours I have been unable to to figure out a combination of font, font size, and boldness amount (for fonts which have boldness variants) which is clear and comfortable to read, for both code and normal text.

The best I could describe it, the passage editor in dark theme used to cause no discomfort or eye strain, whether I was looking at code or normal text. After the update, I can get font and size combinations where either code, or normal text looks fairly comfortable to read, but not both. And in no case could I say it's as easy to read or comfortable as it was before the update.

There's several causes for this.

  1. There's no way to set the background color.

Dark mode is more comfortable for my eyes on the small Steam Deck screen. Or at least, it used to be. Edit: I had this backwards but I corrected it now. After this update the background color of dark theme in the passage editor got much darker. That has made reading text and code in the passage editor in dark mode much harsher on the eyes, at least on a small screen like the steam deck. I think it would be noticeably harsher on a normal screen too, tbh. But absolutely, being able to lighten the background color would help. I would set it back to what it was in 2.3.16 if I could.

  1. There's no way to set font boldness/intensity/transparency (whatever you want to call it) and no way to set font color.

One of the reasons I've had so much trouble getting it comfortably readable is that fonts (and font boldness variants) are either too light to be easily readable, or to bold to be comfortable to read for any length of time. Either way it's eye strain.

Being able to either set font color or font boldness (ideally both) should get rid of that problem.

  1. Font size is in percentage instead of normal font sizes.

I can go to kwrite (Linux text editor) and see what different fonts look like at different sizes easily. But I can't replicate the exact size in Twine because Twine editor setting is using font percentage instead of traditional font size (which has been used in every other text editor that I can think of). That doesn't help either.

Describe the solution you'd like.

I already said it, but being able to set passage editor background color, font color, and font boldness should be a solution.

Honestly, having a setting that's exactly the same for passage editor as it was in Twine before 2.6 would be great. (Linux flatpak Twine was 2.3.16 before this.). Twine 2.3.16 that was in the previous flatpak version, I had absolutely no readability issues with that. A built in "use legacy passage editor settings" would be very valuable too.

Describe alternatives you've considered.

I spent over three hours methodically trying every font that was installed at multiple sizes and, when the font had multiple boldnesses, multiple boldness values at multiple sizes too. I was unable to get passage editing to be comfortably readable because fine tuning/contrast options like background color and font color/boldness aren't there.

I ended up switching to light theme. That seems like it's going to be somewhat more readable. But it's not near as comfortable as dark theme was before the update. It's just the least-bad option I've found. In all honesty I genuinely think I'm going to be less productive in Twine because of this issue until it can be improved, which is very disappointing.

I imagine some people who have readability issues in general (not related to being on a very small screen) may also run into problems because of the lack of contrast control.

Additional context on this suggestion.

Edit: I've downloaded Twine 2.3.16 from twinery.org and started using it instead. I did a story back up beforehand just in case but I haven't seen any problem so far.

Wow, 2.3.16 passage editor in dark theme was even more gentle on the eyes than I realized. I took a sceenshot and did a side by side comparison to the new Twine dark mode passage editor. That darkness of the background is absolutely killing the readability of the passage editor in Twine 2.6. That dark background is the cause of the harshness without a doubt.

I figured out the exact font that Twine 2.3.16 was showing in the passage editor (source code pro at 100%). On Twine 2.3.16 that looks great with no readability issues at all. It's genuinely comfortable on the eyes even on a small screen like the Steam Deck has.

On Twine 2.6.1 however (same font, same size) it looks so harsh on the eyes. It's too bright in comparison to the dark background. There's a "source code pro light" font version but that goes too far in the other direction and is simply too dark to be easy to read. There's no in-between. All fonts I've tried had this problem. That too dark background color makes every font look harsh on the eyes.

And that's the essence of the problem. With no control over the background color and the font color/intensity there's just no way to make it pleasing on the eyes if the default is very uncomfortable for you.

Being able to change the font used and font size isn't enough to be able to make it not harsh on the eyes.

Presubmission checklist

klembot commented 1 year ago

I checked in the WebAIM contrast checker and the dark mode contrast has increased in 2.4+ to 8.12:1, from 5.31:1 in Twine 2.3. The hard part here is that by most accessibility standards, that's a good thing. The text contrast in Twine 2.4+ passes the WCAG AAA standard, whereas in 2.3 it didn't.

Even so, accessibility is not an absolute and the idea of a dimmed-but-not-dark theme is possible, as is I suppose allowing the customiztions asked for here. I'd want to hear more people asking for this, however, before I'd consider implementation. Anecdotally, I feel that the more common complaint is that there isn't enough contrast in the UI.

TurtleXing commented 1 year ago

I checked in the WebAIM contrast checker and the dark mode contrast has increased in 2.4+ to 8.12:1, from 5.31:1 in Twine 2.3. The hard part here is that by most accessibility standards, that's a good thing. The text contrast in Twine 2.4+ passes the WCAG AAA standard, whereas in 2.3 it didn't.

Even so, accessibility is not an absolute and the idea of a dimmed-but-not-dark theme is possible, as is I suppose allowing the customiztions asked for here. I'd want to hear more people asking for this, however, before I'd consider implementation. Anecdotally, I feel that the more common complaint is that there isn't enough contrast in the UI.

Coincidentally adding colour customization settings for twine would help several of the other issues people (myself included) have been having with twine. People have been asking for this, just maybe not directly.

Here are some of other issues that would benefit from colour customization: https://github.com/klembot/twinejs/issues/1240 https://github.com/klembot/twinejs/issues/1211 https://github.com/klembot/twinejs/issues/1241

And preventing the below issue from being re-encountered by users with other types of colour blindness https://github.com/klembot/twinejs/issues/611