codensuch
patreon
Server side rendering! A comparison
🕑 Added 2021-07-28 07:03:08 +0000 UTCIf you followed my last post you'll remember that one of the reported issue was that the font rendering on Windows looked too thin while macOS and Linux doesn't have this issue. ClearType on Windows seems to affect text rendering regardless of which browser was used. So in order to produce consistent text rendering across all platforms, all text are now pre-rendered on the server side using a custom renderer. Then the image is sent to the web app and applied over the page. There are other a few other advantages as well:
- total control over font render rather than letting browser dictate rendering, thus prettier looking text
- more accurate text alignment
For example, the left is server rendered, right is Firefox rendered in Linux:
The differences are subtle, but you can see that the bold on server render is more pronounced, and the vertical alignment of the text is slightly more accurate compared to the locally rendered. This is because the in the text positions of the locally rendered version are calculated using the server render then remapped onto the browser. This remapping causes loss in positioning precision due to rendering engine differences. But this is no longer an issue as the text now IS the server side image. The downside of course is slightly higher bandwidth usage, but who cares.
Now that this issue is out of the way, we finally get to the thing that many are waiting for: batch cleaning. I'll update again when I have a mock UI design up to gather some initial feedback. Stay tuned!
