Is it possible to insert a tab character in HTML instead of having to type four times?
It depends on which character set you want to use.
There's no tab entity defined in ISO-8859-1 HTML - but there are a couple of whitespace characters other than such as , ,and .
In ASCII, is a tab.
Here is a complete listing of HTML entities and a useful discussion of whitespace on Wikipedia.
It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.
No, Tab is just whitespace as far as HTML is concerned. I'd recommend an em-space instead which is this big (→| |←) ...typically 4 spaces wide — and is input as .
You might even be able to get away with using the Unicode character (" ") for it, if you're lucky.
Here is a list of Space characters and “zero-width spaces” in Unicode.
is the answer.
However, they won't be as functional as you might expect if you are used to using horizontal tabulations in word-processors e.g. Word, Wordperfect, Open Office, Wordworth, etc. They are fixed width, and they cannot be customised.
CSS gives you far greater control and provides an alternative until the W3C provide an official solution.
Example:
padding-left:4em
..or..
margin-left:4em
..as appropriate
It depends on which character set you want to use.
You could set up some tab tags and use them similar to how you would use h tags.
<style>
tab1 { padding-left: 4em; }
tab2 { padding-left: 8em; }
tab3 { padding-left: 12em; }
tab4 { padding-left: 16em; }
tab5 { padding-left: 20em; }
tab6 { padding-left: 24em; }
tab7 { padding-left: 28em; }
tab8 { padding-left: 32em; }
tab9 { padding-left: 36em; }
tab10 { padding-left: 40em; }
tab11 { padding-left: 44em; }
tab12 { padding-left: 48em; }
tab13 { padding-left: 52em; }
tab14 { padding-left: 56em; }
tab15 { padding-left: 60em; }
tab16 { padding-left: 64em; }
</style>
...and use them like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabulation example</title>
<style type="text/css">
dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
tab1 { padding-left: 4em; }
tab2 { padding-left: 8em; }
tab3 { padding-left: 12em; }
tab4 { padding-left: 16em; }
tab5 { padding-left: 20em; }
tab6 { padding-left: 24em; }
tab7 { padding-left: 28em; }
tab8 { padding-left: 32em; }
tab9 { padding-left: 36em; }
tab10 { padding-left: 40em; }
tab11 { padding-left: 44em; }
tab12 { padding-left: 48em; }
tab13 { padding-left: 52em; }
tab14 { padding-left: 56em; }
tab15 { padding-left: 60em; }
tab16 { padding-left: 64em; }
</style>
</head>
<body>
<p>Non tabulated text</p>
<p><tab1>Tabulated text</tab1></p>
<p><tab2>Tabulated text</tab2></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab2>Tabulated text</tab2></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab4>Tabulated text</tab4></p>
<p>Non tabulated text</p>
<p><tab3>Tabulated text</tab3></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab1>Tabulated text</tab1></p>
<p><tab2>Tabulated text</tab2></p>
</body>
</html>
Run the snippet above to see a visual example.
Extra discussion
There are no horizontal tabulation entities defined in ISO-8859-1 HTML, however there are some other white-space characters available than the usual  , for example; , and the aforementioned .
It's also worth mentioning that in ASCII and Unicode, is a horizontal tabulation.
Below are the 3 different ways provided by HTML to insert empty space
Type to add a single space.
Type to add 2 spaces.
Type to add 4 spaces.
Try
It is equivalent to four s.
There really isn't any easy way to insert multiple spaces inside (or in the middle) of a paragraph. Those suggesting you use CSS are missing the point. You may not always be trying to indent a paragraph from a side but, in fact, trying to put extra spaces in a particular spot of it.
In essence, in this case, the spaces become the content and not the style. I don't know why so many people don't see that. I guess the rigidity with which they try to enforce the separation of style and content rule (HTML was designed to do both from the beginning - there is nothing wrong with occasionally defining style of an unique element using appropriate tags without having to spend a lot more time on creating CSS style sheets and there is absolutely nothing unreadable about it when it's used in moderation. There is also something to be said for being able to do something quickly.) translates to how they can only consider whitespace characters as being used only for style and indentation.
And when there is no graceful way to insert spaces without having to rely on and tags, I would argue that the resulting code becomes far more unreadible than if there was an appropriately named tag that would have allowed you to quickly insert a large number of spaces (or if, you know, spaces weren't needlessly consumed in the first place).
As it is though, as was said above, your best bet would be to use to insert in the correct place.
It's better to use the pre tag. The pre tag defines preformatted text.
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
know more about pre tag at this link
Have this in CSS:
span.tab{
padding: 0 80px; /* Or desired space*/
}
Then in your HTML have this be your "long tab" in mid sentence like I needed:
<span class="tab"></span>
Saves from the amount of or that you'd need.
, , or can be used.
W3 says...
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.
Read More at W3.org for HTML3
Read More at W3.org for HTML4
Even more at Wikipedia
AFAIK, the only way is to use
If you can use CSS then you can use padding or margin. See Box model, and for Internet Explorer, also read Internet Explorer box model bug.
If you're looking to just indent the first sentence in a paragraph, you could do that with a small CSS trick:
p:first-letter {
margin-left: 5em;
}
If whitespace becomes that important, it may be better to use preformatted text and the <pre> tag.
The <tab> tag never made it into browsers, despite being introduced in HTML3. I've always thought it a real pity because life would be much easier in many circumstances if we had it available to us. But you can easily remedy this to give you a fake <tab> tag. Add the following in the head of your HTML or else (without the style tags) into your CSS:
<style>
tab { padding-left: 4em; }
</style>
From then on, when you need a tab in your document put <tab> in there. It isn't a true tab because it doesn't align to tab-marks, but it works for most needs, without having to dither around with clumsy character entities or spans. It makes it really easy to check your source, and a cinch to format simple things where you don't want to go to the hassle of tables or other more complex "solutions".
One nice aspect of this solution is that you can do a quick search/replace of a text document to replace all TABs with the <tab> tag.
You might be able to define a bunch of true absolute position TABs, then use the appropriate tab (e.g. <tab2> or <tab5> or whatever) where needed, but I haven't found a way to do that without it indenting subsequent lines.
I have used a span with in line styling. I have had to do this as I as processing a string of plain text and need to replace the \t with 4 spaces (appx). I couldn't use as further on in the process they were being interpreted so that the final mark up had non-content spaces.
HTML:
<span style="padding: 0 40px"> </span>
I used it in a php function like this:
$message = preg_replace('/\t/', '<span style="padding: 0 40px"> </span>', $message);
If you needed only one tab, the following worked for me.
<style>
.tab {
position: absolute;
left: 10em;
}
</style>
with the HTML something like:
<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>
You can add more "tabs" by adding additional "tab" styles and changing the HTML such as:
<style>
.tab {
position: absolute;
left: 10em;
}
.tab1 {
position: absolute;
left: 20em;
}
</style>
with the HTML something like:
<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>
There is a simple css for it:
white-space: pre;
It keeps the spaces that you add in the HTML rather than unifying them.
You can use a table and apply a width attribute to the first <td>.
<table>
<tr>
<td width="100">Content1</td>
<td>Content2</td>
</tr>
<tr>
<td>Content3</td>
<td>Content4</td>
</tr>
</table>
Result
Content1 Content2
Content3 Content4
If you are using CSS, I would suggest the following:
p:first-letter {
text-indent:1em;
}
This will indent the first line like in traditional publications.
Instead of writing four time for space equal to tab, you can write once.
<span style="margin-left:64px"></span>
Consider it like this: one tab is equal to 64 pixels. So this is the space we can give by CSS.
Well, if one needs a long whitespace in the beginning of one line only out of the whole paragraph, then this may be a solution:
<span style='display:inline-block;height:1em;width:4em;'> </span>
If that is too much to write or one needs such tabs in many places, then you can do this
<span class='tab'> </span>
Then include this into CSS:
span.tab {display:inline-block;height:1em;width:4em;}
we can use style="white-space:pre" like this:
<p>Text<tab style="white-space:pre"> </tab>: value</p>
<p>Text2<tab style="white-space:pre"> </tab>: value2</p>
<p>Text32<tab style="white-space:pre"> </tab>: value32</p>
the blank space inside is filled with tabs, the amount of tabs is depend on the text.
it will looks like this:
Text : value
Text2 : value2
Text32 : value32
The ideal CSS code that should be used should be a combination of "display" and "min-width" properties...
display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.
I use a list with no bullets to give the "tabbed" appearance.
(It's what I sometimes do when using MS Word)
In the CSS file:
.tab {
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
}
And in the HTML file use unordered lists:
This is normal text
<ul class="tab">
<li>This is indented text</li>
</ul>
The beauty of this solution is that you can make further indentations using nested lists.
A noob here talking, so if there are any errors, please comment.
If you want the TABs
work like tabulators, even in contenteditables
don't want to use the ugly "pre" fonts
then use instead of nbsp's:
<pre class='TAB'> </pre>
Place this in in your CSS:
.TAB {
margin:0; padding:0;
display:inline;
tab-size: 8;
}
Change the tab-size to your needs.
Using CSS and best practice, the dynamic creation of nested, indented menus would be as follows:
Create a style for each nesting, such as indent1, indent2 etc, with each specifying its own left margin. Site structure should rarely go beyond three levels of nesting.
Use a static variable (integer) within the self-recursive function to track the recursion.
For each loop, append the loop number to the word indent, using server side scripting such as PHP or ASP, so that these menus are formatted appropriately by CSS.
Alternatively, loop through the static variable to add spacing using multiple or <pre> tags, or other characters, as appropriate.
From testing the horizontal tab character, I found that it doesn't work as a replacement to multiple in the scenario I described. You may have different results.
Only "pre" tag:
<pre>Name: Waleed Hasees
Age: 33y
Address: Palestine / Jein</pre>
You can apply any CSS class on this tag.
I would simply recommend:
/* In your CSS code: */
pre
{
display:inline;
}
<!-- And then, in your HTML code: -->
<pre> This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>
<t>.</t>
Make sure the color code matches the background
the px is variable to desired length for the tab.
Then add your text after the < t >.< /t >
The period is used as a space holder and it is easier to type, but the '& #160;' can be used in place of the period also making it so the color coding is irrelative.
<head>
<style> t {letter-spacing:35px;} </style>
</head>
<t> </t>
This is useful mostly for displaying paragraphs of text though may come in useful in other portions of scripts.
Related
what is the difference between this
<p class="class1 class2"></p>
and this
<p class="class1 class2"></p>
the second has an extra space between the classes. both are working fine.
but, will it create any problem while working with javascript or jquery etc?
Having spaces in classes like that should never make a difference, for the exception that some HTML validator might get picky about it. Naturally though, you should try to avoid it.
HTML accepts one space only and converts more than one space to one space. So when you write:
<p class="class1 class2"></p>
it's equal to:
<p class="class1 class2"></p>
Note:However better way is use one space.
.c1.c2 {
width: 350px;
height: 100px;
background-color: red;
margin: 10px;
}
<div class="c1 c2">I have more than one space.(We have same style)</div>
<div class="c1 c2">I have one space.(We have same style)</div>
There's no difference, in this case.
.test {
font-size: 25px;
}
.test2 {
color: red;
}
<div class="test test2">
Hello world
</div>
<div class="test test2">
Hello world
</div>
There won't be any issue, both are completely valid. But I don't think there is any need to put multiple spaces if they don't make any difference, even doing that will make your code look ugly. If you make this practice your habit, any professional developer won't be impressed from you after looking at your code.
As per w3 standard, this is not an issue
HTML Validator response
No it never create problem, But spaces use memory spaces in code.
But it you are performing manipulation of class string, It cause problem 100%.
Yes, there can be a difference. Consider this scenario: Only the text of the second paragraph will be colored red.
[class="class1 class2"] { color:red }
<p class="class1 class2">One space</p>
<p class="class1 class2">Two spaces</p>
Worth bearing in mind when you read nonsense like "HTML ignores extra spaces." (It doesn't) and "Have you tried it?" (How do you know you've covered all scenarios?)
Just as for text, Html ignores duplicate spaces.
If you try to inspect it, it will show the spaces (so as for text) – but your browser should be able to ignore.
Therefore – there is no difference between the two!
Look:
.class1 {
color : red;
}
.class2 {
color : blue;
}
<html>
<body>
<p class="class1 class2">ffff ff</p>
<p class="class1 class2">ffff ff</p>
</body>
</html>
friends. I'm using atom to write html codes. Every time I input the word "p", it can generate 3-line codes automatically:
<p>
</p>
now I give a inline class to put two p elements in one line:
.inline {
display:inline-block;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
I want it shows "Hi, friends" in browser, but it shows "Hi, friend s" with a space between "friend" and "s".
I know the problem is that html treats a line-break as a space.So if I write the code as <p class="inline">Hi, friend</p><p class="inline">s</p>, then I can get the result I want. So I have two questions:
Can I avoid the needless space when write codes in multiple lines?（I tried to search on the web, only get the answer "No": Advanced HTML multiline formatting - removing not need spaces from new lines）
If No.1 can't, can I autocomplete the p element in only one line as <p></p> while using atom?(Actually, after autocomplete the codes, I can use Ctrl+J to join two lines. However, this only works for two lines(not 3 or more) and will change original line-break into a space)
Waiting for answers sincerely. Thanks.
Hi you can remove white space, see my fiddle here
you can do this by keeping in one line like this
<p>Hi, friend</p><p>s</p>
p{
margin: 0;
display: inline;
}
or by this method
<div class="parent1">
<p>Hi, friend</p>
<p>s</p>
</div>
p{
margin: 0;
display: inline;
}
.parent1 {
font-size: 0;
}
.parent1 p {
font-size: 16px;
}
Try display:table-cell - like this:
.inline {
display: table-cell;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
Final edit:
This answer was wrong and I know it is wrong. I'm leaving it for posterity because some of the information below is still useful.
Edit: forget everything I wrote below-- the problem is just that your CSS is set to display as inline-block, not inline.
.inline {
/*display:inline-block;*/
display: inline;
}
Check out this post:
How to remove the space between inline-block elements?
This is known, expected behavior for inline-block elements. And it's not just the space because of the new line in the element-- it happens even if they are on the same line, like so:
<p class="inline">Hi, friend</p>
<p class="inline">s</p>
There are known techniques for handling this behavior (see here and here -- none of it is super pretty, but it's the reality of the situation.
To summarize the above links, they are basically means of trying to remove the spaces in the editor in ways that aren't super hideous or painful My preferred method is commenting out the spaces, like so:
<p class="inline">Hi, friend</p><!--
--><p class="inline">s</p>
...but it's really up to preference.
Alternately, you can leverage other options like floats or flexbox to achieve what you are looking for.
I'm currently trying to create textareas to display dialogue in a screenplay format. So far, I've come up with this:
<textarea style="width: 140pt; border: 0px; resize: none; overflow:hidden;">
I've tried adding stuff like height: auto;, overflow: auto; or just removing the height altogether (as I have done in the code above) - but this hasn't worked. All I want it to do is increase the height of the textarea so that it fits its text, whilst keeping the width at 140pt. How should I do this?
Thanks, J
If you're just trying to get your screenplay text to display in a monospace font with multiple spaces preserved, you'd be better off using a different element with white-space:pre assigned to it:
HTML
<div class="screenplay">
EXT. FOREST / ELSEWHERE - DAY
Susan is on a cell-phone call. She smiles at Melissa, who walks by with two cups of coffee.
SUSAN (V.O.)
Right now, this is probably our top pilot. But things change.
</div>
CSS
.screenplay {
white-space: pre;
font-family: monospace;
}
See http://jsfiddle.net/GhMjq/
However, you might also want to take a look at the output of the Fountain Scrippets plugin. I believe this outputs screenplay snippets in sensible HTML that's formatted according to standard screenplay conventions using CSS.
You can use jQuery autoresize Plugin on keyup like this jsfiddle exemple
$(document).ready(function() {
$('textarea').on('keyup',function() {
$('textarea').autosize();
});
});
this code works for me, I hope it will help you,
<!DOCTYPE html>
<html>
<body>
<textarea id="textarea" style="width: 140pt; resize: none; overflow:hidden;">fdsf</textarea>
<script>
function setHeight()
{
var elem=document.getElementById("textarea");
var h=elem.offsetHeight;
var scrollHeight=elem.scrollHeight;
var innerHeight=elem.innerHeight;
if(scrollHeight>=h)
{
elem.style.height=scrollHeight+"px";
}else
{
elem.style.height=scrollHeight-2+"px";
}
}
setInterval(function(){setHeight()},30);
</script>
</body>
</html>
Frequently I am aligning text such as:
To: 07/02/2010
From: 07/02/2010
Id like it to be displayed like this:
To: 07/02/2010
From: 07/02/2010
So what is the quickest/easiest/best way to do this? CSS? using a few nbsp (would work if its mono spacing) or using tables. Normally if I am not in a anti-hating table mood, ill use tables.
What do you recommend?
Definitely definition list (<dl>).
<dl>
<dt>From:</dt><dd>07/02/2010</dd>
<dt>To:</dt><dd>07/02/2010</dd>
</dl>
/* CSS */
dl {
overflow: hidden;
}
dt {
width: 50px;
float: left;
}
I'd recommend tables. It really is the best way, especially seeing as it really is tabular data there, and HTML doesn't support tab stops.
But it really is silly to avoid tables for the sake of avoiding tables. Unless you want the option later to style like so:
To: From:
07/02/2010 07/02/2010
You could do something like this, if for some reason you didn't want to use tables:
CSS
.sideheading { width: 3em; float: left; }
HTML
<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010
Or use a definition list (but if the reason you are avoiding tables is due to semantics, then DLs would be avoided for the same thing).
But of course, it's about the layout, no customer or web surfer is ever going to care how you do it, as long as they can read it!
Use a definition list or white-space nowrap.
I've seen this problem before, a quick google search:
http://www.google.com/search?q=css+forms
...brought me here:
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
...and I copypasted the HTML and CSS into this:
<html>
<head>
<style>
label
{
width: 5em;
float: left;
text-align: right;
margin-right: 1em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
</style>
</head>
<body>
<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Looks good to me, save it in a .html and see for yourself.
Padding with s sounds messy. How about something like this:
<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010
.header { display: inline-block; width: 5em;}
In this case, though, I'd actually say tables are appropriate; it does look like tabular data, with a column of headers.
This has come up at work many times and I ended up creating some styling for a 2-column table which hides borders. Technically, this is tabular data, but a table with only 2 rows and 2 columns is pretty lame considering the amount of markup needed to achieve it within spec.
I've often regretted creating the class, as now everyone uses it far too much and I have to constantly be on the lookout for it in our code reviews. If you don't anticipate that problem, it's a semantically-correct solution, and slightly more elegant than the hoops you'll jump through with DL's, spans, etc.
I need to generate spaces in a HTML file.
Use either   or <pre> tags. The <pre> tag preserves all spaces, tabs and newlines.
EDIT
Regarding your comment about its use, for padding, you may want to look at css padding
It all depends on the context, you can use letter-spacing, word-spacing or for example padding for surrounding span's.
Without more information it´s impossible to give a good advice.
Edit: if it´s for use in texts / in between words, I´d go for the word-spacing and perhaps letter-spacing.
I hardly ever use
margin and padding properties work well for spacing and <br /> for newlines. (I don't use <br /> too frequently either.)
is a non-breaking space. Alternatively I guess you could use a <br /> (XHTML there) tag just to generate a new line.
i use a span with css classes.
i have several class like spacer_1, spacer_2, spacer_3, etc..
i use different horizontal padding like this
.spacer_1
{
padding:0px 5px;
}
to use this spacer you can use the following
<span class="spacer_1" /> /*this will generate half the gap*/
<span class="spacer_1"></span>
<span class="spacer_1">|</span>
just do:
/* in your css code: */
pre
{
display:inline;
}
<!-- and then, in your HTML markup: -->
<pre> this text comes after 4 spaces.</pre>
<span> continue the line with other element without braking </span>
Yacoby is right. But i have something different:
<head>
<style type="text/css">
.left-space { margin-left: 10px; }
</style>
</head>
<body>
<div>
<p>This is a test line.<span class="left-space">This is a line with space before it.</span></p>
</div>
</body>
And by the way you should replace with to conform to XHTML.