How should text wrap in a code block?

Question

I am working on an application where code will be shown on a mobile device. This gives us a constrained width as horizontal scrolling isn't a desired choice for code with long lines. So we have to force the text to wrap in the code block. We have two options:

Break word - where only whole words break. This has the advantage of easily seeing whole words, but has situations (as shown here) where it is visually less than ideal.

Break all - where it breaks in any point regardless of whether this is in the middle of a word or not. This tends to look better (subjective), but it could be problematic with longer words (as shown here)

Which option is better for programmers, and why?

Answer 1

As a programmer, I prefer the line breaking to happen at the boundaries of words (assuming your assessment that line breaking is needed is correct).

However, I would change the way you break. Instead of continuing at column 0, I think you should continue at the same column as the line you are breaking, and you should indicate somehow that it is not a real line on its own, but a continuation of a previous line very clearly. Just the line numbers don't quite cut it, I think. Something like:

^{download bmml source – Wireframes created with Balsamiq Mockups}

A remaining problem is that a symbol like a space is going to be very hard to spot at a line break. I think that needs thought, because such a symbol may be very relevant in code. Perhaps if a space was used as a position to break at, it should get some special symbol as well so it stays visible at either the end or the beginning of the line.

Answer 2

Breaking up words/names is a bad idea for the simple reason that it's hard to tell where the function name begins and where it ends. Names can be abstract which makes them even more difficult for the brain to stitch back together.

The first just feels more natural and although still difficult to read, you quickly can understand that text is wrapping and begin to decipher. The second, is almost impossible to decipher. I would copy and paste the code somewhere else just to double check what the full function name is.

Answer 3

I have never heard of any wrapping algorithm that would break up words on anything but syllables (or soft hyphens). So breaking up a words at any arbitrary character is certainly not advisable.

For programmers words in code are identifiers or operators etc. They only have meaning as a whole. So in this contexts even breaking up on syllables is ill-advised.

Answer 4

Make a toggle: Linebreak [yes] or [no].

Depending on the programming language being displayed, inserted linebreaks will alter the execution of the code. Once you do break the code onto a new line, indicate this by adding the linebreak character at the end of the line.

With a toggle you will be able to give the user of your application the option of making the text wrap, or not.

Additionally, display line numbers. When a line is wrapped, the 2nd line should not be a new line in the line number display, which also ensures the reader knows it is supposed to be all on one line.

Answer 5

One option is to set a minimum width on the code container and let the user scroll horizontally. Code that wraps unexpectedly is confusing at best, and in languages like Python it will appear completely broken. (This would be overflow-x: auto or scroll on the code element's parent in CSS.) 80 monospaced characters is often the default line length.

Answer 6

I know the good way of wrapping for humans, including developers. The first way. You don't break words. If you do break words, they are not readable anymore. When reaching the wrap point, you may make it clearer that the line continues, by putting at the right a symbol like an arrow ⤶. Nice text editors do that.

Answer 7

Boy is this a rock and a hard place. Definitely keep words intact. No programmer is going to like this (as is already clear), too much info is being removed by the indentation being mucked up. Breaking words doesn't solve this and it does add other problems.

To make the best of a bad situation you need to clearly delineate lines. Your examples use zebra stripes to delineate lines but for some reason I think I prefer simple 1px lines at the bottom of each line - I can't explain why I.

And that looks like Python code in your example. You do realize that in Python by changing the indentation you're changing the meaning of the code? Most languages don't use indentation as a syntactical element but Python is one of the languages that do. In most languages mucking up the indentation is a major inconvenience (but the precise meaning is not changed) but in Python it's destructive (the meaning is changed, or more likely the code could be rendered invalid). So if this code display is to support Python I think you might want to rethink the path that led to these restrictions (like no horizontal scrolling, etc.), I think it would be really disastrous to show Python code with its indentation messed up.