Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>In the XML: use literal line-breaks, nothing else needed there.</p> <p>The newlines will be preserved for Javascript to read them [1]. Note that any indentation-spaces and preceding or trailing line-breaks are preserved too (the reason you weren't seeing them is that HTML/CSS collapses whitespace into single space-characters by default).</p> <p>Then the easiest way is: In the HTML: do nothing, just use CSS to preserve the line-breaks</p> <pre><code>.msg_body { white-space: pre-line; } </code></pre> <p>But this also preserves your extra lines from the XML document, and doesn't work in IE 6 or 7 [2].</p> <p>So clean up the whitespace yourself; this is one way to do it (linebreaks for clarity - Javascript is happy with or without them [3]) [4]</p> <pre><code>[get lyric...].nodeValue .replace(/^[\r\n\t ]+|[\r\n\t ]+$/g, '') .replace(/[ \t]+/g, ' ') .replace(/ ?([\r\n]) ?/g, '$1') </code></pre> <p>and then preserve those line-breaks with</p> <pre><code>.msg_body { white-space: pre; // for IE 6 and 7 white-space: pre-wrap; // or pre-line } </code></pre> <p>or, instead of that CSS, add a <code>.replace(/\r?\n/g, '&lt;br /&gt;')</code> after the other JavaScript <code>.replace</code>s.</p> <p>(Side note: Using document.write() like that is also not ideal and sometimes vulnerable to cross-site scripting attacks, but that's another subject. In relation to this answer, if you wanted to use the variation that replaces with <code>&lt;br&gt;</code>, you'd have to escape <code>&lt;</code>,<code>&amp;</code>(,<code>&gt;</code>,<code>"</code>,<code>'</code>) <em>before</em> generating the <code>&lt;br&gt;</code>s.)</p> <p>--</p> <p>[1] reference: sections "Element White Space Handling" and "XML Schema White Space Control" <a href="http://www.usingxml.com/Basics/XmlSpace#ElementWhiteSpaceHandling" rel="nofollow">http://www.usingxml.com/Basics/XmlSpace#ElementWhiteSpaceHandling</a></p> <p>[2] <a href="http://www.quirksmode.org/css/whitespace.html" rel="nofollow">http://www.quirksmode.org/css/whitespace.html</a></p> <p>[3] except for a few places in Javascript's syntax where its semicolon insertion is particularly annoying.</p> <p>[4] I wrote it and tested these regexps in Linux Node.js (which uses the same Javascript engine as Chrome, "V8"). There's a small risk some browser executes regexps differently. (My test string (in javascript syntax) <code>"\n\nfoo bar baz\n\n\tmore lyrics \nare good\n\n"</code>)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload