How to dynamically display a multiline text in D3.js? - json

I need to display a multiline text in a SVG:Text using D3.js.
The sample data looks as follows and I want to display "all" the "titles" under a single node for every author and not as an individual node in a force directional layout.
Sample data
{
{"author":"Author1", "group":"fiction", "books" : [
{"title":"Book Title1", "rating":3},
{"title":"Book Title2", "rating":4}
]},
{"author":"Author2", "group":"non-fiction", "books" : [
{"title":"Book Title3", "rating":3},
]}
}
SVG:text takes only one text entry and displays in a single line, so I have add more text and adjust the "dy"? or retractively collec node information and replace?
Thanks for the tips.

You have the following options.
You can, as you've mentioned, add more than one text element with the appropriate spacing.
You can also use multiple tspan elements within a text element to the same effect. Again, you would have to set the spacing yourself.
You can use foreignObject to embed a suitable HTML element (e.g. a div) that will take care of the line breaking, spacing etc. for you. For an example of that, see e.g. here.
I would go with the HTML embedding option unless you have a specific reason not to. It makes the actual text formatting so much easier than the other options.

Related

How to break lines in Input field via Development tools

I need to perform a full PDF print of a website with a populated questionnaire. It's accessed via Chrome, but some fields contain extensive answers and they are partially cut as they do not fit within the line. The text can be extracted via copying, but it's not fully visible in a print (I'm sorry, I cannot provide a full picture).
To make the full contents visible in the print, I would like to break it into several lines. I heard that it could be done by adding the "word-wrap: break-word" or "overflow-wrap: break-word" properties, bit it appears that it's an Input field and, from what I heard, such fields are not breakable and I would need to change it to Textarea.
However, when I change the field type to Textarea, the contents of the field disappear.
Is there any relatively simple way to somehow make this field breakable and show full text which was previously provided as an input?
textarea does not have a title attribute. That's why the text disapears. Try to insert the text like this: <textarea>Text should be here</textarea>.

How to convert HTML into formatted Text so that the layout such as spacing, table borders, element positioning remains intact?

How to convert HTML into formatted Text, so that the layout such as spacing, table borders, element positioning remains intact? Is there any tool for the same?
Tried a few options already as follows but output formatting is not as desired:
TxtControl conversion
PythonCom conversion
Issue: Converting HTML table with spacing between cells resulting in cell content getting moved to next line hence disturbing the formatting.
Expected output is: Table row cell content shall be in the same line and border shall be intact in the text file.
Also, PDF/RTF to TEXT conversion will also work just formatting should be intact.
Attaching screenshots for more clarity on the requirement.
INPUT HTML SCREENSHOT
OUTPUT TEXT SCREENSHOT
Alternatively, is there any way to read HTML character by character and write into text file so that the layout does not change in text output.
Does this work?
You can convert HTML into BBCode and you have a RTF editor.
http://www.ecardmax.com/hoteditor/
Just make sure to check the HTML Checkbox so that you can insert HTML into that. So when you paste your text, you choose the HTML part, you should try both.
Here are the results of the post from yours in BBCode
Note that that is my edited version:
How to [B]convert[/B] HTML into formatted Text, so that the layout such as spacing, table borders, element positioning remains intact? Is there any tool for the same?
Tried a few options already as follows but output formatting is not as desired:
[LIST=1]
[*]TxtControl conversion
[*]PythonCom conversion[/LIST]
[B]Issue:[/B] Converting HTML table with spacing between cells resulting in cell content getting moved to next line hence disturbing the formatting.Expected output is : Table row cell content shall be in same line and border shall be intact in text file.
Also, PDF/RTF to TEXT conversion will also work just formatting should be intact.
It could be that you manually need to remove something from it, as example I had to remove the text called "Thanks for your edit!" that appears when you edit something and it's still in pending.
This is useful if you want to convert old posts you can't access anymore on XenForo.
You then could put it into a text replacer, where it could replace [B] into **

XPath - get text from whole document except text from specified elements

I'm trying to figure out how to get text using XPath and exclude some tags.
Let's say (for illustration) I want to get all text from this page's body tag (so all visible text), but I don't want my text to contain text from tags with class="comment-copy" i.e. I don't want text to include comments.
I tried this but it doesn't work. It returns text including comments.
//body//text()[not(*[contains(#class,"comment-copy")])]
Do you have any idea?
EDIT:
Probably figured it out but maybe there are better or faster approaches so I won't delete the question.
//body//text()[not(ancestor-or-self::*[contains(#class,"comment-copy")])]
You were very close.
Just change
//body//text()[not(*[contains(#class,"comment-copy")])]
to
//body//text()[not(contains(../#class,"comment-copy"))]
Note that this will only exclude immediate children text() nodes of comment-copy marked elements. Your follow-up XPath will exclude all descendant text() nodes beneath comment-copy marked elements.
Note: You might want to beef up the robustness of the #class test; see Xpath: Find element with class that contains spaces.

contenteditable div in UiWebView - new lines are not saved when clicking on done

I have the following div in UIWebView:
<div contenteditable="true"></div>
If the user inserts new line (using the return key in the visual keyboard), and when he is done he clicks on done in the previous/next/done grey visual keyboard, it combines the lines to one line.
How can I avoid it?
Perhaps this JSFiddle can shed some light onto what's happening within your application. If you type some lines in the top DIV (gray background color), the HTML code that you get as the return value of its innerHTML property will first display in a textarea field below it (including HTML tags formatting). As you will soon see it's not merely what you'd expect to handle in your application ('line one' + CRLF + 'line two'...), but it also contains HTML elements separating lines one from another. That's how browsers are able to display contenteditable DIVs as if they're 'memo' type controls - by parsing their HTML (that's what browsers do). This HTML formatted text is also how your application receives user submitted text, and there you have to decide what to do with this formatting. You can either strip them away (which is, I suspect, how you set that object's property and it deals with that for you) replacing HTML elements like <DIV></DIV> and so on with a space character, or choose (with your control's property, or in code) to handle this formatting whichever way you'd like them to be handled. I'm not familiar with UIWebView though, and you'll have to find on your own how to retrieve complete HTML formatted values that you want to apply to the next DIV element that you're displaying (or same one that you're assigning new values to).
UPDATE: After searching the web for UIWebView reference, I've actually stumbled across one related thread on SO that shows how to retrieve innerHTML value of an element in your underlying HTML document:
//where 'wView' is your UIWebView
NSString *webText = [wView stringByEvaluatingJavaScriptFromString:#"document.getElementById('inputDIV').innerHTML"];
This way you'd be able to retrieve the whole innerHTML string contained within the contenteditable DIV that you use in a webText string variable and parse its HTML formatted text to whatever suits your needs better. Note though, that different browsers format contenteditable DIVs differently when Enter Key is pressed and some will return the next line enclosed in a new DIV, while others might enclose it in paragraph P and/or end the line with a break <BR> or <BR />, when shift+enter were used together to move to the next line. You will have to account for all these possibilities when processing your input string. Refer to the JSFiddle script I wrote using your UIWebView component to check what formatting applies.
Of course, in your case, it might be simpler to replace your contenteditable DIV with a textarea that will return more commonly formatted \n end-of-line (CR+LF). DIVs however are easier to design, so choose whichever suits your needs better.
Cheers!
I don't believe there's a solution to this from the objective-c side of the stack. The standard HTML- element only delivers a single string. It might be possible to achieve through some javascript magic or similar on the web-end of things.
My HTML-skills are not up to scratch but if you also control that end perhaps changing the to a textArea might help?

Best practices: displaying text that was input via multi-line text box

I have a multi-line text box. When users simply type away, the text box wraps the text, and it's saved as a single line. It's also possible that users may enter line breaks, for example when entering a "bulleted" lists like:
Here are some suggestions:
- fix this
- remove that
- and another thing
Now, the problem occurs when I try to display the value of this field. In order to preserve the formatting, I currently wrap the presentation in <pre> - this works to preserve user-supplied breaks, but when there's a lot of text saved as a single line, it displays the whole text block as single line, resulting in horizontal scrolling being needed to see everything.
Is there a graceful way to handle both of these cases?
The easiest way of dealing with this is turning all line breaks \n into <br> line breaks. In PHP for example, this is done using the nl2br() function.
If you want something a bit more fancy - like the list you quote getting converted into an actual HTML <ul> for example - you could consider a simple "language" like Markdown that SO uses. It comes with natural, simple rules like
# Heading 1
## Heading 2
### Heading 3
* Unordered List item
* Unordered List item
1. Numbered List item
2. Numbered List item
etc....
You can use the php function nl2br() It transforms line breaks into elements
Convert newline characters to <br /> tags explicitly, and let the browser word-wrap the text normally. That preserves the breaks the visitor entered, without harming other paragraphs.
You could replace line breaks with HTML line breaks.
Replace "\r\n" or "\n" (depending on the browser and platform, check first for longer one) with <br/>.
I would normally replace all CR/LF with LF, and then replace all LF with <br />. You can then render this text inside any HTML container you want and let it flow naturally.