search

love2d-community / love-api

The whole LÖVE wiki in a Lua table.
http://love2d-community.github.io/love-api/
299 stars 46 forks source link

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

Open karai17 opened 2 years ago

karai17 commented 2 years ago

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

image

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

image

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

image

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 commented 1 year ago

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 commented 1 year ago

@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 commented 4 months ago

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

karai17 commented 4 months ago

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

MikuAuahDark commented 4 months ago

What about the font size?

karai17 commented 4 months ago

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

image 100% scale

MikuAuahDark commented 4 months ago

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 commented 3 months ago

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 https://github.com/love2d-community/love-api/issues/103#issuecomment-2119498343, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEQD7ARNUN76KICUBCIKBLZDFEWBAVCNFSM5ROJMITKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJRHE2DSOBTGQZQ . You are receiving this because you authored the thread.Message ID: @.***>

MikuAuahDark commented 3 months ago

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 commented 3 months ago

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.