Word Wrap Rules! Change Default Settings

Are you fed up with having to scroll horizontally when you look at code? Stop doing that! Change the program’s settings instead.

I am not talking about WordPress in this article, except to say this: If you are having an issue with long lines making you scroll horizontally in WordPress, look at your block settings and your CSS. Or contact me and I will fix it for you!

Instructions for changing default word wrap behavior of various programs will appear on this page, below. So far I have:

If you know of another program that should be listed, please leave a comment. If you already have instructions, leave that in a comment and help someone else!

After years of programming and studying usability issues, I continue to wonder why so many software development tools have word wrap turned off by default. Since most of these programs display line numbers and may also have another wrapped line indicator, it is usually easy to tell whether or not one is viewing a wrapped line.

Firefox

1. Type about:config in the address bar (instead of a website address) and press the Enter key.
2. If you see the “Accept the Risk and Continue” button, click it.
3. In the search box that appears, type: view_source.wrap_long_lines
4. That setting should immediately appear below the search box. Click the toggle button to the right of “false” to change it to “true.”
5. The change will be saved automatically.

Verify that word wrap is working by right-clicking any web page and clicking “View Page Source.” Any lines longer than the width of the screen should be wrapped. A wrapped line only gets one line number even though it now appears as multiple lines on the screen.

There is a more detailed discussion at this Mozilla support page.

Chrome

Apparently, Chrome does not make a setting available to wrap web page source code lines by default. Instead, there is a “Line wrap” check box at the top of the source code page, which is better than nothing.

(You can view the source code for any web page by pressing Ctrl+u or right-clicking any area of the page that is not a link or an image and clicking “View page source.”)

If having to check the box every time is not good enough for you, try the “View Rendered Source” Chrome extension. It will show the source code with word wrap by default–not Chrome’s source code page, but a copy made by the extension. The extension also shows the rendered JavaScript side-by-side with the HTML source code, along with a third column showing the changes that the JavaScript code made in red (removed) and green (added). You can hide any column by unchecking the box for that column and the extension remembers which boxes you had checked from the last time you used it.

Visual Studio Code

1. Open Visual Studio Code settings. One way is to use the menu:
   File -> Preferences -> Settings
2. In the search box for settings, type:
   editor word wrap
3. In the drop-down box below “Editor: Word Wrap,” change “off” to “on.” You can also play with changing it to “wordWrapColumn” or “bounded,” in which case you might also want to change the column at which it will wrap, under the “Editor: Word Wrap Column” setting just below the one you just changed.

Now when you open any program file with long lines, they should be wrapping. You can override the wrapping by pressing Alt+z to toggle wrapping off or on. Read more in the Visual Studio Code documentation.

More to Come

Please leave a comment below about word wrapping in any particular program or how word wrapping affects usability. Thanks!