AHA!! I found it! And it looks like there's a bug in Flex (see
below).
It turns out that I _can_ set rotation+=90 and get a Text box to be
displayed sideways, even using the htmlText, even with more than one
font used in the html text (of course all the fonts have to be
embedded).
To do it, I have to set the fontFamily style of the Text control to
ANY embedded font, and it is ignored in favor of the font set by the
html string. If I omit setting the fontFamily on the Text control,
the rotation won't work.
Sounds like a bug to me!
So assuming the fonts have all been properly embedded, the following
shows what does and doesn't work.
var textString:String = "<TEXTFORMAT><P><FONT FACE=\"MyArial\"
SIZE=\"14\" COLOR=\"#0B333C\">ARIAL AND </FONT><FONT FACE=\"MyRoman\"
SIZE=\"14\" COLOR=\"#0B333C\">TIMES NEW ROMAN
text</FONT></P></TEXTFORMAT>";
The above HTML string combines Arial and Times New Roman and they are
both displayed properly, provided I set the fontFamily of the Text
control to ANY embedded font.
WORKS (must be inside a canvas in order to be rotated):
<mx:Text fontFamily="MyArial" htmlText="{textString}"/>
Does not work:
<mx:Text htmlText="{textString}"/>
Jeremy
--- In [email protected], "Joan Lafferty" <[EMAIL PROTECTED]> wrote:
>
> Setting the fontFace property in html to your embedded font doesn't
work
> for the Text. You have to set fontFamily="MyArial" on the Text
> component. Once you do this, the rotate works fine. I don't think we
> have support right now for specifying different fonts for various
> segments of the Text (which is what I think you want to do). You are
> just going to need to use more than one Text component and set the
> fontFamily on each one. You can have control over positioning them
since
> you are using a Canvas, so it can look like the same string.
>
>
>
> Joan
>
>
>
> ________________________________
>
> From: [email protected]
[mailto:[EMAIL PROTECTED] On
> Behalf Of jeremyrichman
> Sent: Wednesday, September 13, 2006 1:56 PM
> To: [email protected]
> Subject: [flexcoders] Re: Rotating html text
>
>
>
> Hi Joan,
>
> I haven't been using the Rotate class, I've just been setting the
> rotate property to += 90 (I just want a static rotation of text).
>
> The following code demonstrates this. Click on the "Rotate HTML"
> button and the text disappears - click 3 more times so it rotates
> back to 0 degrees and it reappears. Clicking on the "Rotate Plain"
> works fine.
>
> Can this be made to work for html? Can I use the Rotate object for
> static rotation?
>
> Thanks for any help -- Jeremy
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:Application
> xmlns:mx="http://www.adobe.com/2006/mxml
> <http://www.adobe.com/2006/mxml> "
> layout="absolute" height="100%" width="100%"
> initialize="initCanvas()"
> >
> <mx:Script>
> <![CDATA[
> private const htmlString:String = "<TEXTFORMAT LEADING=\"2\"><P
> ALIGN=\"CENTER\"><FONT FACE=\"MyArial\" SIZE=\"18\"
COLOR=\"#0B333C\"
> LETTERSPACING=\"0\" KERNING=\"0\">HTML
TEXT</FONT></P></TEXTFORMAT>";
>
> [Embed(systemFont='Arial', fontName='MyArial',
> mimeType='application/x-font')]
>
> public var arial_font:Class;
>
> private function initCanvas():void {
> Font.registerFont(arial_font);
> canvas.setStyle('backgroundColor', 0x808080);
> }
>
> private function rotateHtml(event:Event):void {
> htmlText.rotation += 90;
> }
>
> private function rotatePlain(event:Event):void {
> plainText.rotation += 90;
> }
>
> ]]>
> </mx:Script>
>
> <mx:Panel height="100%" layout="vertical" width="100%" title="COVER
> BUILDER" styleName="myclass" >
> <mx:HBox width="100%">
> <mx:Button label="Rotate html" click="rotateHtml(event)"/>
> <mx:Button label="Rotate plain" click="rotatePlain(event)"/>
> </mx:HBox>
> <mx:Canvas id="canvas" width="100%" height="100%">
> <mx:Text id="htmlText" htmlText="{htmlString}" x="250" y="50"/>
> <mx:Text id="plainText" text="PLAIN TEXT" x="250" y="250"
> fontFamily="MyArial" fontSize="18"/>
> </mx:Canvas>
> </mx:Panel>
>
> </mx:Application>
>
> --- In [email protected] <mailto:flexcoders%
40yahoogroups.com>
> , "Joan Lafferty" <tan@> wrote:
> >
> > Can you please post the code that is not working? I tried to
rotate
> > Text, Label, and TextInput components that had htmlText and an
> embedded
> > fontFamily specified. The rotation seemed to work for me. I tried
> > specifying the fontFamily in the css and by using setStyle. These
> all
> > worked, so maybe I'm not getting the case that you are running
into.
> > Here is the code I was using:
> >
> >
> >
> > <?xml version="1.0" encoding="iso-8859-1"?>
> >
> > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml
> <http://www.adobe.com/2006/mxml> " >
> >
> >
> >
> > <mx:Script>
> >
> > <![CDATA[
> >
> > private function setcc(): void
> >
> > {
> >
> > label1.setStyle("fontFamily", "ComicSans");
> >
> > text1.setStyle("fontFamily", "ComicSans");
> >
> > ti1.setStyle("fontFamily", "ComicSans");
> >
> > }
> >
> > ]]>
> >
> > </mx:Script>
> >
> > <mx:Rotate id="myRotate" angleFrom="0" angleTo="180" />
> >
> >
> >
> > <mx:Style source="comicsans.css" />
> >
> >
> >
> > <mx:Label id="label1" htmlText="<a
> href='http://www.adobe.com <http://www.adobe.com> '>I
> > am sss comic sans</a>" />
> >
> >
> >
> > <mx:Button label="play rotate" click="myRotate.play([label1,
text1,
> > ti1])" />
> >
> >
> >
> > <mx:Text id="text1" htmlText="<a
> href='http://www.adobe.com <http://www.adobe.com> '>I am
> > sss comic sans</a>" />
> >
> >
> >
> > <mx:TextInput id="ti1" htmlText="<a
> href='http://www.adobe.com <http://www.adobe.com> '>I
> > am sss comic sans</a>" />
> >
> >
> >
> > <mx:Button label="set styles" click="setcc()" />
> >
> > </mx:Application>
> >
> >
> >
> > -------- comicsans.css --------------------
> >
> > @font-face {
> >
> > src: url("assets/comic.ttf");
> >
> > fontWeight: "normal";
> >
> > fontFamily: "ComicSans";
> >
> > }
> >
> >
> >
> > @font-face {
> >
> > src: url("assets/comicbd.ttf");
> >
> > fontWeight: "bold";
> >
> > fontFamily: "ComicSans";
> >
> > }
> >
> >
> >
> >
> >
> > Thanks,
> >
> > Joan
> >
> > ________________________________
> >
> > From: [email protected] <mailto:flexcoders%
40yahoogroups.com>
>
> [mailto:[email protected] <mailto:flexcoders%
40yahoogroups.com>
> ] On
> > Behalf Of jeremyrichman
> > Sent: Tuesday, September 12, 2006 1:25 PM
> > To: [email protected] <mailto:flexcoders%
40yahoogroups.com>
> > Subject: [flexcoders] Rotating html text
> >
> >
> >
> > I have a Text field that I want to rotate but it must display
html
> > text, not just plain text. I have embedded the font that I am
> setting
> > in the html with the CSS font face style but on rotation, the
text
> > vanishes.
> >
> > I have tested this with the non-htmltext property, and it rotates
> fine
> > provided I do textObject.setStyle("fontFamily", "myFont"), but
not
> the
> > html version with the font face property set (unless I also set
the
> > textObject fontFamily CSS style, but I don't want to do that
> because
> > eventually I'd like to embed several fonts and have text that
could
> > come from a mix of them).
> >
> > Any suggestions?
> >
> > Jeremy
> >
>
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/flexcoders/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
