search

curiousdannii / parchment

The Interactive Fiction web app
https://iplayif.com
MIT License
421 stars 60 forks source link

Multi-line grid windows have striped backgrounds on HiDPI macOS #93

Closed dfabulich closed 2 years ago

dfabulich commented 2 years ago

https://iplayif.com/?story=https%3A%2F%2Fifarchive.org%2Fif-archive%2Fgames%2Fzcode%2Fanchor.z8 https://iplayif.com/?story=https%3A%2F%2Fwww.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2Fphotopia.z5

I'm on macOS Monterey 12.0.1 on a MacBook Pro (16-inch, 2021). When I click that Anchorhead link (or when I play a few steps into Photopia) I get weird striped backgrounds on multi-line grid windows.

I'm not able to reproduce this problem on HiDPI Windows 11 ARM running in Parallels on the same device.

image

curiousdannii commented 2 years ago

Isn't this the same as #84?

dfabulich commented 2 years ago

I forked it off of #84 because Bronze is having a separate problem with resizing grid windows. This issue doesn't require resizing and only affects macOS; the Bronze issue exists on both macOS and Windows.

dfabulich commented 2 years ago

Well, I can't explain why, but the problem appears to be using the Monaco font on macOS. I guess it has different … font … dimensions …??

Removing Monaco from the list of fonts fixes it on my machine, because it skips right over "Source Code Pro" (which is not included with Parchment, and so will never be used by Chrome, as I understand it) and then onto Courier, which doesn't have this issue.

I think the "best" solution here is to embed Source Code Pro with Parchment and remove Monaco from the font list. (Source Code Pro definitely looks nicer than Courier IMO!)

curiousdannii commented 2 years ago

The fontstack is just inherited from Quixe's I7 template, I didn't give it much thought. I think I'd be happy with checking in a font. My main concern would be the filesize, some fonts get quite big. WOFF2 would help with that though.