Rendering Plaintext as HTML maintaining whitespace – without


Question

Given any arbitrary text file full of printable characters, how can this be converted to HTML that would be rendered exactly the same (with the following requirements)?

  • Does not rely on any but the default HTML whitespace rules
    • No <pre> tag
    • No CSS white-space rules
  • <p> tags are fine, but not required (<br />s and/or <div>s are fine)
  • Whitespace is maintained exactly.

    Given the following lines of input (ignore erroneous auto syntax highlighting):

    Line one
        Line two, indented    four spaces
    

    A browser should render the output exactly the same, maintaining the indentation of the second line and the gap between "indented" and "spaces". Of course, I am not actually looking for monospaced output, and the font is orthogonal to the algorithm/markup.

    Given the two lines as a complete input file, example correct output would be:

    Line one<br />&nbsp;&nbsp;&nbsp;&nbsp;Line two, 
    indented&nbsp;&nbsp;&nbsp; four spaces
    
  • Soft wrapping in the browser is desirable. That is, the resulting HTML should not force the user to scroll, even when input lines are wider than their viewport (assuming individual words are still narrowing than said viewport).

I’m looking for fully defined algorithm. Bonus points for implementation in python or javascript.

(Please do not just answer that I should be using <pre> tags or a CSS white-space rule, as my requirements render those options untenable. Please also don’t post untested and/or naïve suggestions such as “replace all spaces with &nbsp;.” After all, I’m positive a solution is technically possible — it’s an interesting problem, don’t you think?)

1
9
2/15/2011 6:05:09 PM

Accepted Answer

The solution to do that while still allowing the browser to wrap long lines is to replace each sequence of two spaces with a space and a non break space.

The browser will correctly render all spaces (normal and non break ones), while still wrapping long lines (due to normal spaces).

Javascript:

text = html_escape(text); // dummy function
text = text.replace(/\t/g, '    ')
           .replace(/  /g, '&nbsp; ')
           .replace(/  /g, ' &nbsp;') // second pass
                                      // handles odd number of spaces, where we 
                                      // end up with "&nbsp;" + " " + " "
           .replace(/\r\n|\n|\r/g, '<br />');
14
2/17/2011 1:45:31 PM

Use a zero-width space (&#8203;) to preserve whitespace and allow the text to wrap. The basic idea is to pair each space or sequence of spaces with a zero-width space. Then replace each space with a non-breaking space. You'll also want to encode html and add line breaks.

If you don't care about unicode characters, it's trivial. You can just use string.replace():

function textToHTML(text)
{
    return ((text || "") + "")  // make sure it is a string;
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/\t/g, "    ")
        .replace(/ /g, "&#8203;&nbsp;&#8203;")
        .replace(/\r\n|\r|\n/g, "<br />");
}

If it's ok for the white space to wrap, pair each space with a zero-width space as above. Otherwise, to keep white space together, pair each sequence of spaces with a zero-width space:

    .replace(/ /g, "&nbsp;")
    .replace(/((&nbsp;)+)/g, "&#8203;$1&#8203;")

To encode unicode characters, it's a little more complex. You need to iterate the string:

var charEncodings = {
    "\t": "&nbsp;&nbsp;&nbsp;&nbsp;",
    " ": "&nbsp;",
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    "\n": "<br />",
    "\r": "<br />"
};
var space = /[\t ]/;
var noWidthSpace = "&#8203;";
function textToHTML(text)
{
    text = (text || "") + "";  // make sure it is a string;
    text = text.replace(/\r\n/g, "\n");  // avoid adding two <br /> tags
    var html = "";
    var lastChar = "";
    for (var i in text)
    {
        var char = text[i];
        var charCode = text.charCodeAt(i);
        if (space.test(char) && !space.test(lastChar) && space.test(text[i + 1] || ""))
        {
            html += noWidthSpace;
        }
        html += char in charEncodings ? charEncodings[char] :
        charCode > 127 ? "&#" + charCode + ";" : char;
        lastChar = char;
    }
    return html;
}  

Now, just a comment. Without using monospace fonts, you'll lose some formatting. Consider how these lines of text with a monospace font form columns:

ten       seven spaces
eleven    four spaces

Without the monospaced font, you will lose the columns:

 ten       seven spaces
 eleven    four spaces

It seems that the algorithm to fix that would be very complex.


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon