I built my business around font rendering!
Shout out to Behdad https://en.wikipedia.org/wiki/Behdad_Esfahbod a one of a kind man doing god's work. If you've seen text on a screen, you've seen Behdad's work. I've had the lucky opportunity to chat with him briefly and he personally helped me debug a text rendering problem. He's a great guy!
Glyphs are registered, text is shaped, and everything is drawn via a ballet of various libraries, often with Pango and Cairo: https://pango.gnome.org/ https://docs.gtk.org/PangoCairo/
By the way, if you think this is interesting, you might also be curious to read about how fonts are installed/registered on Unix systems. It is a rabbit hole involving a key piece of software on pretty much every computer in the world called Fontconfig (also by Behdad) https://en.wikipedia.org/wiki/Fontconfig
Text and fonts are HARD. Give a hand to those who work tirelessly behind the scenes on this stuff for us.
( Shameless plug of my site https://fontpeek.com/ )
AA is bad if you do not have a concept of how gamma works.
If you have a program[1] that does not understand the difference between sRGB and Linear RGB, the color fringing is extremely nasty, especially on light-on-dark situations. If they don't get the gamma wrong, they get the blend mode wrong (cough Alacritty at one point cough)
The fix, honestly, is moving to 200% resolution screens (such as 4k 24" replacing everyone's 1080p 24", or 2880p 27" replacing everyone's 1440p 27"), and using greyscale AA: fonts are now so big, pixelwise, that hinting doesn't screw up fonts, hand hinting is no longer relevant, and any given renderer has a lot of trouble screwing it up. Greyscale with wrong gamma and/or wrong blend mode isn't fatal, it is fatal with subpixel.
1: Such as ClearType on Windows, but not the modern DirectWrite engine. Win10 tried to improve ClearType to make it look more like DirectWrite, but only made its error less harsh. Early versions of Freetype that had subpixel rendering also did this wrong.
Another Fun(tm) rendering bug: In Firefox, when a word is split across lines between two characters normally connected by a ligature, the ligature doesn't get disabled and the two characters rendered separately, but the ligature is sliced in half and rendered across lines:
- https://bugzilla.mozilla.org/show_bug.cgi?id=479829
- https://bug479829.bmoattachments.org/attachment.cgi?id=36373...
> Greyscale-AA is the “natural” approach to anti-aliasing.
> Subpixel-AA is a trick that abuses the common way pixels are laid out on desktop monitors.
I disagree with this notion of subpixel-AA being "abuse". If anything, grayscale AA is a simplification, assuming that each color component of a pixel is emitted from the same area. Of course subpixel-AA is more complicated, but it doesn't mean that it's abuse.
If text rendering hates you, an editable text renderer is 10x worse.
Anyone who has spent any time working on contenteditable or any of the browser based rich text editors knows what a nightmare it is. The temptation to abandon all hope and start from scratch with a canvas element and build you own renderer and editor is strong. You start researching how to do it, maybe even create a quick prototype but quickly discover all the edge cases in this article and more.
People who have spent significant parts of their career fixing all the inconsistencies between browsers and devices such as Marijn Haverbeke with ProseMirror (and CodeMirror) should get a Gallantry award for the work they have done.
Oh this article is back! This is a shot in the dark, but perhaps someone could help me; I remember a link was posted at one point or another about font rendering as well, but from a design perspective about the considerations that need to be taken when designing a font, how glyphs are connected for different languages, etc. - it was presented quite beautifully, with many highlighted examples. Unfortunately all I remember from the site was that it had a green/teal theme to it :( and I haven't been able to find the link ever since
Does anyone have any clue what I'm talking about? Pointers would be appreciated :)
Interesting read. I remember having to implement Unicode support and RTL in a graphic library (based on some version of InkScape, if I am not mistaken) that was code page. I implemented it using Uniscribe. The article 'Uniscribe: The Missing Documentation & Examples' was of great help implementing it. However, when I had to implement fallback fonts (for when the standard font does not contain the character you want to display and you want to get it from a different font) I got stuck because I discovered that at time (around 2015/2016) it was not implemented because MicroSoft had replaced Uniscribe by something new.
There is also something interesting about the cursor moving through a miked LTR RTL text. It jumps over a character, meaning that it goes through different location depending on whether you move forward or backwards through the text, where forwards means that the cursor moves backwards on the screen when going through a bit of RTL text.
> 6.1 Fonts Can Contain SVG
This is amazing-- it means someone can design a font where glyphs consist only of SVG elliptical arcs!
Ooh even better-- the font designer could place the arcs in such a way that setting large-arc and sweep flags would generate different glyphs.
If someone has not designed such a font in the year 2022 then what are the large-arc and sweep flags even for? How can we seriously continue calling this site Hacker News? Why isn't this very comment full of SVG arcs?!?
Edit: OMG what about animating the large-arc and sweep flags in an SVG-based font? I want a transition that starts at war with Eastasia on a Monday and ends on war with Eurasia on a Tuesday.
We have the technology
Having different styles for elements in ligatures makes sense in some other situations too.
E.g. you want to emphasise the accent on a letter when you are teaching the language, I found myself doing exactly that with Hebrew and punctuation, and I stumped upon this problem
Excellent summary. Text rendering and content creation and layout (of which text is fundamental) are central to the creative experience on a computer. Anyone know any well-known (or otherwise) fora for discussing these kind of existential-level concepts?
Can confirm this is very hard to do. I was able to create my own 2d text rendering primitive from scratch (for fun), but it has the following "features":
1 font
4 font sizes
16 foreground colors
2 background colors
Support for a generous subset of ASCII characters
Text wrapping which succeeds as expected in ~50% of cases
DPI "agnostic"
On my Firefox/Fedora browser, the "tofu" glyph seems to have turned into... a goat? Cow? Is anyone else seeing this? Do I just have weird system fonts? How do I even research this? I guess it helps illustrate the article's point, anyway.
Everyone is in the mood to write about text rendering today for some reason, love it. Great to see so many points paralleled like this article talking [1] about sub-pixel offsets being a challange and Nuklear's Wiki article talking [2] about snapping glyphs to an interger offset.
[1] https://gankra.github.io/blah/text-hates-you/#subpixel-offse...
[2] https://github.com/Immediate-Mode-UI/Nuklear/wiki/Complete-f...
Several of the initial definitions are brilliant (like defining emoji by their use of multiple colours), but some are misleading or even incorrect (for example, ligatures draw multiple consecutive scalars, but are made up of one or more glyphs; scripts are sets of scalars, not of glyphs).
Both Chrome and FF seem to have fixed their text rendering with intersecting cursive glyphs since 2019 :)
6.1 Fonts Can Contain SVG
That whole section needs to go. Don't embrace any non-standard stuff. Fortunately support is poor, so let's hope Google doesn't add support for this in Chrome or it may become popular enough that everyone has to support it.
Huh, this is not that story where the author, and possibly other people, spent over 1.5 years attempting to redo their text renderer/editor, and had to abandon the project in the end.
In my experience, subpixel antialiasing works reasonably well for dark-on-light, but it looks terrible for light-on-dark.
[2019] (still awesome!)
That was fascinating. Thank you.
undefined
ascii using cleartype seems to work fine for me, I don't see the issue.
Clickbait titles are getting worse and even more nonsensical
I run a big CRT monitor with one terminal window and bitmap fonts. I've never had an error using this setup, except when something tries to use a character that isn't in my font and I get a �. This is rare.
I've also programmed FPGAs to act as serial terminals and had zero problems perfectly displaying bitmap text. If you get something you can't perfectly display, chances are you don't need to display it so you mark it and throw it out (or you have a bitmap version handy).
Due to these experiences, stuff like this seems like a major case of 'too much complexity'. Why is this sort of fancy text rendering so important (for a english speaking and writing person that can pretty much do all work and hobby projects in ASCII)?
Previous discussion: https://news.ycombinator.com/item?id=21105625 (but well worth re-visiting from time to time).