Fixing the Horizontal Sprawl Problem on Web Pages

Screen Width: px - This is being displayed through the use of JavaScript. 

The recommended line length in characters on the web for readability purposes is perhaps 40-75 characters including spaces - see for example https://www.viget.com/articles/the-line-length-misconception/.

According to https://www.lettercount.com/, the preceding line was 202 characters. Yet viewed in Chrome on a monitor with a medium font size and a resolution of 1920 x 1080, the preceding line occupied about about 3/4 of the monitor. Going all the way to the end of the line takes approximately 286 characters.

An inferior solution to this problem is to use <br> tags to force the browser to the next line when the line length appears too long. The problem is that this solution is very specific to the screen resolution of the device. The line breaks may not come at the right place on another device.

Another simple solution is to specify the width in percentage terms. The problem again is that say a 60% solution that looks good on a large screen resolution is leaving lots of empty space on a device with a smaller screen resolution. The same goes for specifying the width in percentage terms:

  1. if the user's screen resolution is below the specified value, horizontal scroll bars appear.
  2. large portions of the screen may be blank

A better solution would be to specify max-width in terms of pixel.

Probably the best solution is to use a width and font size appropriate to the screen resolution of the user's browser. CSS3 media queries are now the standard way to do this.

Revised: 2/17/20
Comments to Bill Pegram, wpegram@nvcc.edu