[AC-6629] AttributedString type "strikethrough" not working on portions, only full length of strings

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Not Our Bug
Resolution Date	2020-11-26T15:02:42.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	n/a
Reporter	eric harms
Assignee	Rene Pot
Created	2020-11-17T01:38:12.000+0000
Updated	2020-11-26T15:03:01.000+0000

Description

Hi, I am trying to apply an attributedString of type "strikethrough" as documented here https://docs.appcelerator.com/platform/latest/#!/guide/Attributed_Strings-section-src-37538231_AttributedStrings-Strikethrough I've tested the code in my app as well as separately in a sample app. It seems that the strikethrough can only be applied to the full string, and not parts of the string via the range of the attributedString. To reproduce, create a sample app with the following. range: [0, text.length] should show the full strikethrough. Changing the range to what is in the documentation example range: [text.indexOf('hyperloop'), ('hyperloop').length] does not show the strikethrough, and adding manual values like [0,13] does not create the strikethrough. Issue is iOS only, and all other attribute types work.

// index.xml
<Alloy>
	<Window class="container" >
		<Label id="myLabel" />
	</Window>
</Alloy>

// index.js
var text = "Have you tried hyperloop ti.next yet?";
var attr = Ti.UI.createAttributedString({
    text: text,
    attributes: [
        {
            type: Ti.UI.ATTRIBUTE_STRIKETHROUGH_STYLE,
            value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_THICK, 
            range: [0, text.length]
        }
    ]
});

$.myLabel.attributedString = attr

$.index.open();

Comments

eric harms 2020-11-17

If I do something like this, the strikethrough is applied. It does not if i use text1 and text2 in the attributes

   var text1 = "Have you tried "
   var text2 = "hyperloop"
   var text3 = " ti.next yet?"
   var text = text1 + text2 + text3;
   var attr = Ti.UI.createAttributedString({
       text: text,
       attributes: [
           {
               type: Ti.UI.ATTRIBUTE_STRIKETHROUGH_STYLE,
               value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_THICK, // Ignored by Android only displays a single line
               range: [text.indexOf(text2), (text2).length]
           },
           {
               type: Ti.UI.ATTRIBUTE_STRIKETHROUGH_STYLE,
               value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_THICK, // Ignored by Android only displays a single line
               range: [text.indexOf(text3), (text3).length]
           }
       ]
   });

Rene Pot 2020-11-18

Hi, ATTRIBUTE_UNDERLINE_STYLE_THICK is an iOS and MacOS only property I'm afraid, not supported on Android. [Link to docs](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI-property-ATTRIBUTE_UNDERLINE_STYLE_THICK) edit: ignore this comment as I misread it being an android issue :)

Vijay Singh 2020-11-25

[~eric.harms@gmail.com] This is iOS 14 bug, which got fixed in iOS 14.2 . See https://developer.apple.com/forums/thread/657015. In iOS < 14.0, it is working fine. As a workaround for 14.0 <= iOS < 14.2, https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI-property-ATTRIBUTE_BASELINE_OFFSET can be used in combination with https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI-property-ATTRIBUTE_STRIKETHROUGH_STYLE . See following example -

   var win = Ti.UI.createWindow({
       backgroundColor: '#ddd',
   });
    
   var text = "Have you tried hyperloop ti.next yet?";
   var attr = Ti.UI.createAttributedString({
       text: text,
       attributes: [
           {
               type: Ti.UI.ATTRIBUTE_STRIKETHROUGH_STYLE,
               value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_THICK,
               range: [text.indexOf('hyperloop'), ('hyperloop').length]
           },
           {
               type: Ti.UI.ATTRIBUTE_BASELINE_OFFSET,
               value: 0,     // default value
               range: [text.indexOf('hyperloop'), ('hyperloop').length]
           }
       ]
   });
    
   var label = Ti.UI.createLabel({
       attributedString: attr
   });
    
   win.add(label);
   win.open();

JSON Source