Alloy 1.4.0: Deep-merged font properties

This is one of a series of blogs on new features and (breaking) changes in the upcoming Titanium 3.3.0 and Alloy 1.4.0 releases. Get the beta versions now!

Fonts have always been a bit of a management problem in Alloy TSS files.

You can define fonts as an object including any of fontFamily, fontSize and fontWeight. One of the great things about Alloy is you can stack classes for any view. This means you can have one class merge with another one when applied.

Fonts have always been the poor cousin

When it comes to fonts, the ability to combine one or more class per view means the last font declaration actually overrides any other fonts declared.

So in practice this means;

<Alloy>
  <Window>
    <Label id="title" class="title important">Warning Earthlings</Label>
  </Window>
</Alloy>
"Label": {
    color: "#000",
    font: {
        fontSize: 14
    },
    height: Ti.UI.SIZE,
    textAlign: 'left',
    width: Ti.UI.SIZE
}

".title": {
    font: {
        fontSize: 18
    }
}

".important": {
    color: "#c60000",
    font: {
        fontWeight: "bold"
    }
}

Pre-Alloy 1.4

The label with the id title has these rules applied;

  • Honours Label so it has a font object of { fontSize: 14 }
  • Uses .title so it becomes { fontSize: 18 }
  • Uses .important so it becomes { fontWeight: "bold" }

If you are wondering why the font object is not; { fontSize: 18, fontWeight: "bold" } you are not alone. But it does make sense it you think about it. All properties are overridden at root. So in this case font is overridden, NOT the child properties; fontFamily, fontSize or fontWeight.

This has made it a little hard to manage TSS for fonts and font styles. But good news – the changes, they are a coming.

Alloy 1.4 and higher

Using our example from before, the rules are now applied as follows;

  • Honours Label so i has a font object of { fontSize: 14 }
  • Uses .title so it becomes { fontSize: 18 }
  • Uses .important so it becomes { fontSize: 18, fontWeight: "bold" }

This is because the child properties of the font object are now deep-merged.  Basically they perform as we would have wanted or expected.

Related links;

Owner of Core 13 Ltd a UK based mobile app development agency. Malcolm is affectionately known by Appcelerator and the big wide world as "The Oracle". With 25 years commercial software development experience from desktop apps to web sites for single users to large enterprises.\n You may have seen some of the many contributions provided within the Titanium Q&A.

Comments