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 readability purposes varies depending on whether it is print or on a screen, with longer lengths for screen. The print recommendation 40-75 characters including spaces.
https://www.viget.com/articles/the-line-length-misconception/ (a 2009 article) or https://en.wikipedia.org/wiki/Line_length

According to https://www.lettercount.com/, the sentence above ending with "spaces" is 211 characters and viewed in Chrome on a monitor with a medium font size and a resolution of 1920 x 1080, the preceding line occupies less than 75% of the screen..

Thus, with no special coding, the line length on a 1920 x 1080 screen is far too long for best reading.

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.

Specifying the width for the <body> tag in absolute terms (e.g. pixels) has problems:

  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 is the specified width is too small

A better solution would be to specify something like the following:

body {
width:80%;
margin: auto;
max-width: 900px;
}

Thus if the screen resolution is small, the line length will occupy most of the width; if the screen resolution is much larger, the text will not sprawl across the pagte.

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/20/23
Comments to Bill Pegram, wpegram@nvcc.edu