Can I display HTML5 in Portrait Mode?

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):

  1. In your web-authoring software (i.e. Dreamweaver), make sure you set your page up for 1080 x 1920 (the reverse of landscape 1920x1080)
  2. 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

<body>

<div id="mainbodystuff">

 

…..HTML stuff….

 

</div>

</body>

 

Step 3: Within the <style> </style> tags, add a WebKit 90 degree rotation call.

<style type="text/css">

#mainbodystuff

 

{

                position:absolute;

                width:1920px;

                height:1080px;

                z-index:4;

                -webkit-transform: rotate(90deg);

                -webkit-transform-origin: 540px 540px;

}

</style>

 

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. 

Have more questions? Submit a request

7 Comments

  • 0
    Avatar
    Chris Wright

    Hi,

    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. 

  • 0
    Avatar
    Alex

    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.

  • 0
    Avatar
    Bryan

    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?

  • 0
    Avatar
    Ibrahim

    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.

  • 1
    Avatar
    Alex

    Try the attached "rotate webpage.htm" file.

    1. Open it in notepad and change the following lines:

    width:1042px;

    height:1852px;

    These values should be equal to the size of the HTML zone in your presentation.

    1. Calculate the margin-top value based on the values of width and height:

    margin-top: -405px; /* (width-height)/2 */

    1. In this line type the url of the web page you wish to display on your screen:

    <iframe  src="http://cnn.com" scrolling="no">

    1. Save the file and copy it into a separate folder on your computer.

    2. In BrightAuthor go to File - Presentation Properties - HTML Sites, browse to the file.

    3. Save and publish a presentation.

    I've attached a sample BrightAuthor presentation.

  • 0
    Avatar
    Rwhite

    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?

  • 0
    Avatar
    HIVISIONLED

    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 :)

Please sign in to leave a comment.
Can't find what looking for? Try to
Powered by Zendesk