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;
Comments
Michael
Awesome! That saves some annoying code :)
Katharina
Wonderful blog! I found it while browsing on Yahoo News.
Do you have any tips on how to get listed in Yahoo News?
I’ve been trying for a while but I never seem to get there!
Many thanks