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 ..."
Related
I have a div and a textarea exactly overlapped, I type in the textarea and that text is converted to spans that have varying text colors (syntax highlighting) and are then shown in the div, so it looks like you're typing in the div, but you're actually typing in the transparent textarea. At the moment I simply put a space between the spans where a space exists in the text input, but if I add more spaces in series it doesn't work (only one will show). So I tried using instead of spaces but I was surprised to find out the width of it is different from regular spaces. What is the point of then?
To the point, how can I add spaces that have the same width as regular spaces if doesn't?
And here's an example of what should be two exactly matching lines (but aren't).
<span>Hello</span> <span>World</span>
<span>Hello</span> <span>World</span>
Note: I'm using the font "FontinSmallCaps", it's possible that's the reason for the discrepancy, but I am not willing to do away with it. Would rather filter the user input to never have two consecutive spaces. Although that would be a last resort.
If anything is unclear or needs elaboration, let me know.
Thanks in advance!
Not exactly sure of your HTML structure, but whatever wraps the HTML you have shown could have white-space: pre set, then the spaces will all remain. No need to convert them.
<div style="white-space:pre"><span style="white-space: pre;">Hello</span> <span>World</span></div>
is Non-breaking space and the other is considered as normal string by browser. 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. are also non-collapsing, that's probably the most significant aspect of their use (at least, that's how I tend to use them, pad stuff out, quick and easy)
I want to indent text with several spaces. So I need to put some spaces before the text in order to indent the text. Obviously doesn't work. Is there another symbol that would do that for me. I don't use CSS. Just in a plain html.
Thank you in advance.
This may not be the right way by some peoples standards, but following the OP:
Just in a plain html
&nbps; represents a single space, multiple of them will represent multiple spaces. Html Entities
<pre></pre> also works by telling HTML to allow formatting, preformatted text
Here is a jsfiddle
Use multiple times this combination in your html code:
<p>This will be spaced</p>
Why to use this in the code while coding?
Where to use this? why the code need this?
Referring to which context we should write this?
How to display text exactly in the center, with equal distance from all the sides?
This code is used to apply a space within your code, you may have noticed when writing HTML, if you leave a massive pile of spaces between two words, the browser ignores it, and therefore thats when
is needed.
If you want to center text, there is a number of ways you can do this, the best way is probably to use the CSS rule:
text-align: center;
See this for more info:
http://www.w3schools.com/cssref/pr_text_text-align.asp
is an HTML entity encoding a non-breaking space. If you separate two words with , web browsers will not split the words over two lines.
  is almost always a typo.
People frequently use with normal spaces to add extra horizontal whitespace.
There are other posts covering how to centre text vertically and horizontally - see https://stackoverflow.com/search?q=vertically+horizontally+centered+text for a range of answers.
is a html ascii character. It represents a space.
When you add multiple spaces after each other in html they will be truncated and only one will be displayed in the rendered page. when you use all spaces are rendered on the page.
Server side, I build a list of strings which are the option text of an html select multiple.
Every string is the result of the concatenation of four strings. First, second and third have a length=5. Third string has a variable length, so I complete its length to 19 chars with white spaces:
StringUtils.rightPad(data.toUpperCase(), 19, " ");
Nevertheless, in my html page, these whites spaces are removed.
I have looked for similar problems in this web and others, I have tried with & nbsp;, \u0020, I have tried with css style white-space:pre-wrap;, I have tried a lot of things but white spaces are not preserved.
Any one knows how to solve this problem without javascript? only with html/styles.
Thank you, regards
The default styling in webpages is to collapse whitespace, you can easily change this with the white-space property in CSS:
p {
white-space: pre;
}
The values pre and pre-wrap preserve whitespace, the difference between them being that pre will only wrap the text on line-breaks, whereas pre-wrap will wrap on all whitespace characters (like regular text. Your question states that you have tried this and it did not work, however I have tested this code and it worked fine for me (using Google Chrome) and the W3C reference says that it works in all major browsers, therefore I suspect it is a mistake in implementation, try again and double-check you are applying styles to the correct class and there are no specificity issues.
I have a problem, but maybe this is not a problem actually! Why below HTML markup is generating a result which seems to be incorrect even using Standard Fonts like Arial?
<span>سلام</span><span>خداحافظ</span>
سلامخداحافظ
Above output shouldn't be this? (ignore space used for simulation)
سلام خداحافظ
Also i have used margin for a tag but same problem.
Thanks in advance ;)
HTML elements do not necessarily break words. There are many legitimate reasons for that.
For instance, you might want to put emphasis on a letter in medial form by wrapping it in a <strong> or <em> element. If that element was considered as a single word, the letter would switch to its isolated form, which would probably not be the effect you're looking for.
Inserting either a non-breaking space ( ) or a zero-width non-breaking space () between the <span> elements fixes your problem.
You can see the results in this fiddle.
As i know span tag doesnt have href. I assume that u mean a tag.
u can use a space character between a tags to get desired result:
سلام خداحافظ
You can also enter an space between the to tags like. there is no need to use html codes:
سلام خداحافظ