5 ms·
Font Rendering from First Principles
- joshmarinacci 9mo agoHugged to death?
- DiggyJohnson 9mo agoWorked for me 18:29ET
- oxonia 9mo agoToo long an article (about type!) to be in white monospace text on a black background.
- bob1029 9mo agoIt's the border that hurts my visual cortex.
- olivia-banks 9mo agoI had to use a reader view extension to stand it ;-)
- layer8 9mo agoSafari Reader View doesn’t support the site, so I backed out. Too monospaced; didn’t read.
- NooneAtAll3 9mo agoexplain?
- DavidPiper 9mo agoNot OP, but white text on black (especially at 100% contrast) is harder to read than black text on white. Monospace is harder to read than natural-width text. Large passages of text with both features is fatiguing to read.
- NooneAtAll3 9mo ago> white text on black is harder to read than black text on white not my experience (I prefer not to be flashbanged), but sure
- DavidPiper 9mo agoDifferent stroke (color) for different folk
- necovek 9mo agoBlack text on white background with no backlight is easier to read. Think black text on paper. When it comes to computer screens, usually set too bright to accommodate varying ambient lightning conditions throughout the day/year, it's not as simple, and I am not sure there is a study to confirm it. And even if so, any individual's case might be different.
- adrian_b 9mo agoWhile you are right about the many misconfigured monitors, the right solution is to set an appropriate brightness and contrast, not to invert the text. Too bright ambient lighting is better handled with monitor shields, not by increasing the display brightness, especially when the screen is glossy.
- necovek 9mo agoNot disagreeing (my external screens have never been set higher than 30% brightness, but they've also always been matte, except a couple instances I had to use Macs for work). But I am sure none of this has been part of an actual study with screens.
- brendamn 9mo agoHiding the scrollbar is the real crime here.
- dotancohen 9mo agoI would agree with you if we were all reading on E-Ink displays. As it is, I'm actually reading this on an LCD screen, which even at low backlight settings is far to bright (and loses contrast). White text on a black background is far more comfortable.
- gethly 9mo agoat this point, the obsession with white, or grey, text on black bg is just a mental illness.
- _HMCB_ 9mo agoIn the comparisons, there’s no indication which is created with his/her rendering “engine.”
- skobes 9mo agoWhy is the whole implementation in header files?
- csmantle 9mo agoHeader-only libs can help avoiding the troubles and complexity of linker setup. This might be even more important on Windows, which this lib "explicitly support".
- socalgal2 9mo agoshort answer, because C/C++ sucks. To work around how bad C/C++ sucks people put the entire implementation into one file. That way, there's less question of how you need to integrate it into your project. In more modern langauges, this is a solved problem and it's easy to use other people code. In C/C++, it's not. As a relavant example, try using FreeType in your C/C++ project, make sure your solution compiles on Linxu, and Mac, and Windows (and ideally other platforms)
- thegrim000 9mo ago>> As a relavant example, try using FreeType in your C/C++ project, make sure your solution compiles on Linxu, and Mac, and Windows (and ideally other platforms) find_package(Freetype REQUIRED) target_link_libraries(myproject PRIVATE Freetype::Freetype)
- socalgal2 9mo agodidn't work
- PaulDavisThe1st 9mo agopkg-config(1)
- zarzavat 9mo agoWait until you find out about boost!
- 7e 9mo ago[flagged]
- AxiomLab 9mo agoFascinating read. Font rendering perfectly encapsulates the conflict between continuous mathematical curves and discrete pixel grids. I run into similar 'quantization' challenges when building generative design systems in Python. Sometimes a mathematically 'perfect' alignment on the grid looks optically wrong to the human eye. The anti-aliasing logic described here is a great mental model for handling those edge cases.
- necovek 9mo agoI honestly recommend any introductory type design book for all the considerations that go into achieving optical balance.
- AxiomLab 9mo agoSpot on. The theory of optical balance is well-documented in traditional typography. The bottleneck I'm tackling isn't the design theory itself, but the computational translation of it: how to convert that human visual intuition into a deterministic set of math rules for dynamic generation. If you know of any resources that specifically bridge type design heuristics with programmatic geometry, I'd love to check them out.
- akoboldfrying 9mo agoThis was interesting, thanks. Was hoping to see a bit more about type hinting, but there's already a lot here. A question about efficiency: IIUC, in your initial bitmap rastering implementation, you process a row of target bitmap pixels at once, accumulating a winding number count to know whether the pen should be up or down at each x position. It sounds like you are solving for t given the known x and y positions on every curve segment at every target pixel, and then checking whether t is in the valid range [0, 1). Is that right? Because if so, I think you could avoid doing most of this computation by using an active edge list. Basically, in an initial step, compute bounds on the y extents of each curve segment -- upper bounds for the max y, lower bounds for the min y. (The max and min y values of all 3 points work fine for these, since a quadratic Bezier curve is fully inside the triangle they form.) For each of the two extents of each curve segment, add a (y position, reference to curve segment, isMin) triple to an array -- so twice as many array elements as curve segments. Then sort the array by y position. Now during the outer rendering loop that steps through increasing y positions, you can maintain an index in this list that steps forward whenever the next element crosses the new y value: Whenever this new element has isMin=true, add the corresponding curve segment to the set of "active segments" that you will solve for; whenever it's false, remove it from this set. This way, you never need to solve for t on the "inactive segments" that you know are bounded out on the y axis, which is probably most of them.
- Mikhail_Edoshin 9mo agoThanks, I've bookmarked an article recently that I thought was about that, but haven't read it yet. Your explanation lays a very good foundation to understand that technique.
- necovek 9mo agoIf I understood you correctly, this might be an issue if you have multiple strokes (so multiple mins and maxes that you need to stay within) on a row of pixels (think all strokes of an N).
- akoboldfrying 9mo agoWhat I'm suggesting is just a way to do less computation to get the same result as before, it doesn't change the correctness of the algorithm (if implemented correctly!). Instead of testing every curve segment at each (x, y) pixel location in the target bitmap, you only need to test those curve segments that overlap (or, more precisely, aren't known not to overlap) that y location, and what I described is a way to do that efficiently.
- gethly 9mo agoI'm working on my own text editor and have ventured into font rendering as well. The main thing to understand about fonts and font rendering is that they are just bitmap images and the program just puts them together with simple XY+WH from a pre-rendered square image(square because GPUs like squares), called atlas, which in CSS would be called a sprite. It's really that simple.
- danhau 9mo agoAllow me to change your mind: https://faultlore.com/blah/text-hates-you/ https://faultlore.com/blah/text-hates-you/
- necovek 9mo agoIt's wonderful to see someone dive into this as deep. A simpler way to understand the complexity might be to try designing your own font. Pick up a book on type and start up Fontforge, and off you go. Be careful though, make an early choice if you are going with 3rd order curves or 2nd order (Bezier) curves. Going through TeXbook and MetaFont books by DEK is also a brilliant way to learn about all this, with note that they do have an explicit bitmap step in. One correction though: Without it, you wouldn't be reading this right now. Computers started with bitmap fonts of different pixel sizes. Your console terminal in Linux is still using that, and nothing stops you from using them ("Fixed" has large Unicode coverage and is usually preinstalled) elsewhere too. So no, none of this tech is necessary for us to read text on computer screens.
- donkeybeer 9mo agoIf it is the terminal emulators running in a desktop system we are talking about, I doubt most people are using bitmap fonts these days. Most distros come with some modern font pre-configured for the terminal emulator.
- necovek 9mo agoI specifically said "console terminal in Linux" (so not an emulator), but in Linux, at least xterm uses bitmap fonts by default.
- eviks 9mo ago> MSDF was another option I considered, you could also look at sub-pixel rendering Seems like a much superior tech due the ability to reproduce sharp corners, would be interesting to read why the regular SDF was chosen (there are some reasons, but it's not clear which of those wouldn't apply to MSDF)
- heliumtera 9mo ago>Text can be rendered at arbitrary sizes Fixed width monospaced, bitmap fonts. >Fonts are generally curved, pixels are not. How should we anti-alias glyphs to keep text visually appealing? Consolas, terminus, unscii, IBM 437 fonts...are implying they are not appealing? >How should we design a system that respects the different layout rules of different languages (e.g. English vs. Arabic)? Why?
- yellowsink 9mo agoThis appears to be just Sebastian Lague's coding adventure video, copied.
- reactordev 9mo agoWhich was copied from how open source projects do it, which was copied from how closed source projects did it, which was copied from the original demos of freetype when it was released… The process hasn’t changed much at all in the last 30 years. The biggest advancement in more than 2 decades came when SDF font rendering was introduced as a graphics technique.
- yellowsink 9mo agoI mean it's literally the exact same set of things mentioned in the exact same order, it feels like it's actually just plagiarism atp