Is it possible in html/and if so how?
I want to make something like:
Text
(10x space)Text"br"text
How to make it happen, as for current knowledge only possibility seen "left center right"
SOLVED
...........was in between..............
solution of   correct, however its unperfect:
As it would take huge amounts of spaces to adjust to long sentences especially,
separate spaces after "br" would be needed as well.
any better solutions?
https://i.stack.imgur.com/50s0c.png
...........................
padding not worked, is it is only for css? Or did i wrote it bad?
<P><padding-left> Music/Memes<BR>Lectures..</padding-left></P>
Use HTML Entity: for spaces in HTML.
e.g.,
<p> Hello World</p>
UPDATE:
We also have Other spacing entities in HTML: In case you want play around.
—the em space; this should be a very wide space, typically as
much as four real spaces.
—the en space; this should be a somewhat wide space, roughly
two regular spaces.
—this will be a narrow space, even more narrow than a regular
space.
However, if you require a lots of spacing I recommend using CSS padding and margins as per your requirement. :) If you do not want to use a CSS file. You can do inline-style as shown below:
CODE DEMO:
<div style="padding-left:16px">Music Memes</div>
<div>Lectures...</div>
And yes coming to your last statement. Yes indeed <P><padding-left> Music/Memes<BR>Lectures..</padding-left></P>, this is not the right way to do it :)
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)
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.
How do I put two spaces after every full stop in a paragraph using CSS?
Ah, the old "two-spaces-after-a-period" meme rears its ugly head again.
Two spaces after a period is something that pertains to the typewriter world, or the monospaced font world. We moved beyond it long ago, starting with TeX or even before. The point is not to have one or two space characters after a period, but to have a pleasing amount of space there. Algorithms like TeX go to great length to do so. The algorithms in modern web browsers are still primitive by comparison, but are starting to do better. Consider the following:
You'll see that the space after the period is (slightly) greater than the inter-word space, as it should be.
What about the case of justification? You'd hope the browser would put the extra space between sentences, in preference to putting it between words. And that's what happens:
Anyway, so you want more fine-grained control, to realize your own typographical vision on your web pages. The following has four characters between the sentences:
You could also use spaces of different widths from Unicode to get just the amount of space you want (see Wikipedia article).
So is there any way to do this automatically? CSS has a word-spacing property, but no sentence-spacing property (actually, it's not that easy to figure out what a "sentence" is, even in English, and less so in other languages). Of course, putting more spaces in your HTML is not going to do a thing, since HTML treats any run of white space as a single space. So you're going to have to write some code, or find a plug-in, which traverses the text in your page and inserts markup. Or, add a plug-in or something to your CMS to spit out code which is marked up appropriately. Your alternatives for doing so are:
Add or a combination of different-width Unicode spaces.
As another poster suggested, use span tags with margin.
As a variant on the above, use a <span class="sentence"> element, with a CSS rules like .sentence::after { content: "\2002"; }, where 2002 is the "en-space". This results in:
However, the bottom line is that the web is not a typographical environment, notwithstanding the many worthy efforts to nudge it in that direction. Depending on your goals, you might consider creating your documents in a high-end document preparation environment, and publishing them as PDFs, for example.
The two spaces concept after a sentence is not "ugly" - in fact, it's just the opposite. Because of modern font kerning as well as the variety of fonts that Web browsers now support, it's sometimes very difficult to determine if a sentence has ended or if there is simply a word that is abbreviated that requires a period, not to mention a look of constant run-on. With 'fat' letters beginning a sentence, such as an upper-case "W", it can appear as though there is actually no space at all. Adding an additional space after a sentence provides readers with clear breaks. However, I get it that it would be quite difficult to create CSS that could "understand" what a sentence is so that it would automatically insert an additional space after each.
You could put your full stop in a span-tag and give it some CSS attributes, like "margin-right: 5px;", if it's only the appearance you are looking for.
Can only be done if you put your full stop to a tag, like <span>. For example :
www<span>.</span>google<span>.</span>com
Then the css is :
span:after{
content : " "; /*two spaces*/
}
In HTML, is there a way to evenly distribute text that is broken across multiple lines?
E.g., I don't want:
Here is some really long label that ends up on
two lines.
I'd prefer:
Here is some really long label
that ends up on two lines.
Adobe has proposed that a new css property be added text-wrap: balance.
In the meantime they have created a jQuery plugin named balance-text to achieve the same result.
Somewhat of a workaround, but you can use non-breaking spaces for the last few words:
<p>Here is some really long label that ends on two lines</p>
In pure HTML/CSS there isn't a way to accomplish this, because there is no way to measure the length of the line.
One way to do this would be with javascript, but you will end up with a FOBUC while the javascript calculates the line length and splits it accordingly.
The best way to avoid that would be to split the line with PHP/ASP/Whatever you're using.
I think you can achieve that if you set fixed width of the element-container and play with padding properties.
Should I use <br /> and in HTML to position elements, or should I just use CSS display:inline with padding/margin for positioning and all styling? what are pros and cons with both?
Use <br> to represent a linebreak inside a block element and use to represent a non-breaking space inside an inline element. Nothing more. For the remnant just use CSS the smart way with help of under each the display, float, padding and/or margin properties.
<br /> has its uses, but if you find yourself using   a lot, I would consider finding better ways to align things. is just ugly and clunky.
If it's tabular data, use a table. Your life will be much happier.
If it's not tabular data, use css, as BalusC suggests.
Ideally you should position everything with css, and only use <br /> (line break) and inside <p>s.
But this isn't an ideal world ;)
<br /> Can really go either way. But if you find yourself using it to adjsut paragraph spacing orsomething like this then you really have to ask yourself "is there a reason why im using breaks instead of applying a class to adjust margins?" on the other rarely if ever makes any kind of sense outside of a paragraph (<p />) and half the time theres not much use for it ther any how as using text-indent is preferable for indenting the first paragraph and much to the chigirn of Editors everywhere im completely opposed to the double space prepending of senetences on the web - as far as im concerned that is a print only thing.
In HTML5 you also have the new
http://html5doctor.com/element-index/#w
the answer is not black and white, it depends on your content, sometimes it should be and in some cases the so the content will be on a single line.
if you want it as block you can use
Using CSS margin and padding will give you greater flexibility to make adjustments later on.