Write thin to write fast
breckyunits.com
breckyunits.com
How physical text layout affects reading from screen https://www.researchgate.net/publication/220208446_How_physi...
A quote from the Discussion section: "Most of the studies on line length report faster reading with longer lines, and point to the number of characters as the variable responsible for the differences, rather than physical line length (visual angle)."
The OP thinks that humans read thinner columns faster. Generally, this seems not to be the case, so maybe we should treat his main conclusion with some skepticism. In any case, it's probably best to refer to the scientific literature.
I do wonder if scanning is different from sequential reading. When reading code, I'm most often looking for the right place to change or add something.
> In any case, it's probably best to refer to the scientific literature.
You might not think so if you read the literature review which takes up most of that paper. The literature covered is generally focused on questions of no obvious interest and then, even in its own terms, finds little or no effect. Particularly funny is the paper (Youngman and Scharff (1998), covered in §2.7) comparing the independent effect of physical line length vs physical margin length. Or in other words, they investigated whether it's faster to (1) read six inches of text with half an inch of blank page to the right of the text, or to (2) read six inches of text with a full inch of blank page to the right of the text.
The paper you cite also goes out of its way to express the authors' dismay over the extreme nature of one experiment invalidating the finding they wish to support:
> The study also fails to replicate [the finding of] Dyson and Kipping (1998a) and earlier studies that more characters per line can result in faster reading. The difference may be due to the extreme nature of the longest line, i.e. 132 characters in 12 point Arial (rather than 10 point Arial used by Dyson and Kipping). The line length therefore not only has more characters but is also physically longer because of the larger type size.
later:
> A setting with no margin would not be typical practice, but may have been included to assess an extreme of a variable in a similar manner to using 132 characters per line.
How unfair!
Of course, as I read your comment on Hacker News, it contains a line of 130 characters.
This paper isn't even trying to address the questions you think it's addressing.
I'm not convinced by OP's argument "New York Times does it": pretty much any book does the opposite.
Perhaps we need more/better research.
For what it's worth, I set my screen to be very wide when I write because I like to write each sentence on a single line: it allows me to easily spot sentences that are too long, a mistake I often make.
Yes, that's true. I was not trying to dispute or support OP's claim that short lines are better. I was trying to dispute my immediate parent's claim that the way to handle questions like this is to refer to the scientific literature.
Tbf, "reading faster" in the linear sense is probably not exactly the metric to use when writing text. When writing, I usually need to jump randomly a lot in the text to cross reference something (from the last paragraph, the last sentence, or the beginning of the current sentence). It's a kind of nonlinear scanning that I'm guessing could be more efficient in narrow column text, even if wider columns would be faster to read from beginning to end.
> nature of the longest line, i.e. 132 characters in 12 point Arial (rather than 10 point Arial used by Dyson and Kipping). The line length therefore not only has more characters but is also physically longer because of the larger type size.
I'd say anywhere from 50-100 characters is fine for line length, stray too far outside that and you're not allowing enough words to scan well, or have too many so that it's hard to jump to the next line.
I'm actually doing two things to shorten the line width as measured in characters. #1, my browser window is set to a size I find reasonable, not fullscreen. #2, I have HN configured at "110% zoom" (not sure precisely what that means, but it's how Firefox reports it), which makes the text larger and therefore allows fewer characters per line.
Both are very different mindset. The second is supposed to make the first enjoyable and fluid. When editing you need to keep the reading location (kinda “cursor”) and move back to some sentences to test the “fluidness” of the flow. When reading, you don't need to do this anymore. I suspect OP prefers short line length to avoid the cognitive load implied by “finding” words back and forth during the editing step.
Really? This is absolutely the case for me. I use "reader view" / "readability" in Firefox whenever possible and it's incredibly helpful.
Writing in thin columns allows you to keep an eye on what you just wrote more easily as well.
If you adhere to these very simple principles, you will have avoided like 95% of the typographic choices that can make texts hard or slow to read.
"Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters.
If the type is well set and printed, lines of 85 or 90 characters will pose no problem in discontinuous texts, such as bibliographies, or, with generous leading, in footnotes. But even with generous leading, a line that averages more than 75 or 80 characters is likely to be too long for continuous reading."
It didn't last; I'm writing this on a 27" monitor, but I think that has more to do with bad laptop ergonomics than space.
I'm on a 32" and I don't full screen anything except for the odd video.
Interesting. The programmer equivalent of using smaller plates so you eat less at meals.
I used to prefer dual 24" monitors. I felt the physical separation let me better organize my tools.
Now I prefer my 34" widescreen. More flexible, less distracting.
Everyone has their own workflows.
If moving your head causes you neck pain, you should get that looked after ASAP!
Generally, a static posture over a long time is really bad for your health. Make sure to stretch, fidget, move around, change your posture a lot when working with a screen.
https://news.ycombinator.com/item?id=29166673
It really got me thinking about monitor setups and how much space you _really_ need to write code.
I never write code in a full screen window. Either code on two sides or a terminal on one side, etc.
Long horizontal lines really mess with comprehension and attention.
I typically go 13" laptop, but when docked on a 4k screen, I use screen splits to achieve a similar effect.
Yes, they usually have less responsibility, by virtue of being smaller. However, sometimes it is best to just get a larger task done in a function. You can have parts of it logically called out, without having to use the languages features for function declaration.
It seems intuitively convincing and almost obvious to me that the quality of your output would be inversely proportional to the amount of available "space" for that output, although the exact relationship doesn't seem so clear.
Then again, limiting the line width to something like 120 characters should allow you to edit two files side by side simultaneously, or run into far less problems when using something like a laptop, as opposed to having large monitors, while also help people who prefer larger font sizes, so it should be better for accessibility as well.
I currently have about 4 monitors in total, 3 of which are 21.5" at 1080p and there's also one vertical one, which to me that seems like a pretty decent setup - being able to browse code, work in a terminal, preview things in the browser and maybe get a few filesystem windows in there as well seems to improve productivity, all without the tradeoffs that tiling window managers might incur (though mostly just the learning curve) or struggling with software that doesn't work well with less horizontal space.
Of course, the technicalities of getting such a setup working are a bit cumbersome too - i cannot afford one of the fancy VESA mounts, so instead two of the monitors use a DIY monitor leg that's basically one long PVC pipe with some 3D printed mounts and screws, another sits atop of the computer case to the side and the GPU I/O is kind of a mess, since there's occasionally an adapter in there as well (monitors with DisplayPort are more expensive, rather than VGA/DVI/HDMI).
Honestly, it'd be nice to sidestep all of that with something like VR, but we're not quite there yet in regards to the resolution, or may never really get there at a good price point, even if there are some really interesting projects out there: https://arcan-fe.com/2018/03/29/safespaces-an-open-source-vr...
Virtual workspaces (basically multiple desktops) might help mitigate some of the issues, though!
So it is different if there is or if there is not a line break.
How do you manage it? Double line break?
But an empty space in between indicates a new paragraph.
If for some reason you require to have separate lines, perhaps when enumerating something, you can leave two trailing spaces after the line, that preserves the break.
``` Pandoc ignores single line breaks when exporting pandoc. So all of this would be treated as a single sentence [sic, I wanted to write "line"]. ```
http://webtypography.net/2.1.2
I always find myself fighting this on practically every website.
But it makes sense to me, that this should be something we think about in, well, most of our editors as well.
I debate about the measure of code, but I do find 100 to be a reasonable fit for most languages. The problem, is that I want code at 100, and then comments at 66. Oh well.
It's like a microcosm of how challenging CSS is to get right.
The actual book this website is based on comes from print media. That website is just trying to apply those ideas to the web. And, as we see, not quite getting it right
Tools like the Hemingway editor are quite valuable as well.
my $foo = GetFoo();
my $bar = GetBar($foo);
my $baz = GetBaz($bar);
As opposed to this: my $baz = GetBaz(GetBar(GetFoo()));
It takes a smidgen longer to write, but is much easier to read and understand when I'm looking at it 2 days later. my $baz = GetFoo()
|> GetBar
|> GetBaz;One of the other reasons I use this style is because it allows me to port code easily between different languages.
For example, aside from the "my" keyword, I can pretty much copy and paste the same code between PHP and Perl.
In my experience, when I try to convert a text into tweets, it gets more concise.
I'm often baffled how much I can condense information down to 280 characters.
I wouldn't try to convert everything to one tweet. Often, I need to split it into a thread.
The line-length issue can be fixed by resizing the browser window. At least that works for me - none of the sites I use require a huge amount of horizontal space. (Many people seem to keep all their browser windows maximized out of habit, but that is not necessarily the optimal window size.)
When a paragraph is too long I tend to skim past it, even though the same paragraph split into a few smaller paragraphs would have the same word count.
I tried :set textwidth=<tw>, but that gives left aligned so not quite the same...
Here are the additions to ~/.vimrc in case anyone is interested (this after installing vim-plug https://github.com/junegunn/vim-plug#unix and running :PlugInstall as per goyo instructions:
set wrap linebreak nolist
call plug#begin('~/.vim/plugged')
Plug 'junegunn/goyo.vim'
call plug#end()
"Goyo settings
let g:goyo_width = 60
let g:goyo_height = 999
let g:goyo_margin_top = 0
let g:goyo_margin_bottom = 0But I find this insight more or less convincing so I guess the ideal writing screen is thin and tall.
Sadly, that’s the opposite of what horizontal monitors encourage. This might be another benefit of physical notebooks.
I used to work from my friend's office who has these giant monitor that can pivot 90 degrees and I was easily 1.5x or 2x more productive given how much text was on the screen (almost and entire section of the book), and so I didn't have to scroll much...
I think part of the reason is that actually scrolling a page with columns is a pain if you are zoomed in to make the text legible. You can't just scroll one direction on a tablet, you have to scroll down then back up and slightly over, scroll down again, then back up, etc. Sometimes you lose your place and have to zoom out to find what column you were previously on. Even then if I have the choice between a print book with columns and without (such as the Bible), I will always choose without.
Actually how I do most of my bulk writing.
FWIW I find it really distracting to have the current sentence highlighted because it means the file's appearance changes more than it otherwise would. Sublime Text has a "distraction free mode" (shift+F11) which goes to fullscreen, hides all menus, limits the current file width, and centers the file's contents.
It’ll use your buffer settings so if you’ve configured Markdown to only be 60 characters wide, it’ll look like the photo in the article.
Just yesterday I began configuring the textwidth/wrap porperty in my Neovim. I went to bed thinking that maybe a hard-capped width of X*2 cahracters would be better, so I can fit more text "into a square" -- which basically means that I focus on a point in the middle of the text and see X characters left, right, up and down.
Now today, the first article I read is about the same exact problem :)
I'm not sold (ahem) that the New York Times newspaper chose columns strictly for the purpose of reading speed.
[1]https://collections.library.yale.edu/catalog/11870008
EDIT: I've recently been printing text on a thermal printer ribbon and editing with scissors. As the author writes, and as I write less, weight this accordingly.
[0] https://en.wikipedia.org/wiki/Standard_manuscript_format
However, the same is absolutely not true of writing source code. I find there is much value in seeing the indentation structure, and messing that up with 'fake' indentation just to allow for shorter lines utterly destroys my source comprehension.
Thinner columns permit more individual stories on the front page, with more predictable lengths and layouts.
If column-width were optimised for reading comprehension, then one would expect to find internal content similarly laid out ... and it generally wasn't.
(I'm going off recollection rather than measurement here, but what I generally recall is that column-widths opened up on inside pages, especially for essays and the like.)
I'm not sure what all the contributing factors were, though I suspect tradition and fixed layout patterns especially for the front pages of newspaper section played a strong role, as well as a design that was optimised for scanning the front page when displayed at a news-stand or in a vending box as here:
https://www.travel-pictures-gallery.com/images/usa/washingto...
Skinny columns would show a lot of stories but not much story --- if you wanted more than the lede, you'd need to buy the actual paper.
Questions:
- Are there Ebook readers that can show many pages at once?
- Can you get this effect in an editor (Emacs/Vim/VSCode) so that you can review a long code file without scrolling too much?
.col-style {
columns: 250px;
height: 100vh;
}
<div classes="col-style"><p> everything in here will be in columns of 250px width and the scroll bar will be going to the right instead of the bottom</p></div>
try it out on the linked articles <body> element :) (you'll also have to remove the margins on that page however, as they're using negative values)In Emacs, it is possible by using "follow-mode":
Open a "large" file.
M-x follow-mode
C-x 3 ;; to split vertically
And adjust splits width as many times needed.
I usually use 3 splits with "visual-line-mode" enabled.
I find scrolling all the way to the bottom of a thin column to get old fast, however, especially when the article is longer than can fit into a single page.
It's pretty easy to constrain the height of the article text div element to be slightly less than screen height (using `height: 100vh`, or maybe slightly smaller if you have a header), which makes the columns fit vertically within the screen but causes more columns to appear off-screen to the right. However, you can override PageUp and PageDown to scroll left and right instead: https://github.com/publicdomaincompany/scroll/issues/10#issu....
That's pretty satisfying if you like to read in thin columns - almost like a poor man's PDF but completely in HTML.
https://www.gnu.org/software/emacs/manual/html_node/emacs/Fo...
I wonder whether it would be useful to be able change the column width with a keyboard shortcut. That way you could use small columns when you want to focus on the details and bigger columns when you want to focus on the big picture, both in writing and reading.
The horizontally-condensed version of the same text allows me to see all of those same words, by the way. Just laid out in a format that isn't quite so exhausting to handle.
I even narrowed the HN editor while writing this reply and editing it for mistakes/grammar.
[0] https://duckduckgo.com/?q=alphasmart+neo&t=ffab&iax=images&i...
Personally I find that with long lines I often waver to a different line as I scan from left to right. Thus I need to re-read the line which otherwise I would have read in a single pass.
(That being said, code is different than text in that line length varies greatly and it generally looks less uniform than a block of prose. So maybe 100 chars per line is fine here.)
If browsers provide a CSS descriptor to limit the column height so that the page contains multiple columns and, if overflows, the overflowed content is shown in the downward direction (not horizontal direction), then maybe I can try this.
(basically just a text box that doesn't let you erase content)
I don't use Windows, but your comment led me to look at this GitHub issue discussing this feature in SumatraPDF: https://github.com/sumatrapdfreader/sumatrapdf/issues/246#is...
Someone there mentioned that Firefox supports this. I just tried it (it's called 'Wrapped Scrolling') and it works well. I can't see how to advance by a single page at a time, but that's minor thing.
To a large extent, I think this is probably right. Helps if you work in the pauses and the general quirks of your speech into the text.
Probably up in the air on whether or not this is a good idea or not. I'm sure a lot has to do with you are talking to and why.
Also note, this is not "as rapid as your thinking." Such that, I'm sure your mileage varies depending on how you read. (Do you have an inner voice, for example.)
H
E
R
E
I
S
A
L
I
M
I
T
I just checked, and it looks like Ulysses has a default width of 64 characters. Swapped it to 50. Let's see what happens.
Edit 1: I did some quick experimentation with columns that were 36, 40, and 50 wide. There is something magical about 36. With 50 my eye movements were conscious. With 36 it was as if I was able to read the whole column in peripheral vision. Much more immersive. I wonder now about narrower fonts, if they could produce the same effect.