Adding Kerning via Hyperloop, weird behaviour

[FizixTiramu]

Hi all,

I'm trying to add Kening a label on Android using Hyperloop and getting some weird behaviour. I'm using Titanium Classic for this.

I have a vertical Ti View with 3 labels:

1. A main header (hyperloop TextView using a Ti Label as a base)
2. A sub header (Ti Label)
3. Body copy (Ti Label)

When I use an Android TextView for the main header, the sub header and body copy are pushed vertically off screen. (see attached image - there should be 2 other labels below it, which display fine if I use a regular Ti Label for the header)

Hyperloop Label code:

// Creating a Titanium Label
var textLabel = Ti.UI.createLabel({
	id: "mainheader",
	title: "mainheader",
    	color:"#4D4D4D,
    	width: Ti.UI.FILL,
	height: Ti.UI.SIZE,
	textAlign:'center',
	verticalAlign: 'top',
	includeFontPadding: false,
	font: { fontSize: 115, 'alumni_sans_black', fontWeight: "bold" },
	left: 0,
	top: 20,
	text:"THE HEADING TEXT (Some single line, some multiline)
});

// Create a Native Label, passing in the Ti.UI.Label, and adjusting the kerning
var nativeLabel = new TextView(textLabel);
nativeLabel.setLetterSpacing(-0.02);

// I believe these should position the textview as I need?
var layoutParams = new LayoutParams(ViewGroupLayoutParams.MATCH_PARENT, ViewGroupLayoutParams.WRAP_CONTENT, Gravity.TOP);
layoutParams.setMargins(0, 0, 0, 0);
nativeLabel.setLayoutParams(layoutParams);

I've also tried adding an Android TextView with no Ti Label as a base and the exact same behaviour occurs, and wrapping the TextView in its own view. Setting a background colour to the TextView (as per image), the textview appears to be the right height, but some kind of margin or space is being added below it to fill the entire viewport?

Any ideas?

[m1ga]

Hi, can you try to use a fixed height instead of Ti.UI.SIZE? And it would be interesting to know where you add the three labels into and what settings that has.

Would be also great to expost setLetterSpacing in the SDK so you can use it without hyperloop.

[m1ga]

Working fine here:

<Alloy>
    <Window>
        <View height="Ti.UI.SIZE" layout="vertical">
            <Label text="test test test"/>
            <View id="view" width="300" height="Ti.UI.SIZE" backgroundColor="#444"/>
            <Label text="test test test"/>
        </View>
    </Window>
</Alloy>

// Creating a Titanium Label
var textLabel = Ti.UI.createLabel({
	id: "mainheader",
	title: "mainheader",
	width: Ti.UI.FILL,
	height: Ti.UI.SIZE,
	textAlign: 'center',
	verticalAlign: 'top',
	includeFontPadding: false,
	font: {
		fontSize: 60,
		fontWeight: "bold"
	},
	left: 0,
	top: 20,
	text: "THE HEADING TEXT (Some single line, some multiline)"
});

var TextView = require("android.widget.TextView");
// Create a Native Label, passing in the Ti.UI.Label, and adjusting the kerning
var nativeLabel = new TextView(textLabel);
nativeLabel.setLetterSpacing(-0.2);

// I believe these should position the textview as I need?
// var layoutParams = new LayoutParams(ViewGroupLayoutParams.MATCH_PARENT, ViewGroupLayoutParams.WRAP_CONTENT, Gravity.TOP);
// layoutParams.setMargins(0, 0, 0, 0);
// nativeLabel.setLayoutParams(layoutParams);

$.view.add(textLabel);
$.index.open();

so I guess it is your surrounding container.

[FizixTiramu]

Strange, to answer the first question, if I create a view with a fixed height to hold the main heading label, the layout works but I need a flexible height. It would be great if this is supported in the Ti Label though :D

Here is the code pulled out into a prototype (the issue persists)

if(Ti.Platform.osname == 'android')
{
	var windowFlagStr = Ti.UI.Android.FLAG_TRANSLUCENT_NAVIGATION | Ti.UI.Android.FLAG_TRANSLUCENT_STATUS;
}


// Create the window layer
var windowLayer = Ti.UI.createWindow({
	title: 'windowLayer',
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
	top: 0,
	left: 0,
	zIndex: 1,
  	extendSafeArea: true,
    	theme: 'Theme.Titanium.Light.Fullscreen',
    	windowFlags: windowFlagStr,
	windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_ADJUST_PAN,
    	backgroundColor: '#000000'
});
windowLayer.open();


var viewInnerLayer = Ti.UI.createView(
{
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
	top: 100,
	left: 0,
	zIndex: 2,
	layout: 'vertical'
});


var activity = new Activity(Ti.Android.currentActivity);


var headerLabel = Ti.UI.createLabel({
	id: "mainheader",
	title: "mainheader",
   	color: "#ffffff",
    	width: Ti.UI.FILL,
	height: Ti.UI.SIZE,
	textAlign: 'center',
	verticalAlign: 'top',
	includeFontPadding: false,
	font: { fontSize: 115, fontFamily: style.fonts['alumni_sans_black'], fontWeight: "bold" },
	color: "#ffffff",
	lineSpacing: { add: 190, multiply: 0},
	left: 0,
	top: 30,
	text: "Main Title",
	backgroundColor: "#cccccc"
});


var nativeLabel = new TextView(headerLabel);
nativeLabel.setLetterSpacing(-0.02);

var layoutParams = new LayoutParams(ViewGroupLayoutParams.MATCH_PARENT, ViewGroupLayoutParams.WRAP_CONTENT, Gravity.TOP);
layoutParams.setMargins(0, 0, 0, 0);
nativeLabel.setLayoutParams(layoutParams);

viewInnerLayer.add(nativeLabel);		// Adding native label breaks flow
//viewInnerLayer.add(headerLabel);	// Adding regular Ti label works


// The subtitle and body copy labels
var subTitleLabel = Ti.UI.createLabel({
   		color: "#ffffff",
    		width: Ti.UI.FILL,
		height: Ti.UI.SIZE,
		textAlign: 'center',
		verticalAlign: 'middle',
		includeFontPadding: false,
		left: 0,
		top: 10,
		font: { fontSize: 50, fontFamily: style.fonts['alumni_sans_extrabold'], fontWeight: "bold" },
		text: "Sub Title",
		backgroundColor: "#cccccc"
});

viewInnerLayer.add(subTitleLabel);


var bodyCopyLabel = Ti.UI.createLabel({
    		color: "#ffffff",
    		width: Ti.UI.FILL,
		height: Ti.UI.SIZE,
		textAlign: 'center',
		verticalAlign: 'middle',
		includeFontPadding: false,
		left: 0,
		top: 10,
		font: { fontSize: 30, fontFamily: style.fonts['arial'], fontWeight: "bold" },
		text: "Body Copy",
		backgroundColor: "#cccccc"
});

viewInnerLayer.add(bodyCopyLabel);
windowLayer.add(viewInnerLayer);

I dont know if this could be related, but its a full screen app that extends behind the top status bar. The status bar is invisible until pulled down (it had a semi opaque grey background, I expected it would be visible with a transparent background. I dont think this would flow down into the native label issue though.

[m1ga]

try to use

windowLayer.addEventListener("open", function(){
	var nativeLabel = new TextView(headerLabel);
	nativeLabel.setLetterSpacing(-0.02);
	viewInnerLayer.add(nativeLabel); // Adding native label breaks flow
})

not sure if the order is correct but I see all three texts:

Still something strange with that setup, I can't set a fixed height to the headerLabel. In my example where I have it wrapped in another view it works

[m1ga]

I've also made a PR so it is a normal property in the SDK: #13984

[FizixTiramu]

Thats great, thanks :)

[FizixTiramu]

I've also made a PR so it is a normal property in the SDK: #13984

windowLayer.addEventListener("open", function(){
	var nativeLabel = new TextView(headerLabel);
	nativeLabel.setLetterSpacing(-0.02);
	viewInnerLayer.add(nativeLabel); // Adding native label breaks flow
})

Done like this, the order goes wrong, so the subtitle and body copy are added first, then lastly the main heading. So you get Subtitle > Copy > Heading. In this case they all show but the problem label is at the bottom and still overspans the vertical space below it.

If I add all 3 labels to the window open event, the order corrects but the subtitle and body copy pushed off screen again. It looks like the native label is either adding some kind of bottom margin that wraps to the available screen height, or creating a view itself which has a FILL property (or equivelant).

Its an onboarding interstitial with the order:

Main Heading (the native label)
Sub Heading
Body Copy

[m1ga]

to fix the order you can just use:

viewInnerLayer.add(headerLabel);

windowLayer.addEventListener("open", function(){
	var nativeLabel = new TextView(headerLabel);
	nativeLabel.setLetterSpacing(-0.02);
})

and don't add the nativeLabel

in case you don't want to use Hyperloop at all: download the ZIP from https://github.com/tidev/titanium-sdk/actions/runs/7781463918?pr=13984 (at the bottom) and use that. Then you just set letterSpacing: -0.02 on the label.

[FizixTiramu]

Thanks,

This might be a dumb question, but how do I use a downloaded SDK zip in the project (on Mac)? I usually install SDKs from the command line ti sdk install xx.x.x.GA

[m1ga]

the same way: ti sdk install filename.zip

[FizixTiramu]

Got it working, thanks for you help, greatly appreciated.

Side question tho, will kerning work without attributed strings on iOS too? Or does iOS require attributed strings always?

[m1ga]

no, for iOS you'll still need to use the attributedString. I only added it to Android

[FizixTiramu]

OK, got it, thanks.