Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-19165] Cannot style links in Attributed Strings

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2016-04-21T08:06:39.000+0000
Affected Version/sn/a
Fix Version/sRelease 5.2.1
ComponentsiOS
LabelsTCSupportTriage, attributedString, color, links, underline
ReporterFokke Zandbergen
AssigneeAngel Petkov
Created2014-11-12T13:57:18.000+0000
Updated2016-04-21T08:06:44.000+0000

Description

The following test case shows you cannot override the color and underlining of links in Attributed Strings. It doesn't matter if you add the link before or after styling the same (or part of) the text you make a link. I'd like to change the color and remove the underline.

Test Case

var win = Titanium.UI.createWindow({
  backgroundColor: '#ddd',
});

win.add(Ti.UI.createLabel({
  top: 100,
  attributedString: Ti.UI.iOS.createAttributedString({
    text: 'Appcelerator always blue and underlined',
    attributes: [
    {
      type: Ti.UI.iOS.ATTRIBUTE_LINK,
      value: 'http://www.appcelerator.com',
      range: [0, 12]
    }, 
    {
      type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
      value: 'red',
      range: [0, 12]
    },
    {
      type: Ti.UI.iOS.ATTRIBUTE_UNDERLINES_STYLE,
      value: Ti.UI.iOS.ATTRIBUTE_UNDERLINE_STYLE_NONE,
      range: [0, 12]
    }]
  })
}));

win.open();

Comments

  1. Mike Fogg 2015-07-08

    Curious, any updates on this? Seems like a pretty common thing to want to update the color of a link to match your app's interface...
  2. Arjan 2015-09-22

    Still nothing on this? :-(
  3. Chee Kiat Ng 2015-09-22

    Hi all, please note that: {quote} ON iOS, Titanium.UI.ATTRIBUTE_LINK only supported on , with editable set to false and autoLink enabled. {quote} Will update the docs online about this soon.
  4. Richard Lustemberg 2015-09-28

    I hope this doesn't mean the issue is closed... Titanium.UI.ATTRIBUTE_LINK does work on Ti.UI.Label, only that you cannot change underline and color. Without being able to override the styling, it becomes unusable in almost all use cases, no matter if the property is applied to a textfield, textarea or label.
  5. Arjan 2015-09-28

    Maybe, if someone would wrap this module for Titanium, it would be solved: https://github.com/TTTAttributedLabel/TTTAttributedLabel ? Via http://stackoverflow.com/questions/15381028/make-link-in-uilabel-attributedtext-not-blue-and-not-underlined?answertab=active#tab-top
  6. Fokke Zandbergen 2016-01-04

    The module [~arif] linked does seem to give a hint on how we can implement this: * https://github.com/TTTAttributedLabel/TTTAttributedLabel/blob/master/TTTAttributedLabel/TTTAttributedLabel.m#L427-L429 * https://github.com/TTTAttributedLabel/TTTAttributedLabel/blob/master/TTTAttributedLabel/TTTAttributedLabel.m#L650-L652
  7. David Fox 2016-01-17

    I ran into this issue recently and it was quite frustrating. Fortunately, there is a sort of workaround, albeit it is extremely ugly. You are able to change the underline color on the link. So what I did was have a background label and a foreground label, each one with the exact same text. In the background label, you add the link with the unchangeable text color, and then in the foreground, you use the attributed string to paint over the actual link with text colored to the actual color you want it. This allows you to still use the link functionality in the label but also "change" its color. It would be great if this gets fixed soon since that workaround is very ugly, but I guess it does work for most use-cases.
  8. Fokke Zandbergen 2016-01-17

    [~dfoxinator] we are looking into this issue this very moment and hope to add it soon.
  9. David Fox 2016-01-18

    Thanks, that's great news.
  10. Angel Petkov 2016-01-18

    [~dfoxinator] Hello David, working on a fix for the issue currently. I apologise with the delay , should be fixed very soon, thank you for the patience!.
  11. Angel Petkov 2016-01-26

    Hello , the issue should be fixed now. The ability to set a color for an NSlink isn't actually supported by apples delegate however we've created a workaround the issue. So setting the color,underline style,color or any attributed string property can be set. Use the code provided to test. Expected result: Clicking any of the 2 urls should open a webView with the website hyperlinked. PR : https://github.com/appcelerator/titanium_mobile/pull/7645 
        var win = Titanium.UI.createWindow({
      backgroundColor: '#ddd',
    });
    var label = Ti.UI.createLabel({
      top: 100,
      attributedString: Ti.UI.createAttributedString({
        text: 'Appcelerator always blue and underlined',
        attributes: [
        {
          type: Ti.UI.ATTRIBUTE_LINK,
          value: 'http://www.appcelerator.com',
          range: [0, 12]
        }, 
        {
          type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
          value: 'red',
          range: [0, 12]
        },
        {
          type: Ti.UI.iOS.ATTRIBUTE_UNDERLINES_STYLE,
          value: Ti.UI.iOS.ATTRIBUTE_UNDERLINE_STYLE_NONE,
          range: [0, 12]
        },
      {
          type: Ti.UI.ATTRIBUTE_LINK,
          value: 'https://www.youtube.com',
          range: [20, 4]
        }]
      })
    });
    win.add(label);
    win.open();
    
    label.addEventListener("link",function(e)
    {
      var webview = Titanium.UI.createWebView({
        url:e.url,
        height: 300,
        width:  300
       });
      win.add(webview);
    });
  12. Samuel East 2016-01-29

    Was anything resolved with this as it doesn't work for me SDK 5.1.2GA? Thanks
  13. Fokke Zandbergen 2016-01-29

    [~samueleast] It is in review and will be part of 5.2.0 or 5.2.1
  14. Samuel East 2016-01-29

    Awesome thanks fokke ;)
  15. Chee Kiat Ng 2016-02-18

    New PR here: https://github.com/appcelerator/titanium_mobile/pull/7751 as Angel closed the earlier one in favor of this one.
  16. Dongwoo Gim 2016-02-22

    I want very much, it will be part of 5.2.0. Thank you.
  17. Angel Petkov 2016-02-23

    PR(5_2_X):https://github.com/appcelerator/titanium_mobile/pull/7771
  18. Fokke Zandbergen 2016-02-24

    [~engross] it will be part of 5.2.1
  19. Fokke Zandbergen 2016-02-24

    [~apetkov] how exactly will this PR allow you to set the color for the link. In the PR I see it hard coded to blue? Will setting a color on the same range override that?
  20. Angel Petkov 2016-02-24

    [~fokkezb] If you don't give the link a color or any other property it will default to blue. If a color is passed in it will override the base color and set it to wherever was passed in If.if its in the same range, like you said. If you run my example code with the master branch SDK , as the changes are merged there you will see the first link is red with no underline. Thanks :).
  21. Fokke Zandbergen 2016-02-25

    Thanks [~apetkov]!
  22. Eric Wieber 2016-02-25

    Verified fixed, using: MacOS 10.11.3 (15D21) Studio 4.5.0.201602170821 Ti SDK 5.2.1.v20160223221727 Appc NPM 4.2.3 Appc CLI 5.2.0 Alloy 1.7.33 Xcode 7.2 (7C68) Links can be styled in attributed strings by setting specific attributes for the link ranges (underscore, color, link). Tested using the provided test cases.
  23. David Fox 2016-03-23

    I tested this on my project on 5.2.1 latest RC and the fix seems to work perfectly. Thanks!
  24. Fokke Zandbergen 2016-04-21

    [~bimmel] this issue is listed in https://wiki.appcelerator.org/display/~bimmel/Titanium+SDK+5.3.0.Beta+Release+Note#TitaniumSDK5.3.0.BetaReleaseNote-CommunityCredits but was already fixed in 5.2.1 [~cng] why do issues sometimes have 2 fix versions?
  25. Chee Kiat Ng 2016-04-21

    So that if it could make it in time for the earlier version great, if not, the second version is a must. In this case, we forgot to remove the second fix version because it actually made it in time. Please comment on Brian's release notes to inform him of the change.

JSON Source