Issue #848 new

Word wrap for HTML formatter

Nathan Youngman
created an issue

When reading code on mobile devices or at large font sizes, the current solutions use a lot of horizontal panning. I have been experimenting with supporting word wrap -- here is a mockup.

At the most basic level, this could be a matter of injecting a <wbr> tag after any word separator (eg. ./\()\"'-:,.;<>~!@#$%^&*|+=[]{}~?`) that isn't already followed by a space. Using <wbr> tells the browser that it may insert a line-break, and copy & pasting the code still works as expected.

I'm posting this proposal both to gauge interest, and because several challenges remain before this will work really well.

  • Hanging indents and guides, as I currently have them, introduce copy & paste issues and font-dependencies (using em's for indentation, which are based on the height, not width of the font).
  • Handling code that has been hard-wrapped, especially when indented beyond the norm (for alignment).
  • Detecting long unbreakable words (eg. and allowing the browser to force a break at any character with word-break: break-all.
  • Handling line numbers when text is wrapped.
  • Integration with the existing Pygments code base. Even just the naming, as there are several options to wrap the output in some additional HTML.
  • Internet Explorer support. My tests with IE9/10 fail. I did find a lengthy document that could help.
  • I was also experimenting with preventing word wrap when appropriate, to keep the code as valid and readable as possible. This introduces lexer dependencies -- defining where implied line continuations are allowed for each language.

I hope this weekend or two of experimentation perks your interest in taking syntax highlighting to the "next level." Cheers.