CODEWITHSUNDEEP
iosuilabelnsattributedstring
pojo
pojo

Reputation: 6042

How to draw a border around a paragraph in UILabel?

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.

Upvotes: 4

Views: 2654

Answers (6)

Ken
Ken

Reputation: 31161

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.

Upvotes: 4

Pierre
Pierre

Reputation: 400

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:

Upvotes: 4

user1552586
user1552586

Reputation:

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.

Upvotes: 0

Niller
Niller

Reputation: 109

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;
}

Upvotes: -1

Niller
Niller

Reputation: 109

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;
}

Upvotes: -1

Duncan C
Duncan C

Reputation: 131471

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?

Upvotes: 1

Related Questions