4

I am attempting to use a UILabel that can show rich content. For this I use the attributedText property in UILabel and a NSAttributedString I alloc with NSHTMLTextDocumentType.

One type of formatting I want to achieve is to draw a border around paragraphs (for quotes). Normal text formatting like font, bold, italic etc seems to work fine, but when I use CSS properties like border it does not work as I would expect. See picture; only the background-color property is shown.

UILabel with HTML

The attributedText property of this UILabel is:

<style>
  body{font:10pt Verdana;} .quote {background-color:#ddd;border:1px solid #aaa;}
</style>
<body>
  <div class="quote">This is a quote</div>
  <br/>
  Bla bla bla
</body>

What I expect is a border around the first sentence/paragraph, within the UILabel - not a border around the entire UILabel.

The text background shows, but the expected border does not. Is it even possible to achieve this? I'd prefer to use UILabel to keep my UITableView speedy.

Muruganandham K
  • 5,271
  • 5
  • 34
  • 62
pojo
  • 5,892
  • 9
  • 35
  • 47
  • Why would you be using divs or paragraphs for quotes when there are blockquote and q elements? – cimmanon Jan 08 '14 at 19:33
  • Fair point, but the formatting doesn't work regardless what tag I use for the quote markup. – pojo Jan 08 '14 at 19:56
  • NSAttributedString will not support css border properties. NSattributed string is only to show some rich text formatted content not link webview. – CoolMonster Jan 20 '14 at 12:16

6 Answers6

4

Are you using -[NSAttributedString initWithData:options:documentAttributes:error:]?

Your problem may come from this limitation:

The HTML import mechanism is meant for implementing something like markdown ( that is, text styles, colors, and so on), not for general HTML import.

https://developer.apple.com/library/ios/documentation/uikit/reference/NSAttributedString_UIKit_Additions/Reference/Reference.html#//apple_ref/occ/instm/NSAttributedString/initWithData:options:documentAttributes:error:

Pierre
  • 390
  • 3
  • 10
4

I'm not aware of this being implemented in the SDK, even if you can restrict to iOS 7. There are at least two general options though.

In a subclass of UILabel you can use the sizing methods of NSAttributedString, such as boundingRectWithSize:options:context: and size, to calculate where the subtext is to appear, and in an override of drawTextInRect: draw the border. You might deduce the required border frame by calculating the frame for the preceding text and for the subtext appended and then taking their difference.

Another option is to set custom attributes on your NSAttributedStrings, something Apple openly encourages, from Apple's overview:

You can assign any attribute name/value pair you wish to a range of characters—it is up to your application to interpret custom attributes (see Attributed String Programming Guide).

Then in a subclass of NSAttributedStrings, override the drawing methods such as drawInRect: and implement similar custom drawing logic per the first suggestion for your custom attribute, otherwise rely on super.

Ken
  • 30,811
  • 34
  • 116
  • 155
1

As far as I know iOS attributed strings don't support outlines. Have you ever seen that outside of a web view on iOS, or on Mac OS for that matter?

Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • If you mean outline for text, that's not what I am asking for here. But no, I find it difficult to find information about what NSAttributedString+NSHTMLTextDocumentType *does* support. – pojo Jan 08 '14 at 19:49
0

When I paste your code on my debugger it shows a border. Have you tried changing the color to a brighter one? Or, maybe you have other CSS somewhere else overwriting the border property in your main CSS. If so, try the !important tag to test or inline CSS within the html tag instead of embedded.

  • What debugger are you using? I know the HTML markup is working in a browser - that's not what the question is about. It's about how to make it work in the UILabel component in iOS. – pojo Jan 15 '14 at 07:25
  • Sorry I thought it was just CSS. Ignore then. –  Jan 15 '14 at 17:49
-1

Try to add a space between : and the declarations. Some interpreters prefer this. 

body {
  font: 10pt Verdana;
} 

.quote {
  background-color: #ddd;
  border: 1px solid #aaa;
}
Niller
  • 109
  • 6
-1

You could also try to add the div to the class and add the font property like this:

body {
  font-family: Verdana;
} 

div.quote {
  background-color: #ddd;
  border: 1px solid #aaa;
  font-size: 10pt;
}
Niller
  • 109
  • 6