Suppose you open a page in Microsoft's Edge browser. There is sometimes an option to switch to Reading View. For example, this page: https://www.scottaaronson.com/democritus/lec3.html
As far as I can tell, this view does two things: first, it uses a bunch of heuristics to figure out what's important and what's not and mangles the DOM accordingly. For instance, on the page above, it decided for some reason that "not(A and not A)" was vital.
Second, it applies a bunch of style sheets to make things easier to read. One of these stylesheets tries to fit as many columns of text on the screen as possible, as to avoid wasting screen space but also avoid long lines, which are hard to read.
But I tried looking at the DOM and the CSS, and I can't actually figure out how it manages to get multiple columns. Is there some cheating going on, or do I just not understand CSS well-enough?
Microsoft isn’t cheating; reader view is using plain old multi-column layouts and its doing it well. You can see the complete [proprietary] sources here:
C:\Windows\SystemApps\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\Assets\ReadingView\