jspaint icon indicating copy to clipboard operation
jspaint copied to clipboard

UI Font

Open sophuric opened this issue 6 years ago • 3 comments
trafficstars

The font for Windows 95/98 is actually MS Sans Serif, so you can select that for the font-family.

sophuric avatar Mar 11 '19 08:03 sophuric

I've found the font file for MS Sans Serif, so I uploaded it to my stuff repository.

sophuric avatar Mar 11 '19 08:03 sophuric

What you currently have:

foo {
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
}

What it should be: (I've also added more backup fonts)

@font-face {
  font-family: "MS Sans Serif";
  src: url("https://github.com/wooden-utensil/My-Stuff/blob/master/sserife.fon?raw=true") format("fon");
}
foo {
  font-family: 'MS Sans Serif', 'Futura', 'Avenir', 'Arial', 'Segoe UI', sans-serif;
  font-size: 12px;
}

Just so you know, the URL is the path to my MS Sans Serif

sophuric avatar Mar 15 '19 21:03 sophuric

I would've already made it use a pixel font, but the web platform doesn't support bitmap fonts natively, and it seems blurriness is inescapable with vectorized pixel fonts. In particular when text is centered, or within a centered element, it leads to half-pixel offsets depending on whether the container has an even or odd width. (Shouldn't font hinting be able to handle that? But I think if it were possible, people would be doing it already.)

I've done some experiments with rendering text using an overlay canvas, which would avoid blurriness by staying in the raster realm, but there's a lot of complexity there. I implemented font styles and text selection rendering, but not wrapping text, which is a complex topic unto itself. To get this working flawlessly essentially means reinventing the browser's text rendering, and more to handling occlusions, element transformations, etc. It might be even more complicated than rewriting the whole app to render to a single canvas.

So long story short, it needs to be an option, and so I've shied away from it because I don't like introducing options and I don't have a settings window yet. But it could be thrown in the Themes menu I suppose.

1j01 avatar Aug 26 '22 00:08 1j01