Why are these two blocks of code being rendered different?
<button>text1</button>
<button>text2</button>
vs
<button>text1</button><button>text2</button>
Editted for clarification:
We can see in this Fiddle:
writting controls in diferent lines adds a white space between them (this space cannot be reached by console inspection, but can clearly be seen)
writting controls in the same line doesn't.
It's because the browser has no concept of linebreaks or tabs outside of special situations like the <pre> tag so wherever it finds them it converts them to whitespace. Keep in mind it will ignore all whitespaces, line breaks and tabs except the first one. You could have 30 consecutive line breaks and 100 spaces in your code, but it will render as 1 space in the browser.
Even code that only has a line break but no spaces or indents will still show a space when rendered.
An example: code with a line break but no space:
<button>text1</button>
<button>text2</button>
It will still render 1 whitespace character between them because of the line break. You can verify this in the fiddle.
Typically any sort of formatting like this is handled by CSS.
MDN's explanation is about as good as any. The actual spec.
The "EOL" in HTML you have to tell it, try put <br> between buttons.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Case 1</h1>
<button>text1</button>
<br>
<button>text2</button>
<h1>Case 2</h1>
<button>text1</button>
<br>
<button>text2</button>
</body>
</html>
Related
so I have this huge amount of text from several documents that i'd like to insert on my webpages. When i copy paste the text into my <p>element, it works fine and all, but it looks messy in my html-file.
Is there any other way to transfer my written document to my html-file, for instance link the document to the html-file, or maybe there's a way to hide or separate the <p> so the html-file looks neat even though there's a huge amount of text in my html-file. Any advice?
I do not know about any way to include html in another html (something like php's include), but it could be done with JQuery:
index.html:
<html>
<head>
<!-- link jquery -->
<script>
$(function(){
$("#fileContent").load("doc.html");
});
</script>
</head>
<body>
<div id="fileContent"></div>
</body>
</html>
doc.html (file that contains your text)
There's a lot you could do to separate these blocks of text.
Firstly, I'd recommend using <div>..</div> tags to divide the content into separate semantic sections. There are a bunch of different tags that aim to divide the content of the page semantically: <aside>, <main>, <header>, <nav>, and so on. I'd recommend reading up on these tags and using them appropriately.
However, to answer your question more directly, you should separate each block of text into separate <p> tags. After all, the <p> tag is meant for defining separate paragraphs. While the HTML document may not look pretty when indented and filled with multiple different tags like <div> a <p>, it is the best way to do it.
Unless the HTML page is going to be presented in its core (code) format, then how the <p> tags look in the .html file is unnecessary because after all these are what define how the page is presented and rendered in the browser.
Using Angular 5 and Firebase, I am storing and retrieving movie review information. When creating and editing the review, line breaks are kept (I assume using an ngModel has something to do with this). However, when retrieving the review from a reader's perspective, the ReviewComponent, the line breaks are not kept. Logging the body still shows the line breaks and using Angular's json pipe shows as text\n\ntext showing where the line breaks should be.
Here is my HTML:
<main role="main" class="container">
<p style="margin-bottom: 2rem;">{{review.body}}</p>
</main>
I have also tried span and body.
How can I keep these line breaks in the review for the reader?
HTML, in general, uses br tags to denote a new line. A plain textarea tag does not use this, it uses whatever the user's system uses to denote a new line. This can vary by operating system.
Your simplest solution is to use CSS
<main role="main" class="container">
<p style="margin-bottom: 2rem;white-space:pre-wrap;">{{review.body}}</p>
</main>
This will maintain any "white space" formatting, including additional spaces.
If you want to actually replace the newline characters with br tags you can use the following regex
<main role="main" class="container">
<p style="margin-bottom: 2rem;" [innerHTML]="review.body.replace(/(?:\r\n|\r|\n)/g, '<br>')"></p>
</main>
Edit Thanks to ConnorsFan for the heads up on replace not working with interpolation.
by using the [innerText] directive the white spaces seem to be maintained, as well as the \n new lines
e.g. <small style="display:block" [innerText]="review.body"></small>
I had a similar situation where I had HTML code like this:
<div>{{msgTitle}}</div>
And I tried putting both '\r\n' and <br> in the string msgTitle, but neither of them worked to put a newline in the text displayed on the page. This link gave me the solution:
https://github.com/angular/angular/issues/7781
Use [innerHTML]="msgTitle" instead of {{msgTitle}}.
try span but set it like that:
span
{
display : table;
}
it should helps.
Please check this
http://www.theprinterdepo.com/hp-designjet-750c-24-refurbished-plotter-1
in the quick overview, it shows some text with big spaces.
But if you see this:
http://www.theprinterdepo.com/printer-bundles/plotters-bundles
It doesnt show the spaces.
I havent been able to find how to remove those spaces even though its the same html code.
<p><span style="color: #ff0000; font-size: large;"><strong>SAVE 5% ON ALL BUNDLE ITEMS TOGETHER.</strong></span></p>
<p>1 x Black Ink (51645A)<br/>
1 x Cyan Ink (51644C)<br/>
1 x Magenta Ink (51644M)<br/>
1 x Yellow Ink (51644Y)<br/>
<strong>2 x 36" 20 bond paper (C3859A)</strong><br/>
1 X Network Card<br/>
1 Year Extended Warranty
I tried with LI, with P, and with BR but none of them work.
THe
The space is because you have double <br /> between entries in the HTML code.
The extra new lines on the first page are caused by extra <br> tags. If you're editing the HTML and only seeing one <br> tag in a row, then you're editing the wrong file or wrong part of the file.
Note: If you're 100% positive it's the only file, then your content management system is adding in the extra <br> tags by itself. If this is the case, then possibly removing the raw new lines (not <br>, but the new line in the html source) may fix the issue.
This can be fixed by assigning the line-height of your div class "std" to be .67
.std {line-height:.67;}
An easier approach to fixing the spacing issue would be to remove the extra <br> in the code.
Yet another "IE is doing something different from other browsers" question but this is one is slightly unusual in that IE7 does the correct thing but IE 8 and 9 do not.
Here is the situation, I have a simple 3 column layout. The first 2 columns are fixed width and the third I want to be variable width so that it uses up the available space.
I am outputting textual data in the third column. The text data should be free to wrap at the end of a data value/sentence - so I output it as .
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
(See the example below also)
everything works like a charm in FF, Chrome and IE7 but internet explorer 8 and 9 treat the consecutive nowrap spans as 1 big nowrap element (i.e. it puts all the values on one line). There is white space between the spans and so (IMO) it should be free to wrap.
The only way i can get IE8/9 to wrap as I want is to include some non-white space between the nowrapped spans.
This workaround is OK but I am curious to know:
Is IE rendering the markup correctly or incorrectly (i.e. is my expectation that the values should wrap incorrect. I only assume that IE is at fault because the other browsers do it differently)
Is there a more elegant solution that the one I have: In an ideal world, I would want to ensure that the separating comma never wrapped to the start of a new line.
Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<style type="text/css">
.leftBit {float:left; margin-right: 10px; background-color: yellow;}
.middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
.remainder {margin-left: 420px; min-width: 200px;background-color: #DDD;}
.nowrap { white-space:nowrap;}
.clear {clear: both;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">This value wraps - but I want to keep the values on the same line</div>
<div class="remainder">
<span>Blue the colour of the sea and the sky, </span>
<span>Green green green green of home, </span>
<span>Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">I don't know why these values do not wrap? They do in FF and chrome and IE7 but not IE8/9</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky, </span>
<span class="nowrap">Green green green green of home, </span>
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements. Is this a bug or expected behaviour?</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky </span> ,
<span class="nowrap">Green green green green of home </span> ,
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<hr />
</form>
</body>
</html>
Determining word breaks isn't preformed the same in different browsers or between different specifications. I believe Firefox is the only latest release that will format the way you are expecting. There are certain length situations where Chrome will also break out of the parent box.
As such, manual hints need to be provided in the HTML to get consistent output.
In the specific example, a way to get around this is to use the unicode character for Zero Width Space. This will break apart your code without introducing additional space.
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
If for some reason you can't use the unicode code, you might want to try the html entity which is a thin space. It will, however, introduce some additional space into your html output.
Although this seems like an issue where there should be consistency between the browsers, http://www.cs.tut.fi/~jkorpela/html/nobr.html quotes several technical documents and their differences between how words should be broken, in addition to the differing browser interpretations of those documents. I'm guessing each browsers overall strategy plays a part in this specific example.
Except for preformatted elements - -, each block structuring element is regarded as a paragraph by taking the data characters in its content and the content of its descendant elements, concatenating them, and splitting the result into words, separated by space, tab, or record end characters (and perhaps hyphen characters). The sequence of words is typeset as a paragraph by breaking it into lines.
Source: HTML 2.0, section Characters, Words, and Paragraphs
In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur.
Source: HTML 4.0, section Hyphenation
see Unicode Technical Report #14: Line Breaking Properties (technicality alert!), which seems to allow a "direct break" between an alphanumeric character and an opening parenthesis, for example. This is hardly a good idea in general, though. It would even allow very dishono(u)rable breaks!
Thanks to #nosilleg's answer I made a great solution using CSS only.
Given that you're already using classes this is easy, add this;
.nowrap:before {
content : '\200B';
}
What this does is inserts the Zero Width Space character just before each of your nowrap elements, without you editing the HTML!
Now you wont have to remember to add in that pesky HTML entity every time you use your nowrap class.
Worked in IE8 and 9 and didn't affect the other browsers.
I hope IE9/any can be rendered as IE8/any by adding below line of meta in the head of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
then it works as in the fashion we liked to
This is a very strange problem I've been struggling with for a few days. At first I thought it was related to something in our application, but I've stripped it down to the simplest html page and it's still happening. Basically anytime I add a tag to a page the html after it gets rendered as it's value. <textarea></textarea> fixes the issue, but I don't understand why. I'm at a loss here, it has to be something really simple that I just don't know.
In the following example the paragraph tags show up as the value of the textarea.
I'm using IE8.
<html>
<head>
<title>About</title>
</head>
<body>
<textarea/>
<p align="center">
test
</p>
<p align="left">
test
</p>
</body>
<textarea> is not a self-closing tag. It should be re-written as <textarea></textarea>
I am assuming you trying to have the paragraphs appear after the textarea. Try not using the textarea tag as an empty tag.
<textarea></textarea>
<p align="center">
test
</p>
<p align="left">
test
</p>
I believe Textarea requires an opening and closing tag - at least that's how it's presented here:
textarea at w3schools
I had this problem too. I realized I had forgotten to give a name attribute to my textarea like I did all my other inputs so that the PHP script could collect it all and send it to an SQL table.
Once I gave it a name, it magically stopped chopping off the closing tag and making it a self closing tag which got ignored by the browser until it bumped into the closing tag of a textarea with a name attribute, swallowing up everything in between. Hopefully this sheds more light on the issue too, as putting text in between the closing tags wasn't an ideal option for me.