{ "id": "132263", "key": "TIMOB-17340", "fields": { "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [ { "id": "17609", "description": "", "name": "Release 7.0.0", "archived": false, "released": true, "releaseDate": "2017-12-07" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2017-11-13T23:56:39.000+0000", "created": "2014-06-26T08:32:15.000+0000", "priority": { "name": "High", "id": "2" }, "labels": [ "feature" ], "versions": [], "issuelinks": [ { "id": "39120", "type": { "id": "10002", "name": "Duplicate", "inward": "is duplicated by", "outward": "duplicates" }, "inwardIssue": { "id": "83270", "key": "TIMOB-6403", "fields": { "summary": "Add lineHeight property for labels", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "priority": { "name": "Low", "id": "4" }, "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false } } } } ], "assignee": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2017-11-15T06:37:20.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10202", "name": "Android", "description": "Android Platform" } ], "description": "Conscious duplicate of poorly defined ticket TIMOB-6403.\r\n\r\nh2. Problem\r\n\r\nRight 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`.\r\n\r\nLineHeight would be set to control the vertical spacing between lines in a multiline label or textarea.\r\n\r\nAvailable 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.\r\n\r\nh2. Test case\r\n\r\nInserting the following code in some window to get three labels. Expected result would be to have\r\n\r\n{code:lang=javascript|title=app.js}\r\nvar label1, label2, label3, view;\r\n\r\nview = Ti.UI.createView({\r\n height: 1000,\r\n width: 100\r\n});\r\n\r\nlabel1 = Ti.UI.createLabel({\r\n height: Ti.UI.SIZE,\r\n left: 0,\r\n lineHeight: 'normal',\r\n right: 0,\r\n text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed cursus nunc, id semper risus.',\r\n top: 0\r\n});\r\n\r\nlabel2 = Ti.UI.createLabel({\r\n height: Ti.UI.SIZE,\r\n left: 0,\r\n lineHeight: 20,\r\n right: 0,\r\n text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed cursus nunc, id semper risus.',\r\n top: 200\r\n});\r\n\r\nlabel3 = Ti.UI.createLabel({\r\n height: Ti.UI.SIZE,\r\n left: 0,\r\n lineHeight: 40,\r\n right: 0,\r\n text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed cursus nunc, id semper risus.',\r\n top: 400\r\n});\r\n\r\nview.add(label1);\r\n\r\nview.add(label2);\r\n\r\nview.add(label3);\r\n{code}\r\n\r\nh2. Logs\r\n\r\nDon't apply here.\r\n\r\nh2. Discussions\r\n\r\n[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.\r\n\r\n!http://www.survivingcollege.com/wp-content/uploads/2014/04/crying-rain-gif.gif!", "attachment": [], "flagged": false, "summary": "TiAPI: Text - Add lineHeight property to Ti.UI.Label and Ti.Ui.TextArea", "creator": { "name": "jasperkennis", "key": "jasperkennis", "displayName": "Jasper Kennis", "active": true, "timeZone": "Europe/Berlin" }, "subtasks": [], "reporter": { "name": "jasperkennis", "key": "jasperkennis", "displayName": "Jasper Kennis", "active": true, "timeZone": "Europe/Berlin" }, "environment": "Titanium SDK: 3.2.3.GA\r\nPlatform & version: Any mobile\r\nDevice Details: Any devise\r\nHost Operating System: Any OS", "closedSprints": [ { "id": 963, "state": "closed", "name": "2017 Sprint 22 SDK", "startDate": "2017-10-22T21:43:59.523Z", "endDate": "2017-11-05T22:43:00.000Z", "completeDate": "2017-11-06T16:33:42.425Z", "originBoardId": 114 }, { "id": 968, "state": "closed", "name": "2017 Sprint 23 SDK", "startDate": "2017-11-05T16:37:25.071Z", "endDate": "2017-11-19T16:37:00.000Z", "completeDate": "2017-11-20T18:57:56.565Z", "originBoardId": 114 } ], "comment": { "comments": [ { "id": "311039", "author": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "body": "Hi,\r\n\r\nThank you for your report. I will notice our engineer team about your new feature requirement. \r\nHope they will get this feature done in near feature.\r\n\r\nRegards,\r\nShuo", "updateAuthor": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "created": "2014-06-26T09:08:10.000+0000", "updated": "2014-06-26T09:08:10.000+0000" }, { "id": "314263", "author": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "updateAuthor": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "created": "2014-07-15T20:49:01.000+0000", "updated": "2014-07-15T20:49:01.000+0000" }, { "id": "314379", "author": { "name": "jasperkennis", "key": "jasperkennis", "displayName": "Jasper Kennis", "active": true, "timeZone": "Europe/Berlin" }, "body": "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?", "updateAuthor": { "name": "jasperkennis", "key": "jasperkennis", "displayName": "Jasper Kennis", "active": true, "timeZone": "Europe/Berlin" }, "created": "2014-07-16T10:05:48.000+0000", "updated": "2014-07-16T10:05:48.000+0000" }, { "id": "314421", "author": { "name": "ingo", "key": "ingo", "displayName": "Ingo Muschenetz", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Using this ticket instead as it has a better definition. Resolved the other as a duplicate.", "updateAuthor": { "name": "ingo", "key": "ingo", "displayName": "Ingo Muschenetz", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-07-16T17:12:08.000+0000", "updated": "2014-07-16T17:12:08.000+0000" }, { "id": "314430", "author": { "name": "ingo", "key": "ingo", "displayName": "Ingo Muschenetz", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Hi--two questions:\r\n\r\n1) Is this for all platforms, or just one specific one (iOS, Android, etc)?\r\n2) Why TextArea?", "updateAuthor": { "name": "ingo", "key": "ingo", "displayName": "Ingo Muschenetz", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-07-16T18:01:29.000+0000", "updated": "2014-07-16T18:01:29.000+0000" }, { "id": "314610", "author": { "name": "jasperkennis", "key": "jasperkennis", "displayName": "Jasper Kennis", "active": true, "timeZone": "Europe/Berlin" }, "body": "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.\r\n2) 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.", "updateAuthor": { "name": "jasperkennis", "key": "jasperkennis", "displayName": "Jasper Kennis", "active": true, "timeZone": "Europe/Berlin" }, "created": "2014-07-17T08:20:44.000+0000", "updated": "2014-07-17T08:20:44.000+0000" }, { "id": "364801", "author": { "name": "icecandy", "key": "icecandy", "displayName": "Simon Buckingham", "active": true, "timeZone": "Europe/London" }, "body": "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.\r\n\r\nThis 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.\r\n\r\nI 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.\r\n\r\nThis 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.\r\n\r\nAnd as an aside, can we please have ellipsis work on Android for multi-line text (wordWrap = true) as it does work perfectly on iOS.", "updateAuthor": { "name": "icecandy", "key": "icecandy", "displayName": "Simon Buckingham", "active": true, "timeZone": "Europe/London" }, "created": "2015-09-23T16:21:20.000+0000", "updated": "2015-09-23T16:21:20.000+0000" }, { "id": "364857", "author": { "name": "ivan.skugor", "key": "ivan.skugor", "displayName": "Ivan Skugor", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "+1\r\n\r\n\r\nIt's PITA to fix every multiline text on Android. :(", "updateAuthor": { "name": "ivan.skugor", "key": "ivan.skugor", "displayName": "Ivan Skugor", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2015-09-24T08:34:30.000+0000", "updated": "2015-09-24T08:34:30.000+0000" }, { "id": "364858", "author": { "name": "bearus", "key": "bearus", "displayName": "Be Rushton", "active": true, "timeZone": "Australia/Brisbane" }, "body": "+1\r\nBeen waiting years for this basic attribute", "updateAuthor": { "name": "bearus", "key": "bearus", "displayName": "Be Rushton", "active": true, "timeZone": "Australia/Brisbane" }, "created": "2015-09-24T08:38:28.000+0000", "updated": "2015-09-24T08:38:28.000+0000" }, { "id": "364933", "author": { "name": "apetkov", "key": "apetkov", "displayName": "Angel Petkov", "active": true, "timeZone": "America/Los_Angeles" }, "body": "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 ? ", "updateAuthor": { "name": "apetkov", "key": "apetkov", "displayName": "Angel Petkov", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-09-24T23:29:20.000+0000", "updated": "2015-09-24T23:29:20.000+0000" }, { "id": "365090", "author": { "name": "arif", "key": "arif", "displayName": "Arjan", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "Maybe this is a solution : https://github.com/TTTAttributedLabel/TTTAttributedLabel , it supports linespacing\r\n", "updateAuthor": { "name": "arif", "key": "arif", "displayName": "Arjan", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2015-09-28T13:40:16.000+0000", "updated": "2015-09-28T13:40:16.000+0000" }, { "id": "365874", "author": { "name": "ivan.skugor", "key": "ivan.skugor", "displayName": "Ivan Skugor", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "Angel Petkov - check this image: http://www.pearsonified.com/wp-content/uploads/2011/12/font-size-line-height.png", "updateAuthor": { "name": "ivan.skugor", "key": "ivan.skugor", "displayName": "Ivan Skugor", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2015-10-06T08:55:28.000+0000", "updated": "2015-10-06T08:55:28.000+0000" }, { "id": "372788", "author": { "name": "bearus", "key": "bearus", "displayName": "Be Rushton", "active": true, "timeZone": "Australia/Brisbane" }, "body": "Any chance of someone actually ever looking at this?", "updateAuthor": { "name": "bearus", "key": "bearus", "displayName": "Be Rushton", "active": true, "timeZone": "Australia/Brisbane" }, "created": "2015-12-14T03:33:36.000+0000", "updated": "2015-12-14T03:33:36.000+0000" }, { "id": "373037", "author": { "name": "apetkov", "key": "apetkov", "displayName": "Angel Petkov", "active": true, "timeZone": "America/Los_Angeles" }, "body": "A lineHeight property isn't actually supported by apples native UILabel. However the label supports the ability to add an attributedString. For example : \r\n\r\n{code:javascript} \r\n\r\nvar win = Ti.UI.createWindow({\r\n\tbackgroundColor: \"white\"\r\n});\r\n\r\nvar view = Ti.UI.createView({\r\n height: 1000,\r\n width: 100\r\n});\r\n \r\nvar label1 = Ti.UI.createLabel({\r\n height: Ti.UI.SIZE,\r\n left: 0,\r\n lineHeight: 'normal',\r\n right: 0,\r\n attributedString: attr,\r\n top: 0\r\n});\r\n\r\n\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor: '#ddd',\r\n});\r\n\r\n 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.\";\r\n\r\nvar attr = Ti.UI.createAttributedString({\r\n text: text,\r\n attributes: [\r\n {\r\n type: Ti.UI.ATTRIBUTE_BASELINE_OFFSET,\r\n value: 5,\r\n range: [0, text.length]\r\n }\r\n ]\r\n});\r\n\r\nvar label = Ti.UI.createLabel({\r\n attributedString: attr\r\n});\r\nwin.add(label);\r\nwin.open();\r\n \r\nview.add(label1);\r\nwin.add(view);\r\nwin.open();\r\n{code}\r\n\r\nAdding the attributedString like so ,should achieve the desired effect.There should now be a line break of 5 pixels. ", "updateAuthor": { "name": "apetkov", "key": "apetkov", "displayName": "Angel Petkov", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-12-15T22:08:30.000+0000", "updated": "2015-12-15T22:08:30.000+0000" }, { "id": "376191", "author": { "name": "falko", "key": "falko", "displayName": "Andrey Tkachenko", "active": true, "timeZone": "Europe/Moscow" }, "body": "@apetkov only for iOS", "updateAuthor": { "name": "falko", "key": "falko", "displayName": "Andrey Tkachenko", "active": true, "timeZone": "Europe/Moscow" }, "created": "2016-02-06T19:13:16.000+0000", "updated": "2016-02-06T19:13:16.000+0000" }, { "id": "399864", "author": { "name": "chmiiller", "key": "chmiiller", "displayName": "Carlos Henrique Zinato", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Guys, I think this ticket should be marked as RESOLVED since we have `lineSpacing` for Android (5.4.0) and Attr Strings for iOS", "updateAuthor": { "name": "chmiiller", "key": "chmiiller", "displayName": "Carlos Henrique Zinato", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2016-10-26T14:29:16.000+0000", "updated": "2016-10-26T14:29:16.000+0000" }, { "id": "399891", "author": { "name": "bearus", "key": "bearus", "displayName": "Be Rushton", "active": true, "timeZone": "Australia/Brisbane" }, "body": "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. \r\n\r\nLabels 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. \r\n\r\n", "updateAuthor": { "name": "bearus", "key": "bearus", "displayName": "Be Rushton", "active": true, "timeZone": "Australia/Brisbane" }, "created": "2016-10-26T20:47:43.000+0000", "updated": "2016-10-26T20:47:43.000+0000" }, { "id": "399919", "author": { "name": "arif", "key": "arif", "displayName": "Arjan", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "I disagree too. Attributed strings are far more difficult to use. A simple lineHeight property, just like css, would be a hell easier :-)", "updateAuthor": { "name": "arif", "key": "arif", "displayName": "Arjan", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2016-10-27T07:02:55.000+0000", "updated": "2016-10-27T07:04:50.000+0000" }, { "id": "399942", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "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!", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2016-10-27T15:24:46.000+0000", "updated": "2016-10-27T15:24:46.000+0000" }, { "id": "405298", "author": { "name": "michael", "key": "michael", "displayName": "Michael Gangolf", "active": true, "timeZone": "Europe/Berlin" }, "body": "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:\r\n\r\nPR: https://github.com/appcelerator/titanium_mobile/pull/8789\r\n\r\nTestcode:\r\n\r\n{code:java}\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor: '#fff',\r\n layout: \"vertical\"\r\n});\r\n\r\nvar tf = Ti.UI.createTextArea({\r\n borderWidth: 1,\r\n color: \"#000\",\r\n borderColor: \"#000\",\r\n left: 10,\r\n right: 10,\r\n value: \"asdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfd\",\r\n height: 100,\r\n lineSpacing: {\r\n add: 10,\r\n multiply: 1\r\n }\r\n})\r\n\r\nvar tf2 = Ti.UI.createTextArea({\r\n borderWidth: 1,\r\n color: \"#000\",\r\n borderColor: \"#000\",\r\n left: 10,\r\n right: 10,\r\n value: \"asdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfd\",\r\n height: 100,\r\n lineSpacing: {\r\n add: 1,\r\n multiply: 0.5\r\n }\r\n})\r\nvar tf3 = Ti.UI.createTextArea({\r\n borderWidth: 1,\r\n color: \"#000\",\r\n borderColor: \"#000\",\r\n left: 10,\r\n right: 10,\r\n value: \"asdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfdasdfasdfasfd\",\r\n height: 100,\r\n passwordMask: true\r\n})\r\n\r\nwin.add(tf);\r\nwin.add(tf2);\r\nwin.add(tf3);\r\n\r\nwin.open();\r\n{code}\r\n", "updateAuthor": { "name": "michael", "key": "michael", "displayName": "Michael Gangolf", "active": true, "timeZone": "Europe/Berlin" }, "created": "2017-01-25T19:48:31.000+0000", "updated": "2017-01-25T19:48:31.000+0000" }, { "id": "429745", "author": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "body": "master: https://github.com/appcelerator/titanium_mobile/pull/9564", "updateAuthor": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-10-27T17:20:08.000+0000", "updated": "2017-10-27T17:20:08.000+0000" }, { "id": "430539", "author": { "name": "lchoudhary", "key": "lchoudhary", "displayName": "Lokesh Choudhary", "active": true, "timeZone": "America/Los_Angeles" }, "body": "FR Passed.\r\nWaiting for merge to get enabled.", "updateAuthor": { "name": "lchoudhary", "key": "lchoudhary", "displayName": "Lokesh Choudhary", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-11-13T19:58:49.000+0000", "updated": "2017-11-13T19:58:49.000+0000" }, { "id": "430565", "author": { "name": "lchoudhary", "key": "lchoudhary", "displayName": "Lokesh Choudhary", "active": true, "timeZone": "America/Los_Angeles" }, "body": "PR Merged.", "updateAuthor": { "name": "lchoudhary", "key": "lchoudhary", "displayName": "Lokesh Choudhary", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-11-13T23:56:34.000+0000", "updated": "2017-11-13T23:56:34.000+0000" }, { "id": "430675", "author": { "name": "amukherjee", "key": "amukherjee", "displayName": "Abir Mukherjee", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Changes are seen in SDK 7.0.0.v20171114202841.", "updateAuthor": { "name": "amukherjee", "key": "amukherjee", "displayName": "Abir Mukherjee", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-11-15T06:37:20.000+0000", "updated": "2017-11-15T06:37:20.000+0000" } ], "maxResults": 26, "total": 26, "startAt": 0 } } }