What is an iOS equivalent to MacOS NSAttributedString initWithRTF ?
The Application Kit extends Foundation’s NSAttributedString class by adding support for RTF, RTFD, and HTML (with or without attachments), graphics attributes (including font and ruler attributes), methods for drawing attributed strings, and methods for calculating significant linguistic units.
- (id)initWithRTF:(NSData *)rtfData documentAttributes:(NSDictionary **)docAttributes
I need to process a short stream of RTF data in an iOS application.
Thank you!
There is no equivalent in iOS. The iOS version of NSAttributedString has only the functionality needed by CoreText, and CoreText itself has only the functionality needed by the UI classes, and this does not include RTF processing.
As far as I know, at least as of 5.0, UIWebView is the only way to process RTF. See https://developer.apple.com/library/ios/#qa/qa1630/_index.html. That may have changed with 5.1, because some of Apple's other apps seem to handle rich text now (but then again, those apps may have just changed from UITextView to UIWebView…).
UIWebView doesn't give you any way to access the attributed text from the RTF, because the web view never builds attributed text—instead, it builds HTML and CSS.
The good news is that this HTML and CSS is available in the DOM. At least for some types, this isn't true—all you see is an opaque wrapper that gets rendered by some magic code inside WebKit that you can't access—but RTF is not one of those types.
Using Safari Web Inspector, I opened up a sample RTF file on my iPhone, and looked at the DOM. It's full of nodes like this:
<span class="s2"><span class="bumpedFont16">m a test file. This is some </span></span>
<span class="s3"><span class="bumpedFont16">bold</span></span>
… where those classes are defined with inline <style> tags immediately before the tag they're first used in.
So, if walk the nodes that have text, that text is like an attributed character range (although if you actually want the start and end indices you'll need to count them up yourself…), and its computed style is roughly like an attribute dictionary. Of course "roughly like" isn't "identical"; a computed style looks like this:
direction: ltr; display: inline; font-family: 'Times New Roman'; font-size: 22px;
font-weight: bold; height: auto; margin-bottom: 0px; margin-top: 0px;
padding-right: 0px; text-align: left; width: auto;
So, not actually compatible with NSAttributedString, and not nearly as nice (unless your end goal is to create HTML, of course)… but at least something you can use.
Related
On my Vue.js application i have tried CKEditor, tiptap, Froala etc. and every one of them prints out all html tags and all inline css styles.
Some images for better understanding what is a problem:
image for better understanding
image with described problem
blog form
I have searched web and found verly little info about this so if anyone know why is this happening please help me out :)
Kind Regards,
Sinisa
you should use v-html and put your text variable inside the element like this:
<p v-html="yourTextVariable"></p>
by the way if you use v-html u probably need to make text appear on next line instead of overflowing (overflowing text is common issue that happen when u use v-html) :
p{
color: #eeeeee;
text-align: justify;
white-space: initial;
overflow-wrap: break-word;
}
I'm new to bootstrap. The control-label class seems to be undocumented at the bootstrap 3 website and i have noticed it just accidentally in the examples.
Could anyone explain it's purpose or guide me where I can get more info on it?
control-label is useful when we create forms. At the time of creation, you may come across in such situation like your text field is just after the completion of label.
So you have to write CSS to make it more attractive.
In bootstrap, they have provided class called control-label whose work is to automatically set the label. So that label and text field looks better and we don't have to write CSS for that.
CSS of .control-label:
.control-label{margin-bottom:0;
vertical-align:middle;
margin-bottom:0;
text-align:right;
color:#a94442;
}
NOTE : Here I have not include padding because padding may vary according to screen size.
If you want to know more about it, just look at that Demo.You will at least get some idea about it.
See http://getbootstrap.com/css/#forms-horizontal
It's for labeling a .form-group. For .form-horizontal it does
.form-horizontal .control-label {
margin-bottom: 0;
padding-top: 7px;
text-align: right;
}
... mainly for right-aligned labels.
In the Foundation framework, there is a variable called $column-gutter, which controls the space between columns in the grid. Is it possible to have a different value for $column-gutter dependent on the media-query state? I'd love to have wider column-gutters for my desktop-users and a smaller value for mobile.
Since you can't target variable values inside media-querys in SASS, I cannot think of any easy way, but maybe you have a different solution.
As kind of a workaround, I tried targeting my divs via media-query and overwriting the padding-attributes, like so:
#media #{$small} { // This is for desktop
.l-header, .l-menu, .l-submenu, .l-main, .l-footer {
padding-left: 3em;
padding-right: 3em;
}
}
But it's not really a nice solution since then I cannot maximize a nested grid-element inside another grid-element (because the padding of the parent div). Hope you understand my problem.
Is there a line-height discrepancy in Firefox that would be affecting the line-height on this input element? http://cure.org/curekids/
You'll see in the signup form right in the middle of the page that my email a dress input field has the text vertically aligned very awkward, whereas in Chrome, Safari and IE (gasp) all is well.
What's causing this inconsistency in Firefox and how should I remedy it?
All browsers have a default style for many elements, and they are not at all consistent, so the best approach to it is using a CSS Reset style sheet to remove all those default CSS rules.
The only "disadvantage" is that after including a reset you may have to add a couple more of rules, as you might have used some of the browser's defaults styles, like heading sizes for example.
I have been using the YUI 3 CSS Reset and it works really well, but be sure of including it before your CSS.
on sponsor.css you have div#sponsor-notify-me input#email-field there this padding:10px 10px 0; just change this to padding:0 10px 0; and also change the height:32px; to height:42px;
Firefox and Webkit based browsers treat line-height differently and this affects input elements. One work-around that worked for me was to use the same values for line-height and height in the css properties for each element.
e.g.
#button{
vertical-align: middle;
line-height: 60px;
height: 60px; /* Firefox needs this to be equal to height */
}
You could take a look at this issue as well:
Font height changes between Firefox & Webkit browsers?
I'm trying to achieve cross-browser consistency for my website.
It's about this page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (please note that I prefer this URL not to be made crawlable for seo-bots)
If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).
What seems to be the problem?
It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.
The (most) relevant CSS-lines are the following ones (from the table.css file, also available through the page's source file):
table.uitbetaling {
margin: 11px 18px 10px 19px;
border: 1px solid #8ccaee;
width: 498px;
padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
margin: 0;
border: 0;
padding: 0;
width: 496px;
}
table.uitbetaling tr {
margin: 0;
border: 0;
padding: 0 1px 0 0;
}
So basically I have used a table-structure to organize images, like this: (the class of the table is uitbetaling)
<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>
If, here, I set the width of table.uitbetaling and table.uitbetaling img, table.uitbetaling td to the same value (e.g. both 496 or 498), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. img and td must be at least 2px more narrow than table.uitbetaling for the right-border be visible in Firefox.
Is there any way to solve this?
Nowadays you should be using the HTML5 doctype, if you're having issues about borders adding themselves to the element's width look up the CSS style: box-sizing
border-box - include border width/height and padding width/height or basically the width you set includes the borders/padding
content-box - the width you set on the element is only the content area, this does not include padding or borders
There is also padding-box which I don't use, usually the above two are enough.
Now sometimes, I think IE8 uses a different box-sizing than Chrome/FF etc, this is why sometimes you have issues. You can always debug and check what the box-sizing is set to.
Note: if you don't have the DOCTYPE then you're in quirks mode, and IE differs WILDLY from Chrome/FF on the box-sizing/box model - and that's your problem right there
segment your code into its simplest elements and test them on each browser. When you find the differences you can use different methods of browser detection to subtly alter the code for each instance. With that said... if you do not want to go stark raving mad, and CSS will do that more then anything in programming let the pixel go if you can.
To be safe, I usually open a table in this way:
<table cellspacing="0" cellpadding="0">
It is "old" HTML, but at least it forces coherency along browsers, and then I apply CSS as needed.
I'd checked with Opera 11, Google Chrome 7.0.517.44 and FireFox 3.6.12 have seen no difference with your site design.
Did you declare the DTD (DOCTYPE)?
Read this:
http://msdn.microsoft.com/en-us/library/bb250395.aspx
It looks that browsers have different ways to display the borders, but the DOCTYPE declaration (which goes at the top of the html document) force them to comply with the actual standards, at least in regard of css box model.
Note: I always use the xhtml transitional DTD to make my document as much compatible as possible...
Good luck!
Try:
table{border-collapse:collapse;}
Its good practice to always set table{border-collapse:collapse;} in the css, and then use cell-padding="0" and cell-spacing="0" in the html anyway.