HTML Readability issues

[Nobody Cares]

I just launched the first chapter of my first game ever here.

The feedback has been very encouraging, but many players suggested I improve the readability. I must admit that the default white on black format may not be that easy on the eye, especially after a 18000 words read.

Any pointers on how I could make this thing more readable?

 

[MissFortune]

To be frank, and it'll probably be a bit of work, but I'd highly recommend you move to Sugarcube (see any popular HTML game. College Daze, Transfigure, The Good Son, etc. They all work off of Sugarcube.). The default layout and color scheme for Sugarcube are inherently more readable as they tend to resemble more of a "Dark mode" than a white-on-black text reader.

If you're doing purely text-only, then the default should be more than adequate. However, if you're apt at any basic HTML/CSS, then you can customize it a bit further to make it look a bit more unique or add your own elements to it. In short, with Sugarcube, it can look like any of the above, or full (nearly) new layout in something like The Making of a Slut.

There's also a lot of help out there, specifically guys like HiEv and chapel-R who have some handy guides posted for beginners. The Twine reddit is also probably worth a look.

 

[Nobody Cares]

To be frank, and it'll probably be a bit of work, but I'd highly recommend you move to Sugarcube (see any popular HTML game. College Daze, Transfigure, The Good Son, etc. They all work off of Sugarcube.). The default layout and color scheme for Sugarcube are inherently more readable as they tend to resemble more of a "Dark mode" than a white-on-black text reader.

If you're doing purely text-only, then the default should be more than adequate. However, if you're apt at any basic HTML/CSS, then you can customize it a bit further to make it look a bit more unique or add your own elements to it. In short, with Sugarcube, it can look like any of the above, or full (nearly) new layout in something like The Making of a Slut.

There's also a lot of help out there, specifically guys like HiEv and chapel-R who have some handy guides posted for beginners. The Twine reddit is also probably worth a look.

I was already considering to sugarcube while still early in development. I'm not sure which version is the best so I am going for the latest. Thanks for the pointer

 

[anne O'nymous]

The feedback has been very encouraging, but many players suggested I improve the readability. I must admit that the default white on black format may not be that easy on the eye, [...]

Increase the contrast by having a slightly yellowish white and adding a bit of blue in the black background. Chose a font that is easier to read, and increase a bit the space between each characters, as well as between lines.
Personally when I had to make a dark theme I used to use a #FFFFE0 as color, #000005 as background, with 1 pixel more for the kerning and line spacing. But it was more a question of personal taste than anything else, you can change the values a bit.

On top the default white on black, below the slightly tweaked style:

As you can see, the difference is almost not noticeable. But it lead to something less tiring for the eyes, and all return I had regarding the readability were always positives.

 

[Nobody Cares]

So I tried to do as MissFortune suggested and changed the format of the whole game to Sugarcube. I must admit, the little bit of extra work was worth it. It should appear as follows:



The only problem is that, for the life of me, I couldn't find the code to make header appear bigger or with a different font (in this specific case, I am referring to the word "Warning"). Can anyone tell me how to do that?

Also, I followed anne O'nymous's advice and I believe the readability to be way better. What say you?

 

[guest1492]

You can use html tags directly for SugarCube. So just wrap that with an HTML element and style it. Examples:

<h1>Warning</h1>

<h2 style="text-decoration: underline;">Warning</h2>

<center style="font-weight: bold;">Warning</center>

<div style="text-align: center; font-weight: bold; font-size: 24px; text-shadow: 0 0 5px #800; text-transform: capitalize; letter-spacing: 2px;">Warning</div>

NOTE: There's no need for inline CSS if you also include CSS file(s) or put that in your story stylesheet.

 

[anne O'nymous]

I believe the readability to be way better. What say you?

Hard to say with just a sample, but it seem good for me, and I have nearsighted and farsighted eyes, while also being astigmatic (yeah, my eyes sucks, especially now that I'm old), so I guess it should be fine.

 

[Nobody Cares]

You can use html tags directly for SugarCube. So just wrap that with an HTML element and style it. Examples:

<h1>Warning</h1>

<h2 style="text-decoration: underline;">Warning</h2>

<center style="font-weight: bold;">Warning</center>

<div style="text-align: center; font-weight: bold; font-size: 24px; text-shadow: 0 0 5px #800; text-transform: capitalize; letter-spacing: 2px;">Warning</div>

NOTE: There's no need for inline CSS if you also include CSS file(s) or put that in your story stylesheet.

Worked like a charm. Thank you, sir wizard.

Hard to say with just a sample, but it seem good for me, and I have nearsighted and farsighted eyes, while also being astigmatic (yeah, my eyes sucks, especially now that I'm old), so I guess it should be fine.

All thanks to your pointers. Iou