Last Updated: October 8, 2015
Here are a couple of things to do when you are designing HTML5 for portrait for publish from BrightAuthor (BA):
- In your web-authoring software (i.e. Dreamweaver), make sure you set your page up for 1080 x 1920 (the reverse of landscape 1920x1080)
- If you publish this as is, the page will not display correctly when outputted using BA in portrait mode. To get it to display correctly, you need to rotate the WHOLE page in Dreamweaver. This will not affect the authoring in Dreamweaver – it will look just the same but when you preview it will rotate. To get this rotate to happen, you need to encapsulate the whole body in a <div> </div> region.
Step 1: Author the page in 90 degree rotation (1080 x 1920)
Step 2: Encapsulate all your body content between <div> </div> tags
Step 3: Within the <style> </style> tags, add a WebKit 90 degree rotation call.
-webkit-transform-origin: 540px 540px;
Note: You can use other angles: 270, -90, etc. However, video will not work with these angels. You will also need to align the div to top and left “0”.
Step 4: In BrightAuthor, create a new presentation and set the Monitor orientation to Portrait. Then add your .html file using an HTML state.
Note: Use BrightAuthor 4.3.0.x or later when setting the Monitor orientation to Portrait. Earlier versions of BrightAuthor may cause undesirable scaling in HTML pages when set to portrait mode.
Note: #mainbodystuff shouldn't have any spaces. For example, using "# mainbodystuff" will fail to rotate content.
I am aware of this, but as I mentioned, we will be just using URL's of different web-sites and so this solution is not suitable for us.
We just want to display these sites on a portrait screen.
we thought that with the new software release it mentions animated transforms and transitions (eg rotate, move and skew), which we thought we could use with URL's of the sites we wish to use.
Attached is a sample page that does a rotate on another page. Note, when you select the html page on your computer, BrightAuthor will assume everything in the same folder with the html file, and all of the subfolders should be transferred over to read.
We are supplying a customer with HTML web feeds to their portrait mode displays. How do we get it to display rotated correctly like you've provided with our RSS feeds?
Hi, I tried this, but it doesn't work. My client wants simply the yahoo page and his own website to be displayed correctly in portrait mode. Please advise on how to achieve this.
Try the attached "rotate webpage.htm" file.
These values should be equal to the size of the HTML zone in your presentation.
margin-top: -405px; /* (width-height)/2 */
<iframe src="http://cnn.com" scrolling="no">
Save the file and copy it into a separate folder on your computer.
In BrightAuthor go to File - Presentation Properties - HTML Sites, browse to the file.
Save and publish a presentation.
I've attached a sample BrightAuthor presentation.
Is there a way to use this HTML5 method to rotate a non-interactive playlist in Bright Author and scale them as needed while playing them in portrait style?
Hi, in my case, just thought I'd share, I am using Google Web Designer (beta) on Mac to make HTML5 content for BrightSign, HD223. In wanting to display the content in portrait mode I found that these steps outlined here are not needed anymore. You just need to design your content in GWD with a 1080 x 1920 size (portrait), publish it, and in BrightAuthor simply choose New Presentation -> Portrait (bottom on left) and it will automatically rotate it for you. I found that the instructions here were doing a double-rotate into the HD223, so I simply eliminated this code and it worked :)
@HIVISIONLED Interested to see how your HTML5 content published with GWD went? How smooth were transitions, animations, etc?