I have an unordered list styled into tabular navigation that needs to look like this: . To give the tabs rounded corners each tab has left, middle, and right div with respective css backgrounds*.
When I format the list items like so (jsFiddle):
<li class="tab">
<div class="item-wrap"><span class="item-before"></span><span class="item">Inventory</span><span class="item-after"></span></div>
</li>
I get the desired result:
But when I format the HTML to make it more readable, like so (jsFiddle):
<li class="tab">
<div class="item-wrap">
<span class="item-before"></span>
<span class="item">
Inventory
</span>
<span class="item-after"></span>
</div>
</li>
The rendering changes:
What is going on?
* Note: I know that this approach is outdated. The class I built this for restricts us to HTML 4 and CSS 2.
I can't fully explain it, but it is to do with the whitespace around the a elements...
This renders correctly...
<span class="item">Inventory</span>
This does not...
<span class="item"> Inventory </span>
So reformatting the HTML, introduces whitespace around the a elements.
Browsers treat line feeds as whitespace (like literal space character).
It's no secret that HTML condenses multiple whitespace characters into a single space.
However, what's less known is what element that space belongs to.
Consider this HTML: <b> <i> spaces!</i></b>
The two spaces arond the i element will be condensed, but will the resulting space be inside it, or out?
This difference is what is causing your HTML to render differently when you have different indenting.
Personally, I like to use PHP to echo out HTML like this, so I can have it on multiple lines in the source but only output one line of HTML:
<?php
echo "<span>"
."Hello, world!"
."</span>";
?>
Results in:
<span>Helld, world!</span>
W3 teach us:
By default, block-level elements are formatted differently than inline
elements. Generally, block-level elements begin on new lines, inline
elements do not. For information about white space, line breaks, and
block formatting, please consult the section on text.
And in the cited link
For all HTML elements except PRE, sequences of white space separate
"words" (we use the term "word" here to mean "sequences of non-white
space characters"). When formatting text, user agents should identify
these words and lay them out according to the conventions of the
particular written language (script) and target medium.
So basically, since your elements are defaulted by inline elements, your tags are handled as a "word", and so the spaces between your tags does counts when rendering the text.
Basically, at this point, there are two things you might not want:
Write all your code at one line
Use extra CSS to be able to put the tags in separated lines
Well, at least I would not want this. That is why I use haml to generate HTML. Like many HTML template engines, it Allows you to handle white spaces between tags without re-indenting your code
Related
Given the code in the screenshot,
I get words highlighted in yellow if I take a note:
How could I achieve the result where the empty spaces between these words would be highlighted too, so that the whole note is highlighted in yellow?
The span element surrounding all these divs (wrd) is there by chance, so it could easily exist in some other structure.
I thought of wrapping all these divs and apply a style to a container, but the problem is that I can not wrap these words in any container as they may pertain to several notes and some of these notes could even contain a subset of these words or some text after the words I have highlighted (running the risk to break the HTML structure opening and closing divs the wrong way).
The element wrd has no custom CSS style applied.
WRDS element are now spaced like this:
<wrd>Content</wrd>`whitespace`<wrd>Content2</wrd>
You need to contain whitespaces in the wrd element like this:
<wrd>Content </wrd><wrd>Content2 </wrd>
#background{
background-color:yellow;}
<span id='background'>This is a sentence</span>
I am using an html template to send emails programatically. I know nothing about html, but I've just learned that it will collapse consecutive white space characters, which ruins my formatting(I am emailing a table of numbers). How can I solve this problem?
Just use <pre> tag like so:
<pre>
This is some text with some extra spacing and a
few newlines
thrown in
for good
measure
</pre>
Working Example: jsFiddle
and a Good reference on pre tag.
If you don't want consecutive spaces to collapse. Just set CSS property white-space.
e.g.:
white-space: pre;
<span style="white-space:pre;"> </span>
Check this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Well, you can use the metacharacter to produce a "non-breaking space." (I used one in-between these two sentences. But I didn't use one here. Notice how the spacing between these sentences is slightly different, and how the last space is twice as wide because I used two tags?)
Fundamentally, I suggest that you should be using <table> tags within your e-mail body, thus identifying the data as "tabular" and giving you a rich array of options (styles, etc ...) for formatting it. It will look much better than anything you could do by means of "ASCII Art ..."
Will inserting line breaks in HTML like this affect the output?
<header>
<div id="someid">
something here
</div>
</header>
I've been trying to study web development, and different tutorials use different formats. Will the extra lines between tags affect the output? I personally would prefer it that way since as a newbie, it looks more readable to me.
No - whitespace is collapsed in the output.
Primarily that means two things:
1 - Leading/trailing whitespace in an HTML element is not displayed, so these two divs will display the same:
<div>Some stuff</div>
<div> Some stuff
</div>
2 - Multiple whitespace characters in a row will be collapsed into one space. That means these two divs will display the same:
<div>Some stuff</div>
<div>Some stuff</div>
Here's a nice article for further reading.
No, it does not. I think what you are looking for is something like this:
<header>
<div id="someid">
<br>
something here
<br>
</div>
</header>
The <br> tag produces a newline in text.
Whitespaces are ignore from the output, at one or two exceptions (fortunately, you can see this at an advanced level only)
You can put 1 blank line or 1000, the result will be the same
Linebreaks won't affect the rendering, but multiple whitespaces are collapsed into a single space, which might make a difference.
For example, when you're indenting tags for readability the output will have a space between the tags. When your intention is for those elements to sit directly next to each other you'll find they don't.
See this link for examples and techniques to combat the unwanted space.
No,.. but sometimes yes.
At an old job they had to remove newlines and indents from divs because of some bad bootstrap grid CSS (an early unofficial copy that mutated over time) that they used across all their sites.
This was a really weird issue that baffles me and we basically had to always make sure our closing tags for 'cols' were on the same line as the next opening tag with no whitespace at all.
Eventually, I stopped this by convincing them to use an official bootstrap grid.
In HTML, there is no character for a tab, but I am confused as to why I can copy and paste one here: " " (You can't see the full width of it, but if you click to edit my question, you will see the character.) If I can copy and paste a tab character, there should be a unicode equivalent that can be coded into html. I know it doesn't exist, but this is a mystery I've never been able to grasp.
So my question is: why is there not a unicode character for a tab even if I can copy and paste it?
Sure there's an entity for tabs:
(The tab is ASCII character 9, or Unicode U+0009.)
However, just like literal tabs (ones you type in to your text editor), all tab characters are treated as whitespace by HTML parsers and collapsed into a single space except those within a <pre> block, where literal tabs will be rendered as 8 spaces in a monospace font.
Try
as per the docs :
The character entities and denote an en space and an em
space respectively, where an en space is half the point size and an em
space is equal to the point size of the current font. For fixed pitch
fonts, the user agent can treat the en space as being equivalent to A
space character, and the em space as being equuivalent to two space
characters.
Docs link : https://www.w3.org/MarkUp/html3/specialchars.html
put it in between <pre></pre> tags then use this characters
it would not work without the <pre></pre> tags
Posting another alternative to be more complete. When I tried the "pre" based answers, they added extra vertical line breaks as well.
Each tab can be converted to a sequence non-breaking spaces which require no wrapping.
" "
This is not recommended for repeated/extensive use within a page. A div margin/padding approach would appear much cleaner.
I use <span style="display: inline-block; width: 2ch;"> </span> for a two characters wide tab.
Tab is [HT], or character number 9, in the unicode library.
As mentioned, for efficiency reasons sequential spaces are consolidated into one space the browser actually displays. Remember what the ML in HTML stand for. It's a Mark-up Language, designed to control how text is displayed.. not whitespace :p
Still, you can pretend the browser respects tabs since all the TAB does is prepend 4 spaces, and that's easy with CSS. either in line like ...
<div style="padding-left:4.00em;">Indenented text </div>
Or as a regular class in a style sheet
.tabbed {padding-left:4.00em;}
Then the HTML might look like
<p>regular paragraph regular paragraph regular paragraph</p>
<p class="tabbed">Indented text Indented text Indented text</p>
<p>regular paragraph regular paragraph regular paragraph</p>
Both of them mean space, but is there any difference?
One is non-breaking space and the other is a regular space. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word.
Furthermore as Svend points out in his comment, non-breaking spaces are not collapsed.
The entity produces a non-breaking space, which is used when you don't want an automatic line break at that position. The regular space has the character code 32, while the non-breaking space has the character code 160.
For example when you display numbers with space as thousands separator: 1 234 567, then you use non-breaking spaces so that the number can't be split on separate lines. If you display currency and there is a space between the amount and the currency: 42 SEK, then you use a non-breaking space so that you don't get the amount on one line and the currency on the next.
In addition to the other answers here, non-breaking spaces will not be "collapsed" like regular spaces will. For example:
<!-- Both -->
<p>Word1 Word2</p>
<!-- and -->
<p>Word1 Word2</p>
<!-- will render the same on any browser -->
<!-- While the below one will keep the spaces when rendered. -->
<p>Word1 Word2</p>
Not an answer as much as examples...
Example #1:
<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
Hello There
</div>
Example #2:
<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
Hello There
</div>
And link to the fiddle.
Multiple normal white space characters (space, tabulator and line break) are treated as one single white space character:
For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.
So
foo bar
is displayed as
foo bar
But no-break space is always displayed. So
foo   bar
is displayed as
foo bar
You can see a working example here:
http://codepen.io/anon/pen/GJzBxo
and
http://codepen.io/anon/pen/LVqBQo
Same div, same text, different "spaces"
<div style="width: 500px; background: red"> [loooong text with spaces]</div>
vs
<div style="width: 500px; background: red"> [loooong text with ]</div>
As already mentioned, you will not receive a line break where there is a "no-break space".
Also be wary, that elements containing only a " " may show up incorrectly, where will work. In i.e. 6 at least (as far as I remember, IE7 has the same issue), if you have an empty table element, it will not apply styling, for example borders, to the element, if there is no content, or only white space. So the following will not be rendered with borders:
<td></td>
<td> <td>
Whereas the borders will show up in this example:
<td>& nbsp;</td>
Hmm -had to put in a dummy space to get it to render correctly here
The first is not treated as white space by the HTML parser, the second is. As a result the " " is not guaranteed to showup within certain HTML markup, while the non breakable space will always show up.
should be handled as a whitespace.
should be handled as two whitespaces
' ' can be handled as a non interesting whitespace
' ' + ' ' can be handled as a single ' '
is stackable, meaning you can create multiple spaces all together.
HTML will only parse one space '' and it drops the rest...
If you want five spaces, you would place 5 x
#Zoidberg is right,
example:
<h1>title</h1> <h2>date</h2>
will not display space between header markup, with
& nbsp ;
will do space :)
When having line-breaks, the line will not break when you use an $bnsp; because it's a 'non-breaking space'. This can be important if you have certain product-names or such, that always shall be written together.
Can be interesting if you (have to) use a whitespace as delimiter in numbers, like 12344567, that is displayed 12 344 567 in France. Without the the line would break in the middle of the number, very ugly. Test:12 344 567
TLDR; In addition to the accepted answer; One is implicit and one is explicit.
When the HTML you've written or had generated by an application/library/framework is read by your browser it will do it's best to interpret what your HTML meant (which can vary from browser to browser). When you use the HTML entity codes, you are being more specific to the browser. You are explicitly telling it you wish to display a character to the user (and not that you are just spacing your HTML for easier readability for the developer for instance).
To be more concrete, if the output HTML were:
<html>
<title>hello</title>
<body>
<p>
Tell me and I will forget. Teach me and I
may remember. Involve me and I will learn.
</p>
</body>
</html>
The browser would only render one space between all of these words (even the ones that have been indented for better developer readability.
If, however, you put the same thing and only changed the <p> tag to:
<p>Hello There</p>
Then it would render the spaces, as you've instructed it more explicitly. There is some history of using these spaces for styling. This use has somewhat been diminished as CSS has matured. However, there are still valid uses for many of the HTML character entities: avoiding unexpectedly/unintentionally interpretation (e.g. if you wanted to display code). The w3 has a great page to show the other character codes.