I have several existing apps (non-XOJO) that use “Helvetica Neue” along with the Font-Varient “small-caps”.
Our other apps display fine under IE, Chrome, FireFox and Safari on all our platforms (Windows/Mac).
I don’t see an obvious way to set the “Font-Variant” in XOJO. Using some of the other “similar” Font based source here…I added the “add_css” javascript to my HTML Header in my app – and then added a call to that javascript in my “Shown” event for the Web Label.
I hav not been successful getting small-caps to work…though I did see I was able to set the “Color” in lieu of using a Web Style.
Seems like “small-caps” on Ariel is supported and rendered by most anything. I’ve been unsuccessful with XOJO so far…but my CSS skills are weak at best. Suggestions?
- Add a WebStyle to your app called “SmallCaps”. Put nothing into it.
- Add a Page Source to your page, containing :
<STYLE type="text/css">
.SmallCaps { font-variant: small-caps; }
</STYLE>
Now any label you set with style SmallCaps will be in small caps.
You can add more elements to a webstyle before and after font-variant, such as :
.TimesSmallCaps { font: italic bold 12px/30px Times, serif; font-variant: small-caps; }
.TimesSmallCapsRed { font: italic bold 12px/30px Times, serif; font-variant: small-caps; color: Red ;}
Note that the order in which these elements are entered counts. For instance, if you enter font-variant: before font:, it will not be taken into account.
Other controls than labels may not take all the style elements. For instance, a button styled with TimesSmallCapsRed will only show a Red caption. Font and small cap will not show.
Ok! Woot! Thank you so much. I haven’t actually tried it yet…but I have no doubt whatsoever that it’ll work perfectly. Given the source (The little Roswell Alien dude) – I’ve read several of his most excellent postings. It may have been his subroutine I copied. The subroutine kinda sorta worked sometimes. I did notice that I couldn’t put it in the “Open” event for the control… I had to put it in the “Shown event” which caused the label to show up…and then change. I’m certain that using the “blank style” method described above will be as effective as if the font-varient really were available to set in an IDE web-style (seems like something that would be super easy to add). Anyway… 1000 points to Michel for being so incredibly helpful. Thanks Again! — it’s actually the helpful developer community which makes programming in XOJO an excellent choice. I wish I knew more and could contribute back into the community. Hopefully…I’ll have that opportunity one day.
Thank you for the compliments. But i did learn, like you, from helpful members of the community. Actually the principle of what I posted is based upon a post of Christian Schmitz in his Monkeybread.net site.
Just do the same when you can : we can only keep what we have by sharing it…
OK…if you get a chance…if you don’t mind lending a hand again… I created the empty style (Which I’m wondering if I could set the OTHER properties and just override / add the properties I want in the page source. – Figured I might test that later. Having trouble getting it working though…the Pagesource control is throwing a syntax error. I’m sure it’s something obvious. Can the CSS be written just as it appears above (multi-lines) or does it need to be on a single line…or?
The Web Lable I want to change in in a container control. Where should the Pagesource control be added?
At the Page level? Or the Container Control Level? Or does it matter?
OK…I get it. For some reason (inexperience) I thought the CSS would go in the “Open” event of the PageSource item. It just goes in the Source “property” in the inspector. So easy…and makes perfect sense.
[quote=124723:@Robert Bednar]OK…if you get a chance…if you don’t mind lending a hand again… I created the empty style (Which I’m wondering if I could set the OTHER properties and just override / add the properties I want in the page source. – Figured I might test that later. Having trouble getting it working though…the Pagesource control is throwing a syntax error. I’m sure it’s something obvious. Can the CSS be written just as it appears above (multi-lines) or does it need to be on a single line…or?
The Web Lable I want to change in in a container control. Where should the Pagesource control be added?
At the Page level? Or the Container Control Level? Or does it matter?[/quote]
- Add the Page Source to each page with the styles you need
- Set the Style property of the label to the style name
That’s it !
It is probably best to change properties within the CSS, but I have noted that changing font size, font family, alignment or background color is possible by the normal method in the style editor.