Use attributed string with combined attributes hides last line of label

Question

I'm adding a label as attributed string to my iPhone app. I want to use two attributes; Ti.UI.ATTRIBUTE_BASELINE_OFFSET and Ti.UI.ATTRIBUTE_FONT.

When I use those attributes apart, they both work fine. But when I combine them into one attributed string, my last line of text disappears and gets truncated. See my code below:

var attributedString = Ti.UI.createAttributedString({
    text: text,
    attributes: [
        {
            type: Ti.UI.ATTRIBUTE_BASELINE_OFFSET,
            value: attributeBaseLineOffset,
            range: [0, text.length]
        },
        {
            type: Ti.UI.ATTRIBUTE_FONT,
            value: {fontFamily: "Dosis-Bold", fontSize: "16dp"},
            range: [5,10]
        }
    ]
});

When I use the debug mode on the iOS simulator, I can see the height of the label gets adjusted to the first attribute(the baseline offset). However the font attributed adds a little extra padding at the top of the label, which is just enough to push the last line of text outside the label container and then it truncates.

As a workaround I tried setting the label height manually, but this has no effect.

Does anyone know how to stop the truncating and show my full text in the label?

Answer 1

This is an easy fix. Depending not the string length, the choice is really whether to use Ti.UI.Label vs Ti.UI.TextArea. Of course you can always use a TextArea everywhere if needed in place of Label.

Check out the following example, which should handle what your looking for using TextArea instead of Label.

var text =  'Bacon ipsum dolor Appcelerator Titanium rocks! sit amet fatback    leberkas salami sausage tongue strip steak.';
var attributedString = Ti.UI.createAttributedString({
text: text,
attributes: [
            {
                    type: Ti.UI.ATTRIBUTE_BASELINE_OFFSET,
                    value: 25,
                    range: [0, text.length]
            },
            {
                    type: Ti.UI.ATTRIBUTE_FONT,
                    value: {fontFamily: "Dosis-Bold", fontSize: "16dp"},
                    range: [5,10]
        }
    ]
});

var label = Titanium.UI.createTextArea({
    left: 20,
    right: 20,
    height: Titanium.UI.SIZE,
        borderWidth:1,
        borderColor: "#ececec",
    attributedString: attributedString
});

$.theView.add(label);

I don't know your text string / use case so can't certain, but this should work with your needs