I’ve to display a bunch of text on an html page.
The text looks something like this:
+-001 This is a Line 00:12:04
002 ----------------------------------
- 003 Everthing looks good so far ------
The text is “pre-formatted” and contains a lot of whit spaces and dashes and every line has the same length (all chars have the same width).
Is there a way to display the text in html without losing the format?
Wrap your text inside the <pre> tag.
JSFiddle
<pre>
+-001 This is a Line 00:12:04
002 ----------------------------------
- 003 Everthing looks good so far ------
</pre>
The HTML way is to use the pre element, which has been designed for such usage, but beware that
To be on the safe side in formatting, put the <pre> tag right at the start of the first line and the </pre> tag right at the end of the last line. Otherwise some browsers may behave as if there were an empty line at the start or at the end of the element.
You still need to escape occurrences of the characters < and & in the content (there are some cases where this is not needed, but it is simplest to ignore that.
Example (where I have added a line containing the expression 1 + 1 < 3):
<pre>+-001 This is a Line 00:12:04
002 ----------------------------------
- 003 Everthing looks good so far ------
- 004 Simple as 1 + 1 < 3 ------</pre>
You can avoid escaping < and & by using xmp instead of pre, but xmp has been declared deprecated, obsolete, and whatever (but it works nicely in practice).
<xmp>+-001 This is a Line 00:12:04
002 ----------------------------------
- 003 Everthing looks good so far ------
- 004 Simple as 1 + 1 < 3 ------</xmp>
Try wrapping the content a PRE tag. http://www.w3schools.com/tags/tag_pre.asp
Related
I want to have an empty lines between sections, comments and tags. I'm using jade to output my html and can't output empty lines. Here is what I want.
<div>
<div class='another'>
</div>
</div>
<div>
I want a line just like above
</div>
These are couple of options that worked for me:
The = operator (which enters an evaluated piece of code) with the string for newline character '\n'
div
div.another
= '\n'
div I want a line...
The | pipe operator (which enters plain text) with a space. (had to be two of them for some reason..
div
div.another
| // < followed by blank spaces
|
div I want a line...
Use #{}-style interpolation to generate the empty string:
| foo
| #{''}
| bar
(tweaked lightly from a suggestion in https://github.com/jadejs/jade/issues/912)
The following should give you the HTML output you have asked for:
div
div.another
div
| I want a line just like above
I am using knitr to generate some reports. I use kable to generate an HTML table in the document. In the headers I want to use linebreaks (or other html tags) to enhance the table
<!--begin.rcode results='asis'
s <- rbind(c(1,2,3,4),c(1,2,3,4),c(1,2,3,4))
kable(s, col.names=c("Try Newline\nn","Try HTML break<br>%","Past 6 months\nn","\n%"))
end.rcode-->
As you can see I am trying different options without much success.
In my result linebreaks (\n) are just translated in a linebreak in the HTML source. tags are translated to HTML special characters.
Any suggestions?
As far as I know, the pipe table syntax does not support line breaks in the cells, so if using pandoc to convert markdown to HTML (this is what RStudio uses), then you'd better choose some more feature-rich table syntax, e.g. multiline or grid. Not sure how to do that with kable, but pander supports those:
> library(pander)
> colnames(s) <- c("Try Newline\nn","Try HTML break<br>%","Past 6 months\nn","\n%")
> pander(s, keep.line.breaks = TRUE)
-------------------------------------------------------
Try Newline Try HTML break<br>% Past 6 months %
n n
------------- --------------------- --------------- ---
1 2 3 4
1 2 3 4
1 2 3 4
-------------------------------------------------------
But this is not enough, as line breaks are automatically removed by pandoc, so you have to put hard line-breaks ("a backslash followed by a newline") there based on the related docs. E.g. the following code converts to HTML as expected:
> colnames(s) <- c("Try Newline\\\nn","Try HTML break\\\n%","Past 6 months\\\nn","\\\n%")
> pander(s, keep.line.breaks = TRUE)
-----------------------------------------------------
Try Newline\ Try HTML break\ Past 6 months\ \
n % n %
-------------- ----------------- ---------------- ---
1 2 3 4
1 2 3 4
1 2 3 4
-----------------------------------------------------
There is a way to limit column width which you could use to help achieve this in kable. use column_spec() where you can specify which columns, and the width in different units like cm,in,em.
So it appears that kable converts the <> to HTML equivalents, i.e. "<" and ">", so I have a quick fix that will work as long as you don't actually require the <> anywhere else. This has allowed me to get a line break in the column headings in my table.
Essentially once your table is complete just substitute the "<" and ">" in the HTML for < and > and then save it as HTML file. Like so:
tbl_output <- gsub("<", "<", tbl_output)
tbl_output <- gsub(">", ">", tbl_output)
write(tbl_output, "TableOutput.html")
where tbl_output is the output from kable.
Alternatively, and in particular if you need to use <> elsewhere in your table, you could create your own string for a newline and then gsub it for <br> at the end.
Question is very simple but I am not found solution yet - probably it is not possible or very hard to find since it is very trivial.
Question is how to avoid adding spaces in formatted HTML after new line - especially in list of values.
First example see example:
1, 2
It produces required HTML like this:
1, 2
Now another example which not works:
1
,
2
It produces invalid HTML like this:
1 , 2 required is 1, 2
How to achieve same result as in first example but using multiline text layout - I know that we could do it in one line but want to do in many lines to simplify program code (not HTML).
It works as defined: in normal content, a newline is equivalent to a space. There is no way to change this principle in HTML. Just divide you content into lines so that the principle works for you, not against you. That is, break a line only at a point where a space is OK.
I want to give default value to a textarea. The code is something like this:
<textarea>{{userSetting.list | join:"NEWLINE"}}</textarea>
where userSetting.list is a string list, each item of whom is expected to show in one line.
textarea takes the content between the tags as the default value, preserving its line breaks and not interpreting any HTML tags (which means <br>,\n won't work).
I have found a solution: {{userSetting.list | join:" " | wordwrap:0}} (there is no whitespace in the list). But obviously it is NOT a good one. Any help would be appreciated.
Since Chris didn't come and collect the credit, I have to answer my question myself. (But still thanks him for pointing to the right direction)
The HTML entity
stands for a NEWLINE character, and won't be interpreted in Django template. So this will work:
<textarea>{{userSetting.list | join:"
"}}</textarea>
A textarea in HTML does respect newlines. Does this not escape the \n:
<textarea>{{userSetting.list | join:"\n"}}</textarea>
I'm thinking that it should turn the \n into a newline character, so your source looks like this:
<textarea>Setting 1
Setting 2
Setting 3</textarea>
This would work if it did, but it may not convert \n correctly.
Try using {{userSetting.list | join:"
"}} if and \n won't work. Let me know how you get on...
:P
For some reason the accepted answer did not work for me, but this did:
<div>{{ list|join:'<br>' }}</div>
Docs reference for join: https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#join
I am learning flex and have written a little app with a TextArea that had data getting populated dynamically by embedding simple HTML (mostly for font styles)
I ran into a weird issue when I wanted to include images, the images in this case are small arrows as in reddit.com. My desired aligmnent is,
-------------
o | foo bar
| ffdfdfdf
| fdfd
-------------
o | dfdd
-------------
Where o in the first column is an image. Note that the borders are invisible.
I just used a simple <Table></table> and works perfectly if I view the resulting HTML in a browser. However flash renders the table in a very screwed manner, I get something like this instead
--------------
o fooooooo
ffffdfdf
fdfd
-------------
o fff
--------------
If the second line has more than one line, the subsequent lines wrap around the first column. Is this a known problem?
Flash's (and hence Flex's) htmlText doesn't officially support tables to begin with.
Use a Datagrid instead.