I have a question related to HTML. In order to demonstrate my
simple question, I will use a minimal example.
Consider the following HTML content:
<html>
Foo: Bar
</html>
When you call this in a browser, it displays "Foo: Bar" in
one line. So far so good.
However had, when you do almost the same, and store this:
<html>
Foo
: Bar
</html>
In other words, if you add a newline right before the ':'
character, then suddenly the display becomes this here:
"Foo : Bar"
Now I wonder where from the ' ' comes? Because that character
is not part of the original source.
In HTML a carriage return or line feed in the source code is treated as white space and rendered as a space. Multiple spaces or white space (CR, LF, tabs, etc.) amount to a single white space on the rendered page.
So if you have 50 carriage returns in your source code between Foo and : Bar it will render a one space (Foo : Bar) when th HTML page is displayed in the browser.
From the HTML 4.01 spec: Controlling line breaks.
Related
How do you quote, type in a code line an HTML entity code word, such as a "non-breaking-space", and have the code word itself be printed to screen? Instead of the result of that word? (similar to using "& gt;" (NO space in word) for the > bracket; see, I can't even quote that word without putting in a space...)
I believe it will be write like this   (no break space).
I have a Many2many field and would like to make a new line after each item.
When trying with other separators like : ',', '/', ... that's work. The problem was only with '\n'. I even tried with '
'
Here is my code:
<span t-esc="'\n'.join(map(lambda x: x.name, move.myfield_ids))"/>
Any help, please ? What's wrong?
Thanks.
Spaces, tabs or line breaks (white spaces) are largely ignored, whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored.
Whitespace character processing can be summarized as follows:
All spaces and tabs immediately before and after a line break are ignored
All tab characters are handled as space characters
Line breaks are converted to spaces
Any space immediately following another space (even across two separate inline elements) is ignored
Sequences of spaces at the beginning and end of a line are removed
1. Use the CSS white-space property to set how white space inside an element is handled
Example: Using pre-wrap value
<span style="white-space: pre-wrap;" t-esc="'\n'.join(map(lambda x: x.name, move.myfield_ids))"/>
2. You can get the same result using the raw directive, which behaves the same as esc but does not HTML-escape its output. It can be useful to display separately constructed markup (e.g. from functions) or already sanitized user-provided markup.
Example: Using <br/>
<span t-raw="'<br/>'.join(map(lambda x: x.name, move.myfield_ids))"/>
I'm not sure if this is a web2py problem or a general html problem, but when I create a form in web2py that contains an editable string in a textarea, and the string contains an initial newline, like "\nsecond_line", the textarea does not display or save the newline - it is cut out. It works fine if there is a character before the newline: "firstline\nsecond_line" shows as on two lines. It is also only relevant for the first newline. If I have a string like "\n\nthird_line", then the textarea shows a single newline at the start.
This is with the most recent (non beta) version of web2py, on safari 9.1.3 and chrome 56.0.2924.87.
Ah. "By HTML 4.0 appendix B chapter 3.1, “a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.”"
This question already has answers here:
How to preserve whitespace indentation of text enclosed in HTML <pre> tags excluding the current indentation level of the <pre> tag in the document?
(11 answers)
Closed 7 years ago.
I have the following HTML:
<body>
Here is some code:
<pre><code>
Here is some fun code!
</code></pre>
</body>
But when I preview it, because the code is indented, the pre is all out of whack. I can fix that by bringing the contents back against the indent, but it looks silly. Can I make that above text look non-indented?
You could try this maybe:
pre, code{
white-space:normal;
}
Fiddle
Here you go, I decided to come up with something more concrete than changing the way pre or code work. So I made some regex to get the first newline character \n (preceded with possible whitespace - the \s* is used to cleanup extra whitespace at the end of a line of code and before the newline character (which I noticed yours had)) and find the tab or whitespace characters following it [\t\s]* (which means tab character, whitespace character (0 or more) and set that value to a variable. That variable is then used in the regex replace function to find all instances of it and replace it with \n (newline). Since the second line (where pattern gets set) doesn't have the global flag (a g after the regex), it will find the first instance of the \n newline character and set the pattern variable to that value. So in the case of a newline, followed by 2 tab characters, the value of pattern will technically be \n\t\t, which will be replaced where every \n character is found in that pre code element (since it's running through the each function) and replaced with \n
$("pre code").each(function(){
var html = $(this).html();
var pattern = html.match(/\s*\n[\t\s]*/);
$(this).html(html.replace(new RegExp(pattern, "g"),'\n'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
Here is some code:
<pre><code>
Here is some fun code!
More code
One tab
One more tab
Two tabs and an extra newline character precede me
</code></pre>
</body>
This works, assuming indentation should be based on the first line of code:
//get the code element:
var code= document.querySelector('pre code');
//insert a span in front of the first letter. (the span will automatically close.)
code.innerHTML= code.textContent.replace(/(\w)/, '<span>$1');
//get the new span's left offset:
var left= code.querySelector('span').getClientRects()[0].left;
//move the code to the left, taking into account the body's margin:
code.style.marginLeft= (-left + code.getClientRects()[0].left)+'px';
code {
display: block; //this is necessary for the JavaScript to work properly
}
<body>
Here is some code:
<pre><code>
Here is some fun code!
And some more!
Continuing
Wrapping up
Closing code now.
</code></pre>
</body>
I'm converting linebreaks and extra spaces.
def simple_format_plus(string)
(h(string).gsub(/\n/, '<br/>').gsub(' ', "\t")).html_safe
end
In my views I'm calling:
<p><%= simple_format_plus(post.content) %></p>
However the html output doesn't show the "\t" part. I've even tried disabling the css, but the problem still persists. For some reason I can't display more than one space in succession.
There are 3 spaces instead of 1 in this line .
still displays as:
There are 3 spaces instead of 1 in this line .
If I inspect the <p> element the extra spaces show up in the developer console however, but not in the browser.
tab can't be interpreted in HTML. You can use   for three or the number of times you want. The helper method can be re-written like
def simple_format_plus(string)
(h(string).gsub(/\n/, '<br/>').gsub(' ', "   ")).html_safe
end
Consecutive space characters are interpreted in HTML as a single space. If you want to display each space character as is in the source HTML file, then surround that part with <pre> ... </pre>.