Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17340] TiAPI: Text - Add lineHeight property to Ti.UI.Label and Ti.Ui.TextArea

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2017-11-13T23:56:39.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.0.0
ComponentsAndroid
Labelsfeature
ReporterJasper Kennis
AssigneeGary Mathews
Created2014-06-26T08:32:15.000+0000
Updated2017-11-15T06:37:20.000+0000

Description

Conscious duplicate of poorly defined ticket TIMOB-6403.

Problem

Right now, Titanium doesn't have support for the line height property of text. Preferred behaviour would be to be able to have a property lineHeight, and the methods setLineHeight and getLineHeight, on Titanium.UI.Label and Titanium.UI.TextArea. LineHeight would be set to control the vertical spacing between lines in a multiline label or textarea. Available values should be 'normal', or any supported dimension measurement. 'normal' would indicate the default lineHeight for the set fontsize, any other would apply as the platform it's run on handles it.

Test case

Inserting the following code in some window to get three labels. Expected result would be to have 
var label1, label2, label3, view;

view = Ti.UI.createView({
  height: 1000,
  width: 100
});

label1 = Ti.UI.createLabel({
  height: Ti.UI.SIZE,
  left: 0,
  lineHeight: 'normal',
  right: 0,
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed cursus nunc, id semper risus.',
  top: 0
});

label2 = Ti.UI.createLabel({
  height: Ti.UI.SIZE,
  left: 0,
  lineHeight: 20,
  right: 0,
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed cursus nunc, id semper risus.',
  top: 200
});

label3 = Ti.UI.createLabel({
  height: Ti.UI.SIZE,
  left: 0,
  lineHeight: 40,
  right: 0,
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed cursus nunc, id semper risus.',
  top: 400
});

view.add(label1);

view.add(label2);

view.add(label3);

Logs

Don't apply here.

Discussions

[Want for this feature has been long existent](http://developer.appcelerator.com/question/38101/line-height-of-text-css-property). Also, you should have seen the look on our designer's face when I told him we can't control line height with Titanium. !http://www.survivingcollege.com/wp-content/uploads/2014/04/crying-rain-gif.gif!

Comments

  1. Shuo Liang 2014-06-26

    Hi, Thank you for your report. I will notice our engineer team about your new feature requirement. Hope they will get this feature done in near feature. Regards, Shuo
  2. Mauro Parra-Miranda 2014-07-15

  3. Jasper Kennis 2014-07-16

    As in the description, I know it's duplicate, but that one was never picked up because it was too poorly defined. Does this mean it's not going to be picked up after all?
  4. Ingo Muschenetz 2014-07-16

    Using this ticket instead as it has a better definition. Resolved the other as a duplicate.
  5. Ingo Muschenetz 2014-07-16

    Hi--two questions: 1) Is this for all platforms, or just one specific one (iOS, Android, etc)? 2) Why TextArea?
  6. Jasper Kennis 2014-07-17

    1) Looking at the documentation I suspect it's all platforms. I've tested it on iOS only so far, and from what I read Android users are having the same experiences. 2) Because TextArea can also be multiline. You could say it's more important to have lineHeight on Label than on TextArea tho, maybe, since Label might be the view with more styling needs.
  7. Simon Buckingham 2015-09-23

    I would love to see the lineHeight property added for all platforms, especially for a Label but also for TextArea/TextField. Historically Titanium has been very bad at supporting high-quality, accurate UX, especially when it comes to text. This is one example. This property will help with the fundamental problem that on Android with a fixed component height the text is truncated or cropped horizontally. In other words, for example, if you require say a label of fixed height 40, and the font size is 12 (giving an approximate line height of about 15) on iOS it will render 2 lines of text. On Android it will render 2 lines and a third partial line with the bottom of the line chopped off. I believe that this is a feature of native Android, rather than Titanium. However, if one knew the line height one could set the label height to be an integer multiple of the line height and so this problem wouldn't occur. This is a solution to a particular problem. However from a graphic designer's or UX specialist's (which I am as well as a developer) point of view it is essential to be able to set the line height of a block of text. I know we have some finer controls now with attributed text, but this is very limited on Android and we really need to be able to get and set the line height of text. And as an aside, can we please have ellipsis work on Android for multi-line text (wordWrap = true) as it does work perfectly on iOS.
  8. Ivan Skugor 2015-09-24

    +1 It's PITA to fix every multiline text on Android. :(
  9. Be Rushton 2015-09-24

    +1 Been waiting years for this basic attribute
  10. Angel Petkov 2015-09-24

    Hello :) , im not quite sure what is meant by lineHight ? The actual label to be resized to match the text font size automatically ? Or for the hight of the text inside the label ?
  11. Arjan 2015-09-28

    Maybe this is a solution : https://github.com/TTTAttributedLabel/TTTAttributedLabel , it supports linespacing
  12. Ivan Skugor 2015-10-06

    Angel Petkov - check this image: http://www.pearsonified.com/wp-content/uploads/2011/12/font-size-line-height.png
  13. Be Rushton 2015-12-14

    Any chance of someone actually ever looking at this?
  14. Angel Petkov 2015-12-15

    A lineHeight property isn't actually supported by apples native UILabel. However the label supports the ability to add an attributedString. For example : 
     
    
    var win = Ti.UI.createWindow({
    	backgroundColor: "white"
    });
    
    var view = Ti.UI.createView({
      height: 1000,
      width: 100
    });
     
    var label1 = Ti.UI.createLabel({
      height: Ti.UI.SIZE,
      left: 0,
      lineHeight: 'normal',
      right: 0,
      attributedString: attr,
      top: 0
    });
    
    
    var win = Ti.UI.createWindow({
        backgroundColor: '#ddd',
    });
    
      var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis laoreet nibh in tempor. Mauris justo nibh, suscipit ut venenatis id, vehicula quis arcu.";
    
    var attr = Ti.UI.createAttributedString({
        text: text,
        attributes: [
            {
                type: Ti.UI.ATTRIBUTE_BASELINE_OFFSET,
                value: 5,
                range: [0, text.length]
            }
        ]
    });
    
    var label = Ti.UI.createLabel({
        attributedString: attr
    });
    win.add(label);
    win.open();
     
    view.add(label1);
    win.add(view);
    win.open();
    Adding the attributedString like so ,should achieve the desired effect.There should now be a line break of 5 pixels.
  15. Andrey Tkachenko 2016-02-06

    @apetkov only for iOS
  16. Carlos Henrique Zinato 2016-10-26

    Guys, I think this ticket should be marked as RESOLVED since we have lineSpacing for Android (5.4.0) and Attr Strings for iOS
  17. Be Rushton 2016-10-26

    I disagree. Feature parity between platforms is important. It doesn't make sense to have to use completely different elements for each platform to get something as simple as line spacing added. Labels are a very common element and having to swap them out conditionally for each platform dramatically complicates a cross platform code base. Attributed strings are meant for advanced formatting of text. I guess the only other alternative would then be to allow line height to be set on attributed strings on android. But at the moment their is no commonality between platforms which should be fixed.
  18. Arjan 2016-10-27

    I disagree too. Attributed strings are far more difficult to use. A simple lineHeight property, just like css, would be a hell easier :-)
  19. Hans Knöchel 2016-10-27

    Carlos is correct. That's what the Ti.UI.AttributedString is meant for and therefore should be used. It is much more configurable with a more advanced API. TIMOB-24080 and the PR by [~kopiro] will add a unified API for iOS and Android, thx!
  20. Michael Gangolf 2017-01-25

    Still awesome to have it as an AttributedString but since I've added lineSpacing to the label it's easy to port it to the TextArea: PR: https://github.com/appcelerator/titanium_mobile/pull/8789 Testcode: 
        var win = Ti.UI.createWindow({
        backgroundColor: '#fff',
        layout: "vertical"
    });
    
    var tf = Ti.UI.createTextArea({
        borderWidth: 1,
        color: "#000",
        borderColor: "#000",
        left: 10,
        right: 10,
        value: "asdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfd",
        height: 100,
        lineSpacing: {
            add: 10,
            multiply: 1
        }
    })
    
    var tf2 = Ti.UI.createTextArea({
        borderWidth: 1,
        color: "#000",
        borderColor: "#000",
        left: 10,
        right: 10,
        value: "asdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfd",
        height: 100,
        lineSpacing: {
            add: 1,
            multiply: 0.5
        }
    })
    var tf3 = Ti.UI.createTextArea({
        borderWidth: 1,
        color: "#000",
        borderColor: "#000",
        left: 10,
        right: 10,
        value: "asdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfd",
        height: 100,
        passwordMask: true
    })
    
    win.add(tf);
    win.add(tf2);
    win.add(tf3);
    
    win.open();
  21. Gary Mathews 2017-10-27

    master: https://github.com/appcelerator/titanium_mobile/pull/9564
  22. Lokesh Choudhary 2017-11-13

    FR Passed. Waiting for merge to get enabled.
  23. Lokesh Choudhary 2017-11-13

    PR Merged.
  24. Abir Mukherjee 2017-11-15

    Changes are seen in SDK 7.0.0.v20171114202841.

JSON Source