Higher resolution symbol previews in search results

[johnbillion]

The 16px symbol previews in search results are tiny and poor quality, and sometimes don't visually represent the symbol very accurately.

In lib/view.class.php I altered the logic in _cp() so the symbol is always output with $c->getChar() instead of $c->getImage(). This results in a vector symbol that can then be scaled up in CSS.

Before:

After:

While it makes the search results significantly nicer to browse, it does mean that some symbols (eg. 009D and 009F in the screenshots) don't have a visual appearance, and some browsers/platforms may not display all the symbols.

Is there a means of generating larger preview images? The base64 encoded images in the codepoint_image.image database field are just 16x16 in size.

[Boldewyn]

Thanks for the issue! I agree, that the images are too small and would better be scaled up a bit.

Visually displaying as much code points as possible is a core requirement, that I imposed on myself for this site. Unicode references are a dime a dozen, but the ones going the extra mile to display glyphs reliably are sparse. So, this rules out replacing the images with simple characters and letting the browser render them with locally installed fonts (how's your system equipped with Rune glyphs?).

I was lucky to find GNU Unifont, which is a "bitmap" font (not technically, but it's optimized for a fixed pixel size) of basically the whole BMP. That's the main reason the previews are the size they are. If you hover over one, it's magnified by exactly factor 2, so that one doesn't notice unsharp edges of the pixel image. In a build step I take all glyphs from Unifont and convert each into a 16x16 PNG image, that's then stored in the DB along the other codepoint data.

Of course that solution is not optimal. I'm experimenting in a local branch with a different approach: Using the Noto fonts (and some others as fallbacks), converting them to SVG fonts, taking the path data from each glyph and putting that into the DB. There are some problems that I have to overcome, but all in all that seems to be a viable way to get razor-sharp images in any size onto codepoints.net.

I'll try to get the feature branch into a better shape and tell you here, when there's anything to see.

[johnbillion]

how's your system equipped with Rune glyphs?

I looked through some Rune characters and Chrome tells me they're being rendered in Geneva. I'm using Chrome on Mac OS Sierra.

[johnbillion]

I'll try to get the feature branch into a better shape and tell you here, when there's anything to see.

Great! Thanks. Happy to take a look.

[Boldewyn]

Fixed in the new layout. We’re now using Noto Sans as font for more or less all code points. By using SVG shapes we can scale the representations up to whatever size we like.