Cocoa: Display HTML from string - html

How can I display properly formatted text from an NSString, that just happens to be HTML. The html is coming from the stack overflow API.

You can create a NSAttributedString from HTML. You then draw it as you would draw any other NSAttributedString.

If your tags are accurate and you are programming for OS X (or iPhone 4.0+), you can use NSAttributedString's – initWithHTML:documentAttributes:, and then draw that directly.
Unfortunately, the iPhone OS' UIKit does not contain NSAttributedString pre-4.0. The current recommendation from the developer docs is to use a UIWebView, which sucks. An alternative might be the Three20 library, which contains TTStyledText -- that looks like it might do the job.

You could have a WebView, and tell the WebView's mainFrame to load the HTML string.
If you meant to ask about Cocoa Touch, UIWebView has an equivalent method for you.

Related

HTML table on a UIView in Swift

I am trying to display a table in a UIView that is delivered in html form from a server. It looks like these tables might be slightly different, but they obviously display correctly in a browser.
Is there anyone that can recommend a library that is useful for this?
Thanks for any help.
Edit screenshot of the table cell
The 'textBlock' gets built up with text, images and hopefully tables. All by appending the attributed text. I can't see a way to switch that label out for a webView.
If you want to display HTML in iOS it's better to use WKWebView instead of UIView. Then you can use loadHTMLString method:
webView.loadHTMLString("<html><body><p>Hello!</p></body></html>", baseURL: nil)

Text heavy iOS App. Store text in HTML, Plist, or Other?

I'm writing relatively complex iOS app that is very text heavy.
The text is also heavily formatted. It has lots of color, size, font, and spacing changes, as well bulleted lists and other text features you'd expect to see in a very rich website.
The text is displayed on about 40 different views. Some of which display a lot of text, others a little. There is no one template that all the pages follow. (There are some that are similar, but that's not the point.)
Lastly, the text is constantly being changed and updated by an editorial team during development, not so much after release. The text has to be stored on the device, downloading files is not an option.
My question is, what is the best way to store and then render all this text in an iOS App?
My approach
Store all the text content and formatting info in an html file and use
[[NSAttributedString alloc] initWithFileURL:htmlDoc
options:#{
NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType}
documentAttributes:&attrDict
error:&error];
to create a NSAttributed string and use that to populate UITextViews.*
*Note: I would do some more work before creating the UITextViews. First I would parse it to find the appropriate page number [[Page:1.3]] and then parse the elements in that section [[header]], [[side_scroller]], etc...
I like this approach for two main reasons:
It created a separate copy document that contained all the text
and formatting info.
I'm the only iOS developer, but we have a couple front-end
developers. So when we get slammed with changes that need to be done
in 3.45 minutes, I could have some of the guys help me make the
changes, without having to know all the nuances of UIFont and
related classes. Occasionally, the editors could even make the
changes themselves :)
Minor reasons for liking this approach:
The text can vary so much per page, that creating a new UIFont + Plist entry to store the formatting info seems like a bigger pain than having everything in a .html document. (I could be wrong about this.)
Project managers will inevitably say: "Make this word a little bigger," "This word looks strange, add italics," and "Make everything purple!" HTML/CSS seems like a more flexible solution for quickly implementing these requests.
Downsides of this approach:
NSAttributedString picks up 99% of the HTML attributes I threw at it. It did not pick bullet spacing changes in unordered lists <ul>.
Plists are more performant.
Here are some other approaches I considered:
Plist + UIFont
RTF Document - Originally started with this, but found it hid a lot of what was going on and NSAttributedString wouldn't pick up some of the changes.
XML
Any advice or input would very appreciated.
Notes:
iPad app,
iOS 7,
No Internet Connectivity,
Xcode 5
What I did to store styled text in an iOS app was to write a Mac OS command line tool that opens RTF files and converts them to attributed strings (It's a 1-line call in Mac OS, but not supported in iOS for some reason.) I then use NSCoding to save the attributed strings as binary data, with a special .DATA filetype.
I created a custom UITextView category with a method that knows how to load the text view's attributed text from my custom filetype.
I created a build rule in my project that treats RTF files as source files in a build step and the .DATA filetype as the output, and copies the .DATA files into the build project.
Now, all I have to do is add an RTF file to my project the build process inserts the .DATA version of the styled text into the executable.
The Xcode editor knows how to edit RTF files, so you can edit them right in place in the IDE, OR you can edit them in TextEdit or any editor that supports RTF files.
There are a few things you can put in an RTF that aren't supported in UITextViews. (I don't remember what those are offhand. Sorry.)
I find styled WYSIWYG text much easier to deal with than HTML. You just edit the text, and the build process picks up the changes.
It worked beautifully. Plus, binary NSCoding output is a whole lot more compact than HTML.
I would recommend using web view. It can open files in resource bundle.
You can disable all the links in HTML by implementing delegate method shouldStartLoadWithRequest to return NO.
You might also want to set dataDetectorTypes to UIDataDetectorTypeNone.
That will disable auto link detection in web view

Converting d3.js SVG code to a standalone program — Example?

Either with a headless browser, google filesytem API, or some other way.
This question says you can, but not how.
Converting d3.js SVG code to a standalone program -- any suggestions?
google groups has more hints, but no examples.
I've spent a bunch of time playing with the node-canvas example, as well as the phantomJS svg example. I can't figure out how to make them play together. Apparently in Linux, the x-windows Javascript rendering engine isn't very good anyway.
My API reading list of JavaScript, d3.js, SVG, CSS, and other HTML stuff is already mountainous - all I want to do is save a .svg image that I generate with d3.js.
Help, please.
This will neither be easy nor overtly complicated. Main reason being is that a web browser alone cannot save an SVG file from a DOM rendering, unless it's Chrome version 12.
Thing is that an SVG image is just a plain text file with a bunch of rendering instructions. The solution you point to basically says you would have to do this server side. Though they suggest node.js, you can do this in any server-side language you'd like.
Trick is to take your JavaScript/HTML interface, make it either keep track of all objects you create, or otherwise be able to serialize all of them, and then send that data (ex: via ajax) to a server-side program which would reconstitute that to an SVG file and offer it to be downloaded.
The challenge is that both your programs (client-side, javascript and server-side: php/etc.) will more or less have to re-implement SVG specifications to make this work and have common understanding as to how you serialized it for the transmission. There are virtually no stock components that do this for you.
There are some examples of using node().parentNode.innerHTML with 64B encoding, but I couldn't figure out how to use it.
https://groups.google.com/forum/?fromgroups#!topic/d3-js/aQSWnEDFxIc
The easiest solution I've found so far is FileSaver.js demo here:
http://eligrey.com/demos/FileSaver.js/
It uses the HTML5 filesaver interface.
I came across this today, I've not tried it but perhaps someone will find it useful:
https://github.com/d3-node/d3-node
const D3Node = require('d3-node')
const d3n = new D3Node() // initializes D3 with container element
d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>

iOS Printing and HTML formatter - Which interpreter and how fancy?

I have an iOS 5 application that sends a job to the print que. I have all of that code working fine and I'm using the HTML formatter to create the document (UIMarkupTextPrintFormatter). Right now I have a very basic HTML string that I am using for testing but want to flesh it out further.
Which HTML engine is used to interpret the HTML string that is passed to UIMarkupTextPrintFormatter? Or, in other words, what is the best way for me to test my HTML string outside of XCode? Can I just create a text file and then view it in Safari? Would that give me the best approximation of what it will look like when printed from iOS?
How fancy can I get with the HTML in the UIMarkupTextPrintFormatter? I assume that I'll have to use all inline styles? Are there some examples out there of HTML strings that are sent to UIMarkupTextPrintFormatter to create rich documents? I just want to get an idea of what's possible with this combination.
You can test iOS printing in the Simulator, using the iOS Printer Simulator app. The UIMarkupTextPrintFormatter will render through WebKit. Imagine the HTML string is a single-page HTML document. That is basically the limitations of the formatter, although I believe you can also link to external style sheets and images too.

HTML + CSS dynamic render in flash?

I have HTML + CSS text. I need some lib with simple function like "Render String Var conteining HTML" So no external files (like in flash lib called HTMLwraper you just have to play your SWF on top of HTML). dinamic! I give it string it renders It into some conteiner (not as a bitmab but as if it was real HTML dynamically rendered in flash). (And I need real HTML + CSS support not what normal rich text block gives us)
I am going to use it in with Flex (Flash Builder) so I like MXML component model but even pure flash AS3 will workout.
It should be Free and Opensource (any license like GPL, LGPL etc will be ok).
So Is out there such flash\flex library for HTML + CSS dynamic rendering (rfom given String or XML)?
Sounds like you're asking for quite a lot ;-)
The only thing that springs to mind that might be able to help is F*CSS
Take a look here: http://fcss.flashartofwar.com/
HTH
Jolyon