I have a situation as follows
<body>
Test<br />
test<br />
test1<br />
</body>
I need to add a tab after the 2nd test and 3rd test
so that it looks similar to this.
Test
test
test1
Is there a special HTML entity or special character for TAB. eg. Non-breaking space == & nbsp ;
thanks
The simplest way I can think of would be to place the text in nested divs. Then add margin to the left of div. It will cascade down, giving you indentation.
<div id='testing'>
Test1
<div>
Test2
<div>
Test3
</div>
</div>
</div>
With the CSS:
#testing div {
margin-left: 10px;/*or whatever indentation size you want*/
}
With those, you'll get a nice tree, no matter how many levels deep you want to go.
EDIT: You can also use padding-left if you want.
If you really want to use tabs (== tabulator characters), you have to go with the following solution, which I don't recommend:
<pre>
test
test
test
</pre>
or replace the <pre/> with <div style="white-space: pre" /> to achieve the same effect as with the pre element. You can even enter a literal tab character instead of the escaped .
I don't recommend it for most usages, because it is not really semantic, that is, from viewing the HTML source a program cannot deduce any useful information (like, e.g., "this is a heading" or such). You'd be better off using one of the nice margin-left examples of the other answers. However, if you'd like to display some stuff like source code or the such, the above solution would do it.
Cheers,
Ye gods, tables?
Looks like an obvious use-case for lists, with variable margin and list-style-type: none; seasoned to taste.
See Making a 'Tab' in HTML by Neha Sinha:
Preformatted
You can put tab characters in your HTML directly if
you use what’s called “preformatted”
text.In HTML, surround text that you
want “preformatted” in a pair of
“<pre>” and “</pre>” start and end
tags.
Tables
You can use a html table so that everything you put within the set of rows(<tr>) and
columns(<td>) shows up the same way. You can very well hide the table borders to show the text alone.
Using the <dd> Tag
The <dd> tag is for formatting definitions. But it
also will create a line break and make
a tab!
, The Non-Breaking Space
One bit of HTML code I used in the table example is the “non-breaking space,” encoded as in HTML. This just gives you some space. Combined with a line break, <br>, you can create some tab-like effects.
Example
Test<br/>
<pre> </pre>test<br/>
<pre> </pre>test1<br/>
this should render as:
Test
test
test1
There have been a variety of good and bad answers so far but it seems no-one has addressed the way that you can choose between the solutions.
The first question to ask is "What is the relationship between the data being displayed?". Once this has been answered it the HTML structure you use should be obvious.
Please update the question explaining more about the structure of the content you need to display and you should find that you get better answers. At the moment everything from using <pre> to tables might be the best solution.
I think that easiest thing to do is to use UL/LI html tags and then to manipulate (and remove if needed) symbols in front of list with CSS.
Then you get something like:
Test
Test2
Test 3
More info + working example you can try out.
If you need to display tabs (tabulator characters), use a PRE element (or any element with the white-space: pre; CSS applied to it).
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
pre { white-space: pre; }
</style>
</head>
<body>
<p>This is a normal paragraph, blah blah blah.</p>
<pre>This is preformatted text contained within a <code>PRE</code> element. Oh, and here are some tab characters, each of which are displayed between two arrows: ← → ← → ← → ← →</pre>
</body>
</html>
You can also use the HTML entity instead of the actual tab character.
I am not a fan of using CSS to simulate a Tab Character.
For Indenting, yes, by all means use CSS - but not for Tab Characters.
For a single Tab, I would replace with " " (4 Spaces).
This is similar to what was used to format your Question for display.
The added benefit to this is (if someone copies your text)
it will preserve the spacing when pasted into Word or Notepad.
Example:
Test<br />
test<br />
test1
Note: If your text is in a <pre> tag, then #Boldewyn's answer is the better option.
Keep in mind, the text in the <pre> tag may render differently than expected.
I realize this is an old post, however someone may want to use the following list in order to create an indented list (by using a description list)
In my opinion, this is a much cleaner way than many of the other answers here and may be the best way to go:
It does not use a bunch of whitespace characters (which gives little control in terms of formatting for styles)
It does not use the <pre> tag, which should only be used for formatting (in my opinion, this should pretty much be a last resort or a special-case use in HTML); <pre> tag is also whitespace-dependent and not CSS dependent when used the way it is intended to be used
w3schools says to use the <pre> element when displaying text with unusual formatting, or some sort of computer code.
description lists allow for more control in terms of formatting and hierarchy
The answer by #geowa4, I would say, is another great way to accomplish this. <div>s allow for style control and, depending on use/objective, his answer may be the best way to go.
<dl>
<dt>Test</dt>
<dd>
<dl>
<dt>test</dt>
<dd>test1</dd>
</dl>
</dd>
</dl>
Related
I have a string like this:
Plain text with newlines.
But it also has some html.
<ul>
<li>first</li>
<li>second</li>
</ul>
I'd like the lineabreaks filter to output an HTML like this:
<p>Plain text with newlines.<br/>
But it also has some html.</p>
<ul>
<li>first</li>
<li>second</li>
</ul>
But what I get is:
<p>Plain text with newlines.<br/>
But it also has some html.</p>
<ul><br />
<li>first</li><br />
<li>second</li><br />
</ul>
Any idea to prevent HTML parts to be line-breaked, but still allow the filter to do its job on plain text parts?
EDIT - #Shang Wang: The real-world usage for this filter is a backend for writers who are familiar with HTML and prefer not to use a rich text editor, but would still like to avoid typing "<br />" or "<p>" everytime they need to go to a newline.
Basically, what I'm trying to do is to emulate Drupal's "Filtered HTML" input filter, which is meant for editors who need a way to quickly write simple articles without using a WYSIWYG editor, but with the possibility to add more advanced HTML tags (like , , etc..) here and there.
Hope this helps to understand my goal, and sorry for my english.
EDIT 2 - #karison: I don't have a particular approach, yet. My current code is:
{{ myText | bleach | linebreaks }}
I'd like to avoid to write from scratch a custom filter just for this, so I don't have any code to show. As it's something that I've seen in Drupal and other CMS, I was hoping that there was some way to do it with the current linebreaks filter.
No I don't think it's possible and it doesn't make much sense. You could have new lines in your html section as well:
<p>This is a
multiple line text.
</p>
but they won't be shown as multiple lines when the browser is rendering them. Then what is the template filter suppose to do? I think the best option for you is to separate the text yourself in your views.
Edit:
First off I'm not aware of any such django template filter exists because your situation is too specific to make it a public template filter, also the requirement is complex and require a parser to distinguish between html and plain text.
Secondly, multi-line text is not rendered by inserting <br/> for each new line(w3school's doc). Instead you use the tag <pre></pre> to wrap your paragraph. In theory, for each block of plain text you could wrap <pre> around it, then the new lines will be shown "as is".
When a user inserts linebreaks in a contenteditable element, browsers insert HTML into the element.
Here is what you get when you hit [Enter] in various browsers:
IE: <p></p>
Chrome: <div><br></div>
Safari: <div><br></div>
Firefox: <br />
Opera: <br />
(Test for yourself with this JSFiddle demo.)
Is there a way to get the browser NOT to insert HTML when the user hasn't inserted any HTML? Of course, I could just use
<textarea></textarea>
...and that does behave very similar to how I want, however, I don't want a strictly "text-only" input, as I will be adding and modifying HTML in the editable element using Javascript.
I considered constantly stripping all HTML out as the user types, only allowing HTML with a special class that I create to remain. That doesn't seem like a great solution, however. Is there something like wrap='soft' or some other way to say "stop making up HTML and putting it in my element!"
If you make it content editable, you are implicitly allowing the user to change the content of the HTML.
Pressing return should insert some kind of newline - either as closing a paragraph (</p>) and starting a new one (<p>), or entering a line break (<br>). Both of which in HTML require HTML tags, for the simple fact that a standard newline character (eg. \n or \n\r) is rendered as a single space, which is not what the user would expect - so inserting a raw newline as a "soft wrap" would not make sense and will ultimately lead to users impotently slamming their enter key getting mad at your site for not inserting a break when they think it should.
An even more fun fact is that if a user highlights some text, they can (or should) be able to bold and italicize text using keyboard shortcuts, which will again insert HTML.
Short of writing Javascript to override this behaviour, I am not sure you can disable the enter key inserting HTML tags to render the requested newlines.
To demonstrate this, here is a really simple page:
<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>
(In Internet Explorer at least) If you double click on the text it becomes editable. Move to the end of line and type the following:
Enter - ( A new paragaph is made (wrapping the prior text in p tags).
Type "Words", the select it and hit Crtl + b - the text is now wrapped in <strong> tags.
Hit Shift + Enter - a line break (<br>) is now inserted.
Type "More words", select it and hit Crtl + i Its now italicised in <em> tags.
And the source should look like:
<html>
<body>
<div contentEditable="true">
<p>Some things.</p>
<p>
<strong>Words</strong>
<br>
<em>More words</em>
</p>
</div>
</body>
</html>
If you want complete control over the content going into the area, I'd recommend using a WYSIWYG editor, or alternative, accept that the browser probably knows what its doing and let it do its thing so you don't need to worry about it.
There is no cross-browser way of disabling or forcing an editable div to interpret enter keypress differently from what the browser intended.
Besides, different browsers will do different things with the new line. Some will wrap lines inside <p> tags, some will add <br>.
The idea is that it's the browser that controls the editable div, not you.
If you try to fiddle with the output in real time, you will be like a passenger occasionally trying to snatch the wheel from the driver's hands.
You're not even guaranteed to get the key events from such a div. For instance, your fiddle does not seem to work in IE11.
I would rather do it just like this very SO editor does: use a textarea for user input and generate whatever rich HTML you want in another, non-editable div.
Yes, I am struggling with displaying data from our database that CONTAINS markup! One particular field I am displaying has an open-bold tag but no close bold tag. I am trying to 'contain' this markup so it doesn't affect the rest of the page.
The data coming from my database is like this text:
this is soem nasty <b>data
(note the lack of a closing < /b > tag)
If I enclose the markup in a div, the rest of the page is bold:
<div>this is some nasty <b>data</div>
However if I wrap it in a table like this:
<table><tr><td>this is some nasty <b>data</td></tr></table>
All is well! In fact, the DOM inspector for both FF (FireBug) and IE9 show the tree. In the div-case, it shows the open-b tag and the rest of the document contained within it. But the table seems to enclose it.
How can I get this to 'close the b' without a table?
You use a closing </b> tag properly, like any sane human being.
You can use DOMDocument and tidy to try and fix the malformed markup in case you have no control over it, but it's best if you could fix it before it got to your database.
I've read somewhere that HTML Purifier should be able to achieve this. Might be worth trying.
I took a cue from HTML rich-text editors like TinyMCE and built up an IFrame. It seems to contain the arbitrary, possibly-mal-formed content better.
Is there a way to achieve Backspace functionality in HTML? Do we have any special tags for this?
An example showing the need for such a thing can be found in StackOverflow itself. Please refer to Get current stack trace in Java. In the top answer, #jinguiy is trying to express Thread.currentThread().getStackTrace() but because of the site's interpretation of links an unwanted space has been introduced.
If there is a way to include a backspace this can be avoided.
This is just one example, but in many contexts where we can't control certain part of the output, having a backspace functionality in HTML can be quite useful.
You can use a negative margin:
HTML:
<span>this is</span> <span class="backspace">a test</span>
CSS:
.backspace { margin-left: -4px; }
Demo: http://jsfiddle.net/Guffa/HsCPd/
HTML is stateless, so there is no possibility of backspace functionality with HTML alone. You could do something with javascript to achieve a similar effect.
Another approach, would be to buffer your output before sending it, and then process the buffered output. You could roll your own backspace tag, and then when processing the buffer, delete the backspace tag, and the character/tag before it.
As I know HTML has no tags to do it. You need to add some other language to your code to do such things.
I don't think there's such a functionality in HTML... but, depending on the effect you're trying to achieve (is it a matter of visualization only?), you could act on word-spacing or letter-spacing
You can also use other techniques, like setting a negative margin on the elements.
In the specific example you linked, the space is due to this rule in the CSS:
p code {
padding: 1px 5px;}
If you remove it with firebug, the space disappears, cause there isn't a space (try to copy and paste the text)
Instead, if the matter is that there are unwanted spaces in the text, you can try with javascript (here an example) or processing the text with a server side language
Gulta's answer is best. Here is how to do this all within your html source:
<!-- horizontal backspace; adjust the amount of space by changing 4px -->
<style type="text/css">span.backspace{margin-left: -4px}</style>
<!-- The above sets up a "backspace command" in html in the style css-->
this is<span class="backspace"></span>a test
<!-- which can be placed any where after, and will output
this isa test
-->
if you searching for simple and effective method to let user go back from your webpage
you can use this JavaScript code
head section
<script>
function goBack()
{
window.history.back()
}
</script>
and insert HTML in your body
<input type="button" value="Back" onclick="goBack()">
W3schools Source
So far I mostly put labels and inputs inside a dedicated paragraph tag :
<p>
<label for="myInput">Blah</label>
<input type="text" ... />
</p>
But this tag is made for text paragraph. Is is semantically right to use it this way ? Should a div be used ?
Semantically, no, it is not correct. Your form inputs are not paragraphs in any sense of the word.
If you're a CSS expert, try using <ol> and <li> tags and restyling them to look how you like, since your form fields are an ordered list of items. See A List Apart's article on Prettier Accessible Forms for an example of the HTML and CSS necessary for this format.
You seem to have nearly answered your first question, in that it is semantically not a paragraph, so the use of <p> is -to me- wrong.
The second question of whether or not to use a <div> depends on your useage, but I don't see why not, other than the increasingly bulky code, though that'll probably not add much weight to the page.
My own tendency is to nest the <input /> within the <label> tag, though this is, again, semantically incorrect since the input is not a part of the label, being only its counterpart.
Of course, both ways work and produce much the same visual effect; I've never used an alternative -speech-converter or such- to a GUI browser, so I can't say if it adds weirdness for disabled users.