How to make newline chars visible in HTML textarea? - html

I want to make newline (CR and LF) characters visible in a textarea field of an HTML form, as you can do in some text editors and IDEs. The user needs to be able to edit the text to insert newlines as well (i.e. create paragraph breaks), which should also show dynamically. Is there a way to do this?
TIA....
Steve

The only way to do this is to print out your own marker characters before/after each line break, using javascript.
The character reference for the pilcrow (¶) character is ¶.

Related

Google Slides: Create a multiline paragraph from Google Apps Script

I'm trying to insert multiple lines into a paragraph using the setText() method, but all newline characters \n are converted to new paragraphs (as when you press Enter in the editor) instead of new lines in a single paragraph (as when you press Shift+Enter in the editor). I tried also \r char, but it does nothing.
SlidesApp
.getActivePresentation()
.presentation.getSelection()
.getCurrentPage(
.asSlide()
.getPlaceholder(SlidesApp.PlaceholderType.BODY)
.asShape()
.getText()
.setText('First line\nsecond line');
Is it somehow possible to insert multiline text to the shape without creating multiple paragraphs?
Using Shift+Enter in the editor inserts a vertical tab(soft enter/return) instead of a hard return. You can use
\v
instead of \n

Can I embedded HTML tags in an HREF's TITLE? (I need some sort of line break)

It seems not,as they are showing up as cleartext.
I am trying to format a rather large tootlip by inserting <p> and <br>, but, as I say, Chrome treats them as text.
What am I allowed to put into such a tooltip? Anything other than a single string?
Since \n seems to be ignored, is there any way to get a line break into such a string?
You can add symbol for a new line: 
 (\r) or
(\n) to your title.
test
Another option is to find some JavaScript tooltip library.
If you feed them actual line breaks, they will work.
<span title="Two
Liner">Hover here</span>
However, if you need more complex HTML inside, I'd suggest qTip or Bootstrap's tooltips

difference between " " and nbsp; or " "

Hello I am trying to compile an EPUB v2.0 with html code extracted from Indesign. I have noticed there are a lot of "special characters" either at the beginning of a paragraph or at the end. For example
<p class="text_indent0px font_size0_8em line_height1_325 margin_bottom1px margin_left0px margin_right0px sans_serif floatleft">E<span class="small_caps">VELYNE</span> </p>
What is this
and can I either get rid of it or replace it with a "nbsp;"?
&#9
Is the ascii code for tabs. So I guess the paragraphs were indented with tabs.
If you want to replace them with then use 4 of them
That would be a horizontal tab (i.e. the same as using the tab key).
If you want to replace it, I would suggest doing a find/replace using an ePub editor like Sigil (http://sigil-ebook.com/).
represents the horizontal tab
Similarly represent space.
To replace you have to use
In the HTML encoding &#{number}, {number} is the ascii code. Therefore, is a tab which typically condenses down to one space in HTML, unless you use CSS (or the <pre> tag) to treat it as pre formatted text.
Therefore, it's not safe to replace it with a non-breaking or a regular space unless you can guarantee that it's not being displayed as a tab anywhere.
div:first-child {
white-space: pre;
}
<div> Test</div>
<div> Test</div>
<pre> Test</pre>
See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space and http://ascii.cl/
is the entity used to represent a non-breaking space
decimal char code of space what we enter using keyboard spacebar
decimal char code of horizontal tab
and both represent space but is non-breaking means multiple sequential occurrence will not be collapsed into one where as for the same case, ` will collapse to one space
= approx. 4 spaces and approx. 8 spaces
There are four types of character reference scheme used.
Using decimal character codes (regex-pattern: &#[0-9]+;),
Using hexadecimal character codes (regex-pattern: &#x[a-f0-9]+;),
Using named character codes (regex-pattern: &[a-z]+;),
Using the actual characters (regex-pattern: .).
Al these conversions are rendered same way. But, the coding style is different. For example, if you need to display a latin small letter E with diaeresis then you could use any of the below convention:
ë (decimal notation),
ë (hexadecimal notation),
ë (html notation),
ë (actual character),
Likewise, as you said, what should be used (a) (decimal notation) or (b) (html notation) or (c) (decimal notation).
So, from the above analogy, it can be said that the (a), (b) and (c) are three different kind of notation of three different characters.
And, this is for your information that, (a) is a Horizontal Tab, the (b) one is the non-breaking space which is actually   in decimal notation and the (c) is the decimal notation for normal space character.
Now, technically space at the end of the paragraph, is nothing but meaningless. Better, you could discard those all. And if you still need to use space inside <pre> elements, not in <p> or <div>.
Hope this helps...

What is the cr or lf char in text taken from a webpage text area?

I am saving copy from a textarea on a web page into a sql server db. This process preserves the carriage return and line feed when displaying the text elsewhere.
I want to add some content to the same field programmatic-ally - does anyone know what the characters are that create this cr and lf? I cannot determine them using ASCII converters.
CR + LF is as follows in T-SQL:
SELECT 'foo' + CHAR(13) + CHAR(10) + 'bar';
In a lot of cases it is important to include both and it is important to list them in that specific order.
When HTML is displayed it will mostly ignore white-space, so a CR+LF in the HTML (carriage return and line-feed) will not cause a new line to be shown in the HTML rendered in a browser.
Instead, HTML uses paragraph tags <p></p>, and line-break tags <br /> for paragraphs and line-breaks respectively.

<input> multi-line capable via CSS

Is there a way to get an <input />-field in HTML to wrap lines if the text is longer than the field using CSS? I don't want to use <textarea /> as I want to avoid users entering hard line-breaks by pressing enter.
No, sorry. <input type=text> is single line by definition. See the W3C document Forms in HTML Documents:
text
Creates a single-line text input control.
Using Dojo's Dijit TextArea form control, based off TextArea, you can have an input field which begins as a single line and expands as the user adds to it.
See its documentation.
You can't do what you want with CSS alone, but you could use JavaScript to prevent the user from entering line breaks in a <textarea> field.
Look at this,
http://www.echoecho.com/htmlforms08.htm
The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.
Your best bet is use a textarea (with autogrow capabilities if you like), and then strip out the new lines when the form is submitted. Using php it would be something like this:
$text = str_replace(array("\n","\r"),'',$_POST['text_field']);
This would have the desired effect of blocking newline characters. As others have pointed out it's not really possible to get multi-line input in an input field.