Font size is too small, page does not respond to zoom well

[karai17]

Title says it all. On my 27" 1440p monitor at 100% scaling in Windows, the page looks like this:

Text is hard to read so I try zooming to 200%:

You can see the sidebar gets cut off on the bottom.

Also not sure what's up with the first two items in the list but figured I'd screenshot it too~

If I were to make a suggestion, you could create a couple font size buttons for users to be able to select. Maybe Small: 10pt, Normal: 16pt, and Large: 20, 22, or 24pt?

[MikuAuahDark]

I looked at the code to generate the HTML and looks like it misuse the <details> and <summary> tags. I don't know how to fix it as it breaks other parts of the page when I change it. Furthermore most the position units are specified as pixels, which is the reason why it doesn't scale properly.

A rewritten HTML generator is probably needed but I can't do it without @hahawoo permission as it's their code.

[hahawoo]

@MikuAuahDark Thank you for being courteous but my permission is not necessary. :) Anything I have done for this project is public domain, no one needs my permission to change anything, and I also do not claim any ownership or control of any part of this project.

[MikuAuahDark]

What about the new page? Does it solve the issue?

[karai17]

looks like the sidebar is now fixed when i scale the page up to 200%.

[MikuAuahDark]

What about the font size?

[karai17]

doesn't really look any different, i still feel the need to scale it up to 200%

100% scale

[MikuAuahDark]

The font size should be slightly increased now. If it's still looks too small to you then I don't think there's much we can do anymore. We have to make compromise between having font size for extraordinary scaling like yours or mobile-friendly.

[karai17]

are you using a responsive design? that should be able to adjust the layout and font sizes based on the screen size and shape. most websites that have a responsive design allow for mobile all the way to 1080p monitors. i often have to scale websites to 150% bit this site i need to scale to 200%.

…

On Sun, May 19, 2024, 22:12 Miku AuahDark ***@***.***> wrote: The font size should be slightly increased now. If it's still looks too small to you then I don't think there's much we can do anymore. We have to make compromise between having font size for extraordinary scaling like yours or mobile-friendly. — Reply to this email directly, view it on GitHub <#103 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEQD7ARNUN76KICUBCIKBLZDFEWBAVCNFSM5ROJMITKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJRHE2DSOBTGQZQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[MikuAuahDark]

Yeah. For 1800px, the font size will be 18px. If you have more insights about how to fix this, feel free to check out the gh-pages branch and let me know. Thank you.

[karai17]

looking through the CSS on the gh-pages branch, I have a few thoughts.

1. there is some inconsistancy between use of absolute and relative units. IMO all font sizes should be based in pt rather than px, and font scales in em. So for example, the body font size could be 12pt and then the headers could be 1.4em, or something to that effect.
2. There are some style rules that decrease the font size to 0.9em and I think all of those should be removed.
3. Font sizes in general are just too small. Using Chrome's viewport developer tool, scaling my viewport down to a mobile device screen to force the media queries to activate, the text feels too small in every size I try. Checking on my own phone as well feels really small.
4. The media query min-width cut off points feel rather arbitrary. 1400, 1600, 1800px don't really map cleanly to anything in the real world that I am aware of. IMO a better way to think about this would be to set up queries that target specific form factors. default styles would be for mobile phones, then a query that is designed to trigger on tablets (min-width: 768px), then low end laptops (min-width: 1366px), then higher end laptops / lower end destops (min-width: 1920px), then maybe another rule for higher end desktops (min-width: 2560px). Most sites don't bother past 1080p (1920x1080) so i'm used to scaling up pages to 150% to make the page "look" close to 1080p. someone with a 4K monitor or TV would have to scale to 200% to get the same "1080p" look.