We have often seen other developers' desk tours shared through blogs or social media posts since remote work became more common. Some of them set up their monitors vertically, and the monitors show the source code in their favorite editors. Why do they set them up vertically, not horizontally? What effects does the vertical monitor have on us? Can this setup be comfortable for reading the source code?
In this article, we tried to read the source code using a vertical monitor. We tell how it affects reading the source code and introduce an alternative to using a vertical monitor.
Setting up a Vertical Monitor #
This trial used a 27-inch external 4K monitor. It was connected to a 13-inch laptop. The setup was on the right in the picture below.
The first impression was that the vertical monitor was huge. It seemed different from the horizontal one, though it was the same monitor. The monitor was 60 cm (24 inches) in front of me and stood out much more than it appeared in the picture above.
The vertical monitors in most desk tours are together with the main "horizontal" monitor because the setup is necessary for multiple tasks. However, this trial only required a single task: reading the source code. This head-up setup was good enough to try to read the source code and examine how a vertical monitor affects it.
How Many Lines of Code Can a Vertical Monitor Display? #
After the setup, we launched a code editor(Visual Studio Code) and opened a code file. The screenshot is below.
The window of the code editor was maximized. The vertical monitor displayed 102 lines of code when using font size 12. Viewing the code on the 27-inch vertical monitor was spectacular. The monitor was full of code from top to bottom, and every character was visible. We could see much more information at once.
To compare it, the screenshot on the horizontal monitor is below.
The horizontal monitor displayed 55 lines of code. As a result, the vertical monitor can display about twice as many lines as the horizontal one does.
Advantages in Reading the Source Code #
After reading the source code with the vertical monitor for a while, the biggest advantage became clear. It's much easier to view many lines of code at once. In other words, we can look over some chunks of code without scrolling. This advantage brings good things to reading the source code.
For example, if we look over some chunks of code using a vertical monitor, we can grasp the control flow like "if" or "for" briefly. Even if we don't understand the code in detail, the look-over lets us know what type of processing the code does or doesn't. If the code comprises "if" statements, it deals with conditions and doesn't calculate the user's input data.
Some information brought by the look-over also gives us some clues. Those clues may tell what type of data the code processes. If a function returns an array at the end of its definition, the array can relate to the data that the code of the function definition deals with. Such clues help us read and understand the code.
Additionally, the look-over prevents us from getting stuck while we read the complicated code. The more lines of code on a screen there are, the more clues we can grab to escape from the trouble. If there are fewer lines of code on a screen, such as in the case of the horizontal monitor, it is more difficult to find the exit. An easy escape from trouble is one of the good things brought by the look-over, too.
The advantage of looking over some chunks of code without scrolling also affects us psychologically as well as functionally. While reading the source code, we're always worried about missing something important. If there are more lines of code in front of us, we feel relaxed because more information seems available. Viewing more lines of code doesn't solve the problem itself, but it eases our worries. On the contrary, fewer lines of code on a screen might not be good enough, and our worries remain.
There is another advantage of using a vertical monitor. The screenshot of the vertical monitor strikes a balance between the location of the code and all the other blank areas. The balance makes us comfortable when we view the source code on the screen. If turning off the sidebar or turning on the minimap, we feel slightly uncomfortable because it upsets the balance. So, striking a balance between the source code and the other parts is an advantage for reading, too.
Disadvantages in Reading the Source Code #
As mentioned above, the disadvantage of using a vertical monitor is clear, too. It is easy to upset the balance between the source code and the other parts in the vertical monitor or the portrait orientation. Upsetting the balance makes us feel uncomfortable when viewing the source code. This issue happens due to the narrower width of the vertical monitor than the width of the horizontal monitor.
So, we must adjust the layout in the editor and strike a balance between the code and the other parts. It isn't easy to adjust the layout if your editor doesn't have any flexible GUIs like a sidebar or a minimap. In such a case, the disadvantage of a vertical monitor may keep us uncomfortable.
Why Do Some Engineers Use Vertical Monitors? #
To use a vertical monitor for reading the source code, we need some setup, some money, and some space on the desk. They aren't always available for all of us. Nevertheless, why do some engineers use vertical monitors?
They might have spent more time reading the source code than other engineers. So, they might have frequently wanted to make reading the code more comfortable. The more time they spend, the more confident they are that they need to improve their development environments to read the source code.
Additionally, these engineers recognize the big difference between what they write code and what they read code. And they know they need to focus much attention on reading the code as well as writing the code. They also know they should remove something to interrupt their reading. Therefore, they might want a new development environment or equipment to involve themselves in reading the source code.
Those are the reasons why they install vertical monitors and build the environments to focus on reading the source code. After the setup, they should feel comfortable and satisfied with the environment.
Alternative: Using Panes on a Horizontal Monitor #
Using a vertical monitor is mandatory? Most engineers don't use vertical monitors. Are there any other ways that make us more comfortable with reading the source code?
Using panes on a horizontal monitor is available as an alternative. Most code editors or IDEs can show multiple panes. Though a horizontal monitor displays fewer lines of code than a vertical one does, it has enough room in the horizontal direction. Panes can make the most use of the room in a horizontal monitor. If the room is full of code, we can get almost the same advantages as using a vertical monitor.
For example, Visual Studio Code provides some "Split" commands in the "View > Editor Layout" menu. "Split Right" adds the same file in a new pane to the right side of the current pane. "Three Columns" shows three panes in the horizontal direction. If you want to turn the panes back into a single pane, "Single" in the same menu can do it easily. We recommend trying panes with your favorite editor.
After adding some panes, adjust the layout of the panes. Put the code you're reading in the center of the screen. Make up enough blank areas in the editor. The blank areas make it easy to see and read the code. Please be careful not to add too much code on the screen. It will make us uncomfortable.
Wrap up #
We tried to set up and use a vertical monitor to read the source code. A vertical monitor can make us more comfortable by showing more lines of code on the screen than a horizontal monitor does. The location of the code in a vertical monitor strikes a balance between itself and all the other blank areas. This balance also makes it easy to read the source code.
We recommend making the best use of panes in your favorite editor if you don't use a vertical monitor. And we suggest Read it easy, which is designed as a pane-based-layout app. The panes in its app are easy to add and sort. Read it easy can make you more comfortable when reading the source code on a horizontal monitor.