Skip to main content

Formatting Text

This is the documentation for Pano2VR 4. You can find the new documentation for Pano2VR 5 here.

However, this document is still valid for the current version of Object2VR!

Download the Skin
Download Video

This tip will show you how to use HTML tags to format the text in both Object2VR 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.


The Different Formatting Tags[edit]

The following are the more commonly used tags that can be used. If you just want to change the text color for all text then you would use the color picker within Pano2VR and Object2VR. However, if you want to change the color or size of a single word inline then you would use the tags.

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 <font color="#0000ff">Your Text</font>
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 break <br>

◊ NOTE: 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[edit]

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.

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: Don't forget to close your tags!


Inline Hyperlinks[edit]

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" target="_self">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>

HTML5 to open next panorama.
<a href="javascript:pano.openNext('pano.xml','');">link</a>

Setting Out Text[edit]

Use a simple text editor (not a word processor, like MS Word) to help layout your text. 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, you can add the tags, not forgetting that the 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 a line break, <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[edit]

http://www.w3schools.com/html/default.asp
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#htmlText
http://iosfonts.com
Skin Editor
User Data (Pano2VR)
User Data (Object2VR)