Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14235] iOS: Support NSAttributedString

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-11-01T17:52:05.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 21, 2013 Sprint 21 API, Release 3.2.0
ComponentsiOS
Labelsios7, module_label, module_textarea, planning-3.2.0, qe-testadded
ReporterIngo Muschenetz
AssigneePedro Enrique
Created2013-06-14T16:22:52.000+0000
Updated2016-05-11T15:25:10.000+0000

Description

Text Kit is a full-featured, high-level framework for apps that need to handle text that has all the characteristics of fine typography. Text Kit can lay out styled text into paragraphs, columns, and pages; it easily flows text around arbitrary regions such as graphics; and it manages multiple fonts. See https://developer.apple.com/library/prerelease/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40009542

Comments

  1. Pedro Enrique 2013-09-30

    PR for implementation: https://github.com/appcelerator/titanium_mobile/pull/4749
  2. Pedro Enrique 2013-10-01

    Code to test: 
       var win = Ti.UI.createWindow({
       backgroundColor: '#ddd',
   });
   
   win.open();
   
   var text =  'Bacon ipsum dolor sit amet fatback leberkas salami sausage tongue strip steak. Andouille drumstick meatball boudin shank flank sausage, ribeye ham venison doner bacon ham hock. Appcelerator Titanium sucks rocks! Filet mignon ham pancetta, tail salami pork chop short ribs leberkas kielbasa t-bone tri-tip bresaola. Kevin beef ribs tail hamburger andouille filet mignon bresaola ham ham hock flank meatball pork chop corned beef';
   
   var attr = Ti.UI.iOS.createAttributedString({
   	text: text,
   	attributes: [
           
           // Underlines text
           {
               type: Ti.UI.iOS.ATTRIBUTE_UNDERLINES_TYLE,
               value: Ti.UI.iOS.ATTRIBUTE_UNDERLINE_STYLE_SINGLE | Ti.UI.iOS.ATTRIBUTE_UNDERLINE_PATTERN_DASH_DOT_DOT,
               range: [0, text.length]
           },
           
           // Sets a background color
           {
               type: Ti.UI.iOS.ATTRIBUTE_BACKGROUND_COLOR,
               value: "blue",
               range: [text.indexOf('Titanium'), ('Titanium').length]
           },
           // Sets a foreground color
           {
               type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
               value: "white",
               range: [0,  text.length]
           },
           // Sets a background color
           {
               type: Ti.UI.iOS.ATTRIBUTE_BACKGROUND_COLOR,
               value: "yellow",
               range: [text.indexOf('rocks!'), ('rocks!').length]
           },
           // Sets a foreground color
           {
               type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
               value: "black",
               range: [text.indexOf('rocks!'), ('rocks!').length]
           },
           // Crossed out text
   		{
   			type: Ti.UI.iOS.ATTRIBUTE_STRIKETHROUGH_STYLE,
   			value: Ti.UI.iOS.ATTRIBUTE_UNDERLINE_STYLE_SINGLE,
               range: [text.indexOf('sucks'), ('sucks').length]
   		},
   
           // Creates a shadow
   		{
   			type: Ti.UI.iOS.ATTRIBUTE_SHADOW,
   			value: {
   				offset: {
   	        		width: 1,
       	    		height: 1
       			},
       			blurRadius: 1,
       			color: 'green'
       		},
   			range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
   		}
           /*
           // Writing direction
           // Only works in iOS7 and above - does not have side effects on iOS 6
           {
               type: Ti.UI.iOS.ATTRIBUTE_WRITING_DIRECTION,
               value: Ti.UI.iOS.ATTRIBUTE_WRITING_DIRECTION_RIGHT_TO_LEFT | Ti.UI.iOS.ATTRIBUTE_WRITING_DIRECTION_OVERRIDE,
               range: [0, text.length]
           }
           */
   	]
   });
   
   var label = Ti.UI.createLabel({
   	left: 20,
   	right: 20,
       height: Ti.UI.SIZE,
       backgroundColor: 'red',
   	attributedString: attr
   });
   
   win.add(label);
  3. Christopher Beloch 2013-10-01

    links would be great! check https://github.com/viezel/NappUI/
  4. Pedro Enrique 2013-10-01

    Thanks Christopher, I'll look into it. Added documentation yaml to PR.
  5. kosso 2013-10-09

    ++1 This is one of those 'holy grail' features which many of us have wanted for a very long time - particularly for thing like social networking clients. Christopher is right though. We need clickable links in the there too, which NappUI seems to have achieved. :)
  6. Yamill Vallecillo 2013-10-09

    Thanks for implementing this feature. I agree as well, we most definitely need clickable links :)
  7. Yamill Vallecillo 2013-10-09

    Oh yea...would also be great not only implement links but also event listeners.
  8. Pedro Enrique 2013-10-09

    Hi guys, I added the link functionality. This will be available for iOS 7 and above when using a TextArea with the editable property set to false. Sample code: 
       
   var win = Ti.UI.createWindow({
       backgroundColor: '#ddd',
   });
   
   var text =  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Appcelerator Titanium rocks! In et erat vel elit convallis sollicitudin.';
    
   var attr = Ti.UI.iOS.createAttributedString({
       text: text,
       attributes: [
           {
               type: Ti.UI.iOS.ATTRIBUTE_LINK,
               value: 'http://appcelerator.com/',
               range: [text.indexOf('Appcelerator Titanium'), ('Appcelerator Titanium').length]
           },
           {
               type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
               value: 'red',
               range: [text.indexOf('rocks!'), ('rocks!').length]
           },
           {
               type: Ti.UI.iOS.ATTRIBUTE_FONT,
               value: {fontSize: 18, fontWeight: 'bold'},
               range: [text.indexOf('rocks!'), ('rocks!').length]
           }
       ]
   });
    
   var label = Ti.UI.createTextArea({
       left: 20,
       right: 20,
       height: Ti.UI.SIZE,
       backgroundColor: '#CCC',
       attributedString: attr,
       editable: false,
   });
    
   label.addEventListener('link', function(e){
       alert(e)
   });
   
   win.add(label);
   
   win.open();
    You can also set the property handleLinks to true in the TextArea to enable the default iOS behavior, which is to try to open the link, similar to Ti.Platform.openURL() 
       var label = Ti.UI.createTextArea({
       left: 20,
       right: 20,
       height: 400,
       backgroundColor: '#CCC',
       attributedString: attr,
       editable: false,
       handleLinks: true
   });
  9. Yamill Vallecillo 2013-10-09

    Pedro, thanks for implementing! I look forward to using this when the next nightly build goes out. Cheers.
  10. kosso 2013-10-09

    Great stuff Pedro. But isn't this possible with a Label? Would (potentially) hundreds of textAreas - one on each row of a tableView, for example (think : a Twitter/App.net client app, with clickable hashtags, mentions etc.) be a bit heavy?
  11. Vishal Duggal 2013-10-09

    PR https://github.com/appcelerator/titanium_mobile/pull/4749 merged.
  12. Vishal Duggal 2013-10-09

    @[~kosso] We have another ticket open (TIMOB-15441) where we will address some of the deficiencies we find. The text area implementation for links is pretty straightforward. We will be researching how to support link for labels.
  13. kosso 2013-10-09

    @Vishal thanks. As mentioned before, the nappUI dropin works with labels. And also offers event listeners for the links too. https://github.com/viezel/NappUI/ Also Ti.RichText from @euphoric (Christian Sullivan - who I think now works for Appcelerator) did it with labels. It's in the MarketPlace http://www.screenr.com/ZkP8 Though I think he uses CoreText and not TextKit
  14. Ygor Lemos 2013-10-09

    What about textFields?
  15. Yamill Vallecillo 2013-10-09

    How can I use this feature? Is this going to the nightly builds now that it's merged to master, or do I have to wait for the next update?
  16. Thomas Weber 2013-10-10

    Would be really useful if support for NSParagraphstyle with hyphenationFactor could be added.
  17. Wilson Luu 2013-10-31

    Reopening ticket. Ti.UI.iOS.ATTRIBUTE_UNDERLINES_TYLE should be Ti.UI.iOS.ATTRIBUTE_UNDERLINE_STYLE. Tested on: Titanium Studio, build: 3.2.0.201310310121 SDK build: 3.2.0.v20131030184044 Device: iphone 4s (6.0.1), iphone 5s (7.0.2) Xcode: 5.0
  18. Pedro Enrique 2013-10-31

    PR for typo https://github.com/appcelerator/titanium_mobile/pull/4896
  19. Wilson Luu 2013-11-01

  20. Shannon Hicks 2014-11-17

    Is it possible that Ti.UI.ATTRIBUTE_LINK could respond to click events in addition to longpress? It is difficult to explain to users that they see something that looks clickable, but no, they need to longpress it.
  21. Ingo Muschenetz 2015-01-14

    [~iotashan] I don't believe this was addressed. Can you add a separate bug or improvement for your request?
  22. Gertjan Smits 2016-05-11

    Like Thomas mentioned, *hyphenationFactor* (Android *hyphenationFrequency*) would be really helpful to have. iOS: https://developer.apple.com/library/ios/documentation/Cocoa/Reference/ApplicationKit/Classes/NSMutableParagraphStyle_Class/#//apple_ref/occ/instp/NSMutableParagraphStyle/hyphenationFactor Android: http://developer.android.com/reference/android/widget/TextView.html#attr_android:hyphenationFrequency
  23. Gertjan Smits 2016-05-11

    Made a separate ticket for that: AC-3614

JSON Source