Wednesday, April 13, 2016

layout - How should text wrap in a code block?


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 word example


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)


break all example



Which option is better for programmers, and why?



Answer



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:


mockup


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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...