Formatting Text
From Garden Gnome Software
Download the Skin
Download Video
- This tip will show you how to use html tags to format the text in Object and Pano2VR. This works with the User Data text fields as well as Title text fields in the Hotspot Editor. This also works for all the text in the skin editor.
Contents |
The Different Formatting Tags
- The following are the more commonly used tags that can be used. If you just want to change the text colour for all text then you would use the colour picker within Pano2VR, however if you wanted to change the colour or size mid sentence of a single word then you would use the tag’s.
- Bold = <b>Your Text</b>
- Underline = <u>Your Text</u>
- Italics = <i>Your Text</i>
- Change Font Flash Output = <font face=”Arial”>Your Text</font>
- Change Font HTML5 Output = <span style="font-family: Times New Roman;">Your Text</span>
- Change Font Color Flash Output = <color=”#0000ff”>Your Text</font> (the colour is in Hex and you must use the US spelling color)
- Change Font Color HTML5 Output = <span style="color: #ff0000;">Your Text</span>
- Change Font Size Flash Output= <font size=”20”>Your Text</font>
- Change Font Size HTML5 Output= <span style="font-size: 24px;">Your Text</span>
- Line Brake = <br>
- Flash only supports tags listed here: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#htmlText, in HTML5 you can use normal HTML tags.
Using Multiple Attributes
- You can add more than one attribute to text, size, color and if is to be underlined etc. The font tag can group its attributes together saving time, please see below text.
- Flash Output = <u><font color=”#0000ff” size=”25”>Your Text</font></u>
- HTML5 Output = <span style="font-family: Times New Roman; color: #ff0000; font-size: 24px;">Your Text</span>
- Note you open a tag such as <u> from the above example, then you must close it. The correct order is the first tag to be opened is the last tag to be closed.
Hyper Links in the Text
- You can set hyperlinks in the text and also a target such as open in the same window or in a new window. The first shows a link to open in the same window:
- <a href=”http://www.yourwebsite.com”>Your Text</a>
- The next in a new window:
- <a href=”http://www.yourwebsite.com” target="blank">Your Text</a>
- If you are including sub folders it is important to end the address with a forward slash.
- <a href=”http://www.yourwebsite.com/folder/”>Your Text</a>
- This will reduce the number of requests to the server.
- HTML5 to open next panorama.
- <a href="javascript:pano.openNext('pano.xml','');">link</a>
Setting Out Text
- Use Note Pad or other simple text editor to help layout your text, more complex text editors such as MS Word can alter the format of the symbols and may cause the tags not to work properly giving a blank text box. At this point do not add any formatting tags, you just want to look at text layout. Experiment how long you want each line of text to be, once you have laid out your text, now you can now add the tags, not forgetting tags will not be shown so it does not matter if the text is no longer in the correct layout. At the end of each line of text add your Line Brake tag, <br> and remove any spaces, you will end up with one long line of text. You can now copy and paste the text in the Skin Editor or other text box.
- Text box size in the skin editor, for a single line of text use 18px high, however if multiple lines of text are being used, use 17px for each line, so three lines of text would be 51px high.
See Also
http://www.w3schools.com/html/default.asp
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#htmlText