Screenshots and window sizes

For documenting outputs during testing or for writing user guides, screenshots are very useful. Poorly formatted screenshots such as incorrect aspect ratios or bad screen resolutions can make screenshots useless.

I’ve started to standardise the way that I screenshot by setting the window size and when using the terminal, the font size too. I thought about resizing Firefox and Chrome using JavaScript but I also frequently screenshot other applications that I’d also want to set the size for.

Using a standard size of screenshot keeps the ratio correct for comparing screenshots and makes them look more presentable. When dealing with text on terminal screenshots it’s useful to keep the window size small and increase the font size.

The max size of a window is set, anything smaller is either set within that size, or smaller and proportion is kept by screenres anyway.

When using a X11 session the xdotool command can be used to identity a window by its name, and then used to set the size of the window.

xdotool search --name Chrome" searches for all window titles that contain “Chrome” and returns an ID for each Chrome window that’s open. Chrome, and many other applications, use hidden windows, so some of the IDs retuned are probably for bits of Chrome that can’t be seen. Using xdotool search --onlyvisible --name Chrome returns the IDs of the Chrome windows being rendered to screen.

To resize a window, use the corresponding ID and pass the size of the window xdotool windowsize <window ID> <width in pixels> <height in pixels> for example xdotool windowsize 16571 1920 1080.

For most screenshots I want to make sure the width is the same. It’s more likely that changing the height of a window makes sense but this depends on the content. In general, to show the output of a terminal window in a screenshot, having a long screenshot is more useful than a wide one.

Screenshots are good for illustration but for terminal input and output it’s always best to provide the content in a way that a reader can copy it without any formatting issues.

Example #

Here’s an example of setting a Gnome terminal window title and then using that to select the window and resize it.

1. Open Gnome terminal and enter the command PROMPT_COMMAND='echo -ne "\033]0;xdotool test\007"' to set the title to “xdotool test”.

2. Running xdotool search --name "xdotool test" returns the window ID as “33822303”.

3. Use the window ID and set the size to 1920x1080 using xdotool windowsize 33822303 1920 1080

After running the above commands the terminal now looks like:

Setting width and height independently #

If in this example only the height needed to be changed, and the width did not, then xdotool windowsize 33822303 - 1080 would have set the window size to 1080px.

Likewise, the width could have been set to 1920, leaving the height unchanged, using xdotool windowsize 33822303 1920 - setting the width to 1920px.

Sample screenshots #

Here’s a 3185×1771 Chrome window:

Here are two Chrome windows with a common width but different heights. Comparisons between the screenshots are easy and sufficently capture the content. Window decorations are the same size adding some consistency.

My settings #

For most of my content on this website and other documentation I use the following settings.

Terminal windows #

To keep text as clear as possible on terminal screeshots, the size is increased of the font.

My settings will be using using the font Monospace Regular with font size of 14. Using a width of 80 characters (columns) and 24 rows, no menu. Will only change width when absoutely necessary to render something. Will change the height as needed.

Other windows #

For things out side of the terminal, such as screenshotting websites will use 1920x1080 but adjust the height to whatever makes the most sense.

This allows for having screen decororations the same size across screenshots of the same type and standardise a bit better.

As a side note, screenshots in Firefox look better (as shown below) than Chrome because, just like the terminal, the border shadow is captured.